no-frills-ui 0.0.14-rc.2 → 0.0.14-rc.4

package/dist/index.js

@@ -252,23 +252,23 @@ const getThemeValue = (key)=>{
 };
 
 const Ellipsis = /*#__PURE__*/ styled("span", {
-    target: "eot8j4m0",
+    target: "e10k0igo0",
     label: "Ellipsis"
 })("white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;");
 const Header$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m1",
+    target: "e10k0igo1",
     label: "Header"
 })("padding:10px 15px;line-height:26px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";font-size:16px;font-weight:bold;");
 const Body$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m2",
+    target: "e10k0igo2",
     label: "Body"
-})("padding:0 15px;margin:20px 0;flex:1;overflow:visible;");
+})("padding:0 15px;margin:20px 0;flex:1;overflow:visible;display:flow-root;");
 const Footer$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m3",
+    target: "e10k0igo3",
     label: "Footer"
 })("padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:flex;justify-content:flex-end;");
 const ErrorContainer$7 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m4",
+    target: "e10k0igo4",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;");
 
@@ -310,9 +310,9 @@ const BadgeSpan = /*#__PURE__*/ styled("span", {
 const Badge = /*#__PURE__*/ React.forwardRef(BadgeComponent);
 
 const StyledCard = /*#__PURE__*/ styled("div", {
-    target: "e9lfq9w0",
+    target: "e7s3yg90",
     label: "StyledCard"
-})("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:auto;position:relative;");
+})("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:visible;display:flow-root;position:relative;");
 /**
  * Card Component
  * @param props - Component props
@@ -326,35 +326,35 @@ const StyledCard = /*#__PURE__*/ styled("div", {
 const Card = /*#__PURE__*/ React.forwardRef(CardComponent);
 
 const Step$1 = /*#__PURE__*/ styled(Card, {
-    target: "e1l2mhfb0",
+    target: "e1vu5oed0",
     label: "Step"
-})("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
+})("transition:all 0.6s ease;overflow:visible;display:flow-root;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "e1l2mhfb1",
+    target: "e1vu5oed1",
     label: "StepHeader"
 })("padding:20px 15px;display:flex;justify-content:space-between;background:none;border:none;border-radius:10px;width:100%;font-size:inherit;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus-visible{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}& input{appearance:none;margin:0;}", (props)=>props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`, " ", (props)=>props.open && `border-radius: 10px 10px 0 0;`, " ", (props)=>props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`);
 const HeaderContainer = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb2",
+    target: "e1vu5oed2",
     label: "HeaderContainer"
 })("display:flex;align-items:center;min-width:40px;& svg{vertical-align:top;margin-right:10px;fill:", (props)=>props.open ? getThemeValue(THEME_NAME.PRIMARY) : props.completed ? getThemeValue(THEME_NAME.SUCCESS) : getThemeValue(THEME_NAME.LIGHT_GREY), ";transform:", (props)=>props.open ? 'scale(0.8)' : 'scale(0.6)', ";transition:all 0.3s ease;min-width:24px;}");
 const ExpandContainer = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb3",
+    target: "e1vu5oed3",
     label: "ExpandContainer"
 })("display:flex;align-items:center;& svg{vertical-align:top;margin-right:10px;transition:all 0.6s ease;fill:currentColor;}", (props)=>props.open ? `& svg { transform: rotate(180deg); }` : '');
 const StepBody = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb4",
