@designbasekorea/ui 0.1.44 → 0.1.45

package/dist/index.umd.js

@@ -2195,7 +2195,215 @@
     };
     Spinner.displayName = 'Spinner';
 
-    const Button = React.forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth = false, disabled = false, loading = false, iconOnly = false, startIcon: StartIcon, endIcon: EndIcon, className, children, onPress, type = 'button', ...props }, forwardedRef) => {
+    const GAP$1 = 8; // 트리거와의 간격
+    const ARW = 6; // 화살표 반쪽 길이(삼각형 변 길이)
+    const PAD = 8; // 화살표가 박스 안에서 안전하게 보일 최소 여백
+    const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 240, showArrow = true, className, ...props }) => {
+        const [visible, setVisible] = React.useState(false);
+        const [style, setStyle] = React.useState({});
+        const [arrowStyle, setArrowStyle] = React.useState({});
+        const [placementGroup, setPlacementGroup] = React.useState('top');
+        const triggerRef = React.useRef(null);
+        const tooltipRef = React.useRef(null);
+        const timers = React.useRef({});
+        const rafId = React.useRef(null);
+        const clearTimer = () => {
+            if (timers.current.t) {
+                clearTimeout(timers.current.t);
+                timers.current.t = undefined;
+            }
+        };
+        const groupOf = (p) => p.startsWith('top') ? 'top' :
+            p.startsWith('bottom') ? 'bottom' :
+                p.startsWith('left') ? 'left' : 'right';
+        // 위치 계산 (⚠️ 뷰포트 클램핑 후 화살표도 보정)
+        const calculatePosition = React.useCallback(() => {
+            if (!triggerRef.current || !tooltipRef.current)
+                return;
+            const tRect = triggerRef.current.getBoundingClientRect();
+            const pRect = tooltipRef.current.getBoundingClientRect();
+            let top = 0, left = 0;
+            // 1차: 이상적(미보정) 화살표 좌표
+            let aTop = 0, aLeft = 0;
+            switch (position) {
+                case 'top':
+                    top = tRect.top - pRect.height - GAP$1;
+                    left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                    aTop = pRect.height;
+                    aLeft = pRect.width / 2 - ARW;
+                    break;
+                case 'top-start':
+                    top = tRect.top - pRect.height - GAP$1;
+                    left = tRect.left;
+                    aTop = pRect.height;
+                    aLeft = PAD;
+                    break;
+                case 'top-end':
+                    top = tRect.top - pRect.height - GAP$1;
+                    left = tRect.right - pRect.width;
+                    aTop = pRect.height;
+                    aLeft = pRect.width - PAD;
+                    break;
+                case 'bottom':
+                    top = tRect.bottom + GAP$1;
+                    left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                    aTop = -ARW;
+                    aLeft = pRect.width / 2 - ARW;
+                    break;
+                case 'bottom-start':
+                    top = tRect.bottom + GAP$1;
+                    left = tRect.left;
+                    aTop = -ARW;
+                    aLeft = PAD;
+                    break;
+                case 'bottom-end':
+                    top = tRect.bottom + GAP$1;
+                    left = tRect.right - pRect.width;
+                    aTop = -ARW;
+                    aLeft = pRect.width - PAD;
+                    break;
+                case 'left':
+                    top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                    left = tRect.left - pRect.width - GAP$1;
+                    aTop = pRect.height / 2 - ARW;
+                    aLeft = pRect.width;
+                    break;
+                case 'left-start':
+                    top = tRect.top;
+                    left = tRect.left - pRect.width - GAP$1;
+                    aTop = PAD;
+                    aLeft = pRect.width;
+                    break;
+                case 'left-end':
+                    top = tRect.bottom - pRect.height;
+                    left = tRect.left - pRect.width - GAP$1;
+                    aTop = pRect.height - PAD;
+                    aLeft = pRect.width;
+                    break;
+                case 'right':
+                    top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                    left = tRect.right + GAP$1;
+                    aTop = pRect.height / 2 - ARW;
+                    aLeft = -ARW;
+                    break;
+                case 'right-start':
+                    top = tRect.top;
+                    left = tRect.right + GAP$1;
+                    aTop = PAD;
+                    aLeft = -ARW;
+                    break;
+                case 'right-end':
+                    top = tRect.bottom - pRect.height;
+                    left = tRect.right + GAP$1;
+                    aTop = pRect.height - PAD;
+                    aLeft = -ARW;
+                    break;
+            }
+            // 뷰포트 클램핑
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            if (left < 8)
+                left = 8;
+            if (left + pRect.width > vw - 8)
+                left = vw - pRect.width - 8;
+            if (top < 8)
+                top = 8;
+            if (top + pRect.height > vh - 8)
+                top = vh - pRect.height - 8;
+            // 🔁 클램핑으로 박스 위치가 바뀌었을 수 있으니, 화살표를 박스 내부에서 다시 보정
+            const g = groupOf(position);
+            if (g === 'top' || g === 'bottom') {
+                // 트리거 중앙 X 를 툴팁 좌표계로 변환
+                const triggerCenterX = tRect.left + tRect.width / 2;
+                const localX = triggerCenterX - left - ARW; // 화살표 기준점을 고려
+                // 8px ~ (width-8px) 범위로 제한
+                aLeft = Math.min(pRect.width - PAD, Math.max(PAD, localX));
+                // aTop은 이미 위/아래에 고정(-ARW 또는 높이)
+            }
+            else {
+                const triggerCenterY = tRect.top + tRect.height / 2;
+                const localY = triggerCenterY - top - ARW;
+                aTop = Math.min(pRect.height - PAD, Math.max(PAD, localY));
+                // aLeft는 이미 좌/우에 고정(-ARW 또는 너비)
+            }
+            setStyle({
+                position: 'fixed',
+                top,
+                left,
+                maxWidth,
+                zIndex: 9999,
+                pointerEvents: 'none', // hover 유지
+            });
+            setArrowStyle({ position: 'absolute', top: aTop, left: aLeft });
+            setPlacementGroup(g);
+        }, [position, maxWidth]);
+        // 초기 페인트 전에 위치 확정
+        React.useLayoutEffect(() => {
+            if (visible || alwaysShow)
+                calculatePosition();
+        }, [visible, alwaysShow, calculatePosition]);
+        // 스크롤/리사이즈/크기변화 추적 (rAF 스로틀)
+        React.useEffect(() => {
+            if (!(visible || alwaysShow))
+                return;
+            const onMove = () => {
+                if (rafId.current != null)
+                    cancelAnimationFrame(rafId.current);
+                rafId.current = requestAnimationFrame(() => {
+                    calculatePosition();
+                    rafId.current = null;
+                });
+            };
+            window.addEventListener('scroll', onMove, { capture: true, passive: true });
+            window.addEventListener('resize', onMove, { passive: true });
+            let ro = null;
+            const ResizeObs = window.ResizeObserver;
+            if (ResizeObs) {
+                ro = new ResizeObs(() => onMove());
+                if (tooltipRef.current)
+                    ro.observe(tooltipRef.current);
+                if (triggerRef.current)
+                    ro.observe(triggerRef.current);
+            }
+            return () => {
+                window.removeEventListener('scroll', onMove, { capture: true });
+                window.removeEventListener('resize', onMove);
+                ro?.disconnect?.();
+                if (rafId.current != null)
+                    cancelAnimationFrame(rafId.current);
+            };
+        }, [visible, alwaysShow, calculatePosition]);
+        // show/hide
+        const show = React.useCallback(() => {
+            if (disabled)
+                return;
+            clearTimer();
+            timers.current.t = setTimeout(() => setVisible(true), Math.max(0, delay));
+        }, [disabled, delay]);
+        const hide = React.useCallback(() => {
+            if (disabled)
+                return;
+            clearTimer();
+            timers.current.t = setTimeout(() => setVisible(false), Math.max(0, hideDelay));
+        }, [disabled, hideDelay]);
+        React.useEffect(() => () => clearTimer(), []);
+        React.useEffect(() => { if (!disabled && alwaysShow)
+            setVisible(true);
+        else if (!alwaysShow)
+            setVisible(false); }, [alwaysShow, disabled]);
+        const onKeyDown = React.useCallback((e) => {
+            if (e.key === 'Escape') {
+                clearTimer();
+                setVisible(false);
+            }
+        }, []);
+        const classes = clsx('designbase-tooltip', `designbase-tooltip--${size}`, `designbase-tooltip--${variant}`, `designbase-tooltip--${position}`, { 'designbase-tooltip--visible': visible || alwaysShow, 'designbase-tooltip--disabled': disabled }, className);
+        const arrowClasses = clsx('designbase-tooltip__arrow', `designbase-tooltip__arrow--${position}`);
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { ref: triggerRef, className: "designbase-tooltip__trigger", onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, onKeyDown: onKeyDown, tabIndex: 0, "aria-describedby": visible || alwaysShow ? 'db-tooltip' : undefined, children: children }), (visible || alwaysShow) && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: classes, style: style, role: "tooltip", id: "db-tooltip", "aria-hidden": !(visible || alwaysShow), "data-placement-group": placementGroup, ...props, children: [jsxRuntime.jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && jsxRuntime.jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
+    };
+    Tooltip.displayName = 'Tooltip';
+
+    const Button = React.forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth = false, disabled = false, loading = false, iconOnly = false, startIcon: StartIcon, endIcon: EndIcon, tooltip, tooltipProps, className, children, onPress, type = 'button', ...props }, forwardedRef) => {
         const ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
         const { buttonProps } = $701a24aa0da5b062$export$ea18c227d4417cc3({
             ...props,
@@ -2259,7 +2467,12 @@
             }
             return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [StartIcon && (jsxRuntime.jsx(StartIcon, { size: iconSize, className: "designbase-button__start-icon", color: getIconColor() })), children, EndIcon && (jsxRuntime.jsx(EndIcon, { size: iconSize, className: "designbase-button__end-icon", color: getIconColor() }))] }));
         };
