@pathscale/ui 2.5.0 → 2.6.1

package/dist/components/toast/Toast.generated.js

@@ -1,12 +1,12 @@
-import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Toast.css";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { For, Show, createContext, createEffect, createMemo, createSignal, omit, onCleanup, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import button_0 from "../button/index.js";
 import close_button from "../close-button/index.js";
 import { CLASSES, componentRecipe } from "./Toast.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="M12 16v-4"></path><path d="M12 8h.01">'), _tmpl$2 = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="m9 12 2 2 4-4">'), _tmpl$3 = /*#__PURE__*/ template('<svg><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"></path><path d="M12 9v4"></path><path d="M12 17h.01">'), _tmpl$4 = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6">'), _tmpl$5 = /*#__PURE__*/ template('<svg><path d="m18 6-12 12"></path><path d="m6 6 12 12">'), _tmpl$6 = /*#__PURE__*/ template("<span>"), _tmpl$7 = /*#__PURE__*/ template("<div>"), _tmpl$8 = /*#__PURE__*/ template("<p>"), _tmpl$9 = /*#__PURE__*/ template("<div><div>");
+var _tmpl$ = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="M12 16v-4"></path><path d="M12 8h.01">'), _tmpl$2 = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="m9 12 2 2 4-4">'), _tmpl$3 = /*#__PURE__*/ template('<svg><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"></path><path d="M12 9v4"></path><path d="M12 17h.01">'), _tmpl$4 = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6">'), _tmpl$5 = /*#__PURE__*/ template('<svg><path d="m18 6-12 12"></path><path d="m6 6 12 12">'), _tmpl$6 = /*#__PURE__*/ template("<span>"), _tmpl$7 = /*#__PURE__*/ template("<div>"), _tmpl$8 = /*#__PURE__*/ template("<p>"), _tmpl$9 = /*#__PURE__*/ template("<div><div><!><!>");
 const DEFAULT_GAP = 12;
 const DEFAULT_MAX_VISIBLE_TOAST = 3;
 const DEFAULT_SCALE_FACTOR = 0.05;
