@designbasekorea/ui 0.3.2 → 0.3.3

package/dist/index.umd.js

@@ -2195,9 +2195,13 @@
     };
     Spinner.displayName = 'Spinner';
 
-    const GAP$1 = 8; // 트리거와의 간격
-    const ARW = 6; // 화살표 반쪽 길이(삼각형 변 길이)
-    const PAD = 8; // 화살표가 박스 안에서 안전하게 보일 최소 여백
+    const GAP$1 = 8; // 트리거와의 간격(박스)
+    const ARW = 6; // border 삼각형 사이즈(너 SCSS에서 6px)
+    const PAD = 8; // start/end 여백
+    // ✅ 네가 말한 “-10이 되어야 제대로”를 상수로 고정
+    const OUT = -10; // bottom일 때 top, right일 때 left
+    // ✅ top/left는 대칭적으로 “박스에 살짝 겹치게” 만들어 seam 제거
+    const INSET = 2; // (pRect.height - 2), (pRect.width - 2)
     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({});
@@ -2216,115 +2220,110 @@
         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;
+                    aTop = pRect.height - INSET; // ✅ top은 박스 아래쪽에 살짝 겹침
                     aLeft = pRect.width / 2 - ARW;
                     break;
                 case 'top-start':
                     top = tRect.top - pRect.height - GAP$1;
                     left = tRect.left;
-                    aTop = pRect.height;
+                    aTop = pRect.height - INSET;
                     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;
+                    aTop = pRect.height - INSET;
+                    aLeft = pRect.width - PAD - ARW;
                     break;
                 case 'bottom':
                     top = tRect.bottom + GAP$1;
                     left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                    aTop = -ARW;
+                    aTop = OUT; // ✅ 네 요구: -10
                     aLeft = pRect.width / 2 - ARW;
                     break;
                 case 'bottom-start':
                     top = tRect.bottom + GAP$1;
                     left = tRect.left;
-                    aTop = -ARW;
+                    aTop = OUT; // ✅ -10
                     aLeft = PAD;
                     break;
                 case 'bottom-end':
                     top = tRect.bottom + GAP$1;
                     left = tRect.right - pRect.width;
-                    aTop = -ARW;
-                    aLeft = pRect.width - PAD;
+                    aTop = OUT; // ✅ -10
+                    aLeft = pRect.width - PAD - ARW;
                     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;
+                    aLeft = pRect.width - INSET; // ✅ left는 박스 오른쪽에 살짝 겹침
                     break;
                 case 'left-start':
                     top = tRect.top;
                     left = tRect.left - pRect.width - GAP$1;
                     aTop = PAD;
-                    aLeft = pRect.width;
+                    aLeft = pRect.width - INSET;
                     break;
                 case 'left-end':
                     top = tRect.bottom - pRect.height;
                     left = tRect.left - pRect.width - GAP$1;
-                    aTop = pRect.height - PAD;
-                    aLeft = pRect.width;
+                    aTop = pRect.height - PAD - ARW;
+                    aLeft = pRect.width - INSET;
                     break;
                 case 'right':
                     top = tRect.top + tRect.height / 2 - pRect.height / 2;
                     left = tRect.right + GAP$1;
                     aTop = pRect.height / 2 - ARW;
-                    aLeft = -ARW;
+                    aLeft = OUT; // ✅ 네 요구: left:-10
                     break;
                 case 'right-start':
                     top = tRect.top;
                     left = tRect.right + GAP$1;
                     aTop = PAD;
-                    aLeft = -ARW;
+                    aLeft = OUT; // ✅ -10
                     break;
                 case 'right-end':
                     top = tRect.bottom - pRect.height;
                     left = tRect.right + GAP$1;
-                    aTop = pRect.height - PAD;
-                    aLeft = -ARW;
+                    aTop = pRect.height - PAD - ARW;
+                    aLeft = OUT; // ✅ -10
                     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 EDGE = 8;
+            if (left < EDGE)
+                left = EDGE;
+            if (left + pRect.width > vw - EDGE)
+                left = vw - pRect.width - EDGE;
+            if (top < EDGE)
+                top = EDGE;
+            if (top + pRect.height > vh - EDGE)
+                top = vh - pRect.height - EDGE;
+            // 클램핑으로 박스가 이동했을 때, 화살표가 트리거를 향하도록 보정
             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 또는 높이)
