solid-toast - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5-alpha.0

dist/cjs/index.js

@@ -1,2 +0,760 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var t=require("solid-js"),e=require("solid-js/store"),o=require("solid-js/web");const s=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;var i;exports.ActionType=void 0,(i=exports.ActionType||(exports.ActionType={}))[i.ADD_TOAST=0]="ADD_TOAST",i[i.UPDATE_TOAST=1]="UPDATE_TOAST",i[i.UPSERT_TOAST=2]="UPSERT_TOAST",i[i.DISMISS_TOAST=3]="DISMISS_TOAST",i[i.REMOVE_TOAST=4]="REMOVE_TOAST",i[i.START_PAUSE=5]="START_PAUSE",i[i.END_PAUSE=6]="END_PAUSE";const[r,n]=e.createStore({toasts:[],pausedAt:void 0}),a=new Map,c=(t,e)=>{if(a.has(t))return;const o=setTimeout((()=>{a.delete(t),l({type:exports.ActionType.REMOVE_TOAST,toastId:t})}),e);a.set(t,o)},l=t=>{switch(t.type){case exports.ActionType.ADD_TOAST:n("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case exports.ActionType.DISMISS_TOAST:const{toastId:o}=t,s=r.toasts;if(o){const t=s.find((t=>t.id===o));t&&c(o,t.unmountDelay),n("toasts",(t=>t.id===o),e.produce((t=>t.visible=!1)))}else s.forEach((t=>{c(t.id,t.unmountDelay)})),n("toasts",(t=>void 0!==t.id),e.produce((t=>t.visible=!1)));break;case exports.ActionType.REMOVE_TOAST:if(!t.toastId){n("toasts",[]);break}n("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case exports.ActionType.UPDATE_TOAST:t.toast.id&&(t=>{const e=a.get(t);a.delete(t),e&&clearTimeout(e)})(t.toast.id),n("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case exports.ActionType.UPSERT_TOAST:r.toasts.find((e=>e.id===t.toast.id))?l({type:exports.ActionType.UPDATE_TOAST,toast:t.toast}):l({type:exports.ActionType.ADD_TOAST,toast:t.toast});break;case exports.ActionType.START_PAUSE:n(e.produce((t=>{t.pausedAt=Date.now(),t.toasts.forEach((t=>{t.paused=!0}))})));break;case exports.ActionType.END_PAUSE:const i=t.time-(r.pausedAt||0);n(e.produce((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=i,t.paused=!1}))})))}},p={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},d={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},u={position:"top-right",toastOptions:d,gutter:8,containerStyle:{},containerClassName:""},m={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},f=(()=>{let t=0;return()=>String(++t)})(),v={display:"flex","align-items":"center",color:"#363636",background:"white","box-shadow":"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)","max-width":"350px","pointer-events":"auto",padding:"8px 10px","border-radius":"4px","line-height":"1.3","will-change":"transform"},y={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},T={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},h=t=>({calcMode:"spline",keyTimes:"0; 1",keySplines:t}),[g,A]=t.createSignal(u),S=t=>(e,o={})=>{const s=r.toasts.find((t=>t.id===o.id)),i=((t,e="blank",o)=>({...d,...g().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||f(),paused:!1,style:{...d.style,...g().toastOptions?.style,...o.style},duration:o.duration||g().toastOptions?.duration||p[e],position:o.position||g().toastOptions?.position||g().position||d.position}))(e,t,{...s,duration:void 0,...o});return l({type:exports.ActionType.UPSERT_TOAST,toast:i}),i.id},x=(t,e)=>S("blank")(t,e);x.error=S("error"),x.success=S("success"),x.loading=S("loading"),x.custom=S("custom"),x.dismiss=t=>{l({type:exports.ActionType.DISMISS_TOAST,toastId:t})},x.promise=(t,e,o)=>{const i=x.loading(e.loading,{...o});return t.then((t=>(x.success(s(e.success,t),{id:i,...o}),t))).catch((t=>{x.error(s(e.error,t),{id:i,...o})})),t},x.remove=t=>{l({type:exports.ActionType.REMOVE_TOAST,toastId:t})};const _=o.template("<div><style>.sldt-active{z-index:9999;}.sldt-active>*{pointer-events:auto;}</style></div>",4),b=o.template("<div></div>",2),E=o.template("<div><div></div></div>",4),C=e=>{let i;return t.createEffect((()=>{if(!i)return;const t=((t,e)=>(t.position||e).includes("top")?1:-1)(e.toast,e.position);e.toast.visible?i.animate([{transform:`translate3d(0,${-200*t}%,0) scale(.6)`,opacity:.5},{transform:"translate3d(0,0,0) scale(1)",opacity:1}],{duration:350,fill:"forwards",easing:"cubic-bezier(.21,1.02,.73,1)"}):i.animate([{transform:"translate3d(0,0,-1px) scale(1)",opacity:1},{transform:`translate3d(0,${-150*t}%,-1px) scale(.4)`,opacity:0}],{duration:400,fill:"forwards",easing:"cubic-bezier(.06,.71,.55,1)"})})),(()=>{const r=E.cloneNode(!0),n=r.firstChild;return"function"==typeof i?i(r):i=r,o.insert(r,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return e.toast.icon},get children(){const t=b.cloneNode(!0);return o.insert(t,(()=>e.toast.icon)),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"loading"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(R,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"success"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(M,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"error"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(F,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}})]}}),n),o.spread(n,(()=>e.toast.ariaProps),!1,!0),o.insert(n,(()=>s(e.toast.message,e.toast))),o.effect((t=>{const s=e.toast.className,i={...v,...e.toast.style},a=y;return s!==t._v$&&o.className(r,t._v$=s),t._v$2=o.style(r,i,t._v$2),t._v$3=o.style(n,a,t._v$3),t}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()},O=o.template("<div></div>",2),$=e=>{const i=()=>{const t=e.toast.position||d.position,o=((t,e)=>{const{toasts:o}=r,s=g().gutter||u.gutter||8,i=o.filter((t=>(t.position||e)===e&&t.height)),n=i.findIndex((e=>e.id===t.id)),a=i.filter(((t,e)=>e<n&&t.visible)).length;return i.slice(0,a).reduce(((t,e)=>t+s+(e.height||0)),0)})(e.toast,t),s=((t,e)=>({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",...t.includes("top")?{top:0,"margin-top":`${e}px`}:{bottom:0,"margin-bottom":`${e}px`},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}))(t,o);return s},[n,a]=t.createSignal(i());let c;return t.createEffect((()=>{const t=i();a(t)})),t.onMount((()=>{c&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&l({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(c,e.toast)})),(()=>{const t=O.cloneNode(!0);t.addEventListener("mouseleave",(()=>l({type:exports.ActionType.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>l({type:exports.ActionType.START_PAUSE,time:Date.now()})));return"function"==typeof c?c(t):c=t,o.insert(t,(()=>{const t=o.memo((()=>"custom"===e.toast.type),!0);return()=>t()?s(e.toast.message,e.toast):o.createComponent(C,{get toast(){return e.toast},get position(){return e.toast.position||d.position}})})()),o.effect((s=>{const i=n(),r=e.toast.visible?"sldt-active":"";return s._v$=o.style(t,i,s._v$),r!==s._v$2&&o.className(t,s._v$2=r),s}),{_v$:void 0,_v$2:void 0}),t})()},k=o.template('<svg><circle cx="16" cy="16" r="0"><animate attributeName="opacity" values="0; 1; 1"></animate><animate attributeName="r" values="0; 17.5; 16"></animate></circle></svg>',8,!0),w=o.template('<svg><circle cx="16" cy="16" r="12" opacity="0"><animate attributeName="opacity" values="1; 0"></animate><animate attributeName="r" values="12; 26"></animate></circle></svg>',8,!0),D=t=>{const e={dur:"0.35s",begin:"100ms",fill:"freeze",calcMode:"spline",keyTimes:"0; 0.6; 1",keySplines:"0.25 0.71 0.4 0.88; .59 .22 .87 .63"};return(()=>{const s=k.cloneNode(!0),i=s.firstChild,r=i.nextSibling;return o.spread(i,e,!0,!1),o.spread(r,e,!0,!1),o.effect((()=>o.setAttribute(s,"fill",t.fill))),s})()},N=t=>{const e={dur:"1s",begin:t.begin||"320ms",fill:"freeze",...h("0.0 0.0 0.2 1")};return(()=>{const s=w.cloneNode(!0),i=s.firstChild,r=i.nextSibling;return o.spread(i,e,!0,!1),o.spread(r,e,!0,!1),o.effect((()=>o.setAttribute(s,"fill",t.fill))),s})()},P=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"><animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze"></animate></path></svg>',6),M=t=>{const e=t.primary||"#34C759";return(()=>{const s=P.cloneNode(!0),i=s.firstChild,r=i.firstChild;return s.style.setProperty("overflow","visible"),o.insert(s,o.createComponent(D,{fill:e}),i),o.insert(s,o.createComponent(N,{fill:e,begin:"350ms"}),i),o.spread(r,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.effect((()=>o.setAttribute(i,"stroke",t.secondary||"#FCFCFC"))),s})()},I=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9"><animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze"></animate></path><circle cx="16" cy="23" r="2.5" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze"></animate></circle></svg>',10),F=t=>{const e=t.primary||"#FF3B30";return(()=>{const s=I.cloneNode(!0),i=s.firstChild,r=i.firstChild,n=i.nextSibling,a=n.firstChild;return s.style.setProperty("overflow","visible"),o.insert(s,o.createComponent(D,{fill:e}),i),o.insert(s,o.createComponent(N,{fill:e}),i),o.spread(r,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.spread(a,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.effect((e=>{const s=t.secondary||"#FFFFFF",r=t.secondary||"#FFFFFF";return s!==e._v$&&o.setAttribute(i,"stroke",e._v$=s),r!==e._v$2&&o.setAttribute(n,"fill",e._v$2=r),e}),{_v$:void 0,_v$2:void 0}),s})()},U=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.75s" repeatCount="indefinite"></animateTransform></path></svg>',8),R=t=>(()=>{const e=U.cloneNode(!0),s=e.firstChild,i=s.nextSibling;return e.style.setProperty("overflow","visible"),o.effect((e=>{const r=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return r!==e._v$&&o.setAttribute(s,"stroke",e._v$=r),n!==e._v$2&&o.setAttribute(i,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),e})();var z=x;exports.Toaster=e=>(t.createEffect((()=>{(t=>{A((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(e)})),t.createEffect((()=>{const e=(()=>{const{pausedAt:t,toasts:e}=r;if(t)return;const o=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(o-t.createdAt);if(!(e<=0))return setTimeout((()=>{l({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&l({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}));return s})();t.onCleanup((()=>{e&&e.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const s=_.cloneNode(!0);return s.firstChild,o.insert(s,o.createComponent(t.For,{get each(){return r.toasts},children:t=>o.createComponent($,{toast:t})}),null),o.effect((t=>{const i={...m,...e.containerStyle},r=e.containerClassName;return t._v$=o.style(s,i,t._v$),r!==t._v$2&&o.className(s,t._v$2=r),t}),{_v$:void 0,_v$2:void 0}),s})()),exports.default=z,exports.resolveValue=s,exports.toast=x;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var solidJs = require('solid-js');
+var store$1 = require('solid-js/store');
+var web = require('solid-js/web');
+
+const isFunction = valOrFunction => typeof valOrFunction === 'function';
+
+const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction;
+
+exports.ActionType = void 0;
+
+(function (ActionType) {
+  ActionType[ActionType["ADD_TOAST"] = 0] = "ADD_TOAST";
+  ActionType[ActionType["UPDATE_TOAST"] = 1] = "UPDATE_TOAST";
+  ActionType[ActionType["UPSERT_TOAST"] = 2] = "UPSERT_TOAST";
+  ActionType[ActionType["DISMISS_TOAST"] = 3] = "DISMISS_TOAST";
+  ActionType[ActionType["REMOVE_TOAST"] = 4] = "REMOVE_TOAST";
+  ActionType[ActionType["START_PAUSE"] = 5] = "START_PAUSE";
+  ActionType[ActionType["END_PAUSE"] = 6] = "END_PAUSE";
+})(exports.ActionType || (exports.ActionType = {}));
+
+const [store, setStore] = store$1.createStore({
+  toasts: [],
+  pausedAt: undefined
+});
+const createTimers = () => {
+  const {
+    pausedAt,
+    toasts
+  } = store;
+  if (pausedAt) return;
+  const now = Date.now();
+  const timers = toasts.map(toast => {
+    if (toast.duration === Infinity) return;
+    const durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt);
+
+    if (durationLeft <= 0) {
+      if (toast.visible) {
+        dispatch({
+          type: exports.ActionType.DISMISS_TOAST,
+          toastId: toast.id
+        });
+      }
+
+      return;
+    }
+
+    return setTimeout(() => {
+      dispatch({
+        type: exports.ActionType.DISMISS_TOAST,
+        toastId: toast.id
+      });
+    }, durationLeft);
+  });
+  return timers;
+};
+const removalQueue = new Map();
+
+const scheduleRemoval = (toastId, unmountDelay) => {
+  if (removalQueue.has(toastId)) return;
+  const timeout = setTimeout(() => {
+    removalQueue.delete(toastId);
+    dispatch({
+      type: exports.ActionType.REMOVE_TOAST,
+      toastId
+    });
+  }, unmountDelay);
+  removalQueue.set(toastId, timeout);
+};
+
+const unscheduleRemoval = toastId => {
+  const timeout = removalQueue.get(toastId);
+  removalQueue.delete(toastId);
+  if (timeout) clearTimeout(timeout);
+};
+
+const dispatch = action => {
+  switch (action.type) {
+    case exports.ActionType.ADD_TOAST:
+      setStore('toasts', t => {
+        const toasts = t;
+        return [action.toast, ...toasts];
+      });
+      break;
+
+    case exports.ActionType.DISMISS_TOAST:
+      const {
+        toastId
+      } = action;
+      const toasts = store.toasts;
+
+      if (toastId) {
+        const toastToRemove = toasts.find(t => t.id === toastId);
+        if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay);
+        setStore('toasts', t => t.id === toastId, store$1.produce(t => t.visible = false));
+      } else {
+        toasts.forEach(t => {
+          scheduleRemoval(t.id, t.unmountDelay);
+        });
+        setStore('toasts', t => t.id !== undefined, store$1.produce(t => t.visible = false));
+      }
+
+      break;
+
+    case exports.ActionType.REMOVE_TOAST:
+      if (!action.toastId) {
+        setStore('toasts', []);
+        break;
+      }
+
+      setStore('toasts', t => {
+        const toasts = t;
+        return toasts.filter(t => t.id !== action.toastId);
+      });
+      break;
+
+    case exports.ActionType.UPDATE_TOAST:
+      if (action.toast.id) {
+        unscheduleRemoval(action.toast.id);
+      }
+
+      setStore('toasts', t => t.id === action.toast.id, t => {
+        const toast = t;
+        return { ...toast,
+          ...action.toast
+        };
+      });
+      break;
+
+    case exports.ActionType.UPSERT_TOAST:
+      store.toasts.find(t => t.id === action.toast.id) ? dispatch({
+        type: exports.ActionType.UPDATE_TOAST,
+        toast: action.toast
+      }) : dispatch({
+        type: exports.ActionType.ADD_TOAST,
+        toast: action.toast
+      });
+      break;
+
+    case exports.ActionType.START_PAUSE:
+      setStore(store$1.produce(s => {
+        s.pausedAt = Date.now();
+        s.toasts.forEach(t => {
+          t.paused = true;
+        });
+      }));
+      break;
+
+    case exports.ActionType.END_PAUSE:
+      const pauseInterval = action.time - (store.pausedAt || 0);
+      setStore(store$1.produce(s => {
+        s.pausedAt = undefined;
+        s.toasts.forEach(t => {
+          t.pauseDuration += pauseInterval;
+          t.paused = false;
+        });
+      }));
+      break;
+  }
+};
+
+const defaultTimeouts = {
+  blank: 4000,
+  error: 4000,
+  success: 2000,
+  loading: Infinity,
+  custom: 4000
+};
+const defaultToastOptions = {
+  id: '',
+  icon: '',
+  unmountDelay: 500,
+  duration: 3000,
+  ariaProps: {
+    role: 'status',
+    'aria-live': 'polite'
+  },
+  className: '',
+  style: {},
+  position: 'top-right',
+  iconTheme: {}
+};
+const defaultToasterOptions = {
+  position: 'top-right',
+  toastOptions: defaultToastOptions,
+  gutter: 8,
+  containerStyle: {},
+  containerClassName: ''
+};
+const defaultContainerPadding = '16px';
+const defaultContainerStyle = {
+  position: 'fixed',
+  'z-index': 9999,
+  top: defaultContainerPadding,
+  bottom: defaultContainerPadding,
+  left: defaultContainerPadding,
+  right: defaultContainerPadding,
+  'pointer-events': 'none'
+};
+
+const generateID = (() => {
+  let count = 0;
+  return () => String(++count);
+})();
+const mergeContainerOptions = props => {
+  setDefaultOpts(s => ({
+    containerClassName: props.containerClassName ?? s.containerClassName,
+    containerStyle: props.containerStyle ?? s.containerStyle,
+    gutter: props.gutter ?? s.gutter,
+    position: props.position ?? s.position,
+    toastOptions: { ...props.toastOptions
+    }
+  }));
+};
+const getToastWrapperStyles = (position, offset) => {
+  const top = position.includes('top');
+  const verticalStyle = top ? {
+    top: 0,
+    'margin-top': `${offset}px`
+  } : {
+    bottom: 0,
+    'margin-bottom': `${offset}px`
+  };
+  const horizontalStyle = position.includes('center') ? {
+    'justify-content': 'center'
+  } : position.includes('right') ? {
+    'justify-content': 'flex-end'
+  } : {};
+  return {
+    left: 0,
+    right: 0,
+    display: 'flex',
+    position: 'absolute',
+    transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`,
+    ...verticalStyle,
+    ...horizontalStyle
+  };
+};
+const updateToastHeight = (ref, toast) => {
+  const boundingRect = ref.getBoundingClientRect();
+
+  if (boundingRect.height !== toast.height) {
+    dispatch({
+      type: exports.ActionType.UPDATE_TOAST,
+      toast: {
+        id: toast.id,
+        height: boundingRect.height
+      }
+    });
+  }
+};
+const getWrapperYAxisOffset = (toast, position) => {
+  const {
+    toasts
+  } = store;
+  const gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8;
+  const relevantToasts = toasts.filter(t => (t.position || position) === position && t.height);
+  const toastIndex = relevantToasts.findIndex(t => t.id === toast.id);
+  const toastsBefore = relevantToasts.filter((toast, i) => i < toastIndex && toast.visible).length;
+  const offset = relevantToasts.slice(0, toastsBefore).reduce((acc, t) => acc + gutter + (t.height || 0), 0);
+  return offset;
+};
+const getToastYDirection = (toast, defaultPos) => {
+  const position = toast.position || defaultPos;
+  const top = position.includes('top');
+  return top ? 1 : -1;
+};
+
+const toastBarBase = {
+  display: 'flex',
+  'align-items': 'center',
+  color: '#363636',
+  background: 'white',
+  'box-shadow': '0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)',
+  'max-width': '350px',
+  'pointer-events': 'auto',
+  padding: '8px 10px',
+  'border-radius': '4px',
+  'line-height': '1.3',
+  'will-change': 'transform'
+};
+const messageContainer = {
+  display: 'flex',
+  'align-items': 'center',
+  flex: '1 1 auto',
+  margin: '4px 10px',
+  'white-space': 'pre-line'
+};
+const iconContainer = {
+  'flex-shrink': 0,
+  'min-width': '20px',
+  'min-height': '20px',
+  display: 'flex',
+  'align-items': 'center',
+  'justify-content': 'center',
+  'text-align': 'center'
+};
+const genSVGCubicBezier = keySplines => ({
+  calcMode: 'spline',
+  keyTimes: '0; 1',
+  keySplines: keySplines
+});
+
+const [defaultOpts, setDefaultOpts] = solidJs.createSignal(defaultToasterOptions);
+const createToast = (message, type = 'blank', options) => ({ ...defaultToastOptions,
+  ...defaultOpts().toastOptions,
+  ...options,
+  type,
+  message,
+  pauseDuration: 0,
+  createdAt: Date.now(),
+  visible: true,
+  id: options.id || generateID(),
+  paused: false,
+  style: { ...defaultToastOptions.style,
+    ...defaultOpts().toastOptions?.style,
+    ...options.style
+  },
+  duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type],
+  position: options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position
+});
+
+const createToastCreator = type => (message, options = {}) => {
+  const existingToast = store.toasts.find(t => t.id === options.id);
+  const toast = createToast(message, type, { ...existingToast,
+    duration: undefined,
+    ...options
+  });
+  dispatch({
+    type: exports.ActionType.UPSERT_TOAST,
+    toast
+  });
+  return toast.id;
+};
+
+const toast$1 = (message, opts) => createToastCreator('blank')(message, opts);
+
+toast$1.error = createToastCreator('error');
+toast$1.success = createToastCreator('success');
+toast$1.loading = createToastCreator('loading');
+toast$1.custom = createToastCreator('custom');
+
+toast$1.dismiss = toastId => {
+  dispatch({
+    type: exports.ActionType.DISMISS_TOAST,
+    toastId
+  });
+};
+
+toast$1.promise = (promise, msgs, opts) => {
+  const id = toast$1.loading(msgs.loading, { ...opts
+  });
+  promise.then(p => {
+    toast$1.success(resolveValue(msgs.success, p), {
+      id,
+      ...opts
+    });
+    return p;
+  }).catch(e => {
+    toast$1.error(resolveValue(msgs.error, e), {
+      id,
+      ...opts
+    });
+  });
+  return promise;
+};
+
+toast$1.remove = toastId => {
+  dispatch({
+    type: exports.ActionType.REMOVE_TOAST,
+    toastId
+  });
+};
+
+const _tmpl$$6 = /*#__PURE__*/web.template(`<div><style>.sldt-active{z-index:9999;}.sldt-active>*{pointer-events:auto;}</style></div>`, 4);
+const Toaster = props => {
+  solidJs.createEffect(() => {
+    mergeContainerOptions(props);
+  });
+  solidJs.createEffect(() => {
+    const timers = createTimers();
+    solidJs.onCleanup(() => {
+      if (!timers) return;
+      timers.forEach(timer => timer && clearTimeout(timer));
+    });
+  });
+  return (() => {
+    const _el$ = _tmpl$$6.cloneNode(true);
+          _el$.firstChild;
+
+    web.insert(_el$, web.createComponent(solidJs.For, {
+      get each() {
+        return store.toasts;
+      },
+
+      children: toast => web.createComponent(ToastContainer, {
+        toast: toast
+      })
+    }), null);
+
+    web.effect(_p$ => {
+      const _v$ = { ...defaultContainerStyle,
+        ...props.containerStyle
+      },
+            _v$2 = props.containerClassName;
+      _p$._v$ = web.style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && web.className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+
+    return _el$;
+  })();
+};
+
+const _tmpl$$5 = /*#__PURE__*/web.template(`<div></div>`, 2),
+      _tmpl$2$1 = /*#__PURE__*/web.template(`<div><div></div></div>`, 4);
+const ToastBar = props => {
+  let el;
+  solidJs.createEffect(() => {
+    if (!el) return;
+    const direction = getToastYDirection(props.toast, props.position);
+
+    if (props.toast.visible) {
+      el.animate([{
+        transform: `translate3d(0,${direction * -200}%,0) scale(.6)`,
+        opacity: 0.5
+      }, {
+        transform: 'translate3d(0,0,0) scale(1)',
+        opacity: 1
+      }], {
+        duration: 350,
+        fill: 'forwards',
+        easing: 'cubic-bezier(.21,1.02,.73,1)'
+      });
+    } else {
+      el.animate([{
+        transform: 'translate3d(0,0,-1px) scale(1)',
+        opacity: 1
+      }, {
+        transform: `translate3d(0,${direction * -150}%,-1px) scale(.4)`,
+        opacity: 0
+      }], {
+        duration: 400,
+        fill: 'forwards',
+        easing: 'cubic-bezier(.06,.71,.55,1)'
+      });
+    }
+  });
+  return (() => {
+    const _el$ = _tmpl$2$1.cloneNode(true),
+          _el$6 = _el$.firstChild;
+
+    const _ref$ = el;
+    typeof _ref$ === "function" ? _ref$(_el$) : el = _el$;
+
+    web.insert(_el$, web.createComponent(solidJs.Switch, {
+      get children() {
+        return [web.createComponent(solidJs.Match, {
+          get when() {
+            return props.toast.icon;
+          },
+
+          get children() {
+            const _el$2 = _tmpl$$5.cloneNode(true);
+
+            web.insert(_el$2, () => props.toast.icon);
+
+            web.effect(_$p => web.style(_el$2, iconContainer, _$p));
+
+            return _el$2;
+          }
+
+        }), web.createComponent(solidJs.Match, {
+          get when() {
+            return props.toast.type === 'loading';
+          },
+
+          get children() {
+            const _el$3 = _tmpl$$5.cloneNode(true);
+
+            web.insert(_el$3, web.createComponent(Loader, web.mergeProps(() => props.toast.iconTheme)));
+
+            web.effect(_$p => web.style(_el$3, iconContainer, _$p));
+
+            return _el$3;
+          }
+
+        }), web.createComponent(solidJs.Match, {
+          get when() {
+            return props.toast.type === 'success';
+          },
+
+          get children() {
+            const _el$4 = _tmpl$$5.cloneNode(true);
+
+            web.insert(_el$4, web.createComponent(Success, web.mergeProps(() => props.toast.iconTheme)));
+
+            web.effect(_$p => web.style(_el$4, iconContainer, _$p));
+
+            return _el$4;
+          }
+
+        }), web.createComponent(solidJs.Match, {
+          get when() {
+            return props.toast.type === 'error';
+          },
+
+          get children() {
+            const _el$5 = _tmpl$$5.cloneNode(true);
+
+            web.insert(_el$5, web.createComponent(Error, web.mergeProps(() => props.toast.iconTheme)));
+
+            web.effect(_$p => web.style(_el$5, iconContainer, _$p));
+
+            return _el$5;
+          }
+
+        })];
+      }
+
+    }), _el$6);
+
+    web.spread(_el$6, () => props.toast.ariaProps, false, true);
+
+    web.insert(_el$6, () => resolveValue(props.toast.message, props.toast));
+
+    web.effect(_p$ => {
+      const _v$ = props.toast.className,
+            _v$2 = { ...toastBarBase,
+        ...props.toast.style
+      },
+            _v$3 = messageContainer;
+      _v$ !== _p$._v$ && web.className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = web.style(_el$, _v$2, _p$._v$2);
+      _p$._v$3 = web.style(_el$6, _v$3, _p$._v$3);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+
+    return _el$;
+  })();
+};
+
+const _tmpl$$4 = /*#__PURE__*/web.template(`<div></div>`, 2);
+const ToastContainer = props => {
+  const calculatePosition = () => {
+    const position = props.toast.position || defaultToastOptions.position;
+    const offset = getWrapperYAxisOffset(props.toast, position);
+    const positionStyle = getToastWrapperStyles(position, offset);
+    return positionStyle;
+  };
+
+  const positionStyle = solidJs.createMemo(() => calculatePosition());
+  let el = undefined;
+  solidJs.onMount(() => {
+    if (el) {
+      updateToastHeight(el, props.toast);
+    }
+  });
+  return (() => {
+    const _el$ = _tmpl$$4.cloneNode(true);
+
+    _el$.addEventListener("mouseleave", () => dispatch({
+      type: exports.ActionType.END_PAUSE,
+      time: Date.now()
+    }));
+
+    _el$.addEventListener("mouseenter", () => dispatch({
+      type: exports.ActionType.START_PAUSE,
+      time: Date.now()
+    }));
+
+    const _ref$ = el;
+    typeof _ref$ === "function" ? _ref$(_el$) : el = _el$;
+
+    web.insert(_el$, (() => {
+      const _c$ = web.memo(() => props.toast.type === 'custom', true);
+
+      return () => _c$() ? resolveValue(props.toast.message, props.toast) : web.createComponent(ToastBar, {
+        get toast() {
+          return props.toast;
+        },
+
+        get position() {
+          return props.toast.position || defaultToastOptions.position;
+        }
+
+      });
+    })());
+
+    web.effect(_p$ => {
+      const _v$ = positionStyle(),
+            _v$2 = props.toast.visible ? 'sldt-active' : '';
+
+      _p$._v$ = web.style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && web.className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+
+    return _el$;
+  })();
+};
+
+const _tmpl$$3 = /*#__PURE__*/web.template(`<svg><circle cx="16" cy="16" r="0"><animate attributeName="opacity" values="0; 1; 1"></animate><animate attributeName="r" values="0; 17.5; 16"></animate></circle></svg>`, 8, true),
+      _tmpl$2 = /*#__PURE__*/web.template(`<svg><circle cx="16" cy="16" r="12" opacity="0"><animate attributeName="opacity" values="1; 0"></animate><animate attributeName="r" values="12; 26"></animate></circle></svg>`, 8, true);
+const MainCircle = props => {
+  const publicProps = {
+    dur: '0.35s',
+    begin: '100ms',
+    fill: 'freeze',
+    calcMode: 'spline',
+    keyTimes: '0; 0.6; 1',
+    keySplines: '0.25 0.71 0.4 0.88; .59 .22 .87 .63'
+  };
+  return (() => {
+    const _el$ = _tmpl$$3.cloneNode(true),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+
+    web.spread(_el$2, publicProps, true, false);
+
+    web.spread(_el$3, publicProps, true, false);
+
+    web.effect(() => web.setAttribute(_el$, "fill", props.fill));
+
+    return _el$;
+  })();
+};
+const SecondaryCircle = props => {
+  const publicProps = {
+    dur: '1s',
+    begin: props.begin || '320ms',
+    fill: 'freeze',
+    ...genSVGCubicBezier('0.0 0.0 0.2 1')
+  };
+  return (() => {
+    const _el$4 = _tmpl$2.cloneNode(true),
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling;
+
+    web.spread(_el$5, publicProps, true, false);
+
+    web.spread(_el$6, publicProps, true, false);
+
+    web.effect(() => web.setAttribute(_el$4, "fill", props.fill));
+
+    return _el$4;
+  })();
+};
+
+const _tmpl$$2 = /*#__PURE__*/web.template(`<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"><animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze"></animate></path></svg>`, 6);
+const Success = props => {
+  const fill = props.primary || '#34C759';
+  return (() => {
+    const _el$ = _tmpl$$2.cloneNode(true),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild;
+
+    _el$.style.setProperty("overflow", "visible");
+
+    web.insert(_el$, web.createComponent(MainCircle, {
+      fill: fill
+    }), _el$2);
+
+    web.insert(_el$, web.createComponent(SecondaryCircle, {
+      fill: fill,
+      begin: "350ms"
+    }), _el$2);
+
+    web.spread(_el$3, () => genSVGCubicBezier('0.0, 0.0, 0.58, 1.0'), true, false);
+
+    web.effect(() => web.setAttribute(_el$2, "stroke", props.secondary || '#FCFCFC'));
+
+    return _el$;
+  })();
+};
+
+const _tmpl$$1 = /*#__PURE__*/web.template(`<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9"><animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze"></animate></path><circle cx="16" cy="23" r="2.5" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze"></animate></circle></svg>`, 10);
+const Error = props => {
+  const fill = props.primary || '#FF3B30';
+  return (() => {
+    const _el$ = _tmpl$$1.cloneNode(true),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$2.nextSibling,
+          _el$5 = _el$4.firstChild;
+
+    _el$.style.setProperty("overflow", "visible");
+
+    web.insert(_el$, web.createComponent(MainCircle, {
+      fill: fill
+    }), _el$2);
+
+    web.insert(_el$, web.createComponent(SecondaryCircle, {
+      fill: fill
+    }), _el$2);
+
+    web.spread(_el$3, () => genSVGCubicBezier('0.0, 0.0, 0.58, 1.0'), true, false);
+
+    web.spread(_el$5, () => genSVGCubicBezier('0.0, 0.0, 0.58, 1.0'), true, false);
+
+    web.effect(_p$ => {
+      const _v$ = props.secondary || '#FFFFFF',
+            _v$2 = props.secondary || '#FFFFFF';
+
+      _v$ !== _p$._v$ && web.setAttribute(_el$2, "stroke", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && web.setAttribute(_el$4, "fill", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+
+    return _el$;
+  })();
+};
+
+const _tmpl$ = /*#__PURE__*/web.template(`<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.75s" repeatCount="indefinite"></animateTransform></path></svg>`, 8);
+
+const Loader = props => (() => {
+  const _el$ = _tmpl$.cloneNode(true),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.nextSibling;
+
+  _el$.style.setProperty("overflow", "visible");
+
+  web.effect(_p$ => {
+    const _v$ = props.primary || '#E5E7EB',
+          _v$2 = props.secondary || '#4b5563';
+
+    _v$ !== _p$._v$ && web.setAttribute(_el$2, "stroke", _p$._v$ = _v$);
+    _v$2 !== _p$._v$2 && web.setAttribute(_el$3, "stroke", _p$._v$2 = _v$2);
+    return _p$;
+  }, {
+    _v$: undefined,
+    _v$2: undefined
+  });
+
+  return _el$;
+})();
+
+var toast = toast$1;
+
+exports.Toaster = Toaster;
+exports["default"] = toast;
+exports.resolveValue = resolveValue;
+exports.toast = toast$1;
 //# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -1,2 +0,753 @@
-import{createSignal as t,createEffect as e,onCleanup as i,For as s,Switch as o,Match as n,onMount as r}from"solid-js";import{createStore as a,produce as l}from"solid-js/store";import{insert as c,createComponent as d,effect as u,style as p,className as m,template as v,mergeProps as f,spread as h,memo as g,setAttribute as T}from"solid-js/web";const y=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;let S;!function(t){t[t.ADD_TOAST=0]="ADD_TOAST",t[t.UPDATE_TOAST=1]="UPDATE_TOAST",t[t.UPSERT_TOAST=2]="UPSERT_TOAST",t[t.DISMISS_TOAST=3]="DISMISS_TOAST",t[t.REMOVE_TOAST=4]="REMOVE_TOAST",t[t.START_PAUSE=5]="START_PAUSE",t[t.END_PAUSE=6]="END_PAUSE"}(S||(S={}));const[_,b]=a({toasts:[],pausedAt:void 0}),A=new Map,x=(t,e)=>{if(A.has(t))return;const i=setTimeout((()=>{A.delete(t),E({type:S.REMOVE_TOAST,toastId:t})}),e);A.set(t,i)},E=t=>{switch(t.type){case S.ADD_TOAST:b("toasts",(e=>{const i=e;return[t.toast,...i]}));break;case S.DISMISS_TOAST:const{toastId:e}=t,i=_.toasts;if(e){const t=i.find((t=>t.id===e));t&&x(e,t.unmountDelay),b("toasts",(t=>t.id===e),l((t=>t.visible=!1)))}else i.forEach((t=>{x(t.id,t.unmountDelay)})),b("toasts",(t=>void 0!==t.id),l((t=>t.visible=!1)));break;case S.REMOVE_TOAST:if(!t.toastId){b("toasts",[]);break}b("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case S.UPDATE_TOAST:t.toast.id&&(t=>{const e=A.get(t);A.delete(t),e&&clearTimeout(e)})(t.toast.id),b("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case S.UPSERT_TOAST:_.toasts.find((e=>e.id===t.toast.id))?E({type:S.UPDATE_TOAST,toast:t.toast}):E({type:S.ADD_TOAST,toast:t.toast});break;case S.START_PAUSE:b(l((t=>{t.pausedAt=Date.now(),t.toasts.forEach((t=>{t.paused=!0}))})));break;case S.END_PAUSE:const s=t.time-(_.pausedAt||0);b(l((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=s,t.paused=!1}))})))}},$={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},k={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},O={position:"top-right",toastOptions:k,gutter:8,containerStyle:{},containerClassName:""},D={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},w=(()=>{let t=0;return()=>String(++t)})(),N={display:"flex","align-items":"center",color:"#363636",background:"white","box-shadow":"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)","max-width":"350px","pointer-events":"auto",padding:"8px 10px","border-radius":"4px","line-height":"1.3","will-change":"transform"},P={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},C={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},I=t=>({calcMode:"spline",keyTimes:"0; 1",keySplines:t}),[M,F]=t(O),U=t=>(e,i={})=>{const s=_.toasts.find((t=>t.id===i.id)),o=((t,e="blank",i)=>({...k,...M().toastOptions,...i,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:i.id||w(),paused:!1,style:{...k.style,...M().toastOptions?.style,...i.style},duration:i.duration||M().toastOptions?.duration||$[e],position:i.position||M().toastOptions?.position||M().position||k.position}))(e,t,{...s,duration:void 0,...i});return E({type:S.UPSERT_TOAST,toast:o}),o.id},R=(t,e)=>U("blank")(t,e);R.error=U("error"),R.success=U("success"),R.loading=U("loading"),R.custom=U("custom"),R.dismiss=t=>{E({type:S.DISMISS_TOAST,toastId:t})},R.promise=(t,e,i)=>{const s=R.loading(e.loading,{...i});return t.then((t=>(R.success(y(e.success,t),{id:s,...i}),t))).catch((t=>{R.error(y(e.error,t),{id:s,...i})})),t},R.remove=t=>{E({type:S.REMOVE_TOAST,toastId:t})};const z=v("<div><style>.sldt-active{z-index:9999;}.sldt-active>*{pointer-events:auto;}</style></div>",4),j=t=>(e((()=>{(t=>{F((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(t)})),e((()=>{const t=(()=>{const{pausedAt:t,toasts:e}=_;if(t)return;const i=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(i-t.createdAt);if(!(e<=0))return setTimeout((()=>{E({type:S.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&E({type:S.DISMISS_TOAST,toastId:t.id})}));return s})();i((()=>{t&&t.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const e=z.cloneNode(!0);return e.firstChild,c(e,d(s,{get each(){return _.toasts},children:t=>d(G,{toast:t})}),null),u((i=>{const s={...D,...t.containerStyle},o=t.containerClassName;return i._v$=p(e,s,i._v$),o!==i._v$2&&m(e,i._v$2=o),i}),{_v$:void 0,_v$2:void 0}),e})()),B=v("<div></div>",2),V=v("<div><div></div></div>",4),L=t=>{let i;return e((()=>{if(!i)return;const e=((t,e)=>(t.position||e).includes("top")?1:-1)(t.toast,t.position);t.toast.visible?i.animate([{transform:`translate3d(0,${-200*e}%,0) scale(.6)`,opacity:.5},{transform:"translate3d(0,0,0) scale(1)",opacity:1}],{duration:350,fill:"forwards",easing:"cubic-bezier(.21,1.02,.73,1)"}):i.animate([{transform:"translate3d(0,0,-1px) scale(1)",opacity:1},{transform:`translate3d(0,${-150*e}%,-1px) scale(.4)`,opacity:0}],{duration:400,fill:"forwards",easing:"cubic-bezier(.06,.71,.55,1)"})})),(()=>{const e=V.cloneNode(!0),s=e.firstChild;return"function"==typeof i?i(e):i=e,c(e,d(o,{get children(){return[d(n,{get when(){return t.toast.icon},get children(){const e=B.cloneNode(!0);return c(e,(()=>t.toast.icon)),u((t=>p(e,C,t))),e}}),d(n,{get when(){return"loading"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(et,f((()=>t.toast.iconTheme)))),u((t=>p(e,C,t))),e}}),d(n,{get when(){return"success"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(X,f((()=>t.toast.iconTheme)))),u((t=>p(e,C,t))),e}}),d(n,{get when(){return"error"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(Z,f((()=>t.toast.iconTheme)))),u((t=>p(e,C,t))),e}})]}}),s),h(s,(()=>t.toast.ariaProps),!1,!0),c(s,(()=>y(t.toast.message,t.toast))),u((i=>{const o=t.toast.className,n={...N,...t.toast.style},r=P;return o!==i._v$&&m(e,i._v$=o),i._v$2=p(e,n,i._v$2),i._v$3=p(s,r,i._v$3),i}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),e})()},q=v("<div></div>",2),G=i=>{const s=()=>{const t=i.toast.position||k.position,e=((t,e)=>{const{toasts:i}=_,s=M().gutter||O.gutter||8,o=i.filter((t=>(t.position||e)===e&&t.height)),n=o.findIndex((e=>e.id===t.id)),r=o.filter(((t,e)=>e<n&&t.visible)).length;return o.slice(0,r).reduce(((t,e)=>t+s+(e.height||0)),0)})(i.toast,t),s=((t,e)=>({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",...t.includes("top")?{top:0,"margin-top":`${e}px`}:{bottom:0,"margin-bottom":`${e}px`},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}))(t,e);return s},[o,n]=t(s());let a;return e((()=>{const t=s();n(t)})),r((()=>{a&&((t,e)=>{const i=t.getBoundingClientRect();i.height!==e.height&&E({type:S.UPDATE_TOAST,toast:{id:e.id,height:i.height}})})(a,i.toast)})),(()=>{const t=q.cloneNode(!0);t.addEventListener("mouseleave",(()=>E({type:S.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>E({type:S.START_PAUSE,time:Date.now()})));return"function"==typeof a?a(t):a=t,c(t,(()=>{const t=g((()=>"custom"===i.toast.type),!0);return()=>t()?y(i.toast.message,i.toast):d(L,{get toast(){return i.toast},get position(){return i.toast.position||k.position}})})()),u((e=>{const s=o(),n=i.toast.visible?"sldt-active":"";return e._v$=p(t,s,e._v$),n!==e._v$2&&m(t,e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),t})()},H=v('<svg><circle cx="16" cy="16" r="0"><animate attributeName="opacity" values="0; 1; 1"></animate><animate attributeName="r" values="0; 17.5; 16"></animate></circle></svg>',8,!0),J=v('<svg><circle cx="16" cy="16" r="12" opacity="0"><animate attributeName="opacity" values="1; 0"></animate><animate attributeName="r" values="12; 26"></animate></circle></svg>',8,!0),K=t=>{const e={dur:"0.35s",begin:"100ms",fill:"freeze",calcMode:"spline",keyTimes:"0; 0.6; 1",keySplines:"0.25 0.71 0.4 0.88; .59 .22 .87 .63"};return(()=>{const i=H.cloneNode(!0),s=i.firstChild,o=s.nextSibling;return h(s,e,!0,!1),h(o,e,!0,!1),u((()=>T(i,"fill",t.fill))),i})()},Q=t=>{const e={dur:"1s",begin:t.begin||"320ms",fill:"freeze",...I("0.0 0.0 0.2 1")};return(()=>{const i=J.cloneNode(!0),s=i.firstChild,o=s.nextSibling;return h(s,e,!0,!1),h(o,e,!0,!1),u((()=>T(i,"fill",t.fill))),i})()},W=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"><animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze"></animate></path></svg>',6),X=t=>{const e=t.primary||"#34C759";return(()=>{const i=W.cloneNode(!0),s=i.firstChild,o=s.firstChild;return i.style.setProperty("overflow","visible"),c(i,d(K,{fill:e}),s),c(i,d(Q,{fill:e,begin:"350ms"}),s),h(o,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),u((()=>T(s,"stroke",t.secondary||"#FCFCFC"))),i})()},Y=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9"><animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze"></animate></path><circle cx="16" cy="23" r="2.5" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze"></animate></circle></svg>',10),Z=t=>{const e=t.primary||"#FF3B30";return(()=>{const i=Y.cloneNode(!0),s=i.firstChild,o=s.firstChild,n=s.nextSibling,r=n.firstChild;return i.style.setProperty("overflow","visible"),c(i,d(K,{fill:e}),s),c(i,d(Q,{fill:e}),s),h(o,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),h(r,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),u((e=>{const i=t.secondary||"#FFFFFF",o=t.secondary||"#FFFFFF";return i!==e._v$&&T(s,"stroke",e._v$=i),o!==e._v$2&&T(n,"fill",e._v$2=o),e}),{_v$:void 0,_v$2:void 0}),i})()},tt=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.75s" repeatCount="indefinite"></animateTransform></path></svg>',8),et=t=>(()=>{const e=tt.cloneNode(!0),i=e.firstChild,s=i.nextSibling;return e.style.setProperty("overflow","visible"),u((e=>{const o=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return o!==e._v$&&T(i,"stroke",e._v$=o),n!==e._v$2&&T(s,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),e})();var it=R;export{S as ActionType,j as Toaster,it as default,y as resolveValue,R as toast};
+import { createSignal, createEffect, onCleanup, For, Switch, Match, createMemo, onMount } from 'solid-js';
+import { createStore, produce } from 'solid-js/store';
+import { insert, createComponent, effect, style, className, template, mergeProps, spread, memo, setAttribute } from 'solid-js/web';
+
+const isFunction = valOrFunction => typeof valOrFunction === 'function';
+
+const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction;
+
+let ActionType;
+
+(function (ActionType) {
+  ActionType[ActionType["ADD_TOAST"] = 0] = "ADD_TOAST";
+  ActionType[ActionType["UPDATE_TOAST"] = 1] = "UPDATE_TOAST";
+  ActionType[ActionType["UPSERT_TOAST"] = 2] = "UPSERT_TOAST";
+  ActionType[ActionType["DISMISS_TOAST"] = 3] = "DISMISS_TOAST";
+  ActionType[ActionType["REMOVE_TOAST"] = 4] = "REMOVE_TOAST";
+  ActionType[ActionType["START_PAUSE"] = 5] = "START_PAUSE";
+  ActionType[ActionType["END_PAUSE"] = 6] = "END_PAUSE";
+})(ActionType || (ActionType = {}));
+
+const [store, setStore] = createStore({
+  toasts: [],
+  pausedAt: undefined
+});
+const createTimers = () => {
+  const {
+    pausedAt,
+    toasts
+  } = store;
+  if (pausedAt) return;
+  const now = Date.now();
+  const timers = toasts.map(toast => {
+    if (toast.duration === Infinity) return;
+    const durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt);
+
+    if (durationLeft <= 0) {
+      if (toast.visible) {
+        dispatch({
+          type: ActionType.DISMISS_TOAST,
+          toastId: toast.id
+        });
+      }
+
+      return;
+    }
+
+    return setTimeout(() => {
+      dispatch({
+        type: ActionType.DISMISS_TOAST,
+        toastId: toast.id
+      });
+    }, durationLeft);
+  });
+  return timers;
+};
+const removalQueue = new Map();
+
+const scheduleRemoval = (toastId, unmountDelay) => {
+  if (removalQueue.has(toastId)) return;
+  const timeout = setTimeout(() => {
+    removalQueue.delete(toastId);
+    dispatch({
+      type: ActionType.REMOVE_TOAST,
+      toastId
+    });
+  }, unmountDelay);
+  removalQueue.set(toastId, timeout);
+};
+
+const unscheduleRemoval = toastId => {
+  const timeout = removalQueue.get(toastId);
+  removalQueue.delete(toastId);
+  if (timeout) clearTimeout(timeout);
+};
+
+const dispatch = action => {
+  switch (action.type) {
+    case ActionType.ADD_TOAST:
+      setStore('toasts', t => {
+        const toasts = t;
+        return [action.toast, ...toasts];
+      });
+      break;
+
+    case ActionType.DISMISS_TOAST:
+      const {
+        toastId
+      } = action;
+      const toasts = store.toasts;
+
+      if (toastId) {
+        const toastToRemove = toasts.find(t => t.id === toastId);
+        if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay);
+        setStore('toasts', t => t.id === toastId, produce(t => t.visible = false));
+      } else {
+        toasts.forEach(t => {
+          scheduleRemoval(t.id, t.unmountDelay);
+        });
+        setStore('toasts', t => t.id !== undefined, produce(t => t.visible = false));
+      }
+
+      break;
+
+    case ActionType.REMOVE_TOAST:
+      if (!action.toastId) {
+        setStore('toasts', []);
+        break;
+      }
+
+      setStore('toasts', t => {
+        const toasts = t;
+        return toasts.filter(t => t.id !== action.toastId);
+      });
+      break;
+
+    case ActionType.UPDATE_TOAST:
+      if (action.toast.id) {
+        unscheduleRemoval(action.toast.id);
+      }
+
+      setStore('toasts', t => t.id === action.toast.id, t => {
+        const toast = t;
+        return { ...toast,
+          ...action.toast
+        };
+      });
+      break;
+
+    case ActionType.UPSERT_TOAST:
+      store.toasts.find(t => t.id === action.toast.id) ? dispatch({
+        type: ActionType.UPDATE_TOAST,
+        toast: action.toast
+      }) : dispatch({
+        type: ActionType.ADD_TOAST,
+        toast: action.toast
+      });
+      break;
+
+    case ActionType.START_PAUSE:
+      setStore(produce(s => {
+        s.pausedAt = Date.now();
+        s.toasts.forEach(t => {
+          t.paused = true;
+        });
+      }));
+      break;
+
+    case ActionType.END_PAUSE:
+      const pauseInterval = action.time - (store.pausedAt || 0);
+      setStore(produce(s => {
+        s.pausedAt = undefined;
+        s.toasts.forEach(t => {
+          t.pauseDuration += pauseInterval;
+          t.paused = false;
+        });
+      }));
+      break;
+  }
+};
+
+const defaultTimeouts = {
+  blank: 4000,
+  error: 4000,
+  success: 2000,
+  loading: Infinity,
+  custom: 4000
+};
+const defaultToastOptions = {
+  id: '',
+  icon: '',
+  unmountDelay: 500,
+  duration: 3000,
+  ariaProps: {
+    role: 'status',
+    'aria-live': 'polite'
+  },
+  className: '',
+  style: {},
+  position: 'top-right',
+  iconTheme: {}
+};
+const defaultToasterOptions = {
+  position: 'top-right',
+  toastOptions: defaultToastOptions,
+  gutter: 8,
+  containerStyle: {},
+  containerClassName: ''
+};
+const defaultContainerPadding = '16px';
+const defaultContainerStyle = {
+  position: 'fixed',
+  'z-index': 9999,
+  top: defaultContainerPadding,
+  bottom: defaultContainerPadding,
+  left: defaultContainerPadding,
+  right: defaultContainerPadding,
+  'pointer-events': 'none'
+};
+
+const generateID = (() => {
+  let count = 0;
+  return () => String(++count);
+})();
+const mergeContainerOptions = props => {
+  setDefaultOpts(s => ({
+    containerClassName: props.containerClassName ?? s.containerClassName,
+    containerStyle: props.containerStyle ?? s.containerStyle,
+    gutter: props.gutter ?? s.gutter,
+    position: props.position ?? s.position,
+    toastOptions: { ...props.toastOptions
+    }
+  }));
+};
+const getToastWrapperStyles = (position, offset) => {
+  const top = position.includes('top');
+  const verticalStyle = top ? {
+    top: 0,
+    'margin-top': `${offset}px`
+  } : {
+    bottom: 0,
+    'margin-bottom': `${offset}px`
+  };
+  const horizontalStyle = position.includes('center') ? {
+    'justify-content': 'center'
+  } : position.includes('right') ? {
+    'justify-content': 'flex-end'
+  } : {};
+  return {
+    left: 0,
+    right: 0,
+    display: 'flex',
+    position: 'absolute',
+    transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`,
+    ...verticalStyle,
+    ...horizontalStyle
+  };
+};
+const updateToastHeight = (ref, toast) => {
+  const boundingRect = ref.getBoundingClientRect();
+
+  if (boundingRect.height !== toast.height) {
+    dispatch({
+      type: ActionType.UPDATE_TOAST,
+      toast: {
+        id: toast.id,
+        height: boundingRect.height
+      }
+    });
+  }
+};
+const getWrapperYAxisOffset = (toast, position) => {
+  const {
+    toasts
+  } = store;
+  const gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8;
+  const relevantToasts = toasts.filter(t => (t.position || position) === position && t.height);
+  const toastIndex = relevantToasts.findIndex(t => t.id === toast.id);
+  const toastsBefore = relevantToasts.filter((toast, i) => i < toastIndex && toast.visible).length;
+  const offset = relevantToasts.slice(0, toastsBefore).reduce((acc, t) => acc + gutter + (t.height || 0), 0);
+  return offset;
+};
+const getToastYDirection = (toast, defaultPos) => {
+  const position = toast.position || defaultPos;
+  const top = position.includes('top');
+  return top ? 1 : -1;
+};
+
+const toastBarBase = {
+  display: 'flex',
+  'align-items': 'center',
+  color: '#363636',
+  background: 'white',
+  'box-shadow': '0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)',
+  'max-width': '350px',
+  'pointer-events': 'auto',
+  padding: '8px 10px',
+  'border-radius': '4px',
+  'line-height': '1.3',
+  'will-change': 'transform'
+};
+const messageContainer = {
+  display: 'flex',
+  'align-items': 'center',
+  flex: '1 1 auto',
+  margin: '4px 10px',
+  'white-space': 'pre-line'
+};
+const iconContainer = {
+  'flex-shrink': 0,
+  'min-width': '20px',
+  'min-height': '20px',
+  display: 'flex',
+  'align-items': 'center',
+  'justify-content': 'center',
+  'text-align': 'center'
+};
+const genSVGCubicBezier = keySplines => ({
+  calcMode: 'spline',
+  keyTimes: '0; 1',
+  keySplines: keySplines
+});
+
+const [defaultOpts, setDefaultOpts] = createSignal(defaultToasterOptions);
+const createToast = (message, type = 'blank', options) => ({ ...defaultToastOptions,
+  ...defaultOpts().toastOptions,
+  ...options,
+  type,
+  message,
+  pauseDuration: 0,
+  createdAt: Date.now(),
+  visible: true,
+  id: options.id || generateID(),
+  paused: false,
+  style: { ...defaultToastOptions.style,
+    ...defaultOpts().toastOptions?.style,
+    ...options.style
+  },
+  duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type],
+  position: options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position
+});
+
+const createToastCreator = type => (message, options = {}) => {
+  const existingToast = store.toasts.find(t => t.id === options.id);
+  const toast = createToast(message, type, { ...existingToast,
+    duration: undefined,
+    ...options
+  });
+  dispatch({
+    type: ActionType.UPSERT_TOAST,
+    toast
+  });
+  return toast.id;
+};
+
+const toast$1 = (message, opts) => createToastCreator('blank')(message, opts);
+
+toast$1.error = createToastCreator('error');
+toast$1.success = createToastCreator('success');
+toast$1.loading = createToastCreator('loading');
+toast$1.custom = createToastCreator('custom');
+
+toast$1.dismiss = toastId => {
+  dispatch({
+    type: ActionType.DISMISS_TOAST,
+    toastId
+  });
+};
+
+toast$1.promise = (promise, msgs, opts) => {
+  const id = toast$1.loading(msgs.loading, { ...opts
+  });
+  promise.then(p => {
+    toast$1.success(resolveValue(msgs.success, p), {
+      id,
+      ...opts
+    });
+    return p;
+  }).catch(e => {
+    toast$1.error(resolveValue(msgs.error, e), {
+      id,
+      ...opts
+    });
+  });
+  return promise;
+};
+
+toast$1.remove = toastId => {
+  dispatch({
+    type: ActionType.REMOVE_TOAST,
+    toastId
+  });
+};
+
+const _tmpl$$6 = /*#__PURE__*/template(`<div><style>.sldt-active{z-index:9999;}.sldt-active>*{pointer-events:auto;}</style></div>`, 4);
+const Toaster = props => {
+  createEffect(() => {
+    mergeContainerOptions(props);
+  });
+  createEffect(() => {
+    const timers = createTimers();
+    onCleanup(() => {
+      if (!timers) return;
+      timers.forEach(timer => timer && clearTimeout(timer));
+    });
+  });
+  return (() => {
+    const _el$ = _tmpl$$6.cloneNode(true);
+          _el$.firstChild;
+
+    insert(_el$, createComponent(For, {
+      get each() {
+        return store.toasts;
+      },
+
+      children: toast => createComponent(ToastContainer, {
+        toast: toast
+      })
+    }), null);
+
+    effect(_p$ => {
+      const _v$ = { ...defaultContainerStyle,
+        ...props.containerStyle
+      },
+            _v$2 = props.containerClassName;
+      _p$._v$ = style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+
+    return _el$;
+  })();
+};
+
+const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2),
+      _tmpl$2$1 = /*#__PURE__*/template(`<div><div></div></div>`, 4);
+const ToastBar = props => {
+  let el;
+  createEffect(() => {
+    if (!el) return;
+    const direction = getToastYDirection(props.toast, props.position);
+
+    if (props.toast.visible) {
+      el.animate([{
+        transform: `translate3d(0,${direction * -200}%,0) scale(.6)`,
+        opacity: 0.5
+      }, {
+        transform: 'translate3d(0,0,0) scale(1)',
+        opacity: 1
+      }], {
+        duration: 350,
+        fill: 'forwards',
+        easing: 'cubic-bezier(.21,1.02,.73,1)'
+      });
+    } else {
+      el.animate([{
+        transform: 'translate3d(0,0,-1px) scale(1)',
+        opacity: 1
+      }, {
+        transform: `translate3d(0,${direction * -150}%,-1px) scale(.4)`,
+        opacity: 0
+      }], {
+        duration: 400,
+        fill: 'forwards',
+        easing: 'cubic-bezier(.06,.71,.55,1)'
+      });
+    }
+  });
+  return (() => {
+    const _el$ = _tmpl$2$1.cloneNode(true),
+          _el$6 = _el$.firstChild;
+
+    const _ref$ = el;
+    typeof _ref$ === "function" ? _ref$(_el$) : el = _el$;
+
+    insert(_el$, createComponent(Switch, {
+      get children() {
+        return [createComponent(Match, {
+          get when() {
+            return props.toast.icon;
+          },
+
+          get children() {
+            const _el$2 = _tmpl$$5.cloneNode(true);
+
+            insert(_el$2, () => props.toast.icon);
+
+            effect(_$p => style(_el$2, iconContainer, _$p));
+
+            return _el$2;
+          }
+
+        }), createComponent(Match, {
+          get when() {
+            return props.toast.type === 'loading';
+          },
+
+          get children() {
+            const _el$3 = _tmpl$$5.cloneNode(true);
+
+            insert(_el$3, createComponent(Loader, mergeProps(() => props.toast.iconTheme)));
+
+            effect(_$p => style(_el$3, iconContainer, _$p));
+
+            return _el$3;
+          }
+
+        }), createComponent(Match, {
+          get when() {
+            return props.toast.type === 'success';
+          },
+
+          get children() {
+            const _el$4 = _tmpl$$5.cloneNode(true);
+
+            insert(_el$4, createComponent(Success, mergeProps(() => props.toast.iconTheme)));
+
+            effect(_$p => style(_el$4, iconContainer, _$p));
+
+            return _el$4;
+          }
+
+        }), createComponent(Match, {
+          get when() {
+            return props.toast.type === 'error';
+          },
+
+          get children() {
+            const _el$5 = _tmpl$$5.cloneNode(true);
+
+            insert(_el$5, createComponent(Error, mergeProps(() => props.toast.iconTheme)));
+
+            effect(_$p => style(_el$5, iconContainer, _$p));
+
+            return _el$5;
+          }
+
+        })];
+      }
+
+    }), _el$6);
+
+    spread(_el$6, () => props.toast.ariaProps, false, true);
+
+    insert(_el$6, () => resolveValue(props.toast.message, props.toast));
+
+    effect(_p$ => {
+      const _v$ = props.toast.className,
+            _v$2 = { ...toastBarBase,
+        ...props.toast.style
+      },
+            _v$3 = messageContainer;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      _p$._v$3 = style(_el$6, _v$3, _p$._v$3);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+
+    return _el$;
+  })();
+};
+
+const _tmpl$$4 = /*#__PURE__*/template(`<div></div>`, 2);
+const ToastContainer = props => {
+  const calculatePosition = () => {
+    const position = props.toast.position || defaultToastOptions.position;
+    const offset = getWrapperYAxisOffset(props.toast, position);
+    const positionStyle = getToastWrapperStyles(position, offset);
+    return positionStyle;
+  };
+
+  const positionStyle = createMemo(() => calculatePosition());
+  let el = undefined;
+  onMount(() => {
+    if (el) {
+      updateToastHeight(el, props.toast);
+    }
+  });
+  return (() => {
+    const _el$ = _tmpl$$4.cloneNode(true);
+
+    _el$.addEventListener("mouseleave", () => dispatch({
+      type: ActionType.END_PAUSE,
+      time: Date.now()
+    }));
+
+    _el$.addEventListener("mouseenter", () => dispatch({
+      type: ActionType.START_PAUSE,
+      time: Date.now()
+    }));
+
+    const _ref$ = el;
+    typeof _ref$ === "function" ? _ref$(_el$) : el = _el$;
+
+    insert(_el$, (() => {
+      const _c$ = memo(() => props.toast.type === 'custom', true);
+
+      return () => _c$() ? resolveValue(props.toast.message, props.toast) : createComponent(ToastBar, {
+        get toast() {
+          return props.toast;
+        },
+
+        get position() {
+          return props.toast.position || defaultToastOptions.position;
+        }
+
+      });
+    })());
+
+    effect(_p$ => {
+      const _v$ = positionStyle(),
+            _v$2 = props.toast.visible ? 'sldt-active' : '';
+
+      _p$._v$ = style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+
+    return _el$;
+  })();
+};
+
+const _tmpl$$3 = /*#__PURE__*/template(`<svg><circle cx="16" cy="16" r="0"><animate attributeName="opacity" values="0; 1; 1"></animate><animate attributeName="r" values="0; 17.5; 16"></animate></circle></svg>`, 8, true),
+      _tmpl$2 = /*#__PURE__*/template(`<svg><circle cx="16" cy="16" r="12" opacity="0"><animate attributeName="opacity" values="1; 0"></animate><animate attributeName="r" values="12; 26"></animate></circle></svg>`, 8, true);
+const MainCircle = props => {
+  const publicProps = {
+    dur: '0.35s',
+    begin: '100ms',
+    fill: 'freeze',
+    calcMode: 'spline',
+    keyTimes: '0; 0.6; 1',
+    keySplines: '0.25 0.71 0.4 0.88; .59 .22 .87 .63'
+  };
+  return (() => {
+    const _el$ = _tmpl$$3.cloneNode(true),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+
+    spread(_el$2, publicProps, true, false);
+
+    spread(_el$3, publicProps, true, false);
+
+    effect(() => setAttribute(_el$, "fill", props.fill));
+
+    return _el$;
+  })();
+};
+const SecondaryCircle = props => {
+  const publicProps = {
+    dur: '1s',
+    begin: props.begin || '320ms',
+    fill: 'freeze',
+    ...genSVGCubicBezier('0.0 0.0 0.2 1')
+  };
+  return (() => {
+    const _el$4 = _tmpl$2.cloneNode(true),
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling;
+
+    spread(_el$5, publicProps, true, false);
+
+    spread(_el$6, publicProps, true, false);
+
+    effect(() => setAttribute(_el$4, "fill", props.fill));
+
+    return _el$4;
+  })();
+};
+
+const _tmpl$$2 = /*#__PURE__*/template(`<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"><animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze"></animate></path></svg>`, 6);
+const Success = props => {
+  const fill = props.primary || '#34C759';
+  return (() => {
+    const _el$ = _tmpl$$2.cloneNode(true),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild;
+
+    _el$.style.setProperty("overflow", "visible");
+
+    insert(_el$, createComponent(MainCircle, {
+      fill: fill
+    }), _el$2);
+
+    insert(_el$, createComponent(SecondaryCircle, {
+      fill: fill,
+      begin: "350ms"
+    }), _el$2);
+
+    spread(_el$3, () => genSVGCubicBezier('0.0, 0.0, 0.58, 1.0'), true, false);
+
+    effect(() => setAttribute(_el$2, "stroke", props.secondary || '#FCFCFC'));
+
+    return _el$;
+  })();
+};
+
+const _tmpl$$1 = /*#__PURE__*/template(`<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9"><animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze"></animate></path><circle cx="16" cy="23" r="2.5" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze"></animate></circle></svg>`, 10);
+const Error = props => {
+  const fill = props.primary || '#FF3B30';
+  return (() => {
+    const _el$ = _tmpl$$1.cloneNode(true),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$2.nextSibling,
+          _el$5 = _el$4.firstChild;
+
+    _el$.style.setProperty("overflow", "visible");
+
+    insert(_el$, createComponent(MainCircle, {
+      fill: fill
+    }), _el$2);
+
+    insert(_el$, createComponent(SecondaryCircle, {
+      fill: fill
+    }), _el$2);
+
+    spread(_el$3, () => genSVGCubicBezier('0.0, 0.0, 0.58, 1.0'), true, false);
+
+    spread(_el$5, () => genSVGCubicBezier('0.0, 0.0, 0.58, 1.0'), true, false);
+
+    effect(_p$ => {
+      const _v$ = props.secondary || '#FFFFFF',
+            _v$2 = props.secondary || '#FFFFFF';
+
+      _v$ !== _p$._v$ && setAttribute(_el$2, "stroke", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && setAttribute(_el$4, "fill", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+
+    return _el$;
+  })();
+};
+
+const _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.75s" repeatCount="indefinite"></animateTransform></path></svg>`, 8);
+
+const Loader = props => (() => {
+  const _el$ = _tmpl$.cloneNode(true),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.nextSibling;
+
+  _el$.style.setProperty("overflow", "visible");
+
+  effect(_p$ => {
+    const _v$ = props.primary || '#E5E7EB',
+          _v$2 = props.secondary || '#4b5563';
+
+    _v$ !== _p$._v$ && setAttribute(_el$2, "stroke", _p$._v$ = _v$);
+    _v$2 !== _p$._v$2 && setAttribute(_el$3, "stroke", _p$._v$2 = _v$2);
+    return _p$;
+  }, {
+    _v$: undefined,
+    _v$2: undefined
+  });
+
+  return _el$;
+})();
+
+var toast = toast$1;
+
+export { ActionType, Toaster, toast as default, resolveValue, toast$1 as toast };
 //# sourceMappingURL=index.js.map

dist/source/components/ErrorIcon.jsx

@@ -9,12 +9,8 @@ import { genSVGCubicBezier } from '../util';
       <path fill="none" stroke={props.secondary || '#FFFFFF'} stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9">
-        <animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze" 
-    // ease-in
-    {...genSVGCubicBezier('0.0, 0.0, 0.58, 1.0')}/>
+        <animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze" {...genSVGCubicBezier('0.0, 0.0, 0.58, 1.0')}/>
       </path>
       <circle fill={props.secondary || '#FFFFFF'} cx="16" cy="23" r="2.5" opacity="0">
-        <animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze" 
-    // ease-out
-    {...genSVGCubicBezier('0.0, 0.0, 0.58, 1.0')}/>
+        <animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze" {...genSVGCubicBezier('0.0, 0.0, 0.58, 1.0')}/>
       </circle>
     </svg>);
 };

dist/source/components/SuccessIcon.jsx

@@ -9,7 +9,5 @@ import { genSVGCubicBezier } from '../util';
       <path fill="none" stroke={props.secondary || '#FCFCFC'} stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7">
-        <animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze" 
-    // ease-out
-    {...genSVGCubicBezier('0.0, 0.0, 0.58, 1.0')}/>
+        <animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze" {...genSVGCubicBezier('0.0, 0.0, 0.58, 1.0')}/>
       </path>
     </svg>);
 };

dist/source/components/ToastBar.jsx

@@ -34,3 +34,2 @@ import { createEffect, Match, Switch } from 'solid-js';
             ...toastBarBase,
-            // animation: animation(),
             ...props.toast.style,
@@ -37,0 +36,0 @@ }}>

dist/source/components/ToastContainer.jsx

@@ -1,2 +0,2 @@
-import { createEffect, createSignal, onMount } from 'solid-js';
+import { createMemo, onMount } from 'solid-js';
 import { defaultToastOptions, dispatch } from '../core';
@@ -13,7 +13,3 @@ import { ActionType, resolveValue } from '../types';
     };
-    const [positionStyle, setPositionStyle] = createSignal(calculatePosition());
-    createEffect(() => {
-        const newStyles = calculatePosition();
-        setPositionStyle(newStyles);
-    });
+    const positionStyle = createMemo(() => calculatePosition());
     let el = undefined;
@@ -20,0 +16,0 @@ onMount(() => {

dist/types/components/ErrorIcon.d.ts

 import { IconProps } from '../types';
-export declare const Error: (props: IconProps) => import("solid-js").JSX.Element;
+import type { Component } from 'solid-js';
+export declare const Error: Component<IconProps>;

dist/types/components/LoaderIcon.d.ts

 import { IconProps } from '../types';
-export declare const Loader: (props: IconProps) => import("solid-js").JSX.Element;
+import type { Component } from 'solid-js';
+export declare const Loader: Component<IconProps>;

dist/types/components/SuccessIcon.d.ts

@@ -0,2 +1,3 @@
+import type { Component } from 'solid-js';
 import { IconProps } from '../types';
-export declare const Success: (props: IconProps) => import("solid-js").JSX.Element;
+export declare const Success: Component<IconProps>;

dist/types/components/ToastBar.d.ts

@@ -0,2 +1,3 @@
+import { Component } from 'solid-js';
 import { ToastBarProps } from '../types';
-export declare const ToastBar: (props: ToastBarProps) => import("solid-js").JSX.Element;
+export declare const ToastBar: Component<ToastBarProps>;

dist/types/components/ToastContainer.d.ts

@@ -0,2 +1,3 @@
+import { Component } from 'solid-js';
 import { ToastContainerProps } from '../';
-export declare const ToastContainer: (props: ToastContainerProps) => import("solid-js").JSX.Element;
+export declare const ToastContainer: Component<ToastContainerProps>;

dist/types/components/Toaster.d.ts

 import { ToasterProps } from '..';
-export declare const Toaster: (props: ToasterProps) => import("solid-js").JSX.Element;
+import { Component } from 'solid-js';
+export declare const Toaster: Component<ToasterProps>;

package.json

 {
   "name": "solid-toast",
-  "version": "0.3.4",
+  "version": "0.3.5-alpha.0",
   "description": "Customizable Toast Notifications for SolidJS",
-  "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
@@ -7,0 +6,0 @@ "module": "dist/esm/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

202532

increased by29.49%

Lines of code

2758

increased by76.57%

Number of low quality alerts

1

decreased by-50%

No dependency changes