-        return (jsxRuntime.jsx("button", { ...buttonProps, ref: ref, className: classes, "aria-label": iconOnly ? props['aria-label'] || children : undefined, children: renderContent() }));
+        const buttonElement = (jsxRuntime.jsx("button", { ...buttonProps, ref: ref, className: classes, "aria-label": iconOnly ? props['aria-label'] || children : undefined, children: renderContent() }));
+        // 툴팁이 있는 경우 Tooltip으로 감싸기
+        if (tooltip) {
+            return (jsxRuntime.jsx(Tooltip, { content: tooltip, position: "top", size: "s", variant: "default", ...tooltipProps, children: buttonElement }));
+        }
+        return buttonElement;
     });
     Button.displayName = 'Button';
 
@@ -8514,7 +8727,7 @@
     };
     Pagination.displayName = 'Pagination';
 
-    const GAP$1 = 8; // trigger와 popover 사이 간격
+    const GAP = 8; // trigger와 popover 사이 간격
     const Popover = ({ content, children, title, position = 'top', size = 'm', variant = 'default', trigger = 'click', delay = 0, // 클릭/포커스는 즉시, 호버는 아래에서만 적용
     hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, className, ...props }) => {
         const [internalOpen, setInternalOpen] = React.useState(false);
@@ -8547,74 +8760,74 @@
             };
             switch (position) {
                 case 'top':
-                    top = tRect.top - pRect.height - GAP$1;
+                    top = tRect.top - pRect.height - GAP;
                     left = tRect.left + tRect.width / 2 - pRect.width / 2;
                     aTop = pRect.height;
                     aLeft = pRect.width / 2 - 4;
                     break;
                 case 'top-start':
-                    top = tRect.top - pRect.height - GAP$1;
+                    top = tRect.top - pRect.height - GAP;
                     left = tRect.left;
                     aTop = pRect.height;
                     aLeft = 12;
                     break;
                 case 'top-end':
-                    top = tRect.top - pRect.height - GAP$1;
+                    top = tRect.top - pRect.height - GAP;
                     left = tRect.right - pRect.width;
                     aTop = pRect.height;
                     aLeft = pRect.width - 12;
                     break;
                 case 'bottom':
-                    top = tRect.bottom + GAP$1;
+                    top = tRect.bottom + GAP;
                     left = tRect.left + tRect.width / 2 - pRect.width / 2;
                     aTop = -4;
                     aLeft = pRect.width / 2 - 4;
                     break;
                 case 'bottom-start':
-                    top = tRect.bottom + GAP$1;
+                    top = tRect.bottom + GAP;
                     left = tRect.left;
                     aTop = -4;
                     aLeft = 12;
                     break;
                 case 'bottom-end':
-                    top = tRect.bottom + GAP$1;
+                    top = tRect.bottom + GAP;
                     left = tRect.right - pRect.width;
                     aTop = -4;
                     aLeft = pRect.width - 12;
                     break;
                 case 'left':
                     top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                    left = tRect.left - pRect.width - GAP$1;
+                    left = tRect.left - pRect.width - GAP;
                     aTop = pRect.height / 2 - 4;
                     aLeft = pRect.width;
                     break;
                 case 'left-start':
                     top = tRect.top;
-                    left = tRect.left - pRect.width - GAP$1;
+                    left = tRect.left - pRect.width - GAP;
                     aTop = 12;
                     aLeft = pRect.width;
                     break;
                 case 'left-end':
                     top = tRect.bottom - pRect.height;
-                    left = tRect.left - pRect.width - GAP$1;
+                    left = tRect.left - pRect.width - GAP;
                     aTop = pRect.height - 12;
                     aLeft = pRect.width;
                     break;
                 case 'right':
                     top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                    left = tRect.right + GAP$1;
+                    left = tRect.right + GAP;
                     aTop = pRect.height / 2 - 4;
                     aLeft = -4;
                     break;
                 case 'right-start':
                     top = tRect.top;
-                    left = tRect.right + GAP$1;
+                    left = tRect.right + GAP;
                     aTop = 12;
                     aLeft = -4;
                     break;
                 case 'right-end':
                     top = tRect.bottom - pRect.height;
-                    left = tRect.right + GAP$1;
+                    left = tRect.right + GAP;
                     aTop = pRect.height - 12;
                     aLeft = -4;
                     break;
@@ -10687,214 +10900,6 @@
         return (jsxRuntime.jsx("div", { className: classes, children: jsxRuntime.jsxs("div", { className: "designbase-toolbar__content", children: [Object.entries(groupedItems).map(([groupName, groupItems], groupIndex) => (jsxRuntime.jsxs("div", { className: "designbase-toolbar__group", children: [groupItems.map(renderItem), groupIndex < Object.keys(groupedItems).length - 1 && (jsxRuntime.jsx("div", { className: "designbase-toolbar__group-separator" }))] }, groupName))), children && (jsxRuntime.jsx("div", { className: "designbase-toolbar__children", children: children }))] }) }));
     };
 