@@ -222,7 +222,7 @@ const InfoIcon = ()=>(()=>{
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "aria-hidden": "true"
-        }), true, true);
+        }), true);
         return _el$;
     })();
 const SuccessIcon = ()=>(()=>{
@@ -237,7 +237,7 @@ const SuccessIcon = ()=>(()=>{
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "aria-hidden": "true"
-        }), true, true);
+        }), true);
         return _el$2;
     })();
 const WarningIcon = ()=>(()=>{
@@ -252,7 +252,7 @@ const WarningIcon = ()=>(()=>{
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "aria-hidden": "true"
-        }), true, true);
+        }), true);
         return _el$3;
     })();
 const DangerIcon = ()=>(()=>{
@@ -267,7 +267,7 @@ const DangerIcon = ()=>(()=>{
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "aria-hidden": "true"
-        }), true, true);
+        }), true);
         return _el$4;
     })();
 const CloseIcon = ()=>(()=>{
@@ -282,19 +282,19 @@ const CloseIcon = ()=>(()=>{
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "aria-hidden": "true"
-        }), true, true);
+        }), true);
         return _el$5;
     })();
 const __solidLayoutDefaultIndicator = (_stable, p)=>{
-    if ("loading" === p.state) return (()=>{
+    if ("loading" === p.state) {
         var _el$6 = _tmpl$6();
         spread(_el$6, mergeProps(()=>({
                 class: CLASSES.Spinner.base
             }), {
             "aria-hidden": "true"
-        }), false, false);
+        }), false);
         return _el$6;
-    })();
+    }
     switch(p.variant){
         case "success":
             return createComponent(SuccessIcon, {});
@@ -315,28 +315,21 @@ const DefaultIndicator = defineComponent({
     embedded: true
 });
 const __solidLayoutToastContent = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$7 = _tmpl$7();
-        spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Content.base, local.class)
-            }), {
-            "data-slot": "toast-content",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$7, ()=>local.children);
-        return _el$7;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$7 = _tmpl$7();
+    spread(_el$7, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Content.base, p.class)
+        }), {
+        "data-slot": "toast-content",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$7, ()=>p.children);
+    return _el$7;
 };
 const ToastContent = defineComponent({
     recipe: componentRecipe,
@@ -345,47 +338,39 @@ const ToastContent = defineComponent({
 });
 const __solidLayoutToastIndicator = (_stable, p)=>{
     const ctx = useToastItemContext();
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "variant"
-    ]);
-    const variant = createMemo(()=>normalizeVariant(local.variant ?? ctx.variant()));
-    return (()=>{
-        var _el$8 = _tmpl$7();
-        spread(_el$8, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Indicator.base, local.class)
-            }), {
-            "data-slot": "toast-indicator",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$8, createComponent(Show, {
-            get when () {
-                return local.children;
-            },
-            get fallback () {
-                return createComponent(DefaultIndicator, {
-                    get variant () {
-                        return variant();
-                    },
-                    get isLoading () {
-                        return ctx.isLoading();
-                    }
-                });
-            },
-            get children () {
-                return local.children;
-            }
-        }));
-        return _el$8;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style", "variant");
+    const variant = createMemo(()=>normalizeVariant(p.variant ?? ctx.variant()));
+    var _el$8 = _tmpl$7();
+    spread(_el$8, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Indicator.base, p.class)
+        }), {
+        "data-slot": "toast-indicator",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$8, createComponent(Show, {
+        get when () {
+            return p.children;
+        },
+        get fallback () {
+            return createComponent(DefaultIndicator, {
+                get variant () {
+                    return variant();
+                },
+                get isLoading () {
+                    return ctx.isLoading();
+                }
+            });
+        },
+        get children () {
+            return p.children;
+        }
+    }));
+    return _el$8;
 };
 const ToastIndicator = defineComponent({
     recipe: componentRecipe,
@@ -393,28 +378,21 @@ const ToastIndicator = defineComponent({
     embedded: true
 });
 const __solidLayoutToastTitle = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$9 = _tmpl$8();
-        spread(_el$9, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Title.base, local.class)
-            }), {
-            "data-slot": "toast-title",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$9, ()=>local.children);
-        return _el$9;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$9 = _tmpl$8();
+    spread(_el$9, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Title.base, p.class)
+        }), {
+        "data-slot": "toast-title",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$9, ()=>p.children);
+    return _el$9;
 };
 const ToastTitle = defineComponent({
     recipe: componentRecipe,
@@ -422,28 +400,21 @@ const ToastTitle = defineComponent({
     embedded: true
 });
 const __solidLayoutToastDescription = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$0 = _tmpl$8();
-        spread(_el$0, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Description.base, local.class)
-            }), {
-            "data-slot": "toast-description",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$0, ()=>local.children);
-        return _el$0;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$0 = _tmpl$8();
+    spread(_el$0, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Description.base, p.class)
+        }), {
+        "data-slot": "toast-description",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$0, ()=>p.children);
+    return _el$0;
 };
 const ToastDescription = defineComponent({
     recipe: componentRecipe,
@@ -451,14 +422,12 @@ const ToastDescription = defineComponent({
     embedded: true
 });
 const __solidLayoutToastActionButton = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class"
-    ]);
+    const others = omit(p, "class");
     return createComponent(button_0, mergeProps(others, {
         variant: "outline",
         size: "sm"
     }, ()=>({
-            class: twMerge(CLASSES.Action.base, local.class)
+            class: twMerge(CLASSES.Action.base, p.class)
         }), {
         "data-slot": "toast-action",
         get children () {
@@ -473,33 +442,27 @@ const ToastActionButton = defineComponent({
 });
 const __solidLayoutToastCloseButton = (_stable, p)=>{
     const ctx = useToastItemContext();
-    const [local, others] = splitProps(p, [
-        "class",
-        "aria-label",
-        "dataTheme",
-        "style",
-        "onClick"
-    ]);
+    const others = omit(p, "class", "aria-label", "dataTheme", "style", "onClick");
     const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
+        invokeEventHandler(p.onClick, event);
         if (event.defaultPrevented) return;
         ctx.onClose?.();
     };
     return createComponent(close_button, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.Close.base, local.class)
+            class: twMerge(CLASSES.Close.base, p.class)
         }), {
         get ["aria-label"] () {
-            return local["aria-label"] ?? "Dismiss notification";
+            return p["aria-label"] ?? "Dismiss notification";
         },
         get startIcon () {
             return createComponent(CloseIcon, {});
         },
         "data-slot": "toast-close",
         get ["data-theme"] () {
-            return local.dataTheme;
+            return p.dataTheme;
         },
         get style () {
-            return local.style;
+            return p.style;
         },
         onClick: handleClick
     }));
@@ -510,40 +473,24 @@ const ToastCloseButton = defineComponent({
     embedded: true
 });
 const __solidLayoutToastRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "title",