+                const localX = triggerCenterX - left - ARW;
+                aLeft = Math.min(pRect.width - PAD - ARW, Math.max(PAD, localX));
             }
             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 또는 너비)
+                aTop = Math.min(pRect.height - PAD - ARW, Math.max(PAD, localY));
             }
             setStyle({
                 position: 'fixed',
@@ -2332,17 +2331,15 @@
                 left,
                 maxWidth,
                 zIndex: 9999,
-                pointerEvents: 'none', // hover 유지
+                pointerEvents: 'none',
             });
             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;
@@ -2373,7 +2370,6 @@
                     cancelAnimationFrame(rafId.current);
             };
         }, [visible, alwaysShow, calculatePosition]);
-        // show/hide
         const show = React.useCallback(() => {
             if (disabled)
                 return;
@@ -2387,10 +2383,12 @@
             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]);
+        React.useEffect(() => {
+            if (!disabled && alwaysShow)
+                setVisible(true);
+            else if (!alwaysShow)
+                setVisible(false);
+        }, [alwaysShow, disabled]);
         const onKeyDown = React.useCallback((e) => {
             if (e.key === 'Escape') {
                 clearTimer();
@@ -4918,23 +4916,7 @@
                 onError?.();
             }
         };
-        // aspect ratio 계산
-        const getAspectRatioStyle = () => {
-            if (ratio === 'auto')
-                return {};
-            const ratios = {
-                '1:1': '100%',
-                '16:9': '56.25%',
-                '4:3': '75%',
-                '3:2': '66.67%',
-                '3:4': '133.33%',
-                '2:1': '50%',
-                'auto': 'auto',
-            };
-            return {
-                paddingBottom: ratios[ratio],
-            };
-        };
+        // aspect ratio는 CSS 클래스로 처리되므로 인라인 스타일 불필요
         // 둥근 모서리 클래스 계산
         const getRoundedClass = () => {
             if (rounded === true)
@@ -4961,7 +4943,6 @@
             height: fullHeight ? '100%' : height,
             maxWidth,
             maxHeight,
-            ...getAspectRatioStyle(),
         };
         const getRatioClass = () => {
             if (ratio === 'auto')
@@ -6318,7 +6299,7 @@
             }
             const hasSubMenu = item.subItems && item.subItems.length > 0;
             const isSubMenuOpen = activeSubMenu === item.id;
-            return (jsxRuntime.jsxs("div", { className: "designbase-context-menu__item-wrapper", children: [jsxRuntime.jsx(MenuItem, { id: item.id, label: item.label || '', icon: item.icon, onClick: () => handleItemClick(item), disabled: item.disabled, variant: item.variant, className: item.className }), hasSubMenu && (jsxRuntime.jsx("div", { ref: (el) => (subMenuRefs.current[item.id] = el), className: clsx('designbase-context-menu__submenu', {
+            return (jsxRuntime.jsxs("div", { className: "designbase-context-menu__item-wrapper", children: [jsxRuntime.jsx(MenuItem, { id: item.id, label: item.label || '', icon: item.icon, onClick: () => handleItemClick(item), disabled: item.disabled, variant: item.variant, className: item.className }), hasSubMenu && (jsxRuntime.jsx("div", { ref: (el) => { subMenuRefs.current[item.id] = el; }, className: clsx('designbase-context-menu__submenu', {
                             'designbase-context-menu__submenu--open': isSubMenuOpen,
                         }), onMouseEnter: () => setActiveSubMenu(item.id), onMouseLeave: handleSubMenuClose, children: item.subItems.map((subItem, subIndex) => renderMenuItem(subItem, subIndex)) }))] }, item.id));
         }, [activeSubMenu, handleItemClick, handleSubMenuOpen, handleSubMenuClose]);
@@ -8843,7 +8824,7 @@
             'designbase-masonry--infinite-scroll': infiniteScroll,
         }, className);
         const distributedImages = distributeImages();
-        const renderImage = (image, index, columnIndex) => (jsxRuntime.jsxs("div", { ref: (el) => (imageRefs.current[index] = el), className: clsx('designbase-masonry__item', {
+        const renderImage = (image, index, columnIndex) => (jsxRuntime.jsxs("div", { ref: (el) => { imageRefs.current[index] = el; }, className: clsx('designbase-masonry__item', {
                 'designbase-masonry__item--visible': visibleImages.includes(index),
             }), style: {
                 animationDelay: `${index * animationDelay}ms`,
@@ -9556,15 +9537,16 @@
         const classes = clsx('designbase-popover', `designbase-popover--${size}`, `designbase-popover--${variant}`, `designbase-popover--${position}`, { 'designbase-popover--visible': isOpen, 'designbase-popover--disabled': disabled }, className);
         const arrowClasses = clsx('designbase-popover__arrow', `designbase-popover__arrow--${position}`);
         // 자식에 트리거 이벤트 주입
+        const childProps = children.props;
         const enhancedChildren = React.cloneElement(children, {
             ref: triggerRef,
-            onClick: (e) => { children.props.onClick?.(e); handleClick(e); },
-            onMouseEnter: (e) => { children.props.onMouseEnter?.(e); handleMouseEnter(); },
-            onMouseLeave: (e) => { children.props.onMouseLeave?.(e); handleMouseLeave(); },
-            onFocus: (e) => { children.props.onFocus?.(e); handleFocus(); },
-            onBlur: (e) => { children.props.onBlur?.(e); handleBlur(); },
-            onKeyDown: (e) => { children.props.onKeyDown?.(e); handleKeyDown(e); },
-            tabIndex: children.props.tabIndex ?? 0,
+            onClick: (e) => { childProps.onClick?.(e); handleClick(e); },
+            onMouseEnter: (e) => { childProps.onMouseEnter?.(e); handleMouseEnter(); },
+            onMouseLeave: (e) => { childProps.onMouseLeave?.(e); handleMouseLeave(); },
+            onFocus: (e) => { childProps.onFocus?.(e); handleFocus(); },
+            onBlur: (e) => { childProps.onBlur?.(e); handleBlur(); },
+            onKeyDown: (e) => { childProps.onKeyDown?.(e); handleKeyDown(e); },
+            tabIndex: childProps.tabIndex ?? 0,
             'aria-expanded': isOpen,
             'aria-haspopup': 'dialog',
         });
@@ -9615,16 +9597,20 @@
                 const status = getStepStatus(index, item.status);
                 const isLast = index === items.length - 1;
                 const isClickable = clickable && !disabled && !item.disabled;
+                // 연결선의 상태 결정: 현재 단계가 완료되었으면 completed로 표시
+                const prevStatus = index > 0 ? getStepStatus(index - 1, items[index - 1].status) : 'pending';
+                const connectorStatus = prevStatus === 'completed' ? 'completed' : status;
                 const stepClasses = clsx('designbase-progress-step__item', `designbase-progress-step__item--${status}`, {
                     'designbase-progress-step__item--clickable': isClickable,
                     'designbase-progress-step__item--disabled': item.disabled,
                 });
-                return (jsxRuntime.jsxs("div", { className: stepClasses, children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__indicator-container", children: [jsxRuntime.jsx("div", { className: "designbase-progress-step__indicator", onClick: () => handleStepClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 단계로 이동`, onKeyDown: (e) => {
+                const connectorClasses = clsx('designbase-progress-step__connector', `designbase-progress-step__connector--${connectorStatus}`);
+                return (jsxRuntime.jsxs("div", { className: stepClasses, children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__indicator-container", children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__indicator", onClick: () => handleStepClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 단계로 이동`, onKeyDown: (e) => {
                                         if (e.key === 'Enter' || e.key === ' ') {
                                             e.preventDefault();
                                             handleStepClick(item, index);
                                         }
-                                    }, children: item.icon ? (jsxRuntime.jsx("div", { className: "designbase-progress-step__icon", children: item.icon })) : (jsxRuntime.jsx("span", { className: "designbase-progress-step__number", children: index + 1 })) }), !isLast && (jsxRuntime.jsx("div", { className: "designbase-progress-step__connector" }))] }), jsxRuntime.jsxs("div", { className: "designbase-progress-step__content", children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__header", children: [jsxRuntime.jsx("h3", { className: "designbase-progress-step__title", children: item.title }), item.timestamp && (jsxRuntime.jsx("span", { className: "designbase-progress-step__timestamp", children: item.timestamp }))] }), item.description && (jsxRuntime.jsx("p", { className: "designbase-progress-step__description", children: item.description }))] })] }, item.id));
+                                    }, children: [status === 'active' && (jsxRuntime.jsx("div", { className: "designbase-progress-step__pulse" })), item.icon ? (jsxRuntime.jsx("div", { className: "designbase-progress-step__icon", children: item.icon })) : (jsxRuntime.jsx("span", { className: "designbase-progress-step__number", children: index + 1 }))] }), !isLast && (jsxRuntime.jsx("div", { className: connectorClasses }))] }), jsxRuntime.jsxs("div", { className: "designbase-progress-step__content", children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__header", children: [jsxRuntime.jsx("h3", { className: "designbase-progress-step__title", children: item.title }), item.timestamp && (jsxRuntime.jsx("span", { className: "designbase-progress-step__timestamp", children: item.timestamp }))] }), item.description && (jsxRuntime.jsx("p", { className: "designbase-progress-step__description", children: item.description }))] })] }, item.id));
             }) }));
     };
 
@@ -11384,7 +11370,7 @@
     };
     Tabs.displayName = 'Tabs';
 
-    const Timeline = ({ items, position = 'alternate', variant = 'default', size = 'm', color = 'primary', clickable = false, fullWidth = false, disabled = false, className, style, onItemClick, }) => {
+    const Timeline = ({ items, type = 'alternate', variant = 'default', size = 'm', color = 'primary', clickable = false, fullWidth = false, disabled = false, className, style, onItemClick, }) => {
         const handleItemClick = (item, index) => {
             if (disabled || item.disabled || !clickable)
                 return;
@@ -11392,20 +11378,13 @@
             onItemClick?.(item, index);
         };
         const getItemPosition = (index) => {
-            switch (position) {
-                case 'left':
-                    return 'left';
-                case 'right':
-                    return 'right';
-                case 'alternate':
-                    return index % 2 === 0 ? 'left' : 'right';
-                case 'reverse-alternate':
-                    return index % 2 === 0 ? 'right' : 'left';
-                default:
-                    return 'left';
+            if (type === 'left') {
+                return 'left';
             }
+            // alternate 타입: 짝수는 왼쪽, 홀수는 오른쪽
+            return index % 2 === 0 ? 'left' : 'right';
         };
-        const classes = clsx('designbase-timeline', `designbase-timeline--${position}`, `designbase-timeline--${variant}`, `designbase-timeline--${size}`, {
+        const classes = clsx('designbase-timeline', `designbase-timeline--${type}`, `designbase-timeline--${variant}`, `designbase-timeline--${size}`, {
             'designbase-timeline--clickable': clickable,
             'designbase-timeline--full-width': fullWidth,
             'designbase-timeline--disabled': disabled,
@@ -11420,30 +11399,29 @@
                         'designbase-timeline__item--disabled': item.disabled,
                     });
                     const contentClasses = clsx('designbase-timeline__content', `designbase-timeline__content--${itemPosition}`);
-                    const separatorClasses = clsx('designbase-timeline__separator', `designbase-timeline__separator--${itemPosition}`);
                     const dotClasses = clsx('designbase-timeline__dot', `designbase-timeline__dot--${itemColor}`, `designbase-timeline__dot--${variant}`, {
                         'designbase-timeline__dot--clickable': isClickable,
                     });
-                    return (jsxRuntime.jsxs("div", { className: itemClasses, children: [jsxRuntime.jsx("div", { className: contentClasses, children: jsxRuntime.jsxs("div", { className: "designbase-timeline__content-inner", onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 아이템`, onKeyDown: (e) => {
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            e.preventDefault();
-                                            handleItemClick(item, index);
-                                        }
-                                    }, children: [item.timestamp && (jsxRuntime.jsx("div", { className: "designbase-timeline__timestamp", children: item.timestamp })), jsxRuntime.jsx("h3", { className: "designbase-timeline__title", children: item.title }), item.description && (jsxRuntime.jsx("p", { className: "designbase-timeline__description", children: item.description }))] }) }), jsxRuntime.jsxs("div", { className: separatorClasses, children: [jsxRuntime.jsx("div", { className: dotClasses, onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 점`, onKeyDown: (e) => {
+                    return (jsxRuntime.jsxs("div", { className: itemClasses, children: [jsxRuntime.jsxs("div", { className: "designbase-timeline__indicator-container", children: [jsxRuntime.jsx("div", { className: dotClasses, onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 점`, onKeyDown: (e) => {
                                             if (e.key === 'Enter' || e.key === ' ') {
                                                 e.preventDefault();
                                                 handleItemClick(item, index);
                                             }
-                                        }, children: item.icon ? (jsxRuntime.jsx("div", { className: "designbase-timeline__icon", children: item.icon })) : (jsxRuntime.jsx("div", { className: "designbase-timeline__dot-inner" })) }), !isLast && (jsxRuntime.jsx("div", { className: "designbase-timeline__connector" }))] })] }, item.id));
+                                        }, children: item.icon ? (jsxRuntime.jsx("div", { className: "designbase-timeline__icon", children: item.icon })) : (jsxRuntime.jsx("span", { className: "designbase-timeline__number", children: index + 1 })) }), !isLast && (jsxRuntime.jsx("div", { className: "designbase-timeline__connector" }))] }), jsxRuntime.jsx("div", { className: contentClasses, children: jsxRuntime.jsxs("div", { className: "designbase-timeline__content-inner", onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 아이템`, onKeyDown: (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            handleItemClick(item, index);
+                                        }
+                                    }, children: [item.timestamp && (jsxRuntime.jsx("div", { className: "designbase-timeline__timestamp", children: item.timestamp })), jsxRuntime.jsx("h3", { className: "designbase-timeline__title", children: item.title }), item.description && (jsxRuntime.jsx("p", { className: "designbase-timeline__description", children: item.description }))] }) })] }, item.id));
                 }) }) }));
     };
 
-    const Toast = ({ id, status = 'info', title, description, icon: Icon, duration = 5000, showProgress = false, showCloseButton = true, position = 'top-right', onClose, className, }) => {
+    const Toast = ({ id, status = 'info', title, description, icon: Icon, duration = 5000, showProgress = false, showCloseButton = true, onClose, className, }) => {
         const [isVisible, setIsVisible] = React.useState(false);
         const [progress, setProgress] = React.useState(100);
         const progressRef = React.useRef(null);
-        const timeoutRef = React.useRef();
-        const progressIntervalRef = React.useRef();
+        const timeoutRef = React.useRef(undefined);
+        const progressIntervalRef = React.useRef(undefined);
         // 토스트 표시 애니메이션
         React.useEffect(() => {
             const timer = setTimeout(() => setIsVisible(true), 50);
@@ -11489,7 +11467,7 @@
                 clearInterval(progressIntervalRef.current);
             handleClose();
         };
-        const classes = clsx('designbase-toast', `designbase-toast--${status}`, `designbase-toast--${position}`, {
+        const classes = clsx('designbase-toast', `designbase-toast--${status}`, {
             'designbase-toast--visible': isVisible,
             'designbase-toast--with-icon': Icon,
             'designbase-toast--with-description': description,
@@ -11551,7 +11529,7 @@
         }
         return context;
     };
-    const ToastProvider = ({ children }) => {
+    const ToastProvider = ({ children, position = 'top-right' }) => {
         const [toasts, setToasts] = React.useState([]);
         const addToast = React.useCallback((toast) => {
             const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
@@ -11568,7 +11546,7 @@
         const removeToast = React.useCallback((id) => {
             setToasts(prev => prev.filter(toast => toast.id !== id));
         }, []);
-        return (jsxRuntime.jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, jsxRuntime.jsx(ToastContainer, { toasts: toasts, onRemoveToast: removeToast })] }));
+        return (jsxRuntime.jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, jsxRuntime.jsx(ToastContainer, { toasts: toasts, position: position, onRemoveToast: removeToast })] }));
     };
 
     const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, size = 'm', children, className, onChange, ...props }, forwardedRef) => {