-    const GAP = 8; // 트리거와의 간격
-    const ARW = 6; // 화살표 반쪽 길이(삼각형 변 길이)
-    const PAD = 8; // 화살표가 박스 안에서 안전하게 보일 최소 여백
-    const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 240, showArrow = true, className, ...props }) => {
-        const [visible, setVisible] = React.useState(false);
-        const [style, setStyle] = React.useState({});
-        const [arrowStyle, setArrowStyle] = React.useState({});
-        const [placementGroup, setPlacementGroup] = React.useState('top');
-        const triggerRef = React.useRef(null);
-        const tooltipRef = React.useRef(null);
-        const timers = React.useRef({});
-        const rafId = React.useRef(null);
-        const clearTimer = () => {
-            if (timers.current.t) {
-                clearTimeout(timers.current.t);
-                timers.current.t = undefined;
-            }
-        };
-        const groupOf = (p) => p.startsWith('top') ? 'top' :
-            p.startsWith('bottom') ? 'bottom' :
-                p.startsWith('left') ? 'left' : 'right';
-        // 위치 계산 (⚠️ 뷰포트 클램핑 후 화살표도 보정)
-        const calculatePosition = React.useCallback(() => {
-            if (!triggerRef.current || !tooltipRef.current)
-                return;
-            const tRect = triggerRef.current.getBoundingClientRect();
-            const pRect = tooltipRef.current.getBoundingClientRect();
-            let top = 0, left = 0;
-            // 1차: 이상적(미보정) 화살표 좌표
-            let aTop = 0, aLeft = 0;
-            switch (position) {
-                case 'top':
-                    top = tRect.top - pRect.height - GAP;
-                    left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                    aTop = pRect.height;
-                    aLeft = pRect.width / 2 - ARW;
-                    break;
-                case 'top-start':
-                    top = tRect.top - pRect.height - GAP;
-                    left = tRect.left;
-                    aTop = pRect.height;
-                    aLeft = PAD;
-                    break;
-                case 'top-end':
-                    top = tRect.top - pRect.height - GAP;
-                    left = tRect.right - pRect.width;
-                    aTop = pRect.height;
-                    aLeft = pRect.width - PAD;
-                    break;
-                case 'bottom':
-                    top = tRect.bottom + GAP;
-                    left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                    aTop = -ARW;
-                    aLeft = pRect.width / 2 - ARW;
-                    break;
-                case 'bottom-start':
-                    top = tRect.bottom + GAP;
-                    left = tRect.left;
-                    aTop = -ARW;
-                    aLeft = PAD;
-                    break;
-                case 'bottom-end':
-                    top = tRect.bottom + GAP;
-                    left = tRect.right - pRect.width;
-                    aTop = -ARW;
-                    aLeft = pRect.width - PAD;
-                    break;
-                case 'left':
-                    top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                    left = tRect.left - pRect.width - GAP;
-                    aTop = pRect.height / 2 - ARW;
-                    aLeft = pRect.width;
-                    break;
-                case 'left-start':
-                    top = tRect.top;
-                    left = tRect.left - pRect.width - GAP;
-                    aTop = PAD;
-                    aLeft = pRect.width;
-                    break;
-                case 'left-end':
-                    top = tRect.bottom - pRect.height;
-                    left = tRect.left - pRect.width - GAP;
-                    aTop = pRect.height - PAD;
-                    aLeft = pRect.width;
-                    break;
-                case 'right':
-                    top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                    left = tRect.right + GAP;
-                    aTop = pRect.height / 2 - ARW;
-                    aLeft = -ARW;
-                    break;
-                case 'right-start':
-                    top = tRect.top;
-                    left = tRect.right + GAP;
-                    aTop = PAD;
-                    aLeft = -ARW;
-                    break;
-                case 'right-end':
-                    top = tRect.bottom - pRect.height;
-                    left = tRect.right + GAP;
-                    aTop = pRect.height - PAD;
-                    aLeft = -ARW;
-                    break;
-            }
-            // 뷰포트 클램핑
-            const vw = window.innerWidth;
-            const vh = window.innerHeight;
-            if (left < 8)
-                left = 8;
-            if (left + pRect.width > vw - 8)
-                left = vw - pRect.width - 8;
-            if (top < 8)
-                top = 8;
-            if (top + pRect.height > vh - 8)
-                top = vh - pRect.height - 8;
-            // 🔁 클램핑으로 박스 위치가 바뀌었을 수 있으니, 화살표를 박스 내부에서 다시 보정
-            const g = groupOf(position);
-            if (g === 'top' || g === 'bottom') {
-                // 트리거 중앙 X 를 툴팁 좌표계로 변환
-                const triggerCenterX = tRect.left + tRect.width / 2;
-                const localX = triggerCenterX - left - ARW; // 화살표 기준점을 고려
-                // 8px ~ (width-8px) 범위로 제한
-                aLeft = Math.min(pRect.width - PAD, Math.max(PAD, localX));
-                // aTop은 이미 위/아래에 고정(-ARW 또는 높이)
-            }
-            else {
-                const triggerCenterY = tRect.top + tRect.height / 2;
-                const localY = triggerCenterY - top - ARW;
-                aTop = Math.min(pRect.height - PAD, Math.max(PAD, localY));
-                // aLeft는 이미 좌/우에 고정(-ARW 또는 너비)
-            }
-            setStyle({
-                position: 'fixed',
-                top,
-                left,
-                maxWidth,
-                zIndex: 9999,
-                pointerEvents: 'none', // hover 유지
-            });
-            setArrowStyle({ position: 'absolute', top: aTop, left: aLeft });
-            setPlacementGroup(g);
-        }, [position, maxWidth]);
-        // 초기 페인트 전에 위치 확정
-        React.useLayoutEffect(() => {
-            if (visible || alwaysShow)
-                calculatePosition();
-        }, [visible, alwaysShow, calculatePosition]);
-        // 스크롤/리사이즈/크기변화 추적 (rAF 스로틀)
-        React.useEffect(() => {
-            if (!(visible || alwaysShow))
-                return;
-            const onMove = () => {
-                if (rafId.current != null)
-                    cancelAnimationFrame(rafId.current);
-                rafId.current = requestAnimationFrame(() => {
-                    calculatePosition();
-                    rafId.current = null;
-                });
-            };
-            window.addEventListener('scroll', onMove, { capture: true, passive: true });
-            window.addEventListener('resize', onMove, { passive: true });
-            let ro = null;
-            const ResizeObs = window.ResizeObserver;
-            if (ResizeObs) {
-                ro = new ResizeObs(() => onMove());
-                if (tooltipRef.current)
-                    ro.observe(tooltipRef.current);
-                if (triggerRef.current)
-                    ro.observe(triggerRef.current);
-            }
-            return () => {
-                window.removeEventListener('scroll', onMove, { capture: true });
-                window.removeEventListener('resize', onMove);
-                ro?.disconnect?.();
-                if (rafId.current != null)
-                    cancelAnimationFrame(rafId.current);
-            };
-        }, [visible, alwaysShow, calculatePosition]);
-        // show/hide
-        const show = React.useCallback(() => {
-            if (disabled)
-                return;
-            clearTimer();
-            timers.current.t = setTimeout(() => setVisible(true), Math.max(0, delay));
-        }, [disabled, delay]);
-        const hide = React.useCallback(() => {
-            if (disabled)
-                return;
-            clearTimer();
-            timers.current.t = setTimeout(() => setVisible(false), Math.max(0, hideDelay));
-        }, [disabled, hideDelay]);
-        React.useEffect(() => () => clearTimer(), []);
-        React.useEffect(() => { if (!disabled && alwaysShow)
-            setVisible(true);
-        else if (!alwaysShow)
-            setVisible(false); }, [alwaysShow, disabled]);
-        const onKeyDown = React.useCallback((e) => {
-            if (e.key === 'Escape') {
-                clearTimer();
-                setVisible(false);
-            }
-        }, []);
-        const classes = clsx('designbase-tooltip', `designbase-tooltip--${size}`, `designbase-tooltip--${variant}`, `designbase-tooltip--${position}`, { 'designbase-tooltip--visible': visible || alwaysShow, 'designbase-tooltip--disabled': disabled }, className);
-        const arrowClasses = clsx('designbase-tooltip__arrow', `designbase-tooltip__arrow--${position}`);
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { ref: triggerRef, className: "designbase-tooltip__trigger", onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, onKeyDown: onKeyDown, tabIndex: 0, "aria-describedby": visible || alwaysShow ? 'db-tooltip' : undefined, children: children }), (visible || alwaysShow) && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: classes, style: style, role: "tooltip", id: "db-tooltip", "aria-hidden": !(visible || alwaysShow), "data-placement-group": placementGroup, ...props, children: [jsxRuntime.jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && jsxRuntime.jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
-    };
-    Tooltip.displayName = 'Tooltip';
-
     const VideoPlayer = ({ src, poster, title, description, size = 'm', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableFullscreen = true, enableKeyboard = true, enableTouch = true, showProgress = true, showTime = true, showVolume = true, showSettings = false, playlist = [], currentIndex = 0, autoPause = true, playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2], defaultPlaybackRate = 1, qualities = [], defaultQuality = '', subtitles = [], defaultSubtitle = '', onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onFullscreenChange, onPlaylistChange, onPlaybackRateChange, onQualityChange, onSubtitleChange, onError, className, }) => {
         const videoRef = React.useRef(null);
         const containerRef = React.useRef(null);