no-frills-ui 0.0.14-alpha.11 → 0.0.14-alpha.12

package/lib-esm/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { Card } from '../Card';\n\nexport enum POPOVER_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\ninterface Translate {\n    x: number;\n    y: number;\n}\n\nconst positionMap = {\n    [POPOVER_POSITION.TOP_LEFT]: `\n        bottom: calc(100% - 10px);\n        left: 0;\n    `,\n    [POPOVER_POSITION.TOP_RIGHT]: `\n        bottom: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_RIGHT]: `\n        top: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_LEFT]: `\n        top: calc(100% - 10px);\n        left: 0;\n    `,\n};\n\nconst PopoverDiv = styled.div`\n    position: relative;\n    display: inline-flex;\n`;\n\nconst Popper = styled(Card)<{ position: POPOVER_POSITION; translateX: number; translateY: number }>`\n    position: absolute;\n    width: 100%;\n    min-width: 200px;\n    overflow: auto;\n    animation: enter 0.3s linear;\n    border-radius: 3px;\n    z-index: 1;\n    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);\n    ${(props) => positionMap[props.position]}\n\n    &.closing {\n        /* max-height: 0px;\n        opacity: 0;\n        overflow: hidden; */\n        animation: exit 0.3s linear;\n    }\n\n    @keyframes enter {\n        from {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        to {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n\n    @keyframes exit {\n        to {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        from {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n`;\n\nconst KEY_CODES = {\n    ESC: 27,\n};\n\ntype PopoverProps = {\n    /** Opens the popover */\n    open: boolean;\n    /** Anchor element for the popover */\n    element: React.ElementType;\n    /**\n     * Position of the popover around anchor element\n     * @default POPOVER_POSITION.BOTTOM_LEFT\n     */\n    position?: POPOVER_POSITION;\n    /**\n     * If the popover should close on `esc` key press\n     * @default true\n     */\n    closeOnEsc?: boolean;\n    /** Popover close callback */\n    onClose?: () => void;\n};\n\nfunction PopoverComponent(\n    props: React.PropsWithChildren<PopoverProps>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const {\n        open: propsOpen,\n        element,\n        position = POPOVER_POSITION.BOTTOM_LEFT,\n        closeOnEsc = true,\n        onClose,\n        children,\n        ...rest\n    } = props;\n\n    const [open, setOpen] = useState<boolean>(propsOpen);\n    const [closing, setClosing] = useState<boolean>(false);\n    const [translate, setTranslate] = useState<Translate>({ x: 0, y: 0 });\n    const popperRef = useRef<HTMLDivElement | null>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const popperId = useId();\n    const triggerId = useId();\n\n    const close = useCallback(() => {\n        // Clear any existing timeouts first\n        if (closeTimeoutRef.current) {\n            clearTimeout(closeTimeoutRef.current);\n        }\n        if (focusTimeoutRef.current) {\n            clearTimeout(focusTimeoutRef.current);\n        }\n\n        setClosing(true);\n        closeTimeoutRef.current = setTimeout(() => {\n            setOpen(false);\n            setTranslate({ x: 0, y: 0 });\n\n            if (onClose) {\n                onClose();\n            }\n            setClosing(false);\n\n            // Restore focus to the trigger element after animation completes\n            focusTimeoutRef.current = setTimeout(() => {\n                if (triggerRef.current && document.body.contains(triggerRef.current)) {\n                    triggerRef.current.focus();\n                }\n                focusTimeoutRef.current = null;\n            }, 50);\n            closeTimeoutRef.current = null;\n        }, 280);\n    }, [onClose]);\n\n    const keyupEventHandler = useCallback(\n        (e: KeyboardEvent) => {\n            if (closeOnEsc && e.keyCode === KEY_CODES.ESC) {\n                close();\n            }\n        },\n        [close, closeOnEsc],\n    );\n\n    const clickOutsideHandler = useCallback(\n        (e: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n                close();\n            }\n        },\n        [close],\n    );\n\n    /**\n     * Get called on popover mount.\n     */\n    useEffect(() => {\n        document.addEventListener('keyup', keyupEventHandler);\n\n        return () => {\n            document.removeEventListener('keyup', keyupEventHandler);\n        };\n    }, [keyupEventHandler]);\n\n    useEffect(() => {\n        if (propsOpen) {\n            setOpen(true);\n            // Use requestAnimationFrame to add listener after current event loop\n            const rafId = requestAnimationFrame(() => {\n                document.addEventListener('click', clickOutsideHandler);\n            });\n\n            return () => {\n                cancelAnimationFrame(rafId);\n                document.removeEventListener('click', clickOutsideHandler);\n            };\n        } else {\n            if (open) {\n                close();\n            }\n        }\n    }, [propsOpen, open, clickOutsideHandler, close]);\n\n    useEffect(() => {\n        if (open) {\n            const {\n                top = 0,\n                left = 0,\n                right = 0,\n            } = popperRef.current?.getBoundingClientRect() ?? {};\n            const height = popperRef.current?.scrollHeight ?? 0;\n            const viewportWidth = document.documentElement.clientWidth;\n            const viewportHeight = document.documentElement.clientHeight;\n            const translation = { x: 0, y: 0 };\n\n            if (position === POPOVER_POSITION.BOTTOM_LEFT) {\n                // overflow can happen at bottom and right\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else if (position == POPOVER_POSITION.BOTTOM_RIGHT) {\n                // overflow can happen at bottom and left\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            } else if (position === POPOVER_POSITION.TOP_LEFT) {\n                // overflow can happen at top and right\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else {\n                // overflow can happen at top and left\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            }\n            // Note it can still overflow, but in that case fitting popper inside the\n            // window is not possible.\n            setTranslate(translation);\n            popperRef.current?.focus();\n        }\n    }, [open, position]);\n\n    /**\n     * Cleanup timeouts on unmount\n     */\n    useEffect(() => {\n        return () => {\n            if (closeTimeoutRef.current) {\n                clearTimeout(closeTimeoutRef.current);\n            }\n            if (focusTimeoutRef.current) {\n                clearTimeout(focusTimeoutRef.current);\n            }\n        };\n    }, []);\n\n    const forwardRef = (node: HTMLDivElement | null) => {\n        containerRef.current = node;\n\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n    };\n\n    return (\n        <PopoverDiv ref={forwardRef} {...rest}>\n            {React.createElement(element, {\n                ref: triggerRef,\n                id: triggerId,\n                'aria-expanded': open,\n                'aria-haspopup': 'dialog',\n                'aria-controls': popperId,\n            })}\n            {open && (\n                <Popper\n                    elevated\n                    tabIndex={0}\n                    role=\"dialog\"\n                    aria-labelledby={triggerId}\n                    id={popperId}\n                    position={position}\n                    translateX={translate.x}\n                    translateY={translate.y}\n                    className={closing ? 'closing' : ''}\n                    ref={popperRef}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        e.nativeEvent.stopImmediatePropagation();\n                    }}\n                >\n                    {children}\n                </Popper>\n            )}\n        </PopoverDiv>\n    );\n}\n\nconst Popover = React.forwardRef(PopoverComponent);\nexport default Popover;\n"],"names":["POPOVER_POSITION","positionMap","PopoverDiv","styled","Popper","Card","props","translateX","translateY","position","KEY_CODES","ESC","PopoverComponent","ref","open","propsOpen","element","closeOnEsc","onClose","children","rest","setOpen","useState","closing","setClosing","translate","setTranslate","x","y","popperRef","useRef","containerRef","triggerRef","closeTimeoutRef","focusTimeoutRef","popperId","useId","triggerId","close","useCallback","current","clearTimeout","setTimeout","document","body","contains","focus","keyupEventHandler","e","keyCode","clickOutsideHandler","target","useEffect","addEventListener","removeEventListener","rafId","requestAnimationFrame","cancelAnimationFrame","top","left","right","getBoundingClientRect","height","scrollHeight","viewportWidth","documentElement","clientWidth","viewportHeight","clientHeight","translation","Math","abs","forwardRef","node","_jsxs","React","createElement","id","_jsx","elevated","tabIndex","role","aria-labelledby","className","onClick","stopPropagation","nativeEvent","stopImmediatePropagation","Popover"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { Card } from '../Card';\n\nexport enum POPOVER_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\ninterface Translate {\n    x: number;\n    y: number;\n}\n\nconst positionMap = {\n    [POPOVER_POSITION.TOP_LEFT]: `\n        bottom: calc(100% - 10px);\n        left: 0;\n    `,\n    [POPOVER_POSITION.TOP_RIGHT]: `\n        bottom: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_RIGHT]: `\n        top: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_LEFT]: `\n        top: calc(100% - 10px);\n        left: 0;\n    `,\n};\n\nconst PopoverDiv = styled.div`\n    position: relative;\n    display: inline-flex;\n`;\n\nconst Popper = styled(Card)<{ position: POPOVER_POSITION; translateX: number; translateY: number }>`\n    position: absolute;\n    width: 100%;\n    min-width: 200px;\n    overflow: auto;\n    animation: enter 0.3s linear;\n    border-radius: 3px;\n    z-index: 1;\n    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);\n    ${(props) => positionMap[props.position]}\n\n    &.closing {\n        /* max-height: 0px;\n        opacity: 0;\n        overflow: hidden; */\n        animation: exit 0.3s linear;\n    }\n\n    @keyframes enter {\n        from {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        to {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n\n    @keyframes exit {\n        to {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        from {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n`;\n\nconst KEY_CODES = {\n    ESC: 27,\n};\n\ntype PopoverProps = {\n    /** Opens the popover */\n    open: boolean;\n    /** Anchor element for the popover */\n    element: React.ElementType;\n    /**\n     * Position of the popover around anchor element\n     * @default POPOVER_POSITION.BOTTOM_LEFT\n     */\n    position?: POPOVER_POSITION;\n    /**\n     * If the popover should close on `esc` key press\n     * @default true\n     */\n    closeOnEsc?: boolean;\n    /** Popover close callback */\n    onClose?: () => void;\n};\n\n/**\n * Popover Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction PopoverComponent(\n    props: React.PropsWithChildren<PopoverProps>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const {\n        open: propsOpen,\n        element,\n        position = POPOVER_POSITION.BOTTOM_LEFT,\n        closeOnEsc = true,\n        onClose,\n        children,\n        ...rest\n    } = props;\n\n    const [open, setOpen] = useState<boolean>(propsOpen);\n    const [closing, setClosing] = useState<boolean>(false);\n    const [translate, setTranslate] = useState<Translate>({ x: 0, y: 0 });\n    const popperRef = useRef<HTMLDivElement | null>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const popperId = useId();\n    const triggerId = useId();\n\n    const close = useCallback(() => {\n        // Clear any existing timeouts first\n        if (closeTimeoutRef.current) {\n            clearTimeout(closeTimeoutRef.current);\n        }\n        if (focusTimeoutRef.current) {\n            clearTimeout(focusTimeoutRef.current);\n        }\n\n        setClosing(true);\n        closeTimeoutRef.current = setTimeout(() => {\n            setOpen(false);\n            setTranslate({ x: 0, y: 0 });\n\n            if (onClose) {\n                onClose();\n            }\n            setClosing(false);\n\n            // Restore focus to the trigger element after animation completes\n            focusTimeoutRef.current = setTimeout(() => {\n                if (triggerRef.current && document.body.contains(triggerRef.current)) {\n                    triggerRef.current.focus();\n                }\n                focusTimeoutRef.current = null;\n            }, 50);\n            closeTimeoutRef.current = null;\n        }, 280);\n    }, [onClose]);\n\n    const keyupEventHandler = useCallback(\n        (e: KeyboardEvent) => {\n            if (closeOnEsc && e.keyCode === KEY_CODES.ESC) {\n                close();\n            }\n        },\n        [close, closeOnEsc],\n    );\n\n    const clickOutsideHandler = useCallback(\n        (e: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n                close();\n            }\n        },\n        [close],\n    );\n\n    /**\n     * Get called on popover mount.\n     */\n    useEffect(() => {\n        document.addEventListener('keyup', keyupEventHandler);\n\n        return () => {\n            document.removeEventListener('keyup', keyupEventHandler);\n        };\n    }, [keyupEventHandler]);\n\n    useEffect(() => {\n        if (propsOpen) {\n            setOpen(true);\n            // Use requestAnimationFrame to add listener after current event loop\n            const rafId = requestAnimationFrame(() => {\n                document.addEventListener('click', clickOutsideHandler);\n            });\n\n            return () => {\n                cancelAnimationFrame(rafId);\n                document.removeEventListener('click', clickOutsideHandler);\n            };\n        } else {\n            if (open) {\n                close();\n            }\n        }\n    }, [propsOpen, open, clickOutsideHandler, close]);\n\n    useEffect(() => {\n        if (open) {\n            const {\n                top = 0,\n                left = 0,\n                right = 0,\n            } = popperRef.current?.getBoundingClientRect() ?? {};\n            const height = popperRef.current?.scrollHeight ?? 0;\n            const viewportWidth = document.documentElement.clientWidth;\n            const viewportHeight = document.documentElement.clientHeight;\n            const translation = { x: 0, y: 0 };\n\n            if (position === POPOVER_POSITION.BOTTOM_LEFT) {\n                // overflow can happen at bottom and right\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else if (position == POPOVER_POSITION.BOTTOM_RIGHT) {\n                // overflow can happen at bottom and left\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            } else if (position === POPOVER_POSITION.TOP_LEFT) {\n                // overflow can happen at top and right\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else {\n                // overflow can happen at top and left\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            }\n            // Note it can still overflow, but in that case fitting popper inside the\n            // window is not possible.\n            setTranslate(translation);\n            popperRef.current?.focus();\n        }\n    }, [open, position]);\n\n    /**\n     * Cleanup timeouts on unmount\n     */\n    useEffect(() => {\n        return () => {\n            if (closeTimeoutRef.current) {\n                clearTimeout(closeTimeoutRef.current);\n            }\n            if (focusTimeoutRef.current) {\n                clearTimeout(focusTimeoutRef.current);\n            }\n        };\n    }, []);\n\n    const forwardRef = (node: HTMLDivElement | null) => {\n        containerRef.current = node;\n\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n    };\n\n    return (\n        <PopoverDiv ref={forwardRef} {...rest}>\n            {React.createElement(element, {\n                ref: triggerRef,\n                id: triggerId,\n                'aria-expanded': open,\n                'aria-haspopup': 'dialog',\n                'aria-controls': popperId,\n            })}\n            {open && (\n                <Popper\n                    elevated\n                    tabIndex={0}\n                    role=\"dialog\"\n                    aria-labelledby={triggerId}\n                    id={popperId}\n                    position={position}\n                    translateX={translate.x}\n                    translateY={translate.y}\n                    className={closing ? 'closing' : ''}\n                    ref={popperRef}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        e.nativeEvent.stopImmediatePropagation();\n                    }}\n                >\n                    {children}\n                </Popper>\n            )}\n        </PopoverDiv>\n    );\n}\n\nconst Popover = React.forwardRef(PopoverComponent);\nexport default Popover;\n"],"names":["POPOVER_POSITION","positionMap","PopoverDiv","styled","Popper","Card","props","translateX","translateY","position","KEY_CODES","ESC","PopoverComponent","ref","open","propsOpen","element","closeOnEsc","onClose","children","rest","setOpen","useState","closing","setClosing","translate","setTranslate","x","y","popperRef","useRef","containerRef","triggerRef","closeTimeoutRef","focusTimeoutRef","popperId","useId","triggerId","close","useCallback","current","clearTimeout","setTimeout","document","body","contains","focus","keyupEventHandler","e","keyCode","clickOutsideHandler","target","useEffect","addEventListener","removeEventListener","rafId","requestAnimationFrame","cancelAnimationFrame","top","left","right","getBoundingClientRect","height","scrollHeight","viewportWidth","documentElement","clientWidth","viewportHeight","clientHeight","translation","Math","abs","forwardRef","node","_jsxs","React","createElement","id","_jsx","elevated","tabIndex","role","aria-labelledby","className","onClick","stopPropagation","nativeEvent","stopImmediatePropagation","Popover"],"mappings":"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"}

package/lib-esm/components/Spinner/Spinner.js

@@ -4,10 +4,14 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const SpinnerDiv = /*#__PURE__*/ styled("div", {
-    target: "ejfhe5c0",
+    target: "e14pfj3w0",
     label: "SpinnerDiv"
 })("border:4px solid ", getThemeValue(THEME_NAME.PRIMARY), ";border-top:4px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";border-radius:50%;width:", (props)=>props.size, "px;height:", (props)=>props.size, "px;margin:0 auto;animation:spin 1s linear infinite;@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}");
-function SpinnerComponent(props, ref) {
+/**
+ * Spinner Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function SpinnerComponent(props, ref) {
     const { label = 'Loading', size = 30, ...rest } = props;
     return /*#__PURE__*/ jsx(SpinnerDiv, {
         ...rest,

package/lib-esm/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst SpinnerDiv = styled.div<SpinnerProp>`\n    border: 4px solid ${getThemeValue(THEME_NAME.PRIMARY)};\n    border-top: 4px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    border-radius: 50%;\n    width: ${(props) => props.size}px;\n    height: ${(props) => props.size}px;\n    margin: 0 auto;\n    animation: spin 1s linear infinite;\n\n    @keyframes spin {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\ntype SpinnerProp = {\n    /**\n     * Spinner's size\n     * @default 30\n     */\n    size?: number;\n    /**\n     * Accessible label for screen readers\n     * @default 'Loading'\n     */\n    label?: string;\n};\n\nfunction SpinnerComponent(props: SpinnerProp, ref: React.Ref<HTMLDivElement>) {\n    const { label = 'Loading', size = 30, ...rest } = props;\n    return (\n        <SpinnerDiv\n            {...rest}\n            ref={ref}\n            size={size}\n            role=\"status\"\n            aria-label={label || undefined}\n            aria-live=\"polite\"\n            aria-busy=\"true\"\n        />\n    );\n}\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProp>(SpinnerComponent);\nexport default Spinner;\n"],"names":["SpinnerDiv","styled","getThemeValue","THEME_NAME","PRIMARY","BORDER_LIGHT_COLOR","props","size","SpinnerComponent","ref","label","rest","_jsx","role","aria-label","undefined","aria-live","aria-busy","Spinner","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AACKC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,wBAAA,EAC5BF,aAAAA,CAAcC,WAAWE,kBAAkB,CAAA,EAAA,2BAAA,EAE1D,CAACC,KAAAA,GAAUA,MAAMC,IAAI,EAAA,YAAA,EACpB,CAACD,KAAAA,GAAUA,MAAMC,IAAI,EAAA,gIAAA,CAAA;AA2BnC,SAASC,gBAAAA,CAAiBF,KAAkB,EAAEG,GAA8B,EAAA;IACxE,MAAM,EAAEC,QAAQ,SAAS,EAAEH,OAAO,EAAE,EAAE,GAAGI,IAAAA,EAAM,GAAGL,KAAAA;AAClD,IAAA,qBACIM,GAAA,CAACZ,UAAAA,EAAAA;AACI,QAAA,GAAGW,IAAI;QACRF,GAAAA,EAAKA,GAAAA;QACLF,IAAAA,EAAMA,IAAAA;QACNM,IAAAA,EAAK,QAAA;AACLC,QAAAA,YAAAA,EAAYJ,KAAAA,IAASK,SAAAA;QACrBC,WAAAA,EAAU,QAAA;QACVC,WAAAA,EAAU;;AAGtB;AAEA,MAAMC,OAAAA,iBAAUC,KAAAA,CAAMC,UAAU,CAA8BZ,gBAAAA;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst SpinnerDiv = styled.div<SpinnerProp>`\n    border: 4px solid ${getThemeValue(THEME_NAME.PRIMARY)};\n    border-top: 4px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    border-radius: 50%;\n    width: ${(props) => props.size}px;\n    height: ${(props) => props.size}px;\n    margin: 0 auto;\n    animation: spin 1s linear infinite;\n\n    @keyframes spin {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\ntype SpinnerProp = {\n    /**\n     * Spinner's size\n     * @default 30\n     */\n    size?: number;\n    /**\n     * Accessible label for screen readers\n     * @default 'Loading'\n     */\n    label?: string;\n};\n\n/**\n * Spinner Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction SpinnerComponent(props: SpinnerProp, ref: React.Ref<HTMLDivElement>) {\n    const { label = 'Loading', size = 30, ...rest } = props;\n    return (\n        <SpinnerDiv\n            {...rest}\n            ref={ref}\n            size={size}\n            role=\"status\"\n            aria-label={label || undefined}\n            aria-live=\"polite\"\n            aria-busy=\"true\"\n        />\n    );\n}\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProp>(SpinnerComponent);\nexport default Spinner;\n"],"names":["SpinnerDiv","styled","getThemeValue","THEME_NAME","PRIMARY","BORDER_LIGHT_COLOR","props","size","SpinnerComponent","ref","label","rest","_jsx","role","aria-label","undefined","aria-live","aria-busy","Spinner","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AACKC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,wBAAA,EAC5BF,aAAAA,CAAcC,WAAWE,kBAAkB,CAAA,EAAA,2BAAA,EAE1D,CAACC,KAAAA,GAAUA,MAAMC,IAAI,EAAA,YAAA,EACpB,CAACD,KAAAA,GAAUA,MAAMC,IAAI,EAAA,gIAAA,CAAA;AA2BnC;;;;AAIC,IACD,SAASC,gBAAAA,CAAiBF,KAAkB,EAAEG,GAA8B,EAAA;IACxE,MAAM,EAAEC,QAAQ,SAAS,EAAEH,OAAO,EAAE,EAAE,GAAGI,IAAAA,EAAM,GAAGL,KAAAA;AAClD,IAAA,qBACIM,GAAA,CAACZ,UAAAA,EAAAA;AACI,QAAA,GAAGW,IAAI;QACRF,GAAAA,EAAKA,GAAAA;QACLF,IAAAA,EAAMA,IAAAA;QACNM,IAAAA,EAAK,QAAA;AACLC,QAAAA,YAAAA,EAAYJ,KAAAA,IAASK,SAAAA;QACrBC,WAAAA,EAAU,QAAA;QACVC,WAAAA,EAAU;;AAGtB;AAEA,MAAMC,OAAAA,iBAAUC,KAAAA,CAAMC,UAAU,CAA8BZ,gBAAAA;;;;"}

package/lib-esm/components/Stepper/Step.js

@@ -3,10 +3,14 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 const Container = /*#__PURE__*/ styled("div", {
-    target: "e67x9110",
+    target: "e1v23xop0",
     label: "Container"
 })("flex:1;display:flex;flex-direction:column;");
-function StepComponent(props, ref) {
+/**
+ * Step Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function StepComponent(props, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { name, disabled, completed, ...rest } = props;
     return /*#__PURE__*/ jsx(Container, {

package/lib-esm/components/Stepper/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n`;\n\ntype StepProps = {\n    /**\n     * Name of the step to be displayed in the header\n     */\n    name: string;\n    /**\n     * Disables the step\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Marks the step as completed\n     * @default false\n     */\n    completed?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction StepComponent(props: React.PropsWithChildren<StepProps>, ref: React.Ref<HTMLDivElement>) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { name, disabled, completed, ...rest } = props;\n    return <Container {...rest} ref={ref} />;\n}\n\nconst Step = React.forwardRef(StepComponent);\nexport default Step;\n"],"names":["Container","styled","StepComponent","props","ref","name","disabled","completed","rest","_jsx","Step","React","forwardRef"],"mappings":";;;;AAGA,MAAMA,SAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;;AAuBlB,SAASC,aAAAA,CAAcC,KAAyC,EAAEC,GAA8B,EAAA;;IAE5F,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,IAAAA,EAAM,GAAGL,KAAAA;AAC/C,IAAA,qBAAOM,GAAA,CAACT,SAAAA,EAAAA;AAAW,QAAA,GAAGQ,IAAI;QAAEJ,GAAAA,EAAKA;;AACrC;AAEA,MAAMM,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAACV,aAAAA;;;;"}
+{"version":3,"file":"Step.js","sources":["../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n`;\n\ntype StepProps = {\n    /**\n     * Name of the step to be displayed in the header\n     */\n    name: string;\n    /**\n     * Disables the step\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Marks the step as completed\n     * @default false\n     */\n    completed?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Step Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction StepComponent(props: React.PropsWithChildren<StepProps>, ref: React.Ref<HTMLDivElement>) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { name, disabled, completed, ...rest } = props;\n    return <Container {...rest} ref={ref} />;\n}\n\nconst Step = React.forwardRef(StepComponent);\nexport default Step;\n"],"names":["Container","styled","StepComponent","props","ref","name","disabled","completed","rest","_jsx","Step","React","forwardRef"],"mappings":";;;;AAGA,MAAMA,SAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;;AAuBlB;;;;AAIC,IACD,SAASC,aAAAA,CAAcC,KAAyC,EAAEC,GAA8B,EAAA;;IAE5F,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,IAAAA,EAAM,GAAGL,KAAAA;AAC/C,IAAA,qBAAOM,GAAA,CAACT,SAAAA,EAAAA;AAAW,QAAA,GAAGQ,IAAI;QAAEJ,GAAAA,EAAKA;;AACrC;AAEA,MAAMM,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAACV,aAAAA;;;;"}

package/lib-esm/components/Stepper/Stepper.js

@@ -6,22 +6,26 @@ import { Ellipsis } from '../../shared/styles.js';
 import Badge, { BADGE_TYPE } from '../Badge/Badge.js';
 
 const Container$1 = /*#__PURE__*/ styled("div", {
-    target: "e1o5kbe30",
+    target: "e14em2c80",
     label: "Container"
 })("flex:1;display:flex;flex-direction:column;min-height:400px;");
 const Header = /*#__PURE__*/ styled("div", {
-    target: "e1o5kbe31",
+    target: "e14em2c81",
     label: "Header"
 })("display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";@media (min-width:601px){&::before{position:absolute;top:25px;left:0;right:0;height:2px;background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";content:' ';z-index:0;}}& > *{z-index:1;}");
 const HeaderButton = /*#__PURE__*/ styled("button", {
-    target: "e1o5kbe32",
+    target: "e14em2c82",
     label: "HeaderButton"
 })("border:none;padding:16px 24px 16px 16px;font-size:16px;cursor:pointer;background-color:", (props)=>props.active ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR) : getThemeValue(THEME_NAME.BACKGROUND), ";font-weight:", (props)=>props.active ? 'bold' : 'normal', ";overflow:hidden;display:flex;align-items:center;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:disabled{cursor:not-allowed;background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:enabled:hover,&:focus{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";}@media (max-width:600px){&{display:none;}}");
 const MobileHeader = /*#__PURE__*/ styled("div", {
-    target: "e1o5kbe33",
+    target: "e14em2c83",
     label: "MobileHeader"
 })("padding:16px;font-size:16px;line-height:18px;align-items:center;font-weight:bold;flex:1;display:flex;flex-direction:row;justify-content:space-between;@media (min-width:601px){&{display:none;}}");
-function StepperComponent(props, ref) {
+/**
+ * Stepper Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function StepperComponent(props, ref) {
     const { active: propsActive = 0, onStepClick, children, ...rest } = props;
     const [active, setActive] = useState(propsActive);
     const childrenArray = Children.toArray(children);
@@ -64,24 +68,27 @@ function StepperComponent(props, ref) {
                 children: [
                     Children.map(children, (child, index)=>{
                         if (!/*#__PURE__*/ isValidElement(child)) return null;
+                        const reactElement = child;
                         return /*#__PURE__*/ jsxs(HeaderButton, {
-                            ref: (el)=>stepRefs[index] = el,
+                            ref: (el)=>{
+                                stepRefs[index] = el;
+                            },
                             active: index === active,
                             type: "button",
                             role: "tab",
                             "aria-selected": index === active,
-                            "aria-disabled": !!child.props.disabled,
+                            "aria-disabled": !!reactElement.props.disabled,
                             tabIndex: index === active ? 0 : -1,
-                            disabled: child.props.disabled,
+                            disabled: reactElement.props.disabled,
                             onClick: stepClickHandler(index),
                             onKeyDown: onStepKeyDown(index),
                             children: [
                                 /*#__PURE__*/ jsx(Badge, {
                                     inline: true,
-                                    type: getBadgeType(index, child.props.completed, child.props.disabled)
+                                    type: getBadgeType(index, reactElement.props.completed || false, reactElement.props.disabled || false)
                                 }),
                                 /*#__PURE__*/ jsx(Ellipsis, {
-                                    children: child.props.name
+                                    children: reactElement.props.name
                                 })
                             ]
                         });

package/lib-esm/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { Children, PropsWithChildren, useState, isValidElement } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 400px;\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n\n    @media (min-width: 601px) {\n        &::before {\n            position: absolute;\n            top: 25px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n            content: ' ';\n            z-index: 0;\n        }\n    }\n\n    & > * {\n        z-index: 1;\n    }\n`;\n\nconst HeaderButton = styled.button<{ active: boolean }>`\n    border: none;\n    padding: 16px 24px 16px 16px;\n    font-size: 16px;\n    cursor: pointer;\n    background-color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)\n            : getThemeValue(THEME_NAME.BACKGROUND)};\n    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:disabled {\n        cursor: not-allowed;\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:enabled:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n    }\n\n    @media (max-width: 600px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nconst MobileHeader = styled.div`\n    padding: 16px;\n    font-size: 16px;\n    line-height: 18px;\n    align-items: center;\n    font-weight: bold;\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    @media (min-width: 601px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\ntype StepperProps = PropsWithChildren<{\n    /**\n     * Index of currently active step\n     * @default 0\n     */\n    active?: number;\n    /** Callback function for click event on a step */\n    onStepClick?: (index: number) => void;\n}> &\n    React.HTMLAttributes<HTMLDivElement>;\n\nfunction StepperComponent(props: StepperProps, ref: React.Ref<HTMLDivElement>) {\n    const { active: propsActive = 0, onStepClick, children, ...rest } = props;\n\n    const [active, setActive] = useState(propsActive);\n    const childrenArray = Children.toArray(children);\n    const stepRefs = [] as Array<HTMLButtonElement | null>;\n\n    const stepClickHandler = (index: number) => () => {\n        setActive(index);\n        onStepClick?.(index);\n        // Move focus to the active step\n        stepRefs[index]?.focus();\n    };\n\n    const getBadgeType = (index: number, completed: boolean, disabled: boolean) => {\n        if (disabled) {\n            return BADGE_TYPE.DISABLED;\n        } else if (index === active) {\n            return BADGE_TYPE.PRIMARY;\n        } else if (completed) {\n            return BADGE_TYPE.SUCCESS;\n        }\n        return BADGE_TYPE.DISABLED;\n    };\n\n    // Keyboard navigation for step buttons\n    const onStepKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            stepRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            stepRefs[prev]?.focus();\n        }\n    };\n\n    return (\n        <Container ref={ref} {...rest}>\n            <Header role=\"tablist\" aria-label=\"Stepper Steps\">\n                {Children.map(children, (child, index) => {\n                    if (!isValidElement(child)) return null;\n                    return (\n                        <HeaderButton\n                            ref={(el) => (stepRefs[index] = el)}\n                            active={index === active}\n                            type=\"button\"\n                            role=\"tab\"\n                            aria-selected={index === active}\n                            aria-disabled={!!child.props.disabled}\n                            tabIndex={index === active ? 0 : -1}\n                            disabled={child.props.disabled}\n                            onClick={stepClickHandler(index)}\n                            onKeyDown={onStepKeyDown(index)}\n                        >\n                            <Badge\n                                inline\n                                type={getBadgeType(\n                                    index,\n                                    child.props.completed,\n                                    child.props.disabled,\n                                )}\n                            />\n                            <Ellipsis>{child.props.name}</Ellipsis>\n                        </HeaderButton>\n                    );\n                })}\n                <MobileHeader>\n                    <span>\n                        {isValidElement(childrenArray[active])\n                            ? childrenArray[active].props.name\n                            : ''}\n                    </span>\n                    <Badge inline type={BADGE_TYPE.PRIMARY}>\n                        {active + 1} of {Children.count(children)}\n                    </Badge>\n                </MobileHeader>\n            </Header>\n            {childrenArray[active]}\n        </Container>\n    );\n}\n\nconst Stepper = React.forwardRef(StepperComponent);\nexport default Stepper;\n"],"names":["Container","styled","Header","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","LIGHT_GREY","HeaderButton","props","active","BACKGROUND","TEXT_COLOR_DARK","DISABLED_BACKGROUND","PRIMARY_LIGHTER","MobileHeader","StepperComponent","ref","propsActive","onStepClick","children","rest","setActive","useState","childrenArray","Children","toArray","stepRefs","stepClickHandler","index","focus","getBadgeType","completed","disabled","BADGE_TYPE","DISABLED","PRIMARY","SUCCESS","onStepKeyDown","e","key","preventDefault","next","length","prev","_jsxs","role","aria-label","map","child","isValidElement","el","type","aria-selected","aria-disabled","tabIndex","onClick","onKeyDown","_jsx","Badge","inline","Ellipsis","name","span","count","Stepper","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { Children, PropsWithChildren, useState, isValidElement } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 400px;\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n\n    @media (min-width: 601px) {\n        &::before {\n            position: absolute;\n            top: 25px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n            content: ' ';\n            z-index: 0;\n        }\n    }\n\n    & > * {\n        z-index: 1;\n    }\n`;\n\nconst HeaderButton = styled.button<{ active: boolean }>`\n    border: none;\n    padding: 16px 24px 16px 16px;\n    font-size: 16px;\n    cursor: pointer;\n    background-color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)\n            : getThemeValue(THEME_NAME.BACKGROUND)};\n    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:disabled {\n        cursor: not-allowed;\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:enabled:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n    }\n\n    @media (max-width: 600px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nconst MobileHeader = styled.div`\n    padding: 16px;\n    font-size: 16px;\n    line-height: 18px;\n    align-items: center;\n    font-weight: bold;\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    @media (min-width: 601px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\ntype StepperProps = PropsWithChildren<{\n    /**\n     * Index of currently active step\n     * @default 0\n     */\n    active?: number;\n    /** Callback function for click event on a step */\n    onStepClick?: (index: number) => void;\n}> &\n    React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Stepper Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction StepperComponent(props: StepperProps, ref: React.Ref<HTMLDivElement>) {\n    const { active: propsActive = 0, onStepClick, children, ...rest } = props;\n\n    const [active, setActive] = useState(propsActive);\n    const childrenArray = Children.toArray(children);\n    const stepRefs = [] as Array<HTMLButtonElement | null>;\n\n    const stepClickHandler = (index: number) => () => {\n        setActive(index);\n        onStepClick?.(index);\n        // Move focus to the active step\n        stepRefs[index]?.focus();\n    };\n\n    const getBadgeType = (index: number, completed: boolean, disabled: boolean) => {\n        if (disabled) {\n            return BADGE_TYPE.DISABLED;\n        } else if (index === active) {\n            return BADGE_TYPE.PRIMARY;\n        } else if (completed) {\n            return BADGE_TYPE.SUCCESS;\n        }\n        return BADGE_TYPE.DISABLED;\n    };\n\n    // Keyboard navigation for step buttons\n    const onStepKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            stepRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            stepRefs[prev]?.focus();\n        }\n    };\n\n    return (\n        <Container ref={ref} {...rest}>\n            <Header role=\"tablist\" aria-label=\"Stepper Steps\">\n                {Children.map(children, (child, index) => {\n                    if (!isValidElement(child)) return null;\n                    const reactElement = child as React.ReactElement<{\n                        disabled?: boolean;\n                        completed?: boolean;\n                        name?: string;\n                    }>;\n                    return (\n                        <HeaderButton\n                            ref={(el) => {\n                                stepRefs[index] = el;\n                            }}\n                            active={index === active}\n                            type=\"button\"\n                            role=\"tab\"\n                            aria-selected={index === active}\n                            aria-disabled={!!reactElement.props.disabled}\n                            tabIndex={index === active ? 0 : -1}\n                            disabled={reactElement.props.disabled}\n                            onClick={stepClickHandler(index)}\n                            onKeyDown={onStepKeyDown(index)}\n                        >\n                            <Badge\n                                inline\n                                type={getBadgeType(\n                                    index,\n                                    reactElement.props.completed || false,\n                                    reactElement.props.disabled || false,\n                                )}\n                            />\n                            <Ellipsis>{reactElement.props.name}</Ellipsis>\n                        </HeaderButton>\n                    );\n                })}\n                <MobileHeader>\n                    <span>\n                        {isValidElement(childrenArray[active])\n                            ? (childrenArray[active] as React.ReactElement<{ name?: string }>).props\n                                  .name\n                            : ''}\n                    </span>\n                    <Badge inline type={BADGE_TYPE.PRIMARY}>\n                        {active + 1} of {Children.count(children)}\n                    </Badge>\n                </MobileHeader>\n            </Header>\n            {childrenArray[active]}\n        </Container>\n    );\n}\n\nconst Stepper = React.forwardRef(StepperComponent);\nexport default Stepper;\n"],"names":["Container","styled","Header","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","LIGHT_GREY","HeaderButton","props","active","BACKGROUND","TEXT_COLOR_DARK","DISABLED_BACKGROUND","PRIMARY_LIGHTER","MobileHeader","StepperComponent","ref","propsActive","onStepClick","children","rest","setActive","useState","childrenArray","Children","toArray","stepRefs","stepClickHandler","index","focus","getBadgeType","completed","disabled","BADGE_TYPE","DISABLED","PRIMARY","SUCCESS","onStepKeyDown","e","key","preventDefault","next","length","prev","_jsxs","role","aria-label","map","child","isValidElement","reactElement","el","type","aria-selected","aria-disabled","tabIndex","onClick","onKeyDown","_jsx","Badge","inline","Ellipsis","name","span","count","Stepper","React","forwardRef"],"mappings":"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"}

package/lib-esm/components/Tabs/Tabs.js

@@ -4,18 +4,22 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const Button = /*#__PURE__*/ styled("button", {
-    target: "e132lwyw0",
+    target: "ewz2woa0",
     label: "Button"
 })("background-color:transparent;border:none;padding:8px 12px;font-size:14px;border-radius:3px 3px 0 0;border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none', ";color:", (props)=>props.active ? getThemeValue(THEME_NAME.PRIMARY) : getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";cursor:pointer;&:hover,&:focus{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`, ";}&[disabled]{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";color:", getThemeValue(THEME_NAME.DISABLED), ";border-bottom:3px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}");
 const ButtonContainer = /*#__PURE__*/ styled("div", {
-    target: "e132lwyw1",
+    target: "ewz2woa1",
     label: "ButtonContainer"
 })("border-bottom:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";margin-bottom:5px;position:relative;");
 const TabBody = /*#__PURE__*/ styled("div", {
-    target: "e132lwyw2",
+    target: "ewz2woa2",
     label: "TabBody"
 })("min-height:150px;");
-function TabsComponent(props, ref) {
+/**
+ * Tabs Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function TabsComponent(props, ref) {
     const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;
     const [active, setActive] = useState(propsActive);
     const tabRefs = [];
@@ -50,11 +54,11 @@ function TabsComponent(props, ref) {
     const sanitize = (str)=>str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();
     const tabIds = childrenArray.map((child, i)=>{
         const name = /*#__PURE__*/ isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
-        return `nfui-tab-${sanitize(name)}-${i}`;
+        return `nfui-tab-${sanitize(name || '')}-${i}`;
     });
     const panelIds = childrenArray.map((child, i)=>{
         const name = /*#__PURE__*/ isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
-        return `nfui-tabpanel-${sanitize(name)}-${i}`;
+        return `nfui-tabpanel-${sanitize(name || '')}-${i}`;
     });
     // Sanity check for active index
     if (active === undefined || active < 0 || active >= childrenArray.length) {
@@ -67,8 +71,12 @@ function TabsComponent(props, ref) {
                 "aria-label": "Tabs",
                 ref: ref,
                 ...rest,
-                children: childrenArray.map((child, index)=>/*#__PURE__*/ jsx(Button, {
-                        ref: (el)=>tabRefs[index] = el,
+                children: childrenArray.map((child, index)=>{
+                    const reactElement = child;
+                    return /*#__PURE__*/ jsx(Button, {
+                        ref: (el)=>{
+                            tabRefs[index] = el;
+                        },
                         id: tabIds[index],
                         type: "button",
                         role: "tab",
@@ -78,10 +86,11 @@ function TabsComponent(props, ref) {
                         active: active === index,
                         onClick: switchTab(index),
                         onKeyDown: onTabKeyDown(index),
-                        disabled: /*#__PURE__*/ isValidElement(child) ? child.props.disabled : false,
-                        "aria-disabled": /*#__PURE__*/ isValidElement(child) ? child.props.disabled : false,
-                        children: /*#__PURE__*/ isValidElement(child) ? child.props.name : ''
-                    }, tabIds[index]))
+                        disabled: /*#__PURE__*/ isValidElement(child) ? reactElement.props.disabled : false,
+                        "aria-disabled": /*#__PURE__*/ isValidElement(child) ? reactElement.props.disabled : false,
+                        children: /*#__PURE__*/ isValidElement(child) ? reactElement.props.name : ''
+                    }, tabIds[index]);
+                })
             }),
             /*#__PURE__*/ jsx(TabBody, {
                 ...bodyProps,

package/lib-esm/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import {\n    useState,\n    Children,\n    useEffect,\n    PropsWithChildren,\n    isValidElement,\n    forwardRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};\n    color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.PRIMARY)\n            : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`\n                : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};\n    }\n\n    &[disabled] {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    /**\n     * Active Tab Index\n     * @default 0\n     */\n    active?: number;\n    /** OnChange event handler */\n    onChange?: (index: number) => void;\n    /** Props for div that contains tab body */\n    bodyProps?: React.HTMLAttributes<HTMLDivElement>;\n}>;\n\nfunction TabsComponent(props: ITabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;\n    const [active, setActive] = useState(propsActive);\n    const tabRefs = [] as Array<HTMLButtonElement | null>;\n    const childrenArray = Children.toArray(children);\n\n    const switchTab = (index: number) => () => {\n        setActive(index);\n        tabRefs[index]?.focus();\n        onChange?.(index);\n    };\n\n    // Keyboard navigation for tab buttons\n    const onTabKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            tabRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            tabRefs[prev]?.focus();\n        }\n    };\n\n    useEffect(() => {\n        if (propsActive !== undefined) {\n            setActive(propsActive);\n            onChange?.(propsActive);\n        }\n    }, [propsActive, onChange]);\n\n    // Generate unique IDs for tabs and panels using sanitized tab name and index\n    const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();\n    const tabIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tab-${sanitize(name)}-${i}`;\n    });\n    const panelIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tabpanel-${sanitize(name)}-${i}`;\n    });\n\n    // Sanity check for active index\n    if (active === undefined || active < 0 || active >= childrenArray.length) {\n        return null;\n    }\n\n    return (\n        <>\n            <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" ref={ref} {...rest}>\n                {childrenArray.map((child, index) => (\n                    <Button\n                        key={tabIds[index]}\n                        ref={(el) => (tabRefs[index] = el)}\n                        id={tabIds[index]}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={active === index}\n                        aria-controls={panelIds[index]}\n                        tabIndex={active === index ? 0 : -1}\n                        active={active === index}\n                        onClick={switchTab(index)}\n                        onKeyDown={onTabKeyDown(index)}\n                        disabled={isValidElement(child) ? child.props.disabled : false}\n                        aria-disabled={isValidElement(child) ? child.props.disabled : false}\n                    >\n                        {isValidElement(child) ? child.props.name : ''}\n                    </Button>\n                ))}\n            </ButtonContainer>\n            <TabBody\n                {...bodyProps}\n                id={panelIds[active]}\n                role=\"tabpanel\"\n                aria-labelledby={tabIds[active]}\n                tabIndex={0}\n            >\n                {childrenArray[active]}\n            </TabBody>\n        </>\n    );\n}\n\nconst Tabs = forwardRef(TabsComponent);\nexport default Tabs;\n"],"names":["Button","styled","props","active","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_DARK","PRIMARY_LIGHTER","DISABLED_BACKGROUND","DISABLED","DISABLED_BORDER","ButtonContainer","TabBody","TabsComponent","ref","propsActive","onChange","bodyProps","children","rest","setActive","useState","tabRefs","childrenArray","Children","toArray","switchTab","index","focus","onTabKeyDown","e","key","preventDefault","next","length","prev","useEffect","undefined","sanitize","str","replace","toLowerCase","tabIds","map","child","i","name","isValidElement","panelIds","_jsxs","_Fragment","_jsx","role","aria-label","el","id","type","aria-selected","aria-controls","tabIndex","onClick","onKeyDown","disabled","aria-disabled","aria-labelledby","Tabs","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import {\n    useState,\n    Children,\n    useEffect,\n    PropsWithChildren,\n    isValidElement,\n    forwardRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};\n    color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.PRIMARY)\n            : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`\n                : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};\n    }\n\n    &[disabled] {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    /**\n     * Active Tab Index\n     * @default 0\n     */\n    active?: number;\n    /** OnChange event handler */\n    onChange?: (index: number) => void;\n    /** Props for div that contains tab body */\n    bodyProps?: React.HTMLAttributes<HTMLDivElement>;\n}>;\n\n/**\n * Tabs Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction TabsComponent(props: ITabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;\n    const [active, setActive] = useState(propsActive);\n    const tabRefs = [] as Array<HTMLButtonElement | null>;\n    const childrenArray = Children.toArray(children);\n\n    const switchTab = (index: number) => () => {\n        setActive(index);\n        tabRefs[index]?.focus();\n        onChange?.(index);\n    };\n\n    // Keyboard navigation for tab buttons\n    const onTabKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            tabRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            tabRefs[prev]?.focus();\n        }\n    };\n\n    useEffect(() => {\n        if (propsActive !== undefined) {\n            setActive(propsActive);\n            onChange?.(propsActive);\n        }\n    }, [propsActive, onChange]);\n\n    // Generate unique IDs for tabs and panels using sanitized tab name and index\n    const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();\n    const tabIds = childrenArray.map((child, i) => {\n        const name =\n            isValidElement(child) && (child as React.ReactElement<{ name?: string }>).props.name\n                ? (child as React.ReactElement<{ name?: string }>).props.name\n                : `tab${i}`;\n        return `nfui-tab-${sanitize(name || '')}-${i}`;\n    });\n    const panelIds = childrenArray.map((child, i) => {\n        const name =\n            isValidElement(child) && (child as React.ReactElement<{ name?: string }>).props.name\n                ? (child as React.ReactElement<{ name?: string }>).props.name\n                : `tab${i}`;\n        return `nfui-tabpanel-${sanitize(name || '')}-${i}`;\n    });\n\n    // Sanity check for active index\n    if (active === undefined || active < 0 || active >= childrenArray.length) {\n        return null;\n    }\n\n    return (\n        <>\n            <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" ref={ref} {...rest}>\n                {childrenArray.map((child, index) => {\n                    const reactElement = child as React.ReactElement<{\n                        disabled?: boolean;\n                        name?: string;\n                    }>;\n                    return (\n                        <Button\n                            key={tabIds[index]}\n                            ref={(el) => {\n                                tabRefs[index] = el;\n                            }}\n                            id={tabIds[index]}\n                            type=\"button\"\n                            role=\"tab\"\n                            aria-selected={active === index}\n                            aria-controls={panelIds[index]}\n                            tabIndex={active === index ? 0 : -1}\n                            active={active === index}\n                            onClick={switchTab(index)}\n                            onKeyDown={onTabKeyDown(index)}\n                            disabled={isValidElement(child) ? reactElement.props.disabled : false}\n                            aria-disabled={\n                                isValidElement(child) ? reactElement.props.disabled : false\n                            }\n                        >\n                            {isValidElement(child) ? reactElement.props.name : ''}\n                        </Button>\n                    );\n                })}\n            </ButtonContainer>\n            <TabBody\n                {...bodyProps}\n                id={panelIds[active]}\n                role=\"tabpanel\"\n                aria-labelledby={tabIds[active]}\n                tabIndex={0}\n            >\n                {childrenArray[active]}\n            </TabBody>\n        </>\n    );\n}\n\nconst Tabs = forwardRef(TabsComponent);\nexport default Tabs;\n"],"names":["Button","styled","props","active","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_DARK","PRIMARY_LIGHTER","DISABLED_BACKGROUND","DISABLED","DISABLED_BORDER","ButtonContainer","TabBody","TabsComponent","ref","propsActive","onChange","bodyProps","children","rest","setActive","useState","tabRefs","childrenArray","Children","toArray","switchTab","index","focus","onTabKeyDown","e","key","preventDefault","next","length","prev","useEffect","undefined","sanitize","str","replace","toLowerCase","tabIds","map","child","i","name","isValidElement","panelIds","_jsxs","_Fragment","_jsx","role","aria-label","reactElement","el","id","type","aria-selected","aria-controls","tabIndex","onClick","onKeyDown","disabled","aria-disabled","aria-labelledby","Tabs","forwardRef"],"mappings":"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"}

package/lib-esm/components/Tooltip/Tooltip.js

@@ -43,14 +43,18 @@ const positionHoverStyle = {
     `
 };
 const TooltipDiv = /*#__PURE__*/ styled("div", {
-    target: "ebjobmh0",
+    target: "e1dfj1r70",
     label: "TooltipDiv"
 })("position:absolute;background-color:", getThemeValue(THEME_NAME.TOOLTIP_COLOR), ";padding:5px;color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:3px;transition:transform 0.3s ease;font-size:12px;z-index:1;", (props)=>positionStyle[props.position]);
 const TooltipContainer = /*#__PURE__*/ styled("div", {
-    target: "ebjobmh1",
+    target: "e1dfj1r71",
     label: "TooltipContainer"
 })("position:relative;display:inline-flex;justify-content:center;align-items:center;&:hover ", TooltipDiv, ",&:focus-within ", TooltipDiv, "{", (props)=>positionHoverStyle[props.position], "}");
-function TooltipComponent(props, ref) {
+/**
+ * Tooltip Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function TooltipComponent(props, ref) {
     const { children, position = "BOTTOM", ...rest } = props;
     const tooltipId = useId();
     // Clone the child to inject aria-describedby and tabIndex if possible

package/lib-esm/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport enum TOOLTIP_POSITION {\n    TOP = 'TOP',\n    BOTTOM = 'BOTTOM',\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n}\n\nconst positionStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        left: 0;\n        transform: translateX(-50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        right: 0;\n        transform: translateX(50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        top: 0;\n        transform: translateY(-10px) scale(0);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        bottom: 0;\n        transform: translateY(10px) scale(0);\n    `,\n};\n\nconst positionHoverStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        transform: translateX(-100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        transform: translateX(100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        transform: translateY(-25px) scale(1);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        transform: translateY(25px) scale(1);\n    `,\n};\n\nconst TooltipDiv = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: absolute;\n    background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};\n    padding: 5px;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 3px;\n    transition: transform 0.3s ease;\n    font-size: 12px;\n    z-index: 1;\n    ${(props) => positionStyle[props.position]}\n`;\n\nconst TooltipContainer = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {\n        ${(props) => positionHoverStyle[props.position]}\n    }\n`;\n\ntype TooltipProps = React.PropsWithChildren<{\n    /** Text to show in the tooltip */\n    tooltipText: string | React.ReactNode;\n    /**\n     * Position of the tooltip\n     * @default TOOLTIP_POSITION.BOTTOM\n     */\n    position?: TOOLTIP_POSITION;\n}> &\n    React.HTMLAttributes<HTMLDivElement>;\n\nfunction TooltipComponent(props: TooltipProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, position = TOOLTIP_POSITION.BOTTOM, ...rest } = props;\n    const tooltipId = useId();\n\n    // Clone the child to inject aria-describedby and tabIndex if possible\n    const trigger = React.isValidElement(children)\n        ? React.cloneElement(children as React.ReactElement, {\n              'aria-describedby': tooltipId,\n              tabIndex:\n                  children.props && typeof children.props.tabIndex !== 'undefined'\n                      ? children.props.tabIndex\n                      : 0,\n          })\n        : children;\n\n    return (\n        <TooltipContainer {...rest} ref={ref} position={position}>\n            {trigger}\n            <TooltipDiv id={tooltipId} aria-hidden=\"true\" role=\"tooltip\" position={position}>\n                {rest.tooltipText as React.ReactNode}\n            </TooltipDiv>\n        </TooltipContainer>\n    );\n}\n\nconst Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(TooltipComponent);\nexport default Tooltip;\n"],"names":["TOOLTIP_POSITION","positionStyle","positionHoverStyle","TooltipDiv","styled","getThemeValue","THEME_NAME","TOOLTIP_COLOR","TEXT_COLOR_LIGHT","props","position","TooltipContainer","TooltipComponent","ref","children","rest","tooltipId","useId","trigger","React","isValidElement","cloneElement","tabIndex","_jsxs","_jsx","id","aria-hidden","role","tooltipText","Tooltip","forwardRef"],"mappings":";;;;;AAIO,IAAA,gBAAKA,iBAAAA,SAAAA,gBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,gBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,MAAMC,aAAAA,GAAgB;AAClB,IAAA,CAAA,MAAA,GAAyB;;;IAGzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;;IAG1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;;IAGxB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;;IAG3B;AACJ,CAAA;AAEA,MAAMC,kBAAAA,GAAqB;AACvB,IAAA,CAAA,MAAA,GAAyB;;IAEzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;IAE1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;IAExB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;IAE3B;AACJ,CAAA;AAEA,MAAMC,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEKC,CAAAA,CAAAA,CAAAA,qCAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,aAAa,CAAA,EAAA,qBAAA,EAEjDF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6EAAA,EAKhD,CAACC,KAAAA,GAAUR,aAAa,CAACQ,KAAAA,CAAMC,QAAQ,CAAC,CAAA;AAG9C,MAAMC,gBAAAA,iBAAmBP,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMXD,CAAAA,CAAAA,CAAAA,0FAAAA,EAAAA,UAAAA,EAAAA,kBAAAA,EAA8BA,iBAClC,CAACM,KAAAA,GAAUP,kBAAkB,CAACO,KAAAA,CAAMC,QAAQ,CAAC,EAAA,GAAA,CAAA;AAevD,SAASE,gBAAAA,CAAiBH,KAAmB,EAAEI,GAA8B,EAAA;AACzE,IAAA,MAAM,EAAEC,QAAQ,EAAEJ,mBAAkC,EAAE,GAAGK,MAAM,GAAGN,KAAAA;AAClE,IAAA,MAAMO,SAAAA,GAAYC,KAAAA,EAAAA;;IAGlB,MAAMC,OAAAA,iBAAUC,MAAMC,cAAc,CAACN,0BAC/BK,KAAAA,CAAME,YAAY,CAACP,QAAAA,EAAgC;QAC/C,kBAAA,EAAoBE,SAAAA;AACpBM,QAAAA,QAAAA,EACIR,QAAAA,CAASL,KAAK,IAAI,OAAOK,SAASL,KAAK,CAACa,QAAQ,KAAK,WAAA,GAC/CR,QAAAA,CAASL,KAAK,CAACa,QAAQ,GACvB;KACd,CAAA,GACAR,QAAAA;AAEN,IAAA,qBACIS,IAAA,CAACZ,gBAAAA,EAAAA;AAAkB,QAAA,GAAGI,IAAI;QAAEF,GAAAA,EAAKA,GAAAA;QAAKH,QAAAA,EAAUA,QAAAA;;AAC3CQ,YAAAA,OAAAA;0BACDM,GAAA,CAACrB,UAAAA,EAAAA;gBAAWsB,EAAAA,EAAIT,SAAAA;gBAAWU,aAAAA,EAAY,MAAA;gBAAOC,IAAAA,EAAK,SAAA;gBAAUjB,QAAAA,EAAUA,QAAAA;AAClEK,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAItB;AAEA,MAAMC,OAAAA,iBAAUV,KAAAA,CAAMW,UAAU,CAA+BlB,gBAAAA;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport enum TOOLTIP_POSITION {\n    TOP = 'TOP',\n    BOTTOM = 'BOTTOM',\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n}\n\nconst positionStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        left: 0;\n        transform: translateX(-50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        right: 0;\n        transform: translateX(50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        top: 0;\n        transform: translateY(-10px) scale(0);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        bottom: 0;\n        transform: translateY(10px) scale(0);\n    `,\n};\n\nconst positionHoverStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        transform: translateX(-100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        transform: translateX(100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        transform: translateY(-25px) scale(1);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        transform: translateY(25px) scale(1);\n    `,\n};\n\nconst TooltipDiv = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: absolute;\n    background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};\n    padding: 5px;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 3px;\n    transition: transform 0.3s ease;\n    font-size: 12px;\n    z-index: 1;\n    ${(props) => positionStyle[props.position]}\n`;\n\nconst TooltipContainer = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {\n        ${(props) => positionHoverStyle[props.position]}\n    }\n`;\n\ntype TooltipProps = React.PropsWithChildren<{\n    /** Text to show in the tooltip */\n    tooltipText: string | React.ReactNode;\n    /**\n     * Position of the tooltip\n     * @default TOOLTIP_POSITION.BOTTOM\n     */\n    position?: TOOLTIP_POSITION;\n}> &\n    React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Tooltip Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction TooltipComponent(props: TooltipProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, position = TOOLTIP_POSITION.BOTTOM, ...rest } = props;\n    const tooltipId = useId();\n\n    // Clone the child to inject aria-describedby and tabIndex if possible\n    const trigger = React.isValidElement(children)\n        ? React.cloneElement(\n              children as React.ReactElement<{ tabIndex?: number; 'aria-describedby'?: string }>,\n              {\n                  'aria-describedby': tooltipId,\n                  tabIndex:\n                      (\n                          children as React.ReactElement<{\n                              tabIndex?: number;\n                              'aria-describedby'?: string;\n                          }>\n                      ).props &&\n                      typeof (\n                          children as React.ReactElement<{\n                              tabIndex?: number;\n                              'aria-describedby'?: string;\n                          }>\n                      ).props.tabIndex !== 'undefined'\n                          ? (\n                                children as React.ReactElement<{\n                                    tabIndex?: number;\n                                    'aria-describedby'?: string;\n                                }>\n                            ).props.tabIndex\n                          : 0,\n              },\n          )\n        : children;\n\n    return (\n        <TooltipContainer {...rest} ref={ref} position={position}>\n            {trigger}\n            <TooltipDiv id={tooltipId} aria-hidden=\"true\" role=\"tooltip\" position={position}>\n                {rest.tooltipText as React.ReactNode}\n            </TooltipDiv>\n        </TooltipContainer>\n    );\n}\n\nconst Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(TooltipComponent);\nexport default Tooltip;\n"],"names":["TOOLTIP_POSITION","positionStyle","positionHoverStyle","TooltipDiv","styled","getThemeValue","THEME_NAME","TOOLTIP_COLOR","TEXT_COLOR_LIGHT","props","position","TooltipContainer","TooltipComponent","ref","children","rest","tooltipId","useId","trigger","React","isValidElement","cloneElement","tabIndex","_jsxs","_jsx","id","aria-hidden","role","tooltipText","Tooltip","forwardRef"],"mappings":";;;;;AAIO,IAAA,gBAAKA,iBAAAA,SAAAA,gBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,gBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,MAAMC,aAAAA,GAAgB;AAClB,IAAA,CAAA,MAAA,GAAyB;;;IAGzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;;IAG1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;;IAGxB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;;IAG3B;AACJ,CAAA;AAEA,MAAMC,kBAAAA,GAAqB;AACvB,IAAA,CAAA,MAAA,GAAyB;;IAEzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;IAE1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;IAExB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;IAE3B;AACJ,CAAA;AAEA,MAAMC,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEKC,CAAAA,CAAAA,CAAAA,qCAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,aAAa,CAAA,EAAA,qBAAA,EAEjDF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6EAAA,EAKhD,CAACC,KAAAA,GAAUR,aAAa,CAACQ,KAAAA,CAAMC,QAAQ,CAAC,CAAA;AAG9C,MAAMC,gBAAAA,iBAAmBP,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMXD,CAAAA,CAAAA,CAAAA,0FAAAA,EAAAA,UAAAA,EAAAA,kBAAAA,EAA8BA,iBAClC,CAACM,KAAAA,GAAUP,kBAAkB,CAACO,KAAAA,CAAMC,QAAQ,CAAC,EAAA,GAAA,CAAA;AAevD;;;;AAIC,IACD,SAASE,gBAAAA,CAAiBH,KAAmB,EAAEI,GAA8B,EAAA;AACzE,IAAA,MAAM,EAAEC,QAAQ,EAAEJ,mBAAkC,EAAE,GAAGK,MAAM,GAAGN,KAAAA;AAClE,IAAA,MAAMO,SAAAA,GAAYC,KAAAA,EAAAA;;IAGlB,MAAMC,OAAAA,iBAAUC,MAAMC,cAAc,CAACN,0BAC/BK,KAAAA,CAAME,YAAY,CACdP,QAAAA,EACA;QACI,kBAAA,EAAoBE,SAAAA;AACpBM,QAAAA,QAAAA,EACI,QACIR,CAIFL,KAAK,IACP,OAAO,QACHK,CAIFL,KAAK,CAACa,QAAQ,KAAK,WAAA,GAEXR,SAIFL,KAAK,CAACa,QAAQ,GAChB;KACd,CAAA,GAEJR,QAAAA;AAEN,IAAA,qBACIS,IAAA,CAACZ,gBAAAA,EAAAA;AAAkB,QAAA,GAAGI,IAAI;QAAEF,GAAAA,EAAKA,GAAAA;QAAKH,QAAAA,EAAUA,QAAAA;;AAC3CQ,YAAAA,OAAAA;0BACDM,GAAA,CAACrB,UAAAA,EAAAA;gBAAWsB,EAAAA,EAAIT,SAAAA;gBAAWU,aAAAA,EAAY,MAAA;gBAAOC,IAAAA,EAAK,SAAA;gBAAUjB,QAAAA,EAAUA,QAAAA;AAClEK,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAItB;AAEA,MAAMC,OAAAA,iBAAUV,KAAAA,CAAMW,UAAU,CAA+BlB,gBAAAA;;;;"}

package/lib-esm/shared/LayerManager.d.ts

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
 /** Enums for layer position on screen. */
 export declare enum LAYER_POSITION {
     TOP_LEFT = 0,
@@ -13,7 +13,7 @@ interface LayerConfig {
     /** Show an overlay */
     overlay?: boolean;
     /** Element to render inside the layer. */
-    component: JSX.Element | null;
+    component: React.JSX.Element | null;
     /** Position of the layer */
     position?: LAYER_POSITION;
     /** Delay for exit */

package/lib-esm/shared/LayerManager.js

@@ -33,7 +33,7 @@ import { getThemeValue, THEME_NAME } from './constants.js';
     [6]: 'top: 0; left: 0; justify-content: center; align-items: center;'
 };
 /** Layer container component. */ const Container$5 = /*#__PURE__*/ styled("div", {
-    target: "e1wjyeea0",
+    target: "e6b1pc60",
     label: "Container"
 })("position:fixed;display:flex;opacity:0;transition:opacity 0.3s ease;", (props)=>POSITION_STYLE[props.position], " ", (props)=>props.overlay && `
         width: 100%;