-        "description",
-        "variant",
-        "indicator",
-        "actionProps",
-        "state",
-        "onClose",
-        "isFrontmost",
-        "isHidden",
-        "isEntering",
-        "isExiting"
-    ]);
-    const variant = createMemo(()=>normalizeVariant(local.variant));
-    const isLoading = createMemo(()=>Boolean("loading" === local.state));
-    const isFrontmost = createMemo(()=>local.isFrontmost ?? true);
-    const isHidden = createMemo(()=>local.isHidden ?? false);
+    const others = omit(p, "children", "class", "dataTheme", "style", "title", "description", "variant", "indicator", "actionProps", "state", "onClose", "isFrontmost", "isHidden", "isEntering", "isExiting");
+    const variant = createMemo(()=>normalizeVariant(p.variant));
+    const isLoading = createMemo(()=>Boolean("loading" === p.state));
+    const isFrontmost = createMemo(()=>p.isFrontmost ?? true);
+    const isHidden = createMemo(()=>p.isHidden ?? false);
     const contextValue = {
         variant,
         isLoading,
-        onClose: local.onClose
+        onClose: p.onClose
     };
     const role = createMemo(()=>"danger" === variant() ? "alert" : "status");
     const ariaLive = createMemo(()=>"danger" === variant() ? "assertive" : "polite");
