solid-sonner - npm Package Compare versions

Comparing version 0.2.7 to 0.2.8

dist/dev.js

@@ -1,3 +0,4 @@
-import { delegateEvents, createComponent, insert, use, setAttribute, effect, className, style, template, addEventListener, Dynamic } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, use, setAttribute, effect, className, style, template, addEventListener, memo } from 'solid-js/web';
 import { mergeProps, createSignal, onMount, onCleanup, createEffect, on, Show, For } from 'solid-js';
+import { createStore, produce, reconcile } from 'solid-js/store';
 
@@ -8,4 +9,3 @@ // src/index.tsx
 function styleInject(css, { insertAt } = {}) {
-  if (!css || typeof document === "undefined")
-    return;
+  if (typeof document === "undefined") return;
   const head = document.head || document.getElementsByTagName("head")[0];
@@ -41,3 +41,3 @@ const style = document.createElement("style");
   return (() => {
-    const _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
     insert(_el$2, createComponent(For, {
@@ -276,4 +276,3 @@ each: bars,
     return props.heights.reduce((prev, curr, reducerIndex) => {
-      if (reducerIndex >= heightIndex())
-        return prev;
+      if (reducerIndex >= heightIndex()) return prev;
       return prev + curr.height;
@@ -289,3 +288,3 @@ }, 0);
       return (() => {
-        const _el$ = _tmpl$7();
+        var _el$ = _tmpl$7();
         insert(_el$, () => props.icons.loading);
@@ -315,13 +314,11 @@ effect(() => setAttribute(_el$, "data-visible", toastType() === "loading"));
         const alreadyExists = heights.find((height) => height.toastId === props.toast.id);
-        if (!alreadyExists)
-          return [{
-            toastId: props.toast.id,
-            height: newHeight,
-            position: props.toast.position
-          }, ...heights];
-        else
-          return heights.map((height) => height.toastId === props.toast.id ? {
-            ...height,
-            height: newHeight
-          } : height);
+        if (!alreadyExists) return [{
+          toastId: props.toast.id,
+          height: newHeight,
+          position: props.toast.position
+        }, ...heights];
+        else return heights.map((height) => height.toastId === props.toast.id ? {
+          ...height,
+          height: newHeight
+        } : height);
       });
@@ -340,4 +337,3 @@ });
   createEffect(on(() => [props.expanded, props.interacting, props.toast, duration(), props.toast.promise, toastType(), props.pauseWhenPageIsHidden, isDocumentHidden()], ([expanded, interacting, toast2, duration2, promise, toastType2, pauseWhenPageIsHidden, isDocumentHidden2]) => {
-    if (promise && toastType2 === "loading" || duration2 === Number.POSITIVE_INFINITY)
-      return;
+    if (promise && toastType2 === "loading" || duration2 === Number.POSITIVE_INFINITY) return;
     let timeoutId;
@@ -358,6 +354,4 @@ const pauseTimer = () => {
     };
-    if (expanded || interacting || pauseWhenPageIsHidden && isDocumentHidden2)
-      pauseTimer();
-    else
-      startTimer();
+    if (expanded || interacting || pauseWhenPageIsHidden && isDocumentHidden2) pauseTimer();
+    else startTimer();
     onCleanup(() => {
@@ -383,10 +377,8 @@ clearTimeout(timeoutId);
   createEffect(on(() => props.toast.delete, (d) => {
-    if (d)
-      deleteToast();
+    if (d) deleteToast();
   }));
   return (() => {
-    const _el$2 = _tmpl$32();
+    var _el$2 = _tmpl$32();
     _el$2.$$pointermove = (event) => {
-      if (!pointerStartRef())
-        return;
+      if (!pointerStartRef()) return;
       const yPosition = event.clientY - pointerStartRef().y;
@@ -405,4 +397,3 @@ const xPosition = event.clientX - pointerStartRef().x;
     _el$2.$$pointerup = () => {
-      if (swipeOut())
-        return;
+      if (swipeOut()) return;
       setPointerStartRef(null);
@@ -421,8 +412,6 @@ const swipeAmount = Number(toastRef?.style.getPropertyValue("--swipe-amount").replace("px", "") || 0);
     _el$2.$$pointerdown = (event) => {
-      if (disabled())
-        return;
+      if (disabled()) return;
       setOffsetBeforeRemove(offset());
       event.target.setPointerCapture(event.pointerId);
-      if (event.target.tagName === "BUTTON")
-        return;
+      if (event.target.tagName === "BUTTON") return;
       setSwiping(true);
@@ -434,3 +423,3 @@ setPointerStartRef({
     };
-    const _ref$ = toastRef;
+    var _ref$ = toastRef;
     typeof _ref$ === "function" ? use(_ref$, _el$2) : toastRef = _el$2;
@@ -442,3 +431,3 @@ insert(_el$2, createComponent(Show, {
       get children() {
-        const _el$3 = _tmpl$22();
+        var _el$3 = _tmpl$22();
         addEventListener(_el$3, "click", disabled() ? void 0 : () => {
@@ -449,9 +438,9 @@ deleteToast();
         effect((_p$) => {
-          const _v$ = disabled(), _v$2 = _cn(props.classes?.closeButton, props.toast?.classes?.closeButton);
-          _v$ !== _p$._v$ && setAttribute(_el$3, "data-disabled", _p$._v$ = _v$);
-          _v$2 !== _p$._v$2 && className(_el$3, _p$._v$2 = _v$2);
+          var _v$ = disabled(), _v$2 = _cn(props.classes?.closeButton, props.toast?.classes?.closeButton);
+          _v$ !== _p$.e && setAttribute(_el$3, "data-disabled", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
           return _p$;
         }, {
-          _v$: void 0,
-          _v$2: void 0
+          e: void 0,
+          t: void 0
         });
@@ -471,26 +460,15 @@ return _el$3;
           get children() {
-            const _el$4 = _tmpl$42();
-            insert(_el$4, createComponent(Show, {
-              get when() {
-                return props.toast.icon || props.toast.promise || toastType() === "loading";
-              },
-              get fallback() {
-                return createComponent(Dynamic, {
-                  get component() {
-                    return getAsset(toastType());
-                  }
-                });
-              },
-              get children() {
-                return createComponent(Dynamic, {
-                  get component() {
-                    return props.toast.icon && (() => props.toast.icon) || props.icons?.loading || getLoadingIcon();
-                  }
-                });
-              }
-            }));
+            var _el$4 = _tmpl$42();
+            insert(_el$4, (() => {
+              var _c$ = memo(() => !!(props.toast.promise || props.toast.type === "loading" && !props.toast.icon));
+              return () => _c$() ? props.toast.icon || getLoadingIcon() : null;
+            })(), null);
+            insert(_el$4, (() => {
+              var _c$2 = memo(() => props.toast.type !== "loading");
+              return () => _c$2() ? props.toast.icon || props.icons?.[toastType()] || getAsset(toastType())() : null;
+            })(), null);
             return _el$4;
           }
         }), (() => {
-          const _el$5 = _tmpl$62(), _el$6 = _el$5.firstChild;
+          var _el$5 = _tmpl$62(), _el$6 = _el$5.firstChild;
           insert(_el$6, () => props.toast.title);
@@ -502,3 +480,3 @@ insert(_el$5, createComponent(Show, {
             get children() {
-              const _el$7 = _tmpl$52();
+              var _el$7 = _tmpl$52();
               insert(_el$7, () => props.toast.description);
@@ -516,17 +494,16 @@ effect(() => className(_el$7, _cn(props.descriptionClass, toastDescriptionClassname(), props.classes?.description, props.toast?.classes?.description)));
           get children() {
-            const _el$8 = _tmpl$72();
+            var _el$8 = _tmpl$72();
             _el$8.$$click = () => {
               deleteToast();
-              if (props.toast.cancel?.onClick)
-                props.toast.cancel.onClick();
+              if (props.toast.cancel?.onClick) props.toast.cancel.onClick();
             };
             insert(_el$8, () => props.toast.cancel.label);
             effect((_p$) => {
-              const _v$20 = props.toast.cancelButtonStyle || props.cancelButtonStyle, _v$21 = _cn(props.classes?.cancelButton, props.toast?.classes?.cancelButton);
-              _p$._v$20 = style(_el$8, _v$20, _p$._v$20);
-              _v$21 !== _p$._v$21 && className(_el$8, _p$._v$21 = _v$21);
+              var _v$20 = props.toast.cancelButtonStyle || props.cancelButtonStyle, _v$21 = _cn(props.classes?.cancelButton, props.toast?.classes?.cancelButton);
+              _p$.e = style(_el$8, _v$20, _p$.e);
+              _v$21 !== _p$.t && className(_el$8, _p$.t = _v$21);
               return _p$;
             }, {
-              _v$20: void 0,
-              _v$21: void 0
+              e: void 0,
+              t: void 0
             });
@@ -540,7 +517,6 @@ return _el$8;
           get children() {
-            const _el$9 = _tmpl$8();
+            var _el$9 = _tmpl$8();
             _el$9.$$click = (event) => {
               props.toast.action?.onClick(event);
-              if (event.defaultPrevented)
-                return;
+              if (event.defaultPrevented) return;
               deleteToast();
@@ -550,9 +526,9 @@ };
             effect((_p$) => {
-              const _v$22 = props.toast.actionButtonStyle || props.actionButtonStyle, _v$23 = _cn(props.classes?.actionButton, props.toast?.classes?.actionButton);
-              _p$._v$22 = style(_el$9, _v$22, _p$._v$22);
-              _v$23 !== _p$._v$23 && className(_el$9, _p$._v$23 = _v$23);
+              var _v$22 = props.toast.actionButtonStyle || props.actionButtonStyle, _v$23 = _cn(props.classes?.actionButton, props.toast?.classes?.actionButton);
+              _p$.e = style(_el$9, _v$22, _p$.e);
+              _v$23 !== _p$.t && className(_el$9, _p$.t = _v$23);
               return _p$;
             }, {
-              _v$22: void 0,
-              _v$23: void 0
+              e: void 0,
+              t: void 0
             });
@@ -568,3 +544,3 @@ return _el$9;
     effect((_p$) => {
-      const _v$3 = props.toast.important ? "assertive" : "polite", _v$4 = _cn(props.class, toastClassname(), props.classes?.toast, props.toast?.classes?.toast, props.classes?.default, props.classes?.[toastType()], props.toast?.classes?.[toastType()]), _v$5 = !(props.toast.jsx || props.toast.unstyled || props.unstyled), _v$6 = mounted(), _v$7 = Boolean(props.toast.promise), _v$8 = removed(), _v$9 = isVisible(), _v$10 = coords()[0], _v$11 = coords()[1], _v$12 = props.index, _v$13 = isFront(), _v$14 = swiping(), _v$15 = toastType(), _v$16 = invert(), _v$17 = swipeOut(), _v$18 = Boolean(props.expanded || props.expandByDefault && mounted()), _v$19 = {
+      var _v$3 = props.toast.important ? "assertive" : "polite", _v$4 = _cn(props.class, toastClassname(), props.classes?.toast, props.toast?.classes?.toast, props.classes?.default, props.classes?.[toastType()], props.toast?.classes?.[toastType()]), _v$5 = !(props.toast.jsx || props.toast.unstyled || props.unstyled), _v$6 = mounted(), _v$7 = Boolean(props.toast.promise), _v$8 = removed(), _v$9 = isVisible(), _v$10 = coords()[0], _v$11 = coords()[1], _v$12 = props.index, _v$13 = isFront(), _v$14 = swiping(), _v$15 = toastType(), _v$16 = invert(), _v$17 = swipeOut(), _v$18 = Boolean(props.expanded || props.expandByDefault && mounted()), _v$19 = {
         "--index": props.index,
@@ -578,38 +554,38 @@ "--toasts-before": props.index,
       };
-      _v$3 !== _p$._v$3 && setAttribute(_el$2, "aria-live", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && className(_el$2, _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && setAttribute(_el$2, "data-styled", _p$._v$5 = _v$5);
-      _v$6 !== _p$._v$6 && setAttribute(_el$2, "data-mounted", _p$._v$6 = _v$6);
-      _v$7 !== _p$._v$7 && setAttribute(_el$2, "data-promise", _p$._v$7 = _v$7);
-      _v$8 !== _p$._v$8 && setAttribute(_el$2, "data-removed", _p$._v$8 = _v$8);
-      _v$9 !== _p$._v$9 && setAttribute(_el$2, "data-visible", _p$._v$9 = _v$9);
-      _v$10 !== _p$._v$10 && setAttribute(_el$2, "data-y-position", _p$._v$10 = _v$10);
-      _v$11 !== _p$._v$11 && setAttribute(_el$2, "data-x-position", _p$._v$11 = _v$11);
-      _v$12 !== _p$._v$12 && setAttribute(_el$2, "data-index", _p$._v$12 = _v$12);
-      _v$13 !== _p$._v$13 && setAttribute(_el$2, "data-front", _p$._v$13 = _v$13);
-      _v$14 !== _p$._v$14 && setAttribute(_el$2, "data-swiping", _p$._v$14 = _v$14);
-      _v$15 !== _p$._v$15 && setAttribute(_el$2, "data-type", _p$._v$15 = _v$15);
-      _v$16 !== _p$._v$16 && setAttribute(_el$2, "data-invert", _p$._v$16 = _v$16);
-      _v$17 !== _p$._v$17 && setAttribute(_el$2, "data-swipe-out", _p$._v$17 = _v$17);
-      _v$18 !== _p$._v$18 && setAttribute(_el$2, "data-expanded", _p$._v$18 = _v$18);
-      _p$._v$19 = style(_el$2, _v$19, _p$._v$19);
+      _v$3 !== _p$.e && setAttribute(_el$2, "aria-live", _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$2, _p$.t = _v$4);
+      _v$5 !== _p$.a && setAttribute(_el$2, "data-styled", _p$.a = _v$5);
+      _v$6 !== _p$.o && setAttribute(_el$2, "data-mounted", _p$.o = _v$6);
+      _v$7 !== _p$.i && setAttribute(_el$2, "data-promise", _p$.i = _v$7);
+      _v$8 !== _p$.n && setAttribute(_el$2, "data-removed", _p$.n = _v$8);
+      _v$9 !== _p$.s && setAttribute(_el$2, "data-visible", _p$.s = _v$9);
+      _v$10 !== _p$.h && setAttribute(_el$2, "data-y-position", _p$.h = _v$10);
+      _v$11 !== _p$.r && setAttribute(_el$2, "data-x-position", _p$.r = _v$11);
+      _v$12 !== _p$.d && setAttribute(_el$2, "data-index", _p$.d = _v$12);
+      _v$13 !== _p$.l && setAttribute(_el$2, "data-front", _p$.l = _v$13);
+      _v$14 !== _p$.u && setAttribute(_el$2, "data-swiping", _p$.u = _v$14);
+      _v$15 !== _p$.c && setAttribute(_el$2, "data-type", _p$.c = _v$15);
+      _v$16 !== _p$.w && setAttribute(_el$2, "data-invert", _p$.w = _v$16);
+      _v$17 !== _p$.m && setAttribute(_el$2, "data-swipe-out", _p$.m = _v$17);
+      _v$18 !== _p$.f && setAttribute(_el$2, "data-expanded", _p$.f = _v$18);
+      _p$.y = style(_el$2, _v$19, _p$.y);
       return _p$;
     }, {
-      _v$3: void 0,
-      _v$4: void 0,
-      _v$5: void 0,
-      _v$6: void 0,
-      _v$7: void 0,
-      _v$8: void 0,
-      _v$9: void 0,
-      _v$10: void 0,
-      _v$11: void 0,
-      _v$12: void 0,
-      _v$13: void 0,
-      _v$14: void 0,
-      _v$15: void 0,
-      _v$16: void 0,
-      _v$17: void 0,
-      _v$18: void 0,
-      _v$19: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0,
+      c: void 0,
+      w: void 0,
+      m: void 0,
+      f: void 0,
+      y: void 0
     });
@@ -620,9 +596,6 @@ return _el$2;
 function getDocumentDirection() {
-  if (typeof window === "undefined")
-    return "ltr";
-  if (typeof document === "undefined")
-    return "ltr";
+  if (typeof window === "undefined") return "ltr";
+  if (typeof document === "undefined") return "ltr";
   const dirAttribute = document.documentElement.getAttribute("dir");
-  if (dirAttribute === "auto" || !dirAttribute)
-    return window.getComputedStyle(document.documentElement).direction;
+  if (dirAttribute === "auto" || !dirAttribute) return window.getComputedStyle(document.documentElement).direction;
   return dirAttribute;
@@ -638,5 +611,7 @@ }
   }, props);
-  const [toasts, setToasts] = createSignal([]);
+  const [toastsStore, setToastsStore] = createStore({
+    toasts: []
+  });
   const possiblePositions = () => {
-    return Array.from(new Set([propsWithDefaults.position].concat(toasts().filter((toast2) => toast2.position).map((toast2) => toast2.position))));
+    return Array.from(new Set([propsWithDefaults.position].concat(toastsStore.toasts.filter((toast2) => toast2.position).map((toast2) => toast2.position))));
   };
@@ -651,3 +626,3 @@ const [heights, setHeights] = createSignal([]);
   const [actualTheme, setActualTheme] = createSignal(propsWithDefaults.theme !== "system" ? propsWithDefaults.theme : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
-  const removeToast = (toast2) => setToasts((toasts2) => toasts2.filter(({
+  const removeToast = (toast2) => setToastsStore("toasts", (toasts) => toasts.filter(({
     id
@@ -658,18 +633,17 @@ }) => id !== toast2.id));
       if (toast2.dismiss) {
-        setToasts((toasts2) => toasts2.map((t) => t.id === toast2.id ? {
-          ...t,
-          delete: true
-        } : t));
+        setToastsStore("toasts", produce((_toasts) => {
+          _toasts.forEach((t) => {
+            if (t.id === toast2.id) t.delete = true;
+          });
+        }));
         return;
       }
-      setToasts((toasts2) => {
-        const indexOfExistingToast = toasts2.findIndex((t) => t.id === toast2.id);
-        if (indexOfExistingToast !== -1) {
-          return [...toasts2.slice(0, indexOfExistingToast), {
-            ...toasts2[indexOfExistingToast],
-            ...toast2
-          }, ...toasts2.slice(indexOfExistingToast + 1)];
-        }
-        return [toast2, ...toasts2];
-      });
+      const changedIndex = toastsStore.toasts.findIndex((t) => t.id === toast2.id);
+      if (changedIndex !== -1) {
+        setToastsStore("toasts", [changedIndex], reconcile(toast2));
+        return;
+      }
+      setToastsStore("toasts", produce((_toasts) => {
+        _toasts.unshift(toast2);
+      }));
     });
@@ -685,16 +659,12 @@ onCleanup(() => {
     }
-    if (typeof window === "undefined")
-      return;
+    if (typeof window === "undefined") return;
     window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({
       matches
     }) => {
-      if (matches)
-        setActualTheme("dark");
-      else
-        setActualTheme("light");
+      if (matches) setActualTheme("dark");
+      else setActualTheme("light");
     });
   }));
   createEffect(() => {
-    if (toasts().length <= 1)
-      setExpanded(false);
+    if (toastsStore.toasts.length <= 1) setExpanded(false);
   });
@@ -708,4 +678,3 @@ onMount(() => {
       }
-      if (event.code === "Escape" && (document.activeElement === listRef || listRef?.contains(document.activeElement)))
-        setExpanded(false);
+      if (event.code === "Escape" && (document.activeElement === listRef || listRef?.contains(document.activeElement))) setExpanded(false);
     };
@@ -732,6 +701,6 @@ document.addEventListener("keydown", handleKeyDown);
     get when() {
-      return toasts().length > 0;
+      return toastsStore.toasts.length > 0;
     },
     get children() {
-      const _el$10 = _tmpl$9();
+      var _el$10 = _tmpl$9();
       insert(_el$10, createComponent(For, {
@@ -744,3 +713,3 @@ get each() {
           return (() => {
-            const _el$11 = _tmpl$10();
+            var _el$11 = _tmpl$10();
             _el$11.$$pointerup = () => setInteracting(false);
@@ -751,4 +720,3 @@ _el$11.$$pointerdown = () => {
             _el$11.addEventListener("mouseleave", () => {
-              if (!interacting())
-                setExpanded(false);
+              if (!interacting()) setExpanded(false);
             });
@@ -774,3 +742,3 @@ _el$11.$$mousemove = () => setExpanded(true);
             });
-            const _ref$2 = listRef;
+            var _ref$2 = listRef;
             typeof _ref$2 === "function" ? use(_ref$2, _el$11) : listRef = _el$11;
@@ -781,3 +749,3 @@ setAttribute(_el$11, "data-y-position", y);
               get each() {
-                return toasts().filter((toast2) => !toast2.position && index() === 0 || toast2.position === position);
+                return toastsStore.toasts.filter((toast2) => !toast2.position && index() === 0 || toast2.position === position);
               },
@@ -833,3 +801,3 @@ children: (toast2, index2) => createComponent(Toast, {
                 get toasts() {
-                  return toasts();
+                  return toastsStore.toasts;
                 },
@@ -855,3 +823,3 @@ get heights() {
             effect((_p$) => {
-              const _v$24 = propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir, _v$25 = propsWithDefaults.class, _v$26 = actualTheme(), _v$27 = propsWithDefaults.richColors, _v$28 = {
+              var _v$24 = propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir, _v$25 = propsWithDefaults.class, _v$26 = actualTheme(), _v$27 = propsWithDefaults.richColors, _v$28 = {
                 "--front-toast-height": `${heights()[0]?.height}px`,
@@ -863,14 +831,14 @@ "--offset": typeof propsWithDefaults.offset === "number" ? `${propsWithDefaults.offset}px` : propsWithDefaults.offset || VIEWPORT_OFFSET,
               };
-              _v$24 !== _p$._v$24 && setAttribute(_el$11, "dir", _p$._v$24 = _v$24);
-              _v$25 !== _p$._v$25 && className(_el$11, _p$._v$25 = _v$25);
-              _v$26 !== _p$._v$26 && setAttribute(_el$11, "data-theme", _p$._v$26 = _v$26);
-              _v$27 !== _p$._v$27 && setAttribute(_el$11, "data-rich-colors", _p$._v$27 = _v$27);
-              _p$._v$28 = style(_el$11, _v$28, _p$._v$28);
+              _v$24 !== _p$.e && setAttribute(_el$11, "dir", _p$.e = _v$24);
+              _v$25 !== _p$.t && className(_el$11, _p$.t = _v$25);
+              _v$26 !== _p$.a && setAttribute(_el$11, "data-theme", _p$.a = _v$26);
+              _v$27 !== _p$.o && setAttribute(_el$11, "data-rich-colors", _p$.o = _v$27);
+              _p$.i = style(_el$11, _v$28, _p$.i);
               return _p$;
             }, {
-              _v$24: void 0,
-              _v$25: void 0,
-              _v$26: void 0,
-              _v$27: void 0,
-              _v$28: void 0
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0
             });
@@ -877,0 +845,0 @@ return _el$11;

dist/dev.jsx

 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
-  if (!css || typeof document === "undefined")
-    return;
+  if (!css || typeof document === "undefined") return;
   const head = document.head || document.getElementsByTagName("head")[0];
@@ -28,4 +27,4 @@ const style = document.createElement("style");
 // src/index.tsx
-import { Dynamic } from "solid-js/web";
 import { For as For2, Show, createEffect, createSignal as createSignal2, mergeProps, on, onCleanup as onCleanup2, onMount as onMount2 } from "solid-js";
+import { createStore, produce, reconcile } from "solid-js/store";
 
@@ -460,70 +459,53 @@ // src/assets.tsx
     }}
-  >
-    <Show when={props.closeButton && !props.toast.jsx}><button
-      aria-label="Close toast"
-      data-disabled={disabled()}
-      data-close-button
-      onClick={disabled() ? void 0 : () => {
+  ><Show when={props.closeButton && !props.toast.jsx}><button
+    aria-label="Close toast"
+    data-disabled={disabled()}
+    data-close-button
+    onClick={disabled() ? void 0 : () => {
+      deleteToast();
+      props.toast.onDismiss?.(props.toast);
+    }}
+    class={_cn(props.classes?.closeButton, props.toast?.classes?.closeButton)}
+  ><svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  ><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg></button></Show><Show
+    when={props.toast.jsx || props.toast.title instanceof Element}
+    fallback={<><Show when={toastType() || props.toast.icon || props.toast.promise}><div data-icon="">{props.toast.promise || props.toast.type === "loading" && !props.toast.icon ? props.toast.icon || getLoadingIcon() : null}{props.toast.type !== "loading" ? props.toast.icon || props.icons?.[toastType()] || getAsset(toastType())() : null}</div></Show><div data-content=""><div data-title="" class={_cn(props.classes?.title, props.toast?.classes?.title)}>{props.toast.title}</div><Show when={props.toast.description}><div
+      data-description=""
+      class={_cn(
+        props.descriptionClass,
+        toastDescriptionClassname(),
+        props.classes?.description,
+        props.toast?.classes?.description
+      )}
+    >{props.toast.description}</div></Show></div><Show when={props.toast.cancel}><button
+      data-button
+      data-cancel
+      style={props.toast.cancelButtonStyle || props.cancelButtonStyle}
+      onClick={() => {
         deleteToast();
-        props.toast.onDismiss?.(props.toast);
+        if (props.toast.cancel?.onClick)
+          props.toast.cancel.onClick();
       }}
-      class={_cn(props.classes?.closeButton, props.toast?.classes?.closeButton)}
-    ><svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg></button></Show>
-    <Show
-      when={props.toast.jsx || props.toast.title instanceof Element}
-      fallback={<>
-        <Show when={toastType() || props.toast.icon || props.toast.promise}><div data-icon=""><Show
-          when={props.toast.icon || props.toast.promise || toastType() === "loading"}
-          fallback={<Dynamic component={getAsset(toastType())} />}
-        ><Dynamic component={props.toast.icon && (() => props.toast.icon) || props.icons?.loading || getLoadingIcon()} /></Show></div></Show>
-        <div data-content="">
-          <div data-title="" class={_cn(props.classes?.title, props.toast?.classes?.title)}>{props.toast.title}</div>
-          <Show when={props.toast.description}><div
-            data-description=""
-            class={_cn(
-              props.descriptionClass,
-              toastDescriptionClassname(),
-              props.classes?.description,
-              props.toast?.classes?.description
-            )}
-          >{props.toast.description}</div></Show>
-        </div>
-        <Show when={props.toast.cancel}><button
-          data-button
-          data-cancel
-          style={props.toast.cancelButtonStyle || props.cancelButtonStyle}
-          onClick={() => {
-            deleteToast();
-            if (props.toast.cancel?.onClick)
-              props.toast.cancel.onClick();
-          }}
-          class={_cn(props.classes?.cancelButton, props.toast?.classes?.cancelButton)}
-        >{props.toast.cancel.label}</button></Show>
-        <Show when={props.toast.action}><button
-          data-button=""
-          style={props.toast.actionButtonStyle || props.actionButtonStyle}
-          onClick={(event) => {
-            props.toast.action?.onClick(event);
-            if (event.defaultPrevented)
-              return;
-            deleteToast();
-          }}
-          class={_cn(props.classes?.actionButton, props.toast?.classes?.actionButton)}
-        >{props.toast.action.label}</button></Show>
-      </>}
-    >{props.toast.jsx || props.toast.title}</Show>
-  </li>;
+      class={_cn(props.classes?.cancelButton, props.toast?.classes?.cancelButton)}
+    >{props.toast.cancel.label}</button></Show><Show when={props.toast.action}><button
+      data-button=""
+      style={props.toast.actionButtonStyle || props.actionButtonStyle}
+      onClick={(event) => {
+        props.toast.action?.onClick(event);
+        if (event.defaultPrevented)
+          return;
+        deleteToast();
+      }}
+      class={_cn(props.classes?.actionButton, props.toast?.classes?.actionButton)}
+    >{props.toast.action.label}</button></Show></>}
+  >{props.toast.jsx || props.toast.title}</Show></li>;
 };
@@ -548,6 +530,6 @@ function getDocumentDirection() {
   }, props);
-  const [toasts, setToasts] = createSignal2([]);
+  const [toastsStore, setToastsStore] = createStore({ toasts: [] });
   const possiblePositions = () => {
     return Array.from(
-      new Set([propsWithDefaults.position].concat(toasts().filter((toast2) => toast2.position).map((toast2) => toast2.position)))
+      new Set([propsWithDefaults.position].concat(toastsStore.toasts.filter((toast2) => toast2.position).map((toast2) => toast2.position)))
     );
@@ -565,20 +547,22 @@ };
   );
-  const removeToast = (toast2) => setToasts((toasts2) => toasts2.filter(({ id }) => id !== toast2.id));
+  const removeToast = (toast2) => setToastsStore("toasts", (toasts) => toasts.filter(({ id }) => id !== toast2.id));
   onMount2(() => {
     const unsub = ToastState.subscribe((toast2) => {
       if (toast2.dismiss) {
-        setToasts((toasts2) => toasts2.map((t) => t.id === toast2.id ? { ...t, delete: true } : t));
+        setToastsStore("toasts", produce((_toasts) => {
+          _toasts.forEach((t) => {
+            if (t.id === toast2.id)
+              t.delete = true;
+          });
+        }));
         return;
       }
-      setToasts((toasts2) => {
-        const indexOfExistingToast = toasts2.findIndex((t) => t.id === toast2.id);
-        if (indexOfExistingToast !== -1) {
-          return [
-            ...toasts2.slice(0, indexOfExistingToast),
-            { ...toasts2[indexOfExistingToast], ...toast2 },
-            ...toasts2.slice(indexOfExistingToast + 1)
-          ];
-        }
-        return [toast2, ...toasts2];
-      });
+      const changedIndex = toastsStore.toasts.findIndex((t) => t.id === toast2.id);
+      if (changedIndex !== -1) {
+        setToastsStore("toasts", [changedIndex], reconcile(toast2));
+        return;
+      }
+      setToastsStore("toasts", produce((_toasts) => {
+        _toasts.unshift(toast2);
+      }));
     });
@@ -609,3 +593,3 @@ onCleanup2(() => {
   createEffect(() => {
-    if (toasts().length <= 1)
+    if (toastsStore.toasts.length <= 1)
       setExpanded(false);
@@ -644,78 +628,75 @@ });
   );
-  return <Show when={toasts().length > 0}>
-    {
-      /* Remove item from normal navigation flow, only available via hotkey */
-    }
-    <section aria-label={`Notifications ${hotkeyLabel()}`} tabIndex={-1}><For2 each={possiblePositions()}>{(position, index) => {
-      const [y, x] = position.split("-");
-      return <ol
-        tabIndex={-1}
-        ref={listRef}
-        dir={propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir}
-        class={propsWithDefaults.class}
-        data-sonner-toaster
-        data-theme={actualTheme()}
-        data-rich-colors={propsWithDefaults.richColors}
-        data-y-position={y}
-        data-x-position={x}
-        style={{
-          "--front-toast-height": `${heights()[0]?.height}px`,
-          "--offset": typeof propsWithDefaults.offset === "number" ? `${propsWithDefaults.offset}px` : propsWithDefaults.offset || VIEWPORT_OFFSET,
-          "--width": `${TOAST_WIDTH}px`,
-          "--gap": `${GAP}px`,
-          ...propsWithDefaults.style
-        }}
-        onBlur={(event) => {
-          if (isFocusedWithinRef() && !event.currentTarget.contains(event.relatedTarget)) {
-            setIsFocusedWithinRef(false);
-            if (lastFocusedElementRef()) {
-              lastFocusedElementRef()?.focus({ preventScroll: true });
-              setLastFocusedElementRef(null);
-            }
+  return <Show when={toastsStore.toasts.length > 0}>{
+    /* Remove item from normal navigation flow, only available via hotkey */
+  }<section aria-label={`Notifications ${hotkeyLabel()}`} tabIndex={-1}><For2 each={possiblePositions()}>{(position, index) => {
+    const [y, x] = position.split("-");
+    return <ol
+      tabIndex={-1}
+      ref={listRef}
+      dir={propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir}
+      class={propsWithDefaults.class}
+      data-sonner-toaster
+      data-theme={actualTheme()}
+      data-rich-colors={propsWithDefaults.richColors}
+      data-y-position={y}
+      data-x-position={x}
+      style={{
+        "--front-toast-height": `${heights()[0]?.height}px`,
+        "--offset": typeof propsWithDefaults.offset === "number" ? `${propsWithDefaults.offset}px` : propsWithDefaults.offset || VIEWPORT_OFFSET,
+        "--width": `${TOAST_WIDTH}px`,
+        "--gap": `${GAP}px`,
+        ...propsWithDefaults.style
+      }}
+      onBlur={(event) => {
+        if (isFocusedWithinRef() && !event.currentTarget.contains(event.relatedTarget)) {
+          setIsFocusedWithinRef(false);
+          if (lastFocusedElementRef()) {
+            lastFocusedElementRef()?.focus({ preventScroll: true });
+            setLastFocusedElementRef(null);
           }
-        }}
-        onFocus={(event) => {
-          if (!isFocusedWithinRef()) {
-            setIsFocusedWithinRef(true);
-            setLastFocusedElementRef(event.relatedTarget);
-          }
-        }}
-        onMouseEnter={() => setExpanded(true)}
-        onMouseMove={() => setExpanded(true)}
-        onMouseLeave={() => {
-          if (!interacting())
-            setExpanded(false);
-        }}
-        onPointerDown={() => {
-          setInteracting(true);
-        }}
-        onPointerUp={() => setInteracting(false)}
-      ><For2 each={toasts().filter((toast2) => !toast2.position && index() === 0 || toast2.position === position)}>{(toast2, index2) => <Toast
-        index={index2()}
-        icons={propsWithDefaults.icons}
-        toast={toast2}
-        duration={propsWithDefaults.toastOptions?.duration ?? props.duration}
-        class={propsWithDefaults.toastOptions?.class}
-        classes={propsWithDefaults.toastOptions?.classes}
-        cancelButtonStyle={propsWithDefaults.toastOptions?.cancelButtonStyle}
-        actionButtonStyle={propsWithDefaults.toastOptions?.actionButtonStyle}
-        descriptionClass={propsWithDefaults.toastOptions?.descriptionClass}
-        invert={Boolean(propsWithDefaults.invert)}
-        visibleToasts={propsWithDefaults.visibleToasts}
-        closeButton={Boolean(propsWithDefaults.closeButton)}
-        interacting={interacting()}
-        position={propsWithDefaults.position}
-        style={propsWithDefaults.toastOptions?.style}
-        unstyled={propsWithDefaults.toastOptions?.unstyled}
-        removeToast={removeToast}
-        toasts={toasts()}
-        heights={heights()}
-        setHeights={setHeights}
-        expandByDefault={Boolean(propsWithDefaults.expand)}
-        gap={propsWithDefaults.gap}
-        expanded={expanded()}
-        pauseWhenPageIsHidden={propsWithDefaults.pauseWhenPageIsHidden}
-      />}</For2></ol>;
-    }}</For2></section>
-  </Show>;
+        }
+      }}
+      onFocus={(event) => {
+        if (!isFocusedWithinRef()) {
+          setIsFocusedWithinRef(true);
+          setLastFocusedElementRef(event.relatedTarget);
+        }
+      }}
+      onMouseEnter={() => setExpanded(true)}
+      onMouseMove={() => setExpanded(true)}
+      onMouseLeave={() => {
+        if (!interacting())
+          setExpanded(false);
+      }}
+      onPointerDown={() => {
+        setInteracting(true);
+      }}
+      onPointerUp={() => setInteracting(false)}
+    ><For2 each={toastsStore.toasts.filter((toast2) => !toast2.position && index() === 0 || toast2.position === position)}>{(toast2, index2) => <Toast
+      index={index2()}
+      icons={propsWithDefaults.icons}
+      toast={toast2}
+      duration={propsWithDefaults.toastOptions?.duration ?? props.duration}
+      class={propsWithDefaults.toastOptions?.class}
+      classes={propsWithDefaults.toastOptions?.classes}
+      cancelButtonStyle={propsWithDefaults.toastOptions?.cancelButtonStyle}
+      actionButtonStyle={propsWithDefaults.toastOptions?.actionButtonStyle}
+      descriptionClass={propsWithDefaults.toastOptions?.descriptionClass}
+      invert={Boolean(propsWithDefaults.invert)}
+      visibleToasts={propsWithDefaults.visibleToasts}
+      closeButton={Boolean(propsWithDefaults.closeButton)}
+      interacting={interacting()}
+      position={propsWithDefaults.position}
+      style={propsWithDefaults.toastOptions?.style}
+      unstyled={propsWithDefaults.toastOptions?.unstyled}
+      removeToast={removeToast}
+      toasts={toastsStore.toasts}
+      heights={heights()}
+      setHeights={setHeights}
+      expandByDefault={Boolean(propsWithDefaults.expand)}
+      gap={propsWithDefaults.gap}
+      expanded={expanded()}
+      pauseWhenPageIsHidden={propsWithDefaults.pauseWhenPageIsHidden}
+    />}</For2></ol>;
+  }}</For2></section></Show>;
 };
@@ -722,0 +703,0 @@ export {

dist/index.js

@@ -1,3 +0,4 @@
-import { delegateEvents, createComponent, insert, use, setAttribute, effect, className, style, template, addEventListener, Dynamic } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, use, setAttribute, effect, className, style, template, addEventListener, memo } from 'solid-js/web';
 import { mergeProps, createSignal, onMount, onCleanup, createEffect, on, Show, For } from 'solid-js';
+import { createStore, produce, reconcile } from 'solid-js/store';
 
@@ -8,4 +9,3 @@ // src/index.tsx
 function styleInject(css, { insertAt } = {}) {
-  if (!css || typeof document === "undefined")
-    return;
+  if (typeof document === "undefined") return;
   const head = document.head || document.getElementsByTagName("head")[0];
@@ -41,3 +41,3 @@ const style = document.createElement("style");
   return (() => {
-    const _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
     insert(_el$2, createComponent(For, {
@@ -276,4 +276,3 @@ each: bars,
     return props.heights.reduce((prev, curr, reducerIndex) => {
-      if (reducerIndex >= heightIndex())
-        return prev;
+      if (reducerIndex >= heightIndex()) return prev;
       return prev + curr.height;
@@ -289,3 +288,3 @@ }, 0);
       return (() => {
-        const _el$ = _tmpl$7();
+        var _el$ = _tmpl$7();
         insert(_el$, () => props.icons.loading);
@@ -315,13 +314,11 @@ effect(() => setAttribute(_el$, "data-visible", toastType() === "loading"));
         const alreadyExists = heights.find((height) => height.toastId === props.toast.id);
-        if (!alreadyExists)
-          return [{
-            toastId: props.toast.id,
-            height: newHeight,
-            position: props.toast.position
-          }, ...heights];
-        else
-          return heights.map((height) => height.toastId === props.toast.id ? {
-            ...height,
-            height: newHeight
-          } : height);
+        if (!alreadyExists) return [{
+          toastId: props.toast.id,
+          height: newHeight,
+          position: props.toast.position
+        }, ...heights];
+        else return heights.map((height) => height.toastId === props.toast.id ? {
+          ...height,
+          height: newHeight
+        } : height);
       });
@@ -340,4 +337,3 @@ });
   createEffect(on(() => [props.expanded, props.interacting, props.toast, duration(), props.toast.promise, toastType(), props.pauseWhenPageIsHidden, isDocumentHidden()], ([expanded, interacting, toast2, duration2, promise, toastType2, pauseWhenPageIsHidden, isDocumentHidden2]) => {
-    if (promise && toastType2 === "loading" || duration2 === Number.POSITIVE_INFINITY)
-      return;
+    if (promise && toastType2 === "loading" || duration2 === Number.POSITIVE_INFINITY) return;
     let timeoutId;
@@ -358,6 +354,4 @@ const pauseTimer = () => {
     };
-    if (expanded || interacting || pauseWhenPageIsHidden && isDocumentHidden2)
-      pauseTimer();
-    else
-      startTimer();
+    if (expanded || interacting || pauseWhenPageIsHidden && isDocumentHidden2) pauseTimer();
+    else startTimer();
     onCleanup(() => {
@@ -383,10 +377,8 @@ clearTimeout(timeoutId);
   createEffect(on(() => props.toast.delete, (d) => {
-    if (d)
-      deleteToast();
+    if (d) deleteToast();
   }));
   return (() => {
-    const _el$2 = _tmpl$32();
+    var _el$2 = _tmpl$32();
     _el$2.$$pointermove = (event) => {
-      if (!pointerStartRef())
-        return;
+      if (!pointerStartRef()) return;
       const yPosition = event.clientY - pointerStartRef().y;
@@ -405,4 +397,3 @@ const xPosition = event.clientX - pointerStartRef().x;
     _el$2.$$pointerup = () => {
-      if (swipeOut())
-        return;
+      if (swipeOut()) return;
       setPointerStartRef(null);
@@ -421,8 +412,6 @@ const swipeAmount = Number(toastRef?.style.getPropertyValue("--swipe-amount").replace("px", "") || 0);
     _el$2.$$pointerdown = (event) => {
-      if (disabled())
-        return;
+      if (disabled()) return;
       setOffsetBeforeRemove(offset());
       event.target.setPointerCapture(event.pointerId);
-      if (event.target.tagName === "BUTTON")
-        return;
+      if (event.target.tagName === "BUTTON") return;
       setSwiping(true);
@@ -434,3 +423,3 @@ setPointerStartRef({
     };
-    const _ref$ = toastRef;
+    var _ref$ = toastRef;
     typeof _ref$ === "function" ? use(_ref$, _el$2) : toastRef = _el$2;
@@ -442,3 +431,3 @@ insert(_el$2, createComponent(Show, {
       get children() {
-        const _el$3 = _tmpl$22();
+        var _el$3 = _tmpl$22();
         addEventListener(_el$3, "click", disabled() ? void 0 : () => {
@@ -449,9 +438,9 @@ deleteToast();
         effect((_p$) => {
-          const _v$ = disabled(), _v$2 = _cn(props.classes?.closeButton, props.toast?.classes?.closeButton);
-          _v$ !== _p$._v$ && setAttribute(_el$3, "data-disabled", _p$._v$ = _v$);
-          _v$2 !== _p$._v$2 && className(_el$3, _p$._v$2 = _v$2);
+          var _v$ = disabled(), _v$2 = _cn(props.classes?.closeButton, props.toast?.classes?.closeButton);
+          _v$ !== _p$.e && setAttribute(_el$3, "data-disabled", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
           return _p$;
         }, {
-          _v$: void 0,
-          _v$2: void 0
+          e: void 0,
+          t: void 0
         });
@@ -471,26 +460,15 @@ return _el$3;
           get children() {
-            const _el$4 = _tmpl$42();
-            insert(_el$4, createComponent(Show, {
-              get when() {
-                return props.toast.icon || props.toast.promise || toastType() === "loading";
-              },
-              get fallback() {
-                return createComponent(Dynamic, {
-                  get component() {
-                    return getAsset(toastType());
-                  }
-                });
-              },
-              get children() {
-                return createComponent(Dynamic, {
-                  get component() {
-                    return props.toast.icon && (() => props.toast.icon) || props.icons?.loading || getLoadingIcon();
-                  }
-                });
-              }
-            }));
+            var _el$4 = _tmpl$42();
+            insert(_el$4, (() => {
+              var _c$ = memo(() => !!(props.toast.promise || props.toast.type === "loading" && !props.toast.icon));
+              return () => _c$() ? props.toast.icon || getLoadingIcon() : null;
+            })(), null);
+            insert(_el$4, (() => {
+              var _c$2 = memo(() => props.toast.type !== "loading");
+              return () => _c$2() ? props.toast.icon || props.icons?.[toastType()] || getAsset(toastType())() : null;
+            })(), null);
             return _el$4;
           }
         }), (() => {
-          const _el$5 = _tmpl$62(), _el$6 = _el$5.firstChild;
+          var _el$5 = _tmpl$62(), _el$6 = _el$5.firstChild;
           insert(_el$6, () => props.toast.title);
@@ -502,3 +480,3 @@ insert(_el$5, createComponent(Show, {
             get children() {
-              const _el$7 = _tmpl$52();
+              var _el$7 = _tmpl$52();
               insert(_el$7, () => props.toast.description);
@@ -516,17 +494,16 @@ effect(() => className(_el$7, _cn(props.descriptionClass, toastDescriptionClassname(), props.classes?.description, props.toast?.classes?.description)));
           get children() {
-            const _el$8 = _tmpl$72();
+            var _el$8 = _tmpl$72();
             _el$8.$$click = () => {
               deleteToast();
-              if (props.toast.cancel?.onClick)
-                props.toast.cancel.onClick();
+              if (props.toast.cancel?.onClick) props.toast.cancel.onClick();
             };
             insert(_el$8, () => props.toast.cancel.label);
             effect((_p$) => {
-              const _v$20 = props.toast.cancelButtonStyle || props.cancelButtonStyle, _v$21 = _cn(props.classes?.cancelButton, props.toast?.classes?.cancelButton);
-              _p$._v$20 = style(_el$8, _v$20, _p$._v$20);
-              _v$21 !== _p$._v$21 && className(_el$8, _p$._v$21 = _v$21);
+              var _v$20 = props.toast.cancelButtonStyle || props.cancelButtonStyle, _v$21 = _cn(props.classes?.cancelButton, props.toast?.classes?.cancelButton);
+              _p$.e = style(_el$8, _v$20, _p$.e);
+              _v$21 !== _p$.t && className(_el$8, _p$.t = _v$21);
               return _p$;
             }, {
-              _v$20: void 0,
-              _v$21: void 0
+              e: void 0,
+              t: void 0
             });
@@ -540,7 +517,6 @@ return _el$8;
           get children() {
-            const _el$9 = _tmpl$8();
+            var _el$9 = _tmpl$8();
             _el$9.$$click = (event) => {
               props.toast.action?.onClick(event);
-              if (event.defaultPrevented)
-                return;
+              if (event.defaultPrevented) return;
               deleteToast();
@@ -550,9 +526,9 @@ };
             effect((_p$) => {
-              const _v$22 = props.toast.actionButtonStyle || props.actionButtonStyle, _v$23 = _cn(props.classes?.actionButton, props.toast?.classes?.actionButton);
-              _p$._v$22 = style(_el$9, _v$22, _p$._v$22);
-              _v$23 !== _p$._v$23 && className(_el$9, _p$._v$23 = _v$23);
+              var _v$22 = props.toast.actionButtonStyle || props.actionButtonStyle, _v$23 = _cn(props.classes?.actionButton, props.toast?.classes?.actionButton);
+              _p$.e = style(_el$9, _v$22, _p$.e);
+              _v$23 !== _p$.t && className(_el$9, _p$.t = _v$23);
               return _p$;
             }, {
-              _v$22: void 0,
-              _v$23: void 0
+              e: void 0,
+              t: void 0
             });
@@ -568,3 +544,3 @@ return _el$9;
     effect((_p$) => {
-      const _v$3 = props.toast.important ? "assertive" : "polite", _v$4 = _cn(props.class, toastClassname(), props.classes?.toast, props.toast?.classes?.toast, props.classes?.default, props.classes?.[toastType()], props.toast?.classes?.[toastType()]), _v$5 = !(props.toast.jsx || props.toast.unstyled || props.unstyled), _v$6 = mounted(), _v$7 = Boolean(props.toast.promise), _v$8 = removed(), _v$9 = isVisible(), _v$10 = coords()[0], _v$11 = coords()[1], _v$12 = props.index, _v$13 = isFront(), _v$14 = swiping(), _v$15 = toastType(), _v$16 = invert(), _v$17 = swipeOut(), _v$18 = Boolean(props.expanded || props.expandByDefault && mounted()), _v$19 = {
+      var _v$3 = props.toast.important ? "assertive" : "polite", _v$4 = _cn(props.class, toastClassname(), props.classes?.toast, props.toast?.classes?.toast, props.classes?.default, props.classes?.[toastType()], props.toast?.classes?.[toastType()]), _v$5 = !(props.toast.jsx || props.toast.unstyled || props.unstyled), _v$6 = mounted(), _v$7 = Boolean(props.toast.promise), _v$8 = removed(), _v$9 = isVisible(), _v$10 = coords()[0], _v$11 = coords()[1], _v$12 = props.index, _v$13 = isFront(), _v$14 = swiping(), _v$15 = toastType(), _v$16 = invert(), _v$17 = swipeOut(), _v$18 = Boolean(props.expanded || props.expandByDefault && mounted()), _v$19 = {
         "--index": props.index,
@@ -578,38 +554,38 @@ "--toasts-before": props.index,
       };
-      _v$3 !== _p$._v$3 && setAttribute(_el$2, "aria-live", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && className(_el$2, _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && setAttribute(_el$2, "data-styled", _p$._v$5 = _v$5);
-      _v$6 !== _p$._v$6 && setAttribute(_el$2, "data-mounted", _p$._v$6 = _v$6);
-      _v$7 !== _p$._v$7 && setAttribute(_el$2, "data-promise", _p$._v$7 = _v$7);
-      _v$8 !== _p$._v$8 && setAttribute(_el$2, "data-removed", _p$._v$8 = _v$8);
-      _v$9 !== _p$._v$9 && setAttribute(_el$2, "data-visible", _p$._v$9 = _v$9);
-      _v$10 !== _p$._v$10 && setAttribute(_el$2, "data-y-position", _p$._v$10 = _v$10);
-      _v$11 !== _p$._v$11 && setAttribute(_el$2, "data-x-position", _p$._v$11 = _v$11);
-      _v$12 !== _p$._v$12 && setAttribute(_el$2, "data-index", _p$._v$12 = _v$12);
-      _v$13 !== _p$._v$13 && setAttribute(_el$2, "data-front", _p$._v$13 = _v$13);
-      _v$14 !== _p$._v$14 && setAttribute(_el$2, "data-swiping", _p$._v$14 = _v$14);
-      _v$15 !== _p$._v$15 && setAttribute(_el$2, "data-type", _p$._v$15 = _v$15);
-      _v$16 !== _p$._v$16 && setAttribute(_el$2, "data-invert", _p$._v$16 = _v$16);
-      _v$17 !== _p$._v$17 && setAttribute(_el$2, "data-swipe-out", _p$._v$17 = _v$17);
-      _v$18 !== _p$._v$18 && setAttribute(_el$2, "data-expanded", _p$._v$18 = _v$18);
-      _p$._v$19 = style(_el$2, _v$19, _p$._v$19);
+      _v$3 !== _p$.e && setAttribute(_el$2, "aria-live", _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$2, _p$.t = _v$4);
+      _v$5 !== _p$.a && setAttribute(_el$2, "data-styled", _p$.a = _v$5);
+      _v$6 !== _p$.o && setAttribute(_el$2, "data-mounted", _p$.o = _v$6);
+      _v$7 !== _p$.i && setAttribute(_el$2, "data-promise", _p$.i = _v$7);
+      _v$8 !== _p$.n && setAttribute(_el$2, "data-removed", _p$.n = _v$8);
+      _v$9 !== _p$.s && setAttribute(_el$2, "data-visible", _p$.s = _v$9);
+      _v$10 !== _p$.h && setAttribute(_el$2, "data-y-position", _p$.h = _v$10);
+      _v$11 !== _p$.r && setAttribute(_el$2, "data-x-position", _p$.r = _v$11);
+      _v$12 !== _p$.d && setAttribute(_el$2, "data-index", _p$.d = _v$12);
+      _v$13 !== _p$.l && setAttribute(_el$2, "data-front", _p$.l = _v$13);
+      _v$14 !== _p$.u && setAttribute(_el$2, "data-swiping", _p$.u = _v$14);
+      _v$15 !== _p$.c && setAttribute(_el$2, "data-type", _p$.c = _v$15);
+      _v$16 !== _p$.w && setAttribute(_el$2, "data-invert", _p$.w = _v$16);
+      _v$17 !== _p$.m && setAttribute(_el$2, "data-swipe-out", _p$.m = _v$17);
+      _v$18 !== _p$.f && setAttribute(_el$2, "data-expanded", _p$.f = _v$18);
+      _p$.y = style(_el$2, _v$19, _p$.y);
       return _p$;
     }, {
-      _v$3: void 0,
-      _v$4: void 0,
-      _v$5: void 0,
-      _v$6: void 0,
-      _v$7: void 0,
-      _v$8: void 0,
-      _v$9: void 0,
-      _v$10: void 0,
-      _v$11: void 0,
-      _v$12: void 0,
-      _v$13: void 0,
-      _v$14: void 0,
-      _v$15: void 0,
-      _v$16: void 0,
-      _v$17: void 0,
-      _v$18: void 0,
-      _v$19: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0,
+      c: void 0,
+      w: void 0,
+      m: void 0,
+      f: void 0,
+      y: void 0
     });
@@ -620,9 +596,6 @@ return _el$2;
 function getDocumentDirection() {
-  if (typeof window === "undefined")
-    return "ltr";
-  if (typeof document === "undefined")
-    return "ltr";
+  if (typeof window === "undefined") return "ltr";
+  if (typeof document === "undefined") return "ltr";
   const dirAttribute = document.documentElement.getAttribute("dir");
-  if (dirAttribute === "auto" || !dirAttribute)
-    return window.getComputedStyle(document.documentElement).direction;
+  if (dirAttribute === "auto" || !dirAttribute) return window.getComputedStyle(document.documentElement).direction;
   return dirAttribute;
@@ -638,5 +611,7 @@ }
   }, props);
-  const [toasts, setToasts] = createSignal([]);
+  const [toastsStore, setToastsStore] = createStore({
+    toasts: []
+  });
   const possiblePositions = () => {
-    return Array.from(new Set([propsWithDefaults.position].concat(toasts().filter((toast2) => toast2.position).map((toast2) => toast2.position))));
+    return Array.from(new Set([propsWithDefaults.position].concat(toastsStore.toasts.filter((toast2) => toast2.position).map((toast2) => toast2.position))));
   };
@@ -651,3 +626,3 @@ const [heights, setHeights] = createSignal([]);
   const [actualTheme, setActualTheme] = createSignal(propsWithDefaults.theme !== "system" ? propsWithDefaults.theme : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
-  const removeToast = (toast2) => setToasts((toasts2) => toasts2.filter(({
+  const removeToast = (toast2) => setToastsStore("toasts", (toasts) => toasts.filter(({
     id
@@ -658,18 +633,17 @@ }) => id !== toast2.id));
       if (toast2.dismiss) {
-        setToasts((toasts2) => toasts2.map((t) => t.id === toast2.id ? {
-          ...t,
-          delete: true
-        } : t));
+        setToastsStore("toasts", produce((_toasts) => {
+          _toasts.forEach((t) => {
+            if (t.id === toast2.id) t.delete = true;
+          });
+        }));
         return;
       }
-      setToasts((toasts2) => {
-        const indexOfExistingToast = toasts2.findIndex((t) => t.id === toast2.id);
-        if (indexOfExistingToast !== -1) {
-          return [...toasts2.slice(0, indexOfExistingToast), {
-            ...toasts2[indexOfExistingToast],
-            ...toast2
-          }, ...toasts2.slice(indexOfExistingToast + 1)];
-        }
-        return [toast2, ...toasts2];
-      });
+      const changedIndex = toastsStore.toasts.findIndex((t) => t.id === toast2.id);
+      if (changedIndex !== -1) {
+        setToastsStore("toasts", [changedIndex], reconcile(toast2));
+        return;
+      }
+      setToastsStore("toasts", produce((_toasts) => {
+        _toasts.unshift(toast2);
+      }));
     });
@@ -685,16 +659,12 @@ onCleanup(() => {
     }
-    if (typeof window === "undefined")
-      return;
+    if (typeof window === "undefined") return;
     window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({
       matches
     }) => {
-      if (matches)
-        setActualTheme("dark");
-      else
-        setActualTheme("light");
+      if (matches) setActualTheme("dark");
+      else setActualTheme("light");
     });
   }));
   createEffect(() => {
-    if (toasts().length <= 1)
-      setExpanded(false);
+    if (toastsStore.toasts.length <= 1) setExpanded(false);
   });
@@ -708,4 +678,3 @@ onMount(() => {
       }
-      if (event.code === "Escape" && (document.activeElement === listRef || listRef?.contains(document.activeElement)))
-        setExpanded(false);
+      if (event.code === "Escape" && (document.activeElement === listRef || listRef?.contains(document.activeElement))) setExpanded(false);
     };
@@ -732,6 +701,6 @@ document.addEventListener("keydown", handleKeyDown);
     get when() {
-      return toasts().length > 0;
+      return toastsStore.toasts.length > 0;
     },
     get children() {
-      const _el$10 = _tmpl$9();
+      var _el$10 = _tmpl$9();
       insert(_el$10, createComponent(For, {
@@ -744,3 +713,3 @@ get each() {
           return (() => {
-            const _el$11 = _tmpl$10();
+            var _el$11 = _tmpl$10();
             _el$11.$$pointerup = () => setInteracting(false);
@@ -751,4 +720,3 @@ _el$11.$$pointerdown = () => {
             _el$11.addEventListener("mouseleave", () => {
-              if (!interacting())
-                setExpanded(false);
+              if (!interacting()) setExpanded(false);
             });
@@ -774,3 +742,3 @@ _el$11.$$mousemove = () => setExpanded(true);
             });
-            const _ref$2 = listRef;
+            var _ref$2 = listRef;
             typeof _ref$2 === "function" ? use(_ref$2, _el$11) : listRef = _el$11;
@@ -781,3 +749,3 @@ setAttribute(_el$11, "data-y-position", y);
               get each() {
-                return toasts().filter((toast2) => !toast2.position && index() === 0 || toast2.position === position);
+                return toastsStore.toasts.filter((toast2) => !toast2.position && index() === 0 || toast2.position === position);
               },
@@ -833,3 +801,3 @@ children: (toast2, index2) => createComponent(Toast, {
                 get toasts() {
-                  return toasts();
+                  return toastsStore.toasts;
                 },
@@ -855,3 +823,3 @@ get heights() {
             effect((_p$) => {
-              const _v$24 = propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir, _v$25 = propsWithDefaults.class, _v$26 = actualTheme(), _v$27 = propsWithDefaults.richColors, _v$28 = {
+              var _v$24 = propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir, _v$25 = propsWithDefaults.class, _v$26 = actualTheme(), _v$27 = propsWithDefaults.richColors, _v$28 = {
                 "--front-toast-height": `${heights()[0]?.height}px`,
@@ -863,14 +831,14 @@ "--offset": typeof propsWithDefaults.offset === "number" ? `${propsWithDefaults.offset}px` : propsWithDefaults.offset || VIEWPORT_OFFSET,
               };
-              _v$24 !== _p$._v$24 && setAttribute(_el$11, "dir", _p$._v$24 = _v$24);
-              _v$25 !== _p$._v$25 && className(_el$11, _p$._v$25 = _v$25);
-              _v$26 !== _p$._v$26 && setAttribute(_el$11, "data-theme", _p$._v$26 = _v$26);
-              _v$27 !== _p$._v$27 && setAttribute(_el$11, "data-rich-colors", _p$._v$27 = _v$27);
-              _p$._v$28 = style(_el$11, _v$28, _p$._v$28);
+              _v$24 !== _p$.e && setAttribute(_el$11, "dir", _p$.e = _v$24);
+              _v$25 !== _p$.t && className(_el$11, _p$.t = _v$25);
+              _v$26 !== _p$.a && setAttribute(_el$11, "data-theme", _p$.a = _v$26);
+              _v$27 !== _p$.o && setAttribute(_el$11, "data-rich-colors", _p$.o = _v$27);
+              _p$.i = style(_el$11, _v$28, _p$.i);
               return _p$;
             }, {
-              _v$24: void 0,
-              _v$25: void 0,
-              _v$26: void 0,
-              _v$27: void 0,
-              _v$28: void 0
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0
             });
@@ -877,0 +845,0 @@ return _el$11;

dist/index.jsx

 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
-  if (!css || typeof document === "undefined")
-    return;
+  if (!css || typeof document === "undefined") return;
   const head = document.head || document.getElementsByTagName("head")[0];
@@ -28,4 +27,4 @@ const style = document.createElement("style");
 // src/index.tsx
-import { Dynamic } from "solid-js/web";
 import { For as For2, Show, createEffect, createSignal as createSignal2, mergeProps, on, onCleanup as onCleanup2, onMount as onMount2 } from "solid-js";
+import { createStore, produce, reconcile } from "solid-js/store";
 
@@ -460,70 +459,53 @@ // src/assets.tsx
     }}
-  >
-    <Show when={props.closeButton && !props.toast.jsx}><button
-      aria-label="Close toast"
-      data-disabled={disabled()}
-      data-close-button
-      onClick={disabled() ? void 0 : () => {
+  ><Show when={props.closeButton && !props.toast.jsx}><button
+    aria-label="Close toast"
+    data-disabled={disabled()}
+    data-close-button
+    onClick={disabled() ? void 0 : () => {
+      deleteToast();
+      props.toast.onDismiss?.(props.toast);
+    }}
+    class={_cn(props.classes?.closeButton, props.toast?.classes?.closeButton)}
+  ><svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  ><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg></button></Show><Show
+    when={props.toast.jsx || props.toast.title instanceof Element}
+    fallback={<><Show when={toastType() || props.toast.icon || props.toast.promise}><div data-icon="">{props.toast.promise || props.toast.type === "loading" && !props.toast.icon ? props.toast.icon || getLoadingIcon() : null}{props.toast.type !== "loading" ? props.toast.icon || props.icons?.[toastType()] || getAsset(toastType())() : null}</div></Show><div data-content=""><div data-title="" class={_cn(props.classes?.title, props.toast?.classes?.title)}>{props.toast.title}</div><Show when={props.toast.description}><div
+      data-description=""
+      class={_cn(
+        props.descriptionClass,
+        toastDescriptionClassname(),
+        props.classes?.description,
+        props.toast?.classes?.description
+      )}
+    >{props.toast.description}</div></Show></div><Show when={props.toast.cancel}><button
+      data-button
+      data-cancel
+      style={props.toast.cancelButtonStyle || props.cancelButtonStyle}
+      onClick={() => {
         deleteToast();
-        props.toast.onDismiss?.(props.toast);
+        if (props.toast.cancel?.onClick)
+          props.toast.cancel.onClick();
       }}
-      class={_cn(props.classes?.closeButton, props.toast?.classes?.closeButton)}
-    ><svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg></button></Show>
-    <Show
-      when={props.toast.jsx || props.toast.title instanceof Element}
-      fallback={<>
-        <Show when={toastType() || props.toast.icon || props.toast.promise}><div data-icon=""><Show
-          when={props.toast.icon || props.toast.promise || toastType() === "loading"}
-          fallback={<Dynamic component={getAsset(toastType())} />}
-        ><Dynamic component={props.toast.icon && (() => props.toast.icon) || props.icons?.loading || getLoadingIcon()} /></Show></div></Show>
-        <div data-content="">
-          <div data-title="" class={_cn(props.classes?.title, props.toast?.classes?.title)}>{props.toast.title}</div>
-          <Show when={props.toast.description}><div
-            data-description=""
-            class={_cn(
-              props.descriptionClass,
-              toastDescriptionClassname(),
-              props.classes?.description,
-              props.toast?.classes?.description
-            )}
-          >{props.toast.description}</div></Show>
-        </div>
-        <Show when={props.toast.cancel}><button
-          data-button
-          data-cancel
-          style={props.toast.cancelButtonStyle || props.cancelButtonStyle}
-          onClick={() => {
-            deleteToast();
-            if (props.toast.cancel?.onClick)
-              props.toast.cancel.onClick();
-          }}
-          class={_cn(props.classes?.cancelButton, props.toast?.classes?.cancelButton)}
-        >{props.toast.cancel.label}</button></Show>
-        <Show when={props.toast.action}><button
-          data-button=""
-          style={props.toast.actionButtonStyle || props.actionButtonStyle}
-          onClick={(event) => {
-            props.toast.action?.onClick(event);
-            if (event.defaultPrevented)
-              return;
-            deleteToast();
-          }}
-          class={_cn(props.classes?.actionButton, props.toast?.classes?.actionButton)}
-        >{props.toast.action.label}</button></Show>
-      </>}
-    >{props.toast.jsx || props.toast.title}</Show>
-  </li>;
+      class={_cn(props.classes?.cancelButton, props.toast?.classes?.cancelButton)}
+    >{props.toast.cancel.label}</button></Show><Show when={props.toast.action}><button
+      data-button=""
+      style={props.toast.actionButtonStyle || props.actionButtonStyle}
+      onClick={(event) => {
+        props.toast.action?.onClick(event);
+        if (event.defaultPrevented)
+          return;
+        deleteToast();
+      }}
+      class={_cn(props.classes?.actionButton, props.toast?.classes?.actionButton)}
+    >{props.toast.action.label}</button></Show></>}
+  >{props.toast.jsx || props.toast.title}</Show></li>;
 };
@@ -548,6 +530,6 @@ function getDocumentDirection() {
   }, props);
-  const [toasts, setToasts] = createSignal2([]);
+  const [toastsStore, setToastsStore] = createStore({ toasts: [] });
   const possiblePositions = () => {
     return Array.from(
-      new Set([propsWithDefaults.position].concat(toasts().filter((toast2) => toast2.position).map((toast2) => toast2.position)))
+      new Set([propsWithDefaults.position].concat(toastsStore.toasts.filter((toast2) => toast2.position).map((toast2) => toast2.position)))
     );
@@ -565,20 +547,22 @@ };
   );
-  const removeToast = (toast2) => setToasts((toasts2) => toasts2.filter(({ id }) => id !== toast2.id));
+  const removeToast = (toast2) => setToastsStore("toasts", (toasts) => toasts.filter(({ id }) => id !== toast2.id));
   onMount2(() => {
     const unsub = ToastState.subscribe((toast2) => {
       if (toast2.dismiss) {
-        setToasts((toasts2) => toasts2.map((t) => t.id === toast2.id ? { ...t, delete: true } : t));
+        setToastsStore("toasts", produce((_toasts) => {
+          _toasts.forEach((t) => {
+            if (t.id === toast2.id)
+              t.delete = true;
+          });
+        }));
         return;
       }
-      setToasts((toasts2) => {
-        const indexOfExistingToast = toasts2.findIndex((t) => t.id === toast2.id);
-        if (indexOfExistingToast !== -1) {
-          return [
-            ...toasts2.slice(0, indexOfExistingToast),
-            { ...toasts2[indexOfExistingToast], ...toast2 },
-            ...toasts2.slice(indexOfExistingToast + 1)
-          ];
-        }
-        return [toast2, ...toasts2];
-      });
+      const changedIndex = toastsStore.toasts.findIndex((t) => t.id === toast2.id);
+      if (changedIndex !== -1) {
+        setToastsStore("toasts", [changedIndex], reconcile(toast2));
+        return;
+      }
+      setToastsStore("toasts", produce((_toasts) => {
+        _toasts.unshift(toast2);
+      }));
     });
@@ -609,3 +593,3 @@ onCleanup2(() => {
   createEffect(() => {
-    if (toasts().length <= 1)
+    if (toastsStore.toasts.length <= 1)
       setExpanded(false);
@@ -644,78 +628,75 @@ });
   );
-  return <Show when={toasts().length > 0}>
-    {
-      /* Remove item from normal navigation flow, only available via hotkey */
-    }
-    <section aria-label={`Notifications ${hotkeyLabel()}`} tabIndex={-1}><For2 each={possiblePositions()}>{(position, index) => {
-      const [y, x] = position.split("-");
-      return <ol
-        tabIndex={-1}
-        ref={listRef}
-        dir={propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir}
-        class={propsWithDefaults.class}
-        data-sonner-toaster
-        data-theme={actualTheme()}
-        data-rich-colors={propsWithDefaults.richColors}
-        data-y-position={y}
-        data-x-position={x}
-        style={{
-          "--front-toast-height": `${heights()[0]?.height}px`,
-          "--offset": typeof propsWithDefaults.offset === "number" ? `${propsWithDefaults.offset}px` : propsWithDefaults.offset || VIEWPORT_OFFSET,
-          "--width": `${TOAST_WIDTH}px`,
-          "--gap": `${GAP}px`,
-          ...propsWithDefaults.style
-        }}
-        onBlur={(event) => {
-          if (isFocusedWithinRef() && !event.currentTarget.contains(event.relatedTarget)) {
-            setIsFocusedWithinRef(false);
-            if (lastFocusedElementRef()) {
-              lastFocusedElementRef()?.focus({ preventScroll: true });
-              setLastFocusedElementRef(null);
-            }
+  return <Show when={toastsStore.toasts.length > 0}>{
+    /* Remove item from normal navigation flow, only available via hotkey */
+  }<section aria-label={`Notifications ${hotkeyLabel()}`} tabIndex={-1}><For2 each={possiblePositions()}>{(position, index) => {
+    const [y, x] = position.split("-");
+    return <ol
+      tabIndex={-1}
+      ref={listRef}
+      dir={propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir}
+      class={propsWithDefaults.class}
+      data-sonner-toaster
+      data-theme={actualTheme()}
+      data-rich-colors={propsWithDefaults.richColors}
+      data-y-position={y}
+      data-x-position={x}
+      style={{
+        "--front-toast-height": `${heights()[0]?.height}px`,
+        "--offset": typeof propsWithDefaults.offset === "number" ? `${propsWithDefaults.offset}px` : propsWithDefaults.offset || VIEWPORT_OFFSET,
+        "--width": `${TOAST_WIDTH}px`,
+        "--gap": `${GAP}px`,
+        ...propsWithDefaults.style
+      }}
+      onBlur={(event) => {
+        if (isFocusedWithinRef() && !event.currentTarget.contains(event.relatedTarget)) {
+          setIsFocusedWithinRef(false);
+          if (lastFocusedElementRef()) {
+            lastFocusedElementRef()?.focus({ preventScroll: true });
+            setLastFocusedElementRef(null);
           }
-        }}
-        onFocus={(event) => {
-          if (!isFocusedWithinRef()) {
-            setIsFocusedWithinRef(true);
-            setLastFocusedElementRef(event.relatedTarget);
-          }
-        }}
-        onMouseEnter={() => setExpanded(true)}
-        onMouseMove={() => setExpanded(true)}
-        onMouseLeave={() => {
-          if (!interacting())
-            setExpanded(false);
-        }}
-        onPointerDown={() => {
-          setInteracting(true);
-        }}
-        onPointerUp={() => setInteracting(false)}
-      ><For2 each={toasts().filter((toast2) => !toast2.position && index() === 0 || toast2.position === position)}>{(toast2, index2) => <Toast
-        index={index2()}
-        icons={propsWithDefaults.icons}
-        toast={toast2}
-        duration={propsWithDefaults.toastOptions?.duration ?? props.duration}
-        class={propsWithDefaults.toastOptions?.class}
-        classes={propsWithDefaults.toastOptions?.classes}
-        cancelButtonStyle={propsWithDefaults.toastOptions?.cancelButtonStyle}
-        actionButtonStyle={propsWithDefaults.toastOptions?.actionButtonStyle}
-        descriptionClass={propsWithDefaults.toastOptions?.descriptionClass}
-        invert={Boolean(propsWithDefaults.invert)}
-        visibleToasts={propsWithDefaults.visibleToasts}
-        closeButton={Boolean(propsWithDefaults.closeButton)}
-        interacting={interacting()}
-        position={propsWithDefaults.position}
-        style={propsWithDefaults.toastOptions?.style}
-        unstyled={propsWithDefaults.toastOptions?.unstyled}
-        removeToast={removeToast}
-        toasts={toasts()}
-        heights={heights()}
-        setHeights={setHeights}
-        expandByDefault={Boolean(propsWithDefaults.expand)}
-        gap={propsWithDefaults.gap}
-        expanded={expanded()}
-        pauseWhenPageIsHidden={propsWithDefaults.pauseWhenPageIsHidden}
-      />}</For2></ol>;
-    }}</For2></section>
-  </Show>;
+        }
+      }}
+      onFocus={(event) => {
+        if (!isFocusedWithinRef()) {
+          setIsFocusedWithinRef(true);
+          setLastFocusedElementRef(event.relatedTarget);
+        }
+      }}
+      onMouseEnter={() => setExpanded(true)}
+      onMouseMove={() => setExpanded(true)}
+      onMouseLeave={() => {
+        if (!interacting())
+          setExpanded(false);
+      }}
+      onPointerDown={() => {
+        setInteracting(true);
+      }}
+      onPointerUp={() => setInteracting(false)}
+    ><For2 each={toastsStore.toasts.filter((toast2) => !toast2.position && index() === 0 || toast2.position === position)}>{(toast2, index2) => <Toast
+      index={index2()}
+      icons={propsWithDefaults.icons}
+      toast={toast2}
+      duration={propsWithDefaults.toastOptions?.duration ?? props.duration}
+      class={propsWithDefaults.toastOptions?.class}
+      classes={propsWithDefaults.toastOptions?.classes}
+      cancelButtonStyle={propsWithDefaults.toastOptions?.cancelButtonStyle}
+      actionButtonStyle={propsWithDefaults.toastOptions?.actionButtonStyle}
+      descriptionClass={propsWithDefaults.toastOptions?.descriptionClass}
+      invert={Boolean(propsWithDefaults.invert)}
+      visibleToasts={propsWithDefaults.visibleToasts}
+      closeButton={Boolean(propsWithDefaults.closeButton)}
+      interacting={interacting()}
+      position={propsWithDefaults.position}
+      style={propsWithDefaults.toastOptions?.style}
+      unstyled={propsWithDefaults.toastOptions?.unstyled}
+      removeToast={removeToast}
+      toasts={toastsStore.toasts}
+      heights={heights()}
+      setHeights={setHeights}
+      expandByDefault={Boolean(propsWithDefaults.expand)}
+      gap={propsWithDefaults.gap}
+      expanded={expanded()}
+      pauseWhenPageIsHidden={propsWithDefaults.pauseWhenPageIsHidden}
+    />}</For2></ol>;
+  }}</For2></section></Show>;
 };
@@ -722,0 +703,0 @@ export {

package.json

 {
   "name": "solid-sonner",
   "type": "module",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "private": false,
-  "packageManager": "pnpm@9.1.1",
+  "packageManager": "pnpm@9.2.0",
   "description": "An opinionated toast component for Solid.",
@@ -63,17 +63,17 @@ "author": "Robert Soriano <[e-mail]>",
     "@antfu/eslint-config-ts": "^0.43.1",
-    "@playwright/test": "^1.44.0",
-    "@types/node": "^20.12.12",
+    "@playwright/test": "^1.44.1",
+    "@types/node": "^20.14.2",
     "bumpp": "^9.4.1",
     "copy-to-clipboard": "^3.3.3",
-    "esbuild": "^0.21.3",
+    "esbuild": "^0.21.4",
     "esbuild-plugin-solid": "^0.6.0",
-    "eslint": "^9.2.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-solid": "^0.14.0",
     "highlight.js": "^11.9.0",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.0",
     "solid-js": "^1.8.17",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "tsup-preset-solid": "^2.2.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.13",
     "vite-plugin-solid": "^2.10.2"
@@ -80,0 +80,0 @@ },

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

193987

-1.09%

Lines of code

3404

-2.85%

No dependency changes