+    target: "e1vu5oed4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
 const AccordionBadge = /*#__PURE__*/ styled(Badge, {
-    target: "e1l2mhfb5",
+    target: "e1vu5oed5",
     label: "AccordionBadge"
 })("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb6",
+    target: "e1vu5oed6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb7",
+    target: "e1vu5oed7",
     label: "AccordionStepFooter"
 })("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
 /**
@@ -384,6 +384,7 @@ const AccordionStepFooter = /*#__PURE__*/ styled("div", {
         completed: completed,
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(StepHeader, {
+                type: "button",
                 open: open,
                 disabled: disabled,
                 onClick: onStepClick,
@@ -522,12 +523,12 @@ const StyledIconButton = /*#__PURE__*/ styled("button", {
 }
 const IconButton = /*#__PURE__*/ React.forwardRef(IconButtonComponent);
 
-const Container$a = /*#__PURE__*/ styled("span", {
-    target: "eg8hsap0",
+const Container$b = /*#__PURE__*/ styled("span", {
+    target: "e3nd8sw0",
     label: "Container"
 })("padding:5px;padding-left:15px;border-radius:16px;background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:inline-flex;margin:5px;line-height:20px;align-items:center;");
 const Button$1 = /*#__PURE__*/ styled("button", {
-    target: "eg8hsap1",
+    target: "e3nd8sw1",
     label: "Button"
 })("color:", getThemeValue(THEME_NAME.BACKGROUND), ";background-color:", getThemeValue(THEME_NAME.DISABLED), ";border-radius:50%;border:none;padding:4px;display:inline-flex;margin-left:5px;&:focus-within{outline:4px solid ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}");
 /**
@@ -547,13 +548,14 @@ const Button$1 = /*#__PURE__*/ styled("button", {
             e.stopPropagation();
         }
     };
-    return /*#__PURE__*/ jsxRuntime.jsxs(Container$a, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(Container$b, {
         ...rest,
         ref: ref,
         onKeyUp: keyUpHandler,
         children: [
             label,
             /*#__PURE__*/ jsxRuntime.jsx(Button$1, {
+                type: "button",
                 onClick: onCloseClick,
                 onKeyDown: buttonKeyDownHandler,
                 "aria-label": closeButtonAriaLabel ?? `Remove ${label}`,
@@ -582,7 +584,7 @@ const DragContext = React.createContext(null);
     target: "ertl9d71",
     label: "DragKnob"
 })("padding-top:8px;cursor:move;touch-action:none;color:", getThemeValue(THEME_NAME.DISABLED), ";");
-/** Container for the children */ const Container$9 = /*#__PURE__*/ styled("div", {
+/** Container for the children */ const Container$a = /*#__PURE__*/ styled("div", {
     target: "ertl9d72",
     label: "Container"
 })("flex:1;");
@@ -824,14 +826,14 @@ const DragContext = React.createContext(null);
                 tabIndex: -1,
                 children: /*#__PURE__*/ jsxRuntime.jsx(CheckCircle, {})
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(Container$9, {
+            /*#__PURE__*/ jsxRuntime.jsx(Container$a, {
                 children: children
             })
         ]
     });
 }
 
-/** Container Component */ const Container$8 = /*#__PURE__*/ styled("div", {
+/** Container Component */ const Container$9 = /*#__PURE__*/ styled("div", {
     target: "e18d6tqk0",
     label: "Container"
 })("flex:1;display:flex;position:relative;flex-wrap:wrap;flex-direction:", (props)=>props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column', ";");
@@ -934,7 +936,7 @@ const DragContext = React.createContext(null);
                     setDragOver,
                     i18n
                 },
-                children: /*#__PURE__*/ jsxRuntime.jsx(Container$8, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Container$9, {
                     ...rest,
                     ref: ref,
                     orientation: orientation,
@@ -961,11 +963,16 @@ const DragContext = React.createContext(null);
 }
 const DragAndDrop = /*#__PURE__*/ React.forwardRef(DragAndDropComponent);
 
+// Container for the ChipInput
+const Container$8 = /*#__PURE__*/ styled("div", {
+    target: "e7l19410",
+    label: "Container"
+})("margin:10px 5px;");
 // Label component for the ChipInput
 const Label$6 = /*#__PURE__*/ styled("label", {
-    target: "e1pr4bi70",
+    target: "e7l19411",
     label: "Label"
-})("display:inline-flex;flex-direction:column;flex:1;position:relative;margin:10px 5px;color:inherit;padding:0 8px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";width:", (props)=>typeof props.width === 'number' ? `${props.width}px` : props.width || '250px', ";max-width:100%;&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
+})("display:inline-flex;flex-direction:column;flex:1;position:relative;color:inherit;padding:0 8px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";width:", (props)=>typeof props.width === 'number' ? `${props.width}px` : props.width || '250px', ";max-width:100%;&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
         &:has(:invalid) {
             border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
@@ -993,12 +1000,12 @@ const Label$6 = /*#__PURE__*/ styled("label", {
     ` : '');
 // Error message container
 const ErrorContainer$6 = /*#__PURE__*/ styled("div", {
-    target: "e1pr4bi71",
+    target: "e7l19412",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 // Visually hidden but accessible to screen readers
 const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
-    target: "e1pr4bi72",
+    target: "e7l19413",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;& li{list-style:none;}");
 /**
@@ -1014,7 +1021,7 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
  * />
  * ```
  */ function ChipInputComponent(props, ref) {
-    const { value: propValue = [], closeButtonAriaLabel = `Remove {:label}`, addedAnnouncementTemplate = '{:label} was added', removedAnnouncementTemplate = '{:label} was removed' } = props;
+    const { value: propValue = [], onChange: onChangeCallback, label, errorText, closeButtonAriaLabel = `Remove {:label}`, addedAnnouncementTemplate = '{:label} was added', removedAnnouncementTemplate = '{:label} was removed', width, ...inputProps } = props;
     const [text, setText] = React.useState('');
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(propValue || []);
@@ -1045,10 +1052,10 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     ]);
     React.useEffect(()=>{
         if (InputRef.current) {
-            InputRef.current.setCustomValidity(props.errorText || '');
+            InputRef.current.setCustomValidity(errorText || '');
         }
     }, [
-        props.errorText
+        errorText
     ]);
     /**
      * Update the chip values and notify changes.
@@ -1056,15 +1063,15 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
      */ const updateValue = (newValue)=>{
         const deduped = Array.from(new Set(newValue));
         setValue(deduped);
-        props.onChange?.(deduped);
+        onChangeCallback?.(deduped);
     };
     /**
      * Marks the input as touched on focus.
      * @param e React focus event
      */ const handleFocus = (e)=>{
         setTouched(true);
-        if (props.onFocus) {
-            props.onFocus(e);
+        if (inputProps.onFocus) {
+            inputProps.onFocus(e);
         }
     };
     /**
@@ -1076,15 +1083,28 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     /**
      * Adds a new chip on Enter key press.
      * @param e React keyboard event
-     */ const handleKeyUp = (e)=>{
-        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {
-            const newValue = [
-                ...value,
-                text.trim()
-            ];
-            updateValue(newValue);
-            setText('');
-            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim()));
+     */ const handleKeyDown = (e)=>{
+        if (e.key === 'Enter') {
+            // Check validity against HTML5 constraints only (ignore custom validity from errorText)
+            let isValid;
+            if (InputRef.current) {
+                InputRef.current.setCustomValidity('');
+                isValid = InputRef.current.checkValidity();
+                InputRef.current.setCustomValidity(errorText || '');
+            }
+            // Only prevent form submission if we have valid text to add as a chip
+            if (text.trim() !== '' && isValid) {
+                e.preventDefault();
+                e.stopPropagation();
+                const newValue = [
+                    ...value,
+                    text.trim()
+                ];
+                updateValue(newValue);
+                setText('');
+                setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim()));
+            }
+        // Otherwise, allow form submission to proceed
         }
     };
     /**
@@ -1114,42 +1134,46 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     // Render the component
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(Label$6, {
-                text: text,
-                touched: touched,
-                errorText: props.errorText,
-                required: props.required,
-                width: props.width,
+            /*#__PURE__*/ jsxRuntime.jsxs(Container$8, {
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("input", {
-                        ...props,
-                        ref: InputRef,
-                        value: text,
-                        onChange: handleChange,
-                        onFocus: handleFocus,
-                        onKeyUp: handleKeyUp,
-                        required: props.required && value.length === 0,
-                        "aria-required": props.required,
-                        "aria-invalid": !!props.errorText,
-                        "aria-describedby": props.errorText ? errorId : undefined
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        children: value?.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(DragAndDrop, {
-                            orientation: ORIENTATION.HORIZONTAL,
-                            onDrop: onDrop,
-                            children: value.map((chip)=>/*#__PURE__*/ jsxRuntime.jsx(Chip, {
-                                    label: chip,
-                                    onCloseClick: ()=>removeChip(chip),
-                                    closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
-                                }, chip))
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        children: props.label
+                    /*#__PURE__*/ jsxRuntime.jsxs(Label$6, {
+                        text: text,
+                        touched: touched,
+                        errorText: errorText,
+                        required: inputProps.required,
+                        width: width,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("input", {
+                                ...inputProps,
+                                ref: InputRef,
+                                value: text,
+                                onChange: handleChange,
+                                onFocus: handleFocus,
+                                onKeyDown: handleKeyDown,
+                                required: inputProps.required && value.length === 0,
+                                "aria-required": inputProps.required,
+                                "aria-invalid": !!errorText,
+                                "aria-describedby": errorText ? errorId : undefined
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                children: value?.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(DragAndDrop, {
+                                    orientation: ORIENTATION.HORIZONTAL,
+                                    onDrop: onDrop,
+                                    children: value.map((chip)=>/*#__PURE__*/ jsxRuntime.jsx(Chip, {
+                                            label: chip,
+                                            onCloseClick: ()=>removeChip(chip),
+                                            closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
+                                        }, chip))
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                children: label
+                            })
+                        ]
                     }),
-                    props.errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$6, {
+                    errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$6, {
                         id: errorId,
-                        children: props.errorText
+                        children: errorText
                     })
                 ]
             }),
@@ -3161,9 +3185,9 @@ Drawer.defaultProps = {
 };
 
 const Container$3 = /*#__PURE__*/ styled("div", {
-    target: "e1m58trk0",
+    target: "e1t79jfh0",
     label: "Container"
-})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-of-type,& > label:first-of-type input,& > label:first-of-type select,& > *:first-of-type label,& > *:first-of-type input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
+})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:nth-child(1 of:not(style)),& > label:nth-child(1 of:not(style)) input,& > label:nth-child(1 of:not(style)) select,& > *:nth-child(1 of:not(style)) label,& > *:nth-child(1 of:not(style)) input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
         border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > button, & > label {
@@ -3171,7 +3195,7 @@ const Container$3 = /*#__PURE__*/ styled("div", {
         }
     ` : '');
 const ErrorContainer = /*#__PURE__*/ styled("div", {
-    target: "e1m58trk1",
+    target: "e1t79jfh1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
 /**
@@ -3560,6 +3584,7 @@ const DEFAULT_DURATION$1 = 5000;
                                     ]
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(CloseButton, {
+                                    type: "button",
                                     onClick: this.closeClickHandler(id),
                                     "aria-label": closeButtonAriaLabel || 'Close notification',
                                     tabIndex: 0,
@@ -3782,11 +3807,15 @@ const DEFAULT_DURATION$1 = 5000;
      */ this.destroy = (position)=>{
             const container = this.containers.get(position);
             if (container) {
-                container.root.unmount();
-                if (document.body.contains(container.div)) {
-                    document.body.removeChild(container.div);
-                }
-                this.containers.delete(position);
+                // Defer unmount to avoid trying to synchronously unmount a root
+                // while React is already rendering which can cause a race.
+                setTimeout(()=>{
+                    container.root.unmount();
+                    if (document.body.contains(container.div)) {
+                        document.body.removeChild(container.div);
+                    }
+                    this.containers.delete(position);
+                }, 0);
             }
         };
     }
@@ -4086,15 +4115,15 @@ const getBackgroundColor = (type)=>{
     }
 };
 const ToastContainer = /*#__PURE__*/ styled(Card, {
-    target: "e1bc14ug0",
+    target: "eb8x2sp0",
     label: "ToastContainer"
 })("box-sizing:border-box;border-radius:3px;padding:12px;background-color:", (props)=>getBackgroundColor(props.type), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";margin:20px;font-size:14px;line-height:20px;transform:translateY(100%);transition:transform 0.3s ease;width:344px;display:flex;align-items:center;position:relative;& svg{width:20px;height:20px;fill:currentColor;}@media (max-width:480px){&{margin:0;width:100vw;border-radius:0;}}.nf-layer-enter &{transform:translateY(0%);}");
 const TextContainer = /*#__PURE__*/ styled("div", {
-    target: "e1bc14ug1",
+    target: "eb8x2sp1",
     label: "TextContainer"
 })("flex:1;");
 const CloseContainer = /*#__PURE__*/ styled("button", {
-    target: "e1bc14ug2",
+    target: "eb8x2sp2",
     label: "CloseContainer"
 })("background-color:transparent;color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";padding:6px 10px;border:none;border-radius:3px;text-transform:uppercase;cursor:pointer;&:focus{background-color:rgba(255,255,255,0.1);}");
 const DEFAULT_DURATION = 2000;
@@ -4156,7 +4185,9 @@ class Toast {
             })
         });
         const Component = this.toast[0];
-        this.root = client.createRoot(this.element);
+        if (!this.root) {
+            this.root = client.createRoot(this.element);
+        }
         this.root.render(/*#__PURE__*/ jsxRuntime.jsx(Component, {}));
         this.timeout = setTimeout(()=>{
             this.remove();