-    return createComponent(ToastItemContext.Provider, {
+    return createComponent(ToastItemContext, {
         value: contextValue,
         get children () {
             var _el$1 = _tmpl$7();
             spread(_el$1, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], isFrontmost() && CLASSES.Item.state.frontmost, isHidden() && CLASSES.Item.state.hidden, local.isEntering && CLASSES.Item.state.entering, local.isExiting && CLASSES.Item.state.exiting, local.class)
+                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], isFrontmost() && CLASSES.Item.state.frontmost, isHidden() && CLASSES.Item.state.hidden, p.isEntering && CLASSES.Item.state.entering, p.isExiting && CLASSES.Item.state.exiting, p.class)
                 }), {
                 get role () {
                     return role();
@@ -562,21 +509,21 @@ const __solidLayoutToastRoot = (_stable, p)=>{
                     return isHidden() ? "true" : "false";
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
+            }), true);
             insert(_el$1, createComponent(Show, {
                 get when () {
-                    return local.children;
+                    return p.children;
                 },
                 get fallback () {
                     return [
                         createComponent(ToastIndicator, {
                             get children () {
-                                return local.indicator;
+                                return p.indicator;
                             }
                         }),
                         createComponent(ToastContent, {
@@ -584,34 +531,34 @@ const __solidLayoutToastRoot = (_stable, p)=>{
                                 return [
                                     createComponent(Show, {
                                         get when () {
-                                            return null != local.title;
+                                            return null != p.title;
                                         },
                                         get children () {
                                             return createComponent(ToastTitle, {
                                                 get children () {
-                                                    return local.title;
+                                                    return p.title;
                                                 }
                                             });
                                         }
                                     }),
                                     createComponent(Show, {
                                         get when () {
-                                            return null != local.description;
+                                            return null != p.description;
                                         },
                                         get children () {
                                             return createComponent(ToastDescription, {
                                                 get children () {
-                                                    return local.description;
+                                                    return p.description;
                                                 }
                                             });
                                         }
                                     }),
                                     createComponent(Show, {
                                         get when () {
-                                            return local.actionProps?.children;
+                                            return p.actionProps?.children;
                                         },
                                         get children () {
-                                            return createComponent(ToastActionButton, mergeProps(()=>local.actionProps));
+                                            return createComponent(ToastActionButton, mergeProps(()=>p.actionProps));
                                         }
                                     })
                                 ];
@@ -619,7 +566,7 @@ const __solidLayoutToastRoot = (_stable, p)=>{
                         }),
                         createComponent(Show, {
                             get when () {
-                                return local.onClose;
+                                return p.onClose;
                             },
                             get children () {
                                 return createComponent(ToastCloseButton, {});
@@ -628,7 +575,7 @@ const __solidLayoutToastRoot = (_stable, p)=>{
                     ];
                 },
                 get children () {
-                    return local.children;
+                    return p.children;
                 }
             }));
             return _el$1;
@@ -641,27 +588,12 @@ const ToastRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutToastProvider = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "ref",
-        "placement",
-        "queue",
-        "width",
-        "gap",
-        "maxVisibleToasts",
-        "scaleFactor",
-        "renderToast",
-        "onMouseEnter",
-        "onMouseLeave"
-    ]);
-    const queue = createMemo(()=>void 0 === local.queue ? toastQueue : local.queue);
-    const placement = createMemo(()=>normalizePlacement(local.placement));
-    const gap = createMemo(()=>local.gap ?? DEFAULT_GAP);
-    const scaleFactor = createMemo(()=>local.scaleFactor ?? DEFAULT_SCALE_FACTOR);
-    const maxVisible = createMemo(()=>local.maxVisibleToasts ?? queue()?.maxVisibleToasts ?? DEFAULT_MAX_VISIBLE_TOAST);
+    const others = omit(p, "children", "class", "dataTheme", "style", "ref", "placement", "queue", "width", "gap", "maxVisibleToasts", "scaleFactor", "renderToast", "onMouseEnter", "onMouseLeave");
+    const queue = createMemo(()=>void 0 === p.queue ? toastQueue : p.queue);
+    const placement = createMemo(()=>normalizePlacement(p.placement));
+    const gap = createMemo(()=>p.gap ?? DEFAULT_GAP);
+    const scaleFactor = createMemo(()=>p.scaleFactor ?? DEFAULT_SCALE_FACTOR);
+    const maxVisible = createMemo(()=>p.maxVisibleToasts ?? queue()?.maxVisibleToasts ?? DEFAULT_MAX_VISIBLE_TOAST);
     const toasts = createMemo(()=>queue()?.toasts() ?? []);
     const [frontHeight, setFrontHeight] = createSignal(0);
     const itemRefs = new Map();
@@ -685,134 +617,130 @@ const __solidLayoutToastProvider = (_stable, p)=>{
         });
     });
     const widthValue = createMemo(()=>{
-        if ("number" == typeof local.width) return `${local.width}px`;
-        return local.width ?? `${DEFAULT_TOAST_WIDTH}px`;
+        if ("number" == typeof p.width) return `${p.width}px`;
+        return p.width ?? `${DEFAULT_TOAST_WIDTH}px`;
     });
     const providerStyle = createMemo(()=>({
             "--toast-width": widthValue(),
-            ...local.style ?? {}
+            ..."object" == typeof p.style && null !== p.style ? p.style : {}
         }));
     const handleMouseEnter = (event)=>{
-        invokeEventHandler(local.onMouseEnter, event);
+        invokeEventHandler(p.onMouseEnter, event);
         queue()?.pauseAll();
     };
     const handleMouseLeave = (event)=>{
-        invokeEventHandler(local.onMouseLeave, event);
+        invokeEventHandler(p.onMouseLeave, event);
         queue()?.resumeAll();
     };
-    return (()=>{
-        var _el$10 = _tmpl$9(), _el$11 = _el$10.firstChild;
-        var _ref$ = local.ref;
-        "function" == typeof _ref$ ? use(_ref$, _el$10) : local.ref = _el$10;
-        spread(_el$10, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Provider.base, CLASSES.Provider.placement[placement()], local.class)
-            }), {
-            "data-slot": "toast-region",
-            get ["data-placement"] () {
-                return placement();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return providerStyle();
-            },
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave
-        }), false, true);
-        spread(_el$11, mergeProps(()=>({
-                class: CLASSES.Provider.stack
-            }), {
-            "data-slot": "toast-stack"
-        }), false, true);
-        insert(_el$11, ()=>local.children, null);
-        insert(_el$11, createComponent(For, {
-            get each () {
-                return toasts();
-            },
-            children: (queuedToast, index)=>{
-                const dismiss = ()=>{
-                    queue()?.close(queuedToast.key);
+    var _el$10 = _tmpl$9(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
+    var _ref$ = p.ref;
+    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$10) : p.ref = _el$10;
+    spread(_el$10, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Provider.base, CLASSES.Provider.placement[placement()], p.class)
+        }), {
+        "data-slot": "toast-region",
+        get ["data-placement"] () {
+            return placement();
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return providerStyle();
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+    }), true);
+    spread(_el$11, mergeProps(()=>({
+            class: CLASSES.Provider.stack
+        }), {
+        "data-slot": "toast-stack"
+    }), true);
+    insert(_el$11, ()=>p.children, _el$12);
+    insert(_el$11, createComponent(For, {
+        get each () {
+            return toasts();
+        },
+        children: (queuedToast, index)=>{
+            const dismiss = ()=>{
+                queue()?.close(queuedToast.key);
+            };
+            const isFrontmost = ()=>0 === index();
+            const hidden = ()=>index() >= maxVisible();
+            const itemStyle = createMemo(()=>{
+                const offset = index() * gap();
+                const direction = isBottomPlacement(placement()) ? -1 : 1;
+                const scale = Math.max(0.1, 1 - index() * scaleFactor());
+                return {
+                    transform: `translate3d(0, ${direction * offset}px, 0) scale(${scale})`,
+                    "z-index": `${Math.max(1, toasts().length - index())}`,
+                    "--toast-front-height": `${frontHeight()}px`
                 };
-                const isFrontmost = ()=>0 === index();
-                const hidden = ()=>index() >= maxVisible();
-                const itemStyle = createMemo(()=>{
-                    const offset = index() * gap();
-                    const direction = isBottomPlacement(placement()) ? -1 : 1;
-                    const scale = Math.max(0.1, 1 - index() * scaleFactor());
-                    return {
-                        transform: `translate3d(0, ${direction * offset}px, 0) scale(${scale})`,
-                        "z-index": `${Math.max(1, toasts().length - index())}`,
-                        "--toast-front-height": `${frontHeight()}px`
-                    };
-                });
-                return (()=>{
-                    var _el$12 = _tmpl$7();
-                    use((node)=>setItemRef(queuedToast.key, node), _el$12);
-                    spread(_el$12, mergeProps(()=>({
-                            class: twMerge(CLASSES.Provider.item.base, CLASSES.Provider.item.placement[placement()], hidden() && CLASSES.Provider.item.state.hidden)
-                        }), {
-                        "data-slot": "toast-region-item",
-                        get ["data-index"] () {
-                            return index();
+            });
+            var _el$14 = _tmpl$7();
+            ref(()=>(node)=>setItemRef(queuedToast.key, node), _el$14);
+            spread(_el$14, mergeProps(()=>({
+                    class: twMerge(CLASSES.Provider.item.base, CLASSES.Provider.item.placement[placement()], hidden() && CLASSES.Provider.item.state.hidden)
+                }), {
+                "data-slot": "toast-region-item",
+                get ["data-index"] () {
+                    return index();
+                },
+                get ["data-hidden"] () {
+                    return hidden() ? "true" : "false";
+                },
+                get ["data-frontmost"] () {
+                    return isFrontmost() ? "true" : "false";
+                },
+                get style () {
+                    return itemStyle();
+                }
+            }), true);
+            insert(_el$14, createComponent(Show, {
+                get when () {
+                    return p.renderToast;
+                },
+                get fallback () {
+                    return createComponent(ToastRoot, {
+                        get title () {
+                            return queuedToast.content.title;
                         },
-                        get ["data-hidden"] () {
-                            return hidden() ? "true" : "false";
+                        get description () {
+                            return queuedToast.content.description;
                         },
-                        get ["data-frontmost"] () {
-                            return isFrontmost() ? "true" : "false";
+                        get variant () {
+                            return queuedToast.content.variant;
                         },
-                        get style () {
-                            return itemStyle();
-                        }
-                    }), false, true);
-                    insert(_el$12, createComponent(Show, {
-                        get when () {
-                            return local.renderToast;
+                        get indicator () {
+                            return queuedToast.content.indicator;
                         },
-                        get fallback () {
-                            return createComponent(ToastRoot, {
-                                get title () {
-                                    return queuedToast.content.title;
-                                },
-                                get description () {
-                                    return queuedToast.content.description;
-                                },
-                                get variant () {
-                                    return queuedToast.content.variant;
-                                },
-                                get indicator () {
-                                    return queuedToast.content.indicator;
-                                },
-                                get actionProps () {
-                                    return queuedToast.content.actionProps;
-                                },
-                                get state () {
-                                    return queuedToast.content.state;
-                                },
-                                onClose: dismiss,
-                                get isFrontmost () {
-                                    return isFrontmost();
-                                },
-                                get isHidden () {
-                                    return hidden();
-                                },
-                                get isEntering () {
-                                    return queuedToast.isEntering;
-                                },
-                                get isExiting () {
-                                    return queuedToast.isExiting;
-                                }
-                            });
+                        get actionProps () {
+                            return queuedToast.content.actionProps;
                         },
-                        children: (renderToast)=>renderToast()(queuedToast, dismiss)
-                    }));
-                    return _el$12;
-                })();
-            }
-        }), null);
-        return _el$10;
-    })();
+                        get state () {
+                            return queuedToast.content.state;
+                        },
+                        onClose: dismiss,
+                        get isFrontmost () {
+                            return isFrontmost();
+                        },
+                        get isHidden () {
+                            return hidden();
+                        },
+                        get isEntering () {
+                            return queuedToast.isEntering;
+                        },
+                        get isExiting () {
+                            return queuedToast.isExiting;
+                        }
+                    });
+                },
+                children: (renderToast)=>renderToast()(queuedToast, dismiss)
+            }));
+            return _el$14;
+        }
+    }), _el$13);
+    return _el$10;
 };
 const ToastProvider = defineComponent({
     recipe: componentRecipe,