@lumx/react 3.20.1-alpha.31 → 3.20.1-alpha.33

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/useAnimateScroll-0db022d6.js

@@ -0,0 +1,58 @@
+import React__default from 'react';
+
+/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */
+function useAnimateScroll(scrollAreaRef) {
+  return React__default.useMemo(() => {
+    let animationFrame = null;
+    return function animate(centerPoint, initialScrollAreaSize) {
+      const scrollArea = scrollAreaRef.current;
+      if (!scrollArea) {
+        return;
+      }
+
+      // Cancel previously running animation
+      if (animationFrame) cancelAnimationFrame(animationFrame);
+
+      // Center on the given point or else on the scroll area visual center
+      const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;
+      const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;
+      const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;
+      const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;
+      const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;
+      const heightRatio = heightCenter / initialScrollHeight;
+      const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;
+      const widthRatio = widthCenter / initialScrollWidth;
+      let prevScrollHeight = 0;
+      let prevScrollWidth = 0;
+      function nextFrame() {
+        const {
+          scrollHeight,
+          scrollWidth,
+          clientHeight,
+          clientWidth
+        } = scrollArea;
+
+        // Scroll area stopped expanding => stop animation
+        if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {
+          animationFrame = null;
+          return;
+        }
+
+        // Compute next scroll position
+        const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;
+        const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;
+        scrollArea.scrollTo({
+          top,
+          left
+        });
+        prevScrollHeight = scrollHeight;
+        prevScrollWidth = scrollWidth;
+        animationFrame = requestAnimationFrame(nextFrame);
+      }
+      animationFrame = requestAnimationFrame(nextFrame);
+    };
+  }, [scrollAreaRef]);
+}
+
+export { useAnimateScroll };
+//# sourceMappingURL=useAnimateScroll-0db022d6.js.map

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/useAnimateScroll-0db022d6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimateScroll-0db022d6.js","sources":["../../../../../../../../src/components/image-lightbox/internal/useAnimateScroll.ts"],"sourcesContent":["import React from 'react';\nimport type { Point, RectSize } from '@lumx/react/utils/type';\n\n/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */\nexport function useAnimateScroll(scrollAreaRef: React.RefObject<HTMLDivElement>) {\n    return React.useMemo(() => {\n        let animationFrame: number | null = null;\n\n        return function animate(centerPoint?: Point, initialScrollAreaSize?: RectSize) {\n            const scrollArea = scrollAreaRef.current as HTMLDivElement;\n            if (!scrollArea) {\n                return;\n            }\n\n            // Cancel previously running animation\n            if (animationFrame) cancelAnimationFrame(animationFrame);\n\n            // Center on the given point or else on the scroll area visual center\n            const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;\n            const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;\n\n            const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;\n            const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;\n\n            const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;\n            const heightRatio = heightCenter / initialScrollHeight;\n\n            const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;\n            const widthRatio = widthCenter / initialScrollWidth;\n\n            let prevScrollHeight = 0;\n            let prevScrollWidth = 0;\n\n            function nextFrame() {\n                const { scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollArea;\n\n                // Scroll area stopped expanding => stop animation\n                if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {\n                    animationFrame = null;\n                    return;\n                }\n\n                // Compute next scroll position\n                const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;\n                const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;\n\n                scrollArea.scrollTo({ top, left });\n                prevScrollHeight = scrollHeight;\n                prevScrollWidth = scrollWidth;\n                animationFrame = requestAnimationFrame(nextFrame);\n            }\n            animationFrame = requestAnimationFrame(nextFrame);\n        };\n    }, [scrollAreaRef]);\n}\n"],"names":["useAnimateScroll","scrollAreaRef","React","useMemo","animationFrame","animate","centerPoint","initialScrollAreaSize","scrollArea","current","cancelAnimationFrame","clientHeightRatio","y","clientHeight","clientWidthRatio","x","clientWidth","initialScrollHeight","height","scrollHeight","initialScrollWidth","width","scrollWidth","heightCenter","scrollTop","heightRatio","widthCenter","scrollLeft","widthRatio","prevScrollHeight","prevScrollWidth","nextFrame","top","left","scrollTo","requestAnimationFrame"],"mappings":";;AAGA;AACO,SAASA,gBAAgBA,CAACC,aAA8C,EAAE;AAC7E,EAAA,OAAOC,cAAK,CAACC,OAAO,CAAC,MAAM;IACvB,IAAIC,cAA6B,GAAG,IAAI,CAAA;AAExC,IAAA,OAAO,SAASC,OAAOA,CAACC,WAAmB,EAAEC,qBAAgC,EAAE;AAC3E,MAAA,MAAMC,UAAU,GAAGP,aAAa,CAACQ,OAAyB,CAAA;MAC1D,IAAI,CAACD,UAAU,EAAE;AACb,QAAA,OAAA;AACJ,OAAA;;AAEA;AACA,MAAA,IAAIJ,cAAc,EAAEM,oBAAoB,CAACN,cAAc,CAAC,CAAA;;AAExD;AACA,MAAA,MAAMO,iBAAiB,GAAGL,WAAW,EAAEM,CAAC,GAAGN,WAAW,CAACM,CAAC,GAAGJ,UAAU,CAACK,YAAY,GAAG,GAAG,CAAA;AACxF,MAAA,MAAMC,gBAAgB,GAAGR,WAAW,EAAES,CAAC,GAAGT,WAAW,CAACS,CAAC,GAAGP,UAAU,CAACQ,WAAW,GAAG,GAAG,CAAA;MAEtF,MAAMC,mBAAmB,GAAGV,qBAAqB,EAAEW,MAAM,IAAIV,UAAU,CAACW,YAAY,CAAA;MACpF,MAAMC,kBAAkB,GAAGb,qBAAqB,EAAEc,KAAK,IAAIb,UAAU,CAACc,WAAW,CAAA;MAEjF,MAAMC,YAAY,GAAGf,UAAU,CAACgB,SAAS,GAAGhB,UAAU,CAACK,YAAY,GAAGF,iBAAiB,CAAA;AACvF,MAAA,MAAMc,WAAW,GAAGF,YAAY,GAAGN,mBAAmB,CAAA;MAEtD,MAAMS,WAAW,GAAGlB,UAAU,CAACmB,UAAU,GAAGnB,UAAU,CAACQ,WAAW,GAAGF,gBAAgB,CAAA;AACrF,MAAA,MAAMc,UAAU,GAAGF,WAAW,GAAGN,kBAAkB,CAAA;MAEnD,IAAIS,gBAAgB,GAAG,CAAC,CAAA;MACxB,IAAIC,eAAe,GAAG,CAAC,CAAA;MAEvB,SAASC,SAASA,GAAG;QACjB,MAAM;UAAEZ,YAAY;UAAEG,WAAW;UAAET,YAAY;AAAEG,UAAAA,WAAAA;AAAY,SAAC,GAAGR,UAAU,CAAA;;AAE3E;AACA,QAAA,IAAIW,YAAY,KAAKU,gBAAgB,IAAIP,WAAW,KAAKQ,eAAe,EAAE;AACtE1B,UAAAA,cAAc,GAAG,IAAI,CAAA;AACrB,UAAA,OAAA;AACJ,SAAA;;AAEA;QACA,MAAM4B,GAAG,GAAGP,WAAW,GAAGN,YAAY,GAAGN,YAAY,GAAGF,iBAAiB,CAAA;QACzE,MAAMsB,IAAI,GAAGL,UAAU,GAAGN,WAAW,GAAGN,WAAW,GAAGF,gBAAgB,CAAA;QAEtEN,UAAU,CAAC0B,QAAQ,CAAC;UAAEF,GAAG;AAAEC,UAAAA,IAAAA;AAAK,SAAC,CAAC,CAAA;AAClCJ,QAAAA,gBAAgB,GAAGV,YAAY,CAAA;AAC/BW,QAAAA,eAAe,GAAGR,WAAW,CAAA;AAC7BlB,QAAAA,cAAc,GAAG+B,qBAAqB,CAACJ,SAAS,CAAC,CAAA;AACrD,OAAA;AACA3B,MAAAA,cAAc,GAAG+B,qBAAqB,CAACJ,SAAS,CAAC,CAAA;KACpD,CAAA;AACL,GAAC,EAAE,CAAC9B,aAAa,CAAC,CAAC,CAAA;AACvB;;;;"}

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/usePointerZoom-8d318b2b.js

@@ -0,0 +1,138 @@
+import React__default from 'react';
+
+/**
+ * Listen to mouse wheel + ctrl and multi-pointer pinch to zoom
+ */
+function usePointerZoom(scrollAreaRef, onScaleChange, animateScroll) {
+  const [isPointerZooming, setPointerZooming] = React__default.useState(false);
+  React__default.useEffect(() => {
+    const scrollArea = scrollAreaRef.current;
+    if (!scrollArea || !onScaleChange) {
+      return undefined;
+    }
+    let animationFrame;
+    let zoomStateTimeoutId;
+    function updateScaleOnNextFrame(newScale, mousePosition) {
+      // Cancel previously scheduled frame
+      if (animationFrame) cancelAnimationFrame(animationFrame);
+
+      // Cancel previously scheduled zoom state change
+      if (zoomStateTimeoutId) clearTimeout(zoomStateTimeoutId);
+      function nextFrame() {
+        setPointerZooming(true);
+        onScaleChange?.(newScale);
+        animationFrame = null;
+        // Wait a bit before indicating the pointer zooming is finished
+        zoomStateTimeoutId = setTimeout(() => setPointerZooming(false), 100);
+      }
+      animationFrame = requestAnimationFrame(nextFrame);
+
+      // Animate scroll in parallel (centering on the current mouse position)
+      animateScroll(mousePosition, {
+        width: scrollArea.scrollWidth,
+        height: scrollArea.scrollHeight
+      });
+    }
+    function onWheel(event) {
+      if (!event.ctrlKey) {
+        return;
+      }
+      event.preventDefault();
+      const newScale = Math.exp(-event.deltaY / 50);
+
+      // Update scale on next frame (focused on the mouse position)
+      updateScaleOnNextFrame(newScale, {
+        x: event.clientX,
+        y: event.clientY
+      });
+    }
+    const activePointers = {};
+    let prevDistance = null;
+    let previousCenterPoint = null;
+    function onPointerDown(event) {
+      activePointers[event.pointerId] = event;
+    }
+    function onPointerMove(event) {
+      // Update pointer in cache
+      if (activePointers[event.pointerId]) {
+        activePointers[event.pointerId] = event;
+      }
+      const pointers = Object.values(activePointers);
+
+      // Make sure we run computation on one of the pointer in the group
+      if (pointers[0]?.pointerId !== event.pointerId) {
+        return;
+      }
+
+      // Centered point between all pointers
+      const centerPoint = {
+        x: pointers.reduce((x, {
+          clientX
+        }) => x + clientX, 0) / pointers.length,
+        y: pointers.reduce((y, {
+          clientY
+        }) => y + clientY, 0) / pointers.length
+      };
+
+      // Movement of the center point
+      const deltaCenterPoint = previousCenterPoint && {
+        left: previousCenterPoint.x - centerPoint.x,
+        top: previousCenterPoint.y - centerPoint.y
+      };
+
+      // Pan X & Y
+      if (deltaCenterPoint) {
+        // Apply movement of the center point to the scroll
+        scrollArea.scrollBy({
+          top: deltaCenterPoint.top / 2,
+          left: deltaCenterPoint.left / 2
+        });
+      }
+
+      // Pinch to zoom
+      if (pointers.length === 2) {
+        const [pointer1, pointer2] = pointers;
+        const distance = Math.hypot(pointer2.clientX - pointer1.clientX, pointer2.clientY - pointer1.clientY);
+        if (prevDistance && deltaCenterPoint) {
+          const delta = prevDistance - distance;
+          const absDelta = Math.abs(delta);
+
+          // Zoom only if we are "pinching" more than we are moving the pointers
+          if (absDelta > Math.abs(deltaCenterPoint.left) && absDelta > Math.abs(deltaCenterPoint.top)) {
+            // Update scale on next frame (focused on the center point between the two pointers)
+            const newScale = Math.exp(-delta / 100);
+            updateScaleOnNextFrame(newScale, centerPoint);
+          }
+        }
+        prevDistance = distance;
+      }
+      previousCenterPoint = centerPoint;
+    }
+    function onPointerUp(event) {
+      prevDistance = null;
+      previousCenterPoint = null;
+      delete activePointers[event.pointerId];
+    }
+    scrollArea.addEventListener('wheel', onWheel, {
+      passive: false
+    });
+    const isMultiTouch = navigator.maxTouchPoints >= 2;
+    if (isMultiTouch) {
+      scrollArea.addEventListener('pointerdown', onPointerDown);
+      scrollArea.addEventListener('pointermove', onPointerMove);
+      scrollArea.addEventListener('pointerup', onPointerUp);
+    }
+    return () => {
+      scrollArea.removeEventListener('wheel', onWheel);
+      if (isMultiTouch) {
+        scrollArea.removeEventListener('pointerdown', onPointerDown);
+        scrollArea.removeEventListener('pointermove', onPointerMove);
+        scrollArea.removeEventListener('pointerup', onPointerUp);
+      }
+    };
+  }, [animateScroll, onScaleChange, scrollAreaRef]);
+  return isPointerZooming;
+}
+
+export { usePointerZoom };
+//# sourceMappingURL=usePointerZoom-8d318b2b.js.map

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/usePointerZoom-8d318b2b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePointerZoom-8d318b2b.js","sources":["../../../../../../../../src/components/image-lightbox/internal/usePointerZoom.ts"],"sourcesContent":["import React from 'react';\nimport type { Point } from '@lumx/react/utils/type';\nimport type { useAnimateScroll } from './useAnimateScroll';\n\n/**\n * Listen to mouse wheel + ctrl and multi-pointer pinch to zoom\n */\nexport function usePointerZoom(\n    scrollAreaRef: React.RefObject<HTMLDivElement>,\n    onScaleChange: ((value: number) => void) | undefined,\n    animateScroll: ReturnType<typeof useAnimateScroll>,\n) {\n    const [isPointerZooming, setPointerZooming] = React.useState(false);\n    React.useEffect(() => {\n        const scrollArea = scrollAreaRef.current as HTMLDivElement;\n        if (!scrollArea || !onScaleChange) {\n            return undefined;\n        }\n\n        let animationFrame: number | null;\n        let zoomStateTimeoutId: ReturnType<typeof setTimeout> | null;\n\n        function updateScaleOnNextFrame(newScale: number, mousePosition: Point): void {\n            // Cancel previously scheduled frame\n            if (animationFrame) cancelAnimationFrame(animationFrame);\n\n            // Cancel previously scheduled zoom state change\n            if (zoomStateTimeoutId) clearTimeout(zoomStateTimeoutId);\n\n            function nextFrame() {\n                setPointerZooming(true);\n                onScaleChange?.(newScale);\n\n                animationFrame = null;\n                // Wait a bit before indicating the pointer zooming is finished\n                zoomStateTimeoutId = setTimeout(() => setPointerZooming(false), 100);\n            }\n            animationFrame = requestAnimationFrame(nextFrame);\n\n            // Animate scroll in parallel (centering on the current mouse position)\n            animateScroll(mousePosition, {\n                width: scrollArea.scrollWidth,\n                height: scrollArea.scrollHeight,\n            });\n        }\n\n        function onWheel(event: WheelEvent) {\n            if (!event.ctrlKey) {\n                return;\n            }\n            event.preventDefault();\n            const newScale = Math.exp(-event.deltaY / 50);\n\n            // Update scale on next frame (focused on the mouse position)\n            updateScaleOnNextFrame(newScale, {\n                x: event.clientX,\n                y: event.clientY,\n            });\n        }\n\n        const activePointers: Record<PointerEvent['pointerId'], PointerEvent> = {};\n        let prevDistance: number | null = null;\n        let previousCenterPoint: Point | null = null;\n\n        function onPointerDown(event: PointerEvent) {\n            activePointers[event.pointerId] = event;\n        }\n        function onPointerMove(event: PointerEvent) {\n            // Update pointer in cache\n            if (activePointers[event.pointerId]) {\n                activePointers[event.pointerId] = event;\n            }\n\n            const pointers = Object.values(activePointers);\n\n            // Make sure we run computation on one of the pointer in the group\n            if (pointers[0]?.pointerId !== event.pointerId) {\n                return;\n            }\n\n            // Centered point between all pointers\n            const centerPoint: Point = {\n                x: pointers.reduce((x, { clientX }) => x + clientX, 0) / pointers.length,\n                y: pointers.reduce((y, { clientY }) => y + clientY, 0) / pointers.length,\n            };\n\n            // Movement of the center point\n            const deltaCenterPoint = previousCenterPoint && {\n                left: previousCenterPoint.x - centerPoint.x,\n                top: previousCenterPoint.y - centerPoint.y,\n            };\n\n            // Pan X & Y\n            if (deltaCenterPoint) {\n                // Apply movement of the center point to the scroll\n                scrollArea.scrollBy({\n                    top: deltaCenterPoint.top / 2,\n                    left: deltaCenterPoint.left / 2,\n                });\n            }\n\n            // Pinch to zoom\n            if (pointers.length === 2) {\n                const [pointer1, pointer2] = pointers;\n                const distance = Math.hypot(pointer2.clientX - pointer1.clientX, pointer2.clientY - pointer1.clientY);\n\n                if (prevDistance && deltaCenterPoint) {\n                    const delta = prevDistance - distance;\n                    const absDelta = Math.abs(delta);\n\n                    // Zoom only if we are \"pinching\" more than we are moving the pointers\n                    if (absDelta > Math.abs(deltaCenterPoint.left) && absDelta > Math.abs(deltaCenterPoint.top)) {\n                        // Update scale on next frame (focused on the center point between the two pointers)\n                        const newScale = Math.exp(-delta / 100);\n                        updateScaleOnNextFrame(newScale, centerPoint);\n                    }\n                }\n\n                prevDistance = distance;\n            }\n\n            previousCenterPoint = centerPoint;\n        }\n        function onPointerUp(event: PointerEvent) {\n            prevDistance = null;\n            previousCenterPoint = null;\n            delete activePointers[event.pointerId];\n        }\n\n        scrollArea.addEventListener('wheel', onWheel, { passive: false });\n        const isMultiTouch = navigator.maxTouchPoints >= 2;\n        if (isMultiTouch) {\n            scrollArea.addEventListener('pointerdown', onPointerDown);\n            scrollArea.addEventListener('pointermove', onPointerMove);\n            scrollArea.addEventListener('pointerup', onPointerUp);\n        }\n        return () => {\n            scrollArea.removeEventListener('wheel', onWheel);\n            if (isMultiTouch) {\n                scrollArea.removeEventListener('pointerdown', onPointerDown);\n                scrollArea.removeEventListener('pointermove', onPointerMove);\n                scrollArea.removeEventListener('pointerup', onPointerUp);\n            }\n        };\n    }, [animateScroll, onScaleChange, scrollAreaRef]);\n\n    return isPointerZooming;\n}\n"],"names":["usePointerZoom","scrollAreaRef","onScaleChange","animateScroll","isPointerZooming","setPointerZooming","React","useState","useEffect","scrollArea","current","undefined","animationFrame","zoomStateTimeoutId","updateScaleOnNextFrame","newScale","mousePosition","cancelAnimationFrame","clearTimeout","nextFrame","setTimeout","requestAnimationFrame","width","scrollWidth","height","scrollHeight","onWheel","event","ctrlKey","preventDefault","Math","exp","deltaY","x","clientX","y","clientY","activePointers","prevDistance","previousCenterPoint","onPointerDown","pointerId","onPointerMove","pointers","Object","values","centerPoint","reduce","length","deltaCenterPoint","left","top","scrollBy","pointer1","pointer2","distance","hypot","delta","absDelta","abs","onPointerUp","addEventListener","passive","isMultiTouch","navigator","maxTouchPoints","removeEventListener"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/image-lightbox/useImageLightbox-4a785dc6.js

@@ -0,0 +1,133 @@
+import React__default from 'react';
+import memoize from 'lodash/memoize';
+import { startViewTransition } from '../../utils/browser/DOM/startViewTransition-5cbc03c1.js';
+import { findImage } from '../../utils/browser/DOM/findImage-b977b471.js';
+import { CLASSNAME } from './constants-31b6784b.js';
+
+/** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
+
+const EMPTY_PROPS = {
+  isOpen: false,
+  images: [],
+  parentElement: /*#__PURE__*/React__default.createRef()
+};
+/**
+ * Set up an ImageLightbox with images and triggers.
+ *
+ * - Associate a trigger with the lightbox to properly focus the trigger on close
+ * - Associate a trigger with an image to display on open
+ * - Automatically provide a view transition between an image trigger and the displayed image on open & close
+ *
+ * @param props Images to display in the image lightbox
+ */
+function useImageLightbox(props) {
+  const propsRef = React__default.useRef(props);
+  React__default.useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+
+  // Keep reference for each image elements
+  const imageRefsRef = React__default.useRef([]);
+  const currentImageRef = React__default.useRef(null);
+  const [imageLightboxProps, setImageLightboxProps] = React__default.useState(() => ({
+    ...EMPTY_PROPS,
+    ...props
+  }));
+  const getTriggerProps = React__default.useMemo(() => {
+    const triggerImageRefs = {};
+    async function close() {
+      const currentImage = currentImageRef.current;
+      if (!currentImage) {
+        return;
+      }
+      const currentIndex = imageRefsRef.current.findIndex(imageRef => imageRef.current === currentImage);
+      await startViewTransition({
+        changes() {
+          // Close lightbox
+          setImageLightboxProps(prevProps => ({
+            ...prevProps,
+            isOpen: false
+          }));
+        },
+        // Morph from the image in lightbox to the image in trigger
+        viewTransitionName: {
+          source: currentImageRef,
+          target: triggerImageRefs[currentIndex],
+          name: CLASSNAME
+        }
+      });
+    }
+    async function open(triggerElement, {
+      activeImageIndex
+    } = {}) {
+      // If we find an image inside the trigger, animate it in transition with the opening image
+      const triggerImage = triggerImageRefs[activeImageIndex]?.current || findImage(triggerElement);
+
+      // Inject refs to improve transition and loading style
+      const images = propsRef.current?.images?.map((image, idx) => {
+        // Get or create image reference
+        let imgRef = imageRefsRef.current[idx];
+        if (!imgRef) {
+          imgRef = /*#__PURE__*/React__default.createRef();
+          imageRefsRef.current[idx] = imgRef;
+        }
+
+        // Try to use the trigger image as the loading placeholder
+        const loadingPlaceholderImageRef = triggerImage && idx === activeImageIndex ? {
+          current: triggerImage
+        } : undefined;
+        return {
+          loadingPlaceholderImageRef,
+          ...image,
+          imgRef
+        };
+      });
+      await startViewTransition({
+        changes: () => {
+          // Open lightbox with setup props
+          setImageLightboxProps(prevProps => ({
+            ...prevProps,
+            ...propsRef.current,
+            activeImageRef: currentImageRef,
+            parentElement: {
+              current: triggerElement
+            },
+            isOpen: true,
+            onClose: () => {
+              close();
+              propsRef.current?.onClose?.();
+            },
+            images,
+            activeImageIndex: activeImageIndex || 0
+          }));
+        },
+        // Morph from the image in trigger to the image in lightbox
+        viewTransitionName: {
+          source: triggerImage,
+          target: currentImageRef,
+          name: CLASSNAME
+        }
+      });
+    }
+    return memoize(options => ({
+      ref(element) {
+        // Track trigger image ref if any
+        if (options?.activeImageIndex !== undefined && element) {
+          triggerImageRefs[options.activeImageIndex] = {
+            current: findImage(element)
+          };
+        }
+      },
+      onClick(e) {
+        open(e.target, options);
+      }
+    }));
+  }, []);
+  return {
+    getTriggerProps,
+    imageLightboxProps
+  };
+}
+
+export { useImageLightbox };
+//# sourceMappingURL=useImageLightbox-4a785dc6.js.map

package/_internal/packages/lumx-react/src/components/image-lightbox/useImageLightbox-4a785dc6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageLightbox-4a785dc6.js","sources":["../../../../../../../src/components/image-lightbox/useImageLightbox.tsx"],"sourcesContent":["import React from 'react';\n\nimport memoize from 'lodash/memoize';\n\nimport { startViewTransition } from '@lumx/react/utils/browser/DOM/startViewTransition';\nimport { findImage } from '@lumx/react/utils/browser/DOM/findImage';\n\nimport type { ImageLightboxProps } from './types';\nimport { CLASSNAME } from './constants';\n\n/** Subset of the ImageLightboxProps managed by the useImageLightbox hook */\ntype ManagedProps = Pick<\n    ImageLightboxProps,\n    'isOpen' | 'images' | 'parentElement' | 'activeImageRef' | 'onClose' | 'activeImageIndex'\n>;\n\nconst EMPTY_PROPS: ManagedProps = { isOpen: false, images: [], parentElement: React.createRef() };\n\ntype TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;\n\n/**\n * Set up an ImageLightbox with images and triggers.\n *\n * - Associate a trigger with the lightbox to properly focus the trigger on close\n * - Associate a trigger with an image to display on open\n * - Automatically provide a view transition between an image trigger and the displayed image on open & close\n *\n * @param props Images to display in the image lightbox\n */\nexport function useImageLightbox<P extends Partial<ImageLightboxProps>>(\n    props: P,\n): {\n    /**\n     * Generates trigger props\n     * @param index Provide an index to choose which image to display when the image lightbox opens.\n     * */\n    getTriggerProps: (options?: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };\n    /** Props to forward to the ImageLightbox */\n    imageLightboxProps: ManagedProps & P;\n} {\n    const propsRef = React.useRef(props);\n\n    React.useEffect(() => {\n        propsRef.current = props;\n    }, [props]);\n\n    // Keep reference for each image elements\n    const imageRefsRef = React.useRef<Array<React.RefObject<HTMLImageElement>>>([]);\n\n    const currentImageRef = React.useRef<HTMLImageElement>(null);\n    const [imageLightboxProps, setImageLightboxProps] = React.useState(\n        () => ({ ...EMPTY_PROPS, ...props }) as ManagedProps & P,\n    );\n\n    const getTriggerProps = React.useMemo(() => {\n        const triggerImageRefs: Record<number, React.RefObject<HTMLImageElement>> = {};\n\n        async function close() {\n            const currentImage = currentImageRef.current;\n            if (!currentImage) {\n                return;\n            }\n            const currentIndex = imageRefsRef.current.findIndex(\n                (imageRef) => imageRef.current === currentImage,\n            ) as number;\n\n            await startViewTransition({\n                changes() {\n                    // Close lightbox\n                    setImageLightboxProps((prevProps) => ({ ...prevProps, isOpen: false }));\n                },\n                // Morph from the image in lightbox to the image in trigger\n                viewTransitionName: {\n                    source: currentImageRef,\n                    target: triggerImageRefs[currentIndex],\n                    name: CLASSNAME,\n                },\n            });\n        }\n\n        async function open(triggerElement: HTMLElement, { activeImageIndex }: TriggerOptions = {}) {\n            // If we find an image inside the trigger, animate it in transition with the opening image\n            const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);\n\n            // Inject refs to improve transition and loading style\n            const images = propsRef.current?.images?.map((image, idx) => {\n                // Get or create image reference\n                let imgRef = imageRefsRef.current[idx];\n                if (!imgRef) {\n                    imgRef = React.createRef();\n                    imageRefsRef.current[idx] = imgRef;\n                }\n\n                // Try to use the trigger image as the loading placeholder\n                const loadingPlaceholderImageRef =\n                    triggerImage && idx === activeImageIndex ? { current: triggerImage } : undefined;\n\n                return { loadingPlaceholderImageRef, ...image, imgRef };\n            });\n\n            await startViewTransition({\n                changes: () => {\n                    // Open lightbox with setup props\n                    setImageLightboxProps((prevProps) => ({\n                        ...prevProps,\n                        ...propsRef.current,\n                        activeImageRef: currentImageRef,\n                        parentElement: { current: triggerElement },\n                        isOpen: true,\n                        onClose: () => {\n                            close();\n                            propsRef.current?.onClose?.();\n                        },\n                        images,\n                        activeImageIndex: activeImageIndex || 0,\n                    }));\n                },\n                // Morph from the image in trigger to the image in lightbox\n                viewTransitionName: {\n                    source: triggerImage,\n                    target: currentImageRef,\n                    name: CLASSNAME,\n                },\n            });\n        }\n\n        return memoize((options?: TriggerOptions) => ({\n            ref(element: HTMLElement | null) {\n                // Track trigger image ref if any\n                if (options?.activeImageIndex !== undefined && element) {\n                    triggerImageRefs[options.activeImageIndex] = { current: findImage(element) };\n                }\n            },\n            onClick(e: React.MouseEvent) {\n                open(e.target as HTMLElement, options);\n            },\n        }));\n    }, []);\n\n    return { getTriggerProps, imageLightboxProps };\n}\n"],"names":["EMPTY_PROPS","isOpen","images","parentElement","React","createRef","useImageLightbox","props","propsRef","useRef","useEffect","current","imageRefsRef","currentImageRef","imageLightboxProps","setImageLightboxProps","useState","getTriggerProps","useMemo","triggerImageRefs","close","currentImage","currentIndex","findIndex","imageRef","startViewTransition","changes","prevProps","viewTransitionName","source","target","name","CLASSNAME","open","triggerElement","activeImageIndex","triggerImage","findImage","map","image","idx","imgRef","loadingPlaceholderImageRef","undefined","activeImageRef","onClose","memoize","options","ref","element","onClick","e"],"mappings":"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"}

package/_internal/{components/inline-list-5ba8bb0f.js → packages/lumx-react/src/components/inline-list/InlineList-c2daf1d2.js}

@@ -1,7 +1,7 @@
 import { Children, isValidElement } from 'react';
 import classNames from 'classnames';
 import { getRootClassName, getTypographyClassName, fontColorClass } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 /**
@@ -72,4 +72,4 @@ InlineList.className = CLASSNAME;
 InlineList.defaultProps = DEFAULT_PROPS;
 
 export { InlineList };
-//# sourceMappingURL=inline-list-5ba8bb0f.js.map
+//# sourceMappingURL=InlineList-c2daf1d2.js.map

package/_internal/packages/lumx-react/src/components/inline-list/InlineList-c2daf1d2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineList-c2daf1d2.js","sources":["../../../../../../../src/components/inline-list/InlineList.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface InlineListProps extends GenericProps {\n    /**\n     * Text color.\n     */\n    color?: ColorWithVariants;\n    /**\n     * Lightened or darkened variant of the selected color.\n     */\n    colorVariant?: ColorVariant;\n    /**\n     * Typography variant.\n     */\n    typography?: Typography;\n    /**\n     * Activate line wrap on overflow.\n     */\n    wrap?: boolean;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InlineList';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {} as const;\n\n/**\n * InlineList component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const InlineList = forwardRef<InlineListProps>((props, ref) => {\n    const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;\n    const typographyClassName = typography && getTypographyClassName(typography);\n    return (\n        // eslint-disable-next-line jsx-a11y/no-redundant-roles\n        <ul\n            {...forwardedProps}\n            ref={ref as any}\n            className={classNames(\n                className,\n                CLASSNAME,\n                wrap && `${CLASSNAME}--wrap`,\n                fontColorClass(color, colorVariant),\n                typographyClassName,\n            )}\n            // Lists with removed bullet style can lose their a11y list role on some browsers\n            role=\"list\"\n        >\n            {Children.toArray(children).map((child, index) => {\n                const key = (isValidElement(child) && child.key) || index;\n                return (\n                    // We need to item is set as display: contents which removes the semantic.\n                    // eslint-disable-next-line jsx-a11y/no-redundant-roles\n                    <li key={key} role=\"listitem\" className={`${CLASSNAME}__item`}>\n                        {index !== 0 && (\n                            <span className={`${CLASSNAME}__item-separator`} aria-hidden=\"true\">\n                                {'\\u00A0•\\u00A0'}\n                            </span>\n                        )}\n                        {child}\n                    </li>\n                );\n            })}\n        </ul>\n    );\n});\nInlineList.displayName = COMPONENT_NAME;\nInlineList.className = CLASSNAME;\nInlineList.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","InlineList","forwardRef","props","ref","className","color","colorVariant","typography","children","wrap","forwardedProps","typographyClassName","getTypographyClassName","_jsx","classNames","fontColorClass","role","Children","toArray","map","child","index","key","isValidElement","_jsxs","displayName","defaultProps"],"mappings":";;;;;;AAmCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAkB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClE,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,YAAY;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,IAAI;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;AAC/F,EAAA,MAAMS,mBAAmB,GAAGJ,UAAU,IAAIK,sBAAsB,CAACL,UAAU,CAAC,CAAA;AAC5E,EAAA;AAAA;AACI;IACAM,GAAA,CAAA,IAAA,EAAA;AAAA,MAAA,GACQH,cAAc;AAClBP,MAAAA,GAAG,EAAEA,GAAW;MAChBC,SAAS,EAAEU,UAAU,CACjBV,SAAS,EACTP,SAAS,EACTY,IAAI,IAAI,CAAA,EAAGZ,SAAS,CAAQ,MAAA,CAAA,EAC5BkB,cAAc,CAACV,KAAK,EAAEC,YAAY,CAAC,EACnCK,mBACJ,CAAA;AACA;AAAA;AACAK,MAAAA,IAAI,EAAC,MAAM;AAAAR,MAAAA,QAAA,EAEVS,QAAQ,CAACC,OAAO,CAACV,QAAQ,CAAC,CAACW,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;AAC9C,QAAA,MAAMC,GAAG,gBAAIC,cAAc,CAACH,KAAK,CAAC,IAAIA,KAAK,CAACE,GAAG,IAAKD,KAAK,CAAA;AACzD,QAAA;AAAA;AACI;AACA;UACAG,IAAA,CAAA,IAAA,EAAA;AAAcR,YAAAA,IAAI,EAAC,UAAU;YAACZ,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAS,MAAA,CAAA;AAAAW,YAAAA,QAAA,EACzDa,CAAAA,KAAK,KAAK,CAAC,iBACRR,GAAA,CAAA,MAAA,EAAA;cAAMT,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAmB,gBAAA,CAAA;AAAC,cAAA,aAAA,EAAY,MAAM;AAAAW,cAAAA,QAAA,EAC9D,eAAA;aACC,CACT,EACAY,KAAK,CAAA;AAAA,WAAA,EANDE,GAOL,CAAA;AAAC,UAAA;OAEZ,CAAA;KACD,CAAA;AAAC,IAAA;AAEb,CAAC,EAAC;AACFtB,UAAU,CAACyB,WAAW,GAAG7B,cAAc,CAAA;AACvCI,UAAU,CAACI,SAAS,GAAGP,SAAS,CAAA;AAChCG,UAAU,CAAC0B,YAAY,GAAG3B,aAAa;;;;"}

package/_internal/{components/input-helper-2e4e49fd.js → packages/lumx-react/src/components/input-helper/InputHelper-a6c7ec2d.js}

@@ -1,22 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { INPUT_HELPER_CONFIGURATION } from './constants-08b0de35.js';
 import { jsx } from 'react/jsx-runtime';
 import { Kind, Theme } from '@lumx/core/js/constants';
 
-const INPUT_HELPER_CONFIGURATION = {
-  error: {
-    color: 'red'
-  },
-  success: {
-    color: 'green'
-  },
-  warning: {
-    color: 'yellow'
-  }
-};
-
 /**
  * Component display name.
  */
@@ -69,4 +58,4 @@ InputHelper.className = CLASSNAME;
 InputHelper.defaultProps = DEFAULT_PROPS;
 
 export { InputHelper };
-//# sourceMappingURL=input-helper-2e4e49fd.js.map
+//# sourceMappingURL=InputHelper-a6c7ec2d.js.map

package/_internal/packages/lumx-react/src/components/input-helper/InputHelper-a6c7ec2d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputHelper-a6c7ec2d.js","sources":["../../../../../../../src/components/input-helper/InputHelper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Kind, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { INPUT_HELPER_CONFIGURATION } from './constants';\n\n/**\n * Defines the props of the component.\n */\nexport interface InputHelperProps extends GenericProps, HasTheme {\n    /** Helper content. */\n    children: string | ReactNode;\n    /** Helper variant. */\n    kind?: Kind;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InputHelper';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<InputHelperProps> = {\n    kind: Kind.info,\n};\n\n/**\n * InputHelper component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const InputHelper = forwardRef<InputHelperProps, HTMLParagraphElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { children, className, kind = DEFAULT_PROPS.kind, theme = defaultTheme, ...forwardedProps } = props;\n    const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};\n\n    return (\n        <p\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, theme }))}\n        >\n            {children}\n        </p>\n    );\n});\n\nInputHelper.displayName = COMPONENT_NAME;\nInputHelper.className = CLASSNAME;\nInputHelper.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","kind","Kind","info","InputHelper","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","children","className","theme","forwardedProps","color","INPUT_HELPER_CONFIGURATION","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;;;;AAsBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAwC,GAAG;EAC7CC,IAAI,EAAEC,IAAI,CAACC,IAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,WAAW,GAAGC,UAAU,CAAyC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEZ,IAAI,GAAGD,aAAa,CAACC,IAAI;AAAEa,IAAAA,KAAK,GAAGN,YAAY;IAAE,GAAGO,cAAAA;AAAe,GAAC,GAAGT,KAAK,CAAA;EACzG,MAAM;AAAEU,IAAAA,KAAAA;AAAM,GAAC,GAAGC,0BAA0B,CAAChB,IAAI,CAAQ,IAAI,EAAE,CAAA;AAE/D,EAAA,oBACIiB,GAAA,CAAA,GAAA,EAAA;AACIX,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLQ,cAAc;AAClBF,IAAAA,SAAS,EAAEM,UAAU,CAACN,SAAS,EAAEO,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEvB,SAAS;MAAEkB,KAAK;AAAEF,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AAAAF,IAAAA,QAAA,EAEzFA,QAAAA;AAAQ,GACV,CAAC,CAAA;AAEZ,CAAC,EAAC;AAEFR,WAAW,CAACkB,WAAW,GAAGzB,cAAc,CAAA;AACxCO,WAAW,CAACS,SAAS,GAAGf,SAAS,CAAA;AACjCM,WAAW,CAACmB,YAAY,GAAGvB,aAAa;;;;"}

package/_internal/packages/lumx-react/src/components/input-helper/constants-08b0de35.js

@@ -0,0 +1,14 @@
+const INPUT_HELPER_CONFIGURATION = {
+  error: {
+    color: 'red'
+  },
+  success: {
+    color: 'green'
+  },
+  warning: {
+    color: 'yellow'
+  }
+};
+
+export { INPUT_HELPER_CONFIGURATION };
+//# sourceMappingURL=constants-08b0de35.js.map

package/_internal/packages/lumx-react/src/components/input-helper/constants-08b0de35.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-08b0de35.js","sources":["../../../../../../../src/components/input-helper/constants.ts"],"sourcesContent":["export const INPUT_HELPER_CONFIGURATION: Record<string, { color: string }> = {\n    error: {\n        color: 'red',\n    },\n    success: {\n        color: 'green',\n    },\n    warning: {\n        color: 'yellow',\n    },\n};\n"],"names":["INPUT_HELPER_CONFIGURATION","error","color","success","warning"],"mappings":"AAAO,MAAMA,0BAA6D,GAAG;AACzEC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE,KAAA;GACV;AACDC,EAAAA,OAAO,EAAE;AACLD,IAAAA,KAAK,EAAE,OAAA;GACV;AACDE,EAAAA,OAAO,EAAE;AACLF,IAAAA,KAAK,EAAE,QAAA;AACX,GAAA;AACJ;;;;"}

package/_internal/{components/input-label-30d199c3.js → packages/lumx-react/src/components/input-label/InputLabel-7ce8e604.js}

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { getRootClassName, getTypographyClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
 import { jsx } from 'react/jsx-runtime';
 import { Theme } from '@lumx/core/js/constants';
 
@@ -57,4 +57,4 @@ InputLabel.className = CLASSNAME;
 InputLabel.defaultProps = DEFAULT_PROPS;
 
 export { InputLabel };
-//# sourceMappingURL=input-label-30d199c3.js.map
+//# sourceMappingURL=InputLabel-7ce8e604.js.map

package/_internal/packages/lumx-react/src/components/input-label/InputLabel-7ce8e604.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel-7ce8e604.js","sources":["../../../../../../../src/components/input-label/InputLabel.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme, Typography } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\n/**\n * Defines the props of the component.\n */\nexport interface InputLabelProps extends GenericProps, HasTheme {\n    /** Typography variant. */\n    typography?: Typography;\n    /** Label content. */\n    children: string | ReactNode;\n    /** Native htmlFor property. */\n    htmlFor: string;\n    /** Whether the component is required or not. */\n    isRequired?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InputLabel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<InputLabelProps> = {};\n\n/**\n * InputLabel component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const InputLabel = forwardRef<InputLabelProps, HTMLLabelElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { children, className, htmlFor, isRequired, theme = defaultTheme, typography, ...forwardedProps } = props;\n    const typographyClass = typography && getTypographyClassName(typography);\n\n    return (\n        <label\n            ref={ref}\n            {...forwardedProps}\n            htmlFor={htmlFor}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, isRequired, theme, hasCustomTypography: Boolean(typography) }),\n                typographyClass,\n            )}\n        >\n            {children}\n        </label>\n    );\n});\nInputLabel.displayName = COMPONENT_NAME;\nInputLabel.className = CLASSNAME;\nInputLabel.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","InputLabel","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","children","className","htmlFor","isRequired","theme","typography","forwardedProps","typographyClass","getTypographyClassName","_jsx","classNames","handleBasicClasses","prefix","hasCustomTypography","Boolean","displayName","defaultProps"],"mappings":";;;;;;;AAwBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG,EAAE,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,OAAO;IAAEC,UAAU;AAAEC,IAAAA,KAAK,GAAGR,YAAY;IAAES,UAAU;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGZ,KAAK,CAAA;AAC/G,EAAA,MAAMa,eAAe,GAAGF,UAAU,IAAIG,sBAAsB,CAACH,UAAU,CAAC,CAAA;AAExE,EAAA,oBACII,GAAA,CAAA,OAAA,EAAA;AACId,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLW,cAAc;AAClBJ,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAES,UAAU,CACjBT,SAAS,EACTU,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEvB,SAAS;MAAEc,UAAU;MAAEC,KAAK;MAAES,mBAAmB,EAAEC,OAAO,CAACT,UAAU,CAAA;KAAG,CAAC,EACtGE,eACJ,CAAE;AAAAP,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEhB,CAAC,EAAC;AACFR,UAAU,CAACuB,WAAW,GAAG3B,cAAc,CAAA;AACvCI,UAAU,CAACS,SAAS,GAAGZ,SAAS,CAAA;AAChCG,UAAU,CAACwB,YAAY,GAAGzB,aAAa;;;;"}

package/_internal/{components/lightbox-c618a33b.js → packages/lumx-react/src/components/lightbox/Lightbox-198bb478.js}

@@ -1,20 +1,20 @@
 import { useRef, useEffect } from 'react';
 import classNames from 'classnames';
-import { mdiClose } from '@lumx/icons';
-import { D as DOCUMENT } from '../constants-d0e3f49e.js';
+import { DOCUMENT } from '../../constants-6af61e2f.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useFocusTrap } from '../useFocusTrap-2dbae79e.js';
-import { u as useDisableBodyScroll } from '../useDisableBodyScroll-36bd7352.js';
-import { C as ClickAwayProvider } from '../ClickAwayProvider-1204f237.js';
-import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
-import { u as useCallbackOnEscape } from '../useCallbackOnEscape-b956a85d.js';
-import { u as useTransitionVisibility } from '../useTransitionVisibility-321fdbfa.js';
-import { T as ThemeProvider } from '../ThemeContext-3181f000.js';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap-3a8a959d.js';
+import { useDisableBodyScroll } from '../../hooks/useDisableBodyScroll-5d576cdc.js';
+import { mergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import { useCallbackOnEscape } from '../../hooks/useCallbackOnEscape-80f4407b.js';
+import { useTransitionVisibility } from '../../hooks/useTransitionVisibility-2beba0ac.js';
+import { ThemeProvider } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { P as Portal } from '../Portal-3f86608e.js';
-import { I as IconButton } from '../IconButton-1790b47e.js';
-import { H as HeadingLevelProvider } from '../HeadingLevelProvider-ebdcb0c7.js';
+import { Portal } from '../../utils/Portal/Portal-9e38cfd0.js';
+import { IconButton } from '../button/IconButton-a740ce59.js';
+import { mdiClose } from '../../../../lumx-icons/dist/esm/close-ad7c38b0.js';
+import { HeadingLevelProvider } from '../heading/HeadingLevelProvider-7bd8f886.js';
+import { ClickAwayProvider } from '../../utils/ClickAwayProvider/ClickAwayProvider-ec55d284.js';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 
 /**
@@ -153,4 +153,4 @@ Lightbox.displayName = COMPONENT_NAME;
 Lightbox.className = CLASSNAME;
 
 export { Lightbox };
-//# sourceMappingURL=lightbox-c618a33b.js.map
+//# sourceMappingURL=Lightbox-198bb478.js.map

package/_internal/packages/lumx-react/src/components/lightbox/Lightbox-198bb478.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox-198bb478.js","sources":["../../../../../../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import { RefObject, useRef, useEffect, AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\nimport { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n    /** Props to pass to the close button (minus those already set by the Lightbox props). */\n    closeButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the element that triggered modal opening to set focus on. */\n    parentElement: RefObject<any>;\n    /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** On close callback. */\n    onClose?(): void;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {\n    const {\n        'aria-labelledby': propAriaLabelledBy,\n        ariaLabelledBy = propAriaLabelledBy,\n        'aria-label': propAriaLabel,\n        ariaLabel = propAriaLabel,\n        children,\n        className,\n        closeButtonProps,\n        isOpen,\n        onClose,\n        parentElement,\n        focusElement,\n        preventAutoClose,\n        theme,\n        zIndex,\n        ...forwardedProps\n    } = props;\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const childrenRef = useRef<any>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && wrapperRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);\n\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(\n        // Focus trap zone\n        isOpen && wrapperRef.current,\n        // Focus element (fallback on close button and then on the dialog)\n        focusElement?.current || closeButtonRef.current || wrapperRef.current,\n    );\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = useRef(isOpen);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // Close lightbox on escape key pressed.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    if (!isOpen && !isVisible) return null;\n\n    return (\n        <Portal>\n            <div\n                ref={mergeRefs(ref, wrapperRef)}\n                {...forwardedProps}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-modal=\"true\"\n                role=\"dialog\"\n                tabIndex={-1}\n                className={classNames(\n                    className,\n                    handleBasicClasses({\n                        prefix: CLASSNAME,\n                        isHidden: !isOpen,\n                        isShown: isOpen || isVisible,\n                        theme,\n                    }),\n                )}\n                style={{ zIndex }}\n            >\n                {closeButtonProps && (\n                    <div className={`${CLASSNAME}__close`}>\n                        <IconButton\n                            {...closeButtonProps}\n                            ref={closeButtonRef}\n                            emphasis=\"low\"\n                            hasBackground\n                            icon={mdiClose}\n                            theme=\"dark\"\n                            type=\"button\"\n                            onClick={onClose}\n                        />\n                    </div>\n                )}\n                <HeadingLevelProvider level={2}>\n                    <ThemeProvider value={undefined}>\n                        <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>\n                            <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n                                {children}\n                            </div>\n                        </ClickAwayProvider>\n                    </ThemeProvider>\n                </HeadingLevelProvider>\n            </div>\n        </Portal>\n    );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","propAriaLabelledBy","ariaLabelledBy","propAriaLabel","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","focusElement","preventAutoClose","theme","zIndex","forwardedProps","DOCUMENT","childrenRef","useRef","wrapperRef","closeButtonRef","useDisableBodyScroll","current","isVisible","useTransitionVisibility","DIALOG_TRANSITION_DURATION","useFocusTrap","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","_jsx","Portal","_jsxs","mergeRefs","role","tabIndex","classNames","handleBasicClasses","prefix","isHidden","isShown","style","IconButton","emphasis","hasBackground","icon","mdiClose","type","onClick","HeadingLevelProvider","level","ThemeProvider","value","undefined","ClickAwayProvider","callback","childrenRefs","displayName"],"mappings":"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"}

package/_internal/{components/link-9c3feb34.js → packages/lumx-react/src/components/link/Link-f8b5025c.js}

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, resolveColorWithVariants, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
-import { w as wrapChildrenIconWithSpaces } from '../wrapChildrenIconWithSpaces-ef2a6772.js';
-import { R as RawClickable } from '../RawClickable-2c2b6a89.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { wrapChildrenIconWithSpaces } from '../../utils/react/wrapChildrenIconWithSpaces-5de82619.js';
+import { RawClickable } from '../../utils/react/RawClickable-e5e3e5c6.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
-import { Icon } from './icon-a00d698b.js';
+import { useDisableStateProps } from '../../utils/disabled/useDisableStateProps-2391c02d.js';
+import { Icon } from '../icon/Icon-21a83e8c.js';
 
 /**
  * Component display name.
@@ -70,4 +70,4 @@ Link.displayName = COMPONENT_NAME;
 Link.className = CLASSNAME;
 
 export { Link };
-//# sourceMappingURL=link-9c3feb34.js.map
+//# sourceMappingURL=Link-f8b5025c.js.map