// #style-inject:#style-inject
function styleInject(css, { insertAt } = {}) {
  if (!css || typeof document === "undefined") return;
  const head = document.head || document.getElementsByTagName("head")[0];
  const style = document.createElement("style");
  style.type = "text/css";
  if (insertAt === "top") {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

// src/styles.css
styleInject('html[dir=ltr],\n[data-sonner-toaster][dir=ltr] {\n  --toast-icon-margin-start: -3px;\n  --toast-icon-margin-end: 4px;\n  --toast-svg-margin-start: -1px;\n  --toast-svg-margin-end: 0px;\n  --toast-button-margin-start: auto;\n  --toast-button-margin-end: 0;\n  --toast-close-button-start: 0;\n  --toast-close-button-end: unset;\n  --toast-close-button-transform: translate(-35%, -35%);\n}\nhtml[dir=rtl],\n[data-sonner-toaster][dir=rtl] {\n  --toast-icon-margin-start: 4px;\n  --toast-icon-margin-end: -3px;\n  --toast-svg-margin-start: 0px;\n  --toast-svg-margin-end: -1px;\n  --toast-button-margin-start: 0;\n  --toast-button-margin-end: auto;\n  --toast-close-button-start: unset;\n  --toast-close-button-end: 0;\n  --toast-close-button-transform: translate(35%, -35%);\n}\n[data-sonner-toaster] {\n  position: fixed;\n  width: var(--width);\n  font-family:\n    ui-sans-serif,\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Helvetica Neue,\n    Arial,\n    Noto Sans,\n    sans-serif,\n    Apple Color Emoji,\n    Segoe UI Emoji,\n    Segoe UI Symbol,\n    Noto Color Emoji;\n  --gray1: hsl(0, 0%, 99%);\n  --gray2: hsl(0, 0%, 97.3%);\n  --gray3: hsl(0, 0%, 95.1%);\n  --gray4: hsl(0, 0%, 93%);\n  --gray5: hsl(0, 0%, 90.9%);\n  --gray6: hsl(0, 0%, 88.7%);\n  --gray7: hsl(0, 0%, 85.8%);\n  --gray8: hsl(0, 0%, 78%);\n  --gray9: hsl(0, 0%, 56.1%);\n  --gray10: hsl(0, 0%, 52.3%);\n  --gray11: hsl(0, 0%, 43.5%);\n  --gray12: hsl(0, 0%, 9%);\n  --border-radius: 8px;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  outline: none;\n  z-index: 999999999;\n  transition: transform 400ms ease;\n}\n@media (hover: none) and (pointer: coarse) {\n  [data-sonner-toaster][data-lifted=true] {\n    transform: none;\n  }\n}\n[data-sonner-toaster][data-x-position=right] {\n  right: var(--offset-right);\n}\n[data-sonner-toaster][data-x-position=left] {\n  left: var(--offset-left);\n}\n[data-sonner-toaster][data-x-position=center] {\n  left: 50%;\n  transform: translateX(-50%);\n}\n[data-sonner-toaster][data-y-position=top] {\n  top: var(--offset-top);\n}\n[data-sonner-toaster][data-y-position=bottom] {\n  bottom: var(--offset-bottom);\n}\n[data-sonner-toast] {\n  --y: translateY(100%);\n  --lift-amount: calc(var(--lift) * var(--gap));\n  z-index: var(--z-index);\n  position: absolute;\n  opacity: 0;\n  transform: var(--y);\n  touch-action: none;\n  transition:\n    transform 400ms,\n    opacity 400ms,\n    height 400ms,\n    box-shadow 200ms;\n  box-sizing: border-box;\n  outline: none;\n  overflow-wrap: anywhere;\n}\n[data-sonner-toast][data-styled=true] {\n  padding: 16px;\n  background: var(--normal-bg);\n  border: 1px solid var(--normal-border);\n  color: var(--normal-text);\n  border-radius: var(--border-radius);\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n  width: var(--width);\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n[data-sonner-toast]:focus-visible {\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);\n}\n[data-sonner-toast][data-y-position=top] {\n  top: 0;\n  --y: translateY(-100%);\n  --lift: 1;\n  --lift-amount: calc(1 * var(--gap));\n}\n[data-sonner-toast][data-y-position=bottom] {\n  bottom: 0;\n  --y: translateY(100%);\n  --lift: -1;\n  --lift-amount: calc(var(--lift) * var(--gap));\n}\n[data-sonner-toast][data-styled=true] [data-description] {\n  font-weight: 400;\n  line-height: 1.4;\n  color: #3f3f3f;\n}\n[data-rich-colors=true][data-sonner-toast][data-styled=true] [data-description] {\n  color: inherit;\n}\n[data-sonner-toaster][data-sonner-theme=dark] [data-description] {\n  color: hsl(0, 0%, 91%);\n}\n[data-sonner-toast][data-styled=true] [data-title] {\n  font-weight: 500;\n  line-height: 1.5;\n  color: inherit;\n}\n[data-sonner-toast][data-styled=true] [data-icon] {\n  display: flex;\n  height: 16px;\n  width: 16px;\n  position: relative;\n  justify-content: flex-start;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: var(--toast-icon-margin-start);\n  margin-right: var(--toast-icon-margin-end);\n}\n[data-sonner-toast][data-promise=true] [data-icon] > svg {\n  opacity: 0;\n  transform: scale(0.8);\n  transform-origin: center;\n  animation: sonner-fade-in 300ms ease forwards;\n}\n[data-sonner-toast][data-styled=true] [data-icon] > * {\n  flex-shrink: 0;\n}\n[data-sonner-toast][data-styled=true] [data-icon] svg {\n  margin-left: var(--toast-svg-margin-start);\n  margin-right: var(--toast-svg-margin-end);\n}\n[data-sonner-toast][data-styled=true] [data-content] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n[data-sonner-toast][data-styled=true] [data-button] {\n  border-radius: 4px;\n  padding-left: 8px;\n  padding-right: 8px;\n  height: 24px;\n  font-size: 12px;\n  color: var(--normal-bg);\n  background: var(--normal-text);\n  margin-left: var(--toast-button-margin-start);\n  margin-right: var(--toast-button-margin-end);\n  border: none;\n  font-weight: 500;\n  cursor: pointer;\n  outline: none;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  transition: opacity 400ms, box-shadow 200ms;\n}\n[data-sonner-toast][data-styled=true] [data-button]:focus-visible {\n  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);\n}\n[data-sonner-toast][data-styled=true] [data-button]:first-of-type {\n  margin-left: var(--toast-button-margin-start);\n  margin-right: var(--toast-button-margin-end);\n}\n[data-sonner-toast][data-styled=true] [data-cancel] {\n  color: var(--normal-text);\n  background: rgba(0, 0, 0, 0.08);\n}\n[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-styled=true] [data-cancel] {\n  background: rgba(255, 255, 255, 0.3);\n}\n[data-sonner-toast][data-styled=true] [data-close-button] {\n  position: absolute;\n  left: var(--toast-close-button-start);\n  right: var(--toast-close-button-end);\n  top: 0;\n  height: 20px;\n  width: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n  color: var(--normal-text);\n  background: var(--normal-bg);\n  border: 1px solid var(--normal-border);\n  transform: var(--toast-close-button-transform);\n  border-radius: 50%;\n  cursor: pointer;\n  z-index: 1;\n  transition:\n    opacity 100ms,\n    background 200ms,\n    border-color 200ms;\n}\n[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible {\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);\n}\n[data-sonner-toast][data-styled=true] [data-disabled=true] {\n  cursor: not-allowed;\n}\n[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover {\n  background: var(--gray2);\n  border-color: var(--gray5);\n}\n[data-sonner-toast][data-swiping=true]::before {\n  content: "";\n  position: absolute;\n  left: -100%;\n  right: -100%;\n  height: 100%;\n  z-index: -1;\n}\n[data-sonner-toast][data-y-position=top][data-swiping=true]::before {\n  bottom: 50%;\n  transform: scaleY(3) translateY(50%);\n}\n[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before {\n  top: 50%;\n  transform: scaleY(3) translateY(-50%);\n}\n[data-sonner-toast][data-swiping=false][data-removed=true]::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  transform: scaleY(2);\n}\n[data-sonner-toast][data-expanded=true]::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  height: calc(var(--gap) + 1px);\n  bottom: 100%;\n  width: 100%;\n}\n[data-sonner-toast][data-mounted=true] {\n  --y: translateY(0);\n  opacity: 1;\n}\n[data-sonner-toast][data-expanded=false][data-front=false] {\n  --scale: var(--toasts-before) * 0.05 + 1;\n  --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));\n  height: var(--front-toast-height);\n}\n[data-sonner-toast] > * {\n  transition: opacity 400ms;\n}\n[data-sonner-toast][data-x-position=right] {\n  right: 0;\n}\n[data-sonner-toast][data-x-position=left] {\n  left: 0;\n}\n[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true] > * {\n  opacity: 0;\n}\n[data-sonner-toast][data-visible=false] {\n  opacity: 0;\n  pointer-events: none;\n}\n[data-sonner-toast][data-mounted=true][data-expanded=true] {\n  --y: translateY(calc(var(--lift) * var(--offset)));\n  height: var(--initial-height);\n}\n[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false] {\n  --y: translateY(calc(var(--lift) * -100%));\n  opacity: 0;\n}\n[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true] {\n  --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));\n  opacity: 0;\n}\n[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false] {\n  --y: translateY(40%);\n  opacity: 0;\n  transition: transform 500ms, opacity 200ms;\n}\n[data-sonner-toast][data-removed=true][data-front=false]::before {\n  height: calc(var(--initial-height) + 20%);\n}\n[data-sonner-toast][data-swiping=true] {\n  transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));\n  transition: none;\n}\n[data-sonner-toast][data-swiped=true] {\n  -webkit-user-select: none;\n  user-select: none;\n}\n[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],\n[data-sonner-toast][data-swipe-out=true][data-y-position=top] {\n  animation-duration: 200ms;\n  animation-timing-function: ease-out;\n  animation-fill-mode: forwards;\n}\n[data-sonner-toast][data-swipe-out=true][data-swipe-direction=left] {\n  animation-name: swipe-out-left;\n}\n[data-sonner-toast][data-swipe-out=true][data-swipe-direction=right] {\n  animation-name: swipe-out-right;\n}\n[data-sonner-toast][data-swipe-out=true][data-swipe-direction=up] {\n  animation-name: swipe-out-up;\n}\n[data-sonner-toast][data-swipe-out=true][data-swipe-direction=down] {\n  animation-name: swipe-out-down;\n}\n@keyframes swipe-out-left {\n  from {\n    transform: var(--y) translateX(var(--swipe-amount-x));\n    opacity: 1;\n  }\n  to {\n    transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n    opacity: 0;\n  }\n}\n@keyframes swipe-out-right {\n  from {\n    transform: var(--y) translateX(var(--swipe-amount-x));\n    opacity: 1;\n  }\n  to {\n    transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n    opacity: 0;\n  }\n}\n@keyframes swipe-out-up {\n  from {\n    transform: var(--y) translateY(var(--swipe-amount-y));\n    opacity: 1;\n  }\n  to {\n    transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n    opacity: 0;\n  }\n}\n@keyframes swipe-out-down {\n  from {\n    transform: var(--y) translateY(var(--swipe-amount-y));\n    opacity: 1;\n  }\n  to {\n    transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n    opacity: 0;\n  }\n}\n@media (max-width: 600px) {\n  [data-sonner-toaster] {\n    position: fixed;\n    right: var(--mobile-offset-right);\n    left: var(--mobile-offset-left);\n    width: 100%;\n  }\n  [data-sonner-toaster][dir=rtl] {\n    left: calc(var(--mobile-offset-left) * -1);\n  }\n  [data-sonner-toaster] [data-sonner-toast] {\n    left: 0;\n    right: 0;\n    width: calc(100% - var(--mobile-offset-left) * 2);\n  }\n  [data-sonner-toaster][data-x-position=left] {\n    left: var(--mobile-offset-left);\n  }\n  [data-sonner-toaster][data-y-position=bottom] {\n    bottom: var(--mobile-offset-bottom);\n  }\n  [data-sonner-toaster][data-y-position=top] {\n    top: var(--mobile-offset-top);\n  }\n  [data-sonner-toaster][data-x-position=center] {\n    left: var(--mobile-offset-left);\n    right: var(--mobile-offset-right);\n    transform: none;\n  }\n}\n[data-sonner-toaster][data-sonner-theme=light] {\n  --normal-bg: #fff;\n  --normal-border: var(--gray4);\n  --normal-text: var(--gray12);\n  --success-bg: hsl(143, 85%, 96%);\n  --success-border: hsl(145, 92%, 87%);\n  --success-text: hsl(140, 100%, 27%);\n  --info-bg: hsl(208, 100%, 97%);\n  --info-border: hsl(221, 91%, 93%);\n  --info-text: hsl(210, 92%, 45%);\n  --warning-bg: hsl(49, 100%, 97%);\n  --warning-border: hsl(49, 91%, 84%);\n  --warning-text: hsl(31, 92%, 45%);\n  --error-bg: hsl(359, 100%, 97%);\n  --error-border: hsl(359, 100%, 94%);\n  --error-text: hsl(360, 100%, 45%);\n}\n[data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-invert=true] {\n  --normal-bg: #000;\n  --normal-border: hsl(0, 0%, 20%);\n  --normal-text: var(--gray1);\n}\n[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-invert=true] {\n  --normal-bg: #fff;\n  --normal-border: var(--gray3);\n  --normal-text: var(--gray12);\n}\n[data-sonner-toaster][data-sonner-theme=dark] {\n  --normal-bg: #000;\n  --normal-bg-hover: hsl(0, 0%, 12%);\n  --normal-border: hsl(0, 0%, 20%);\n  --normal-border-hover: hsl(0, 0%, 25%);\n  --normal-text: var(--gray1);\n  --success-bg: hsl(150, 100%, 6%);\n  --success-border: hsl(147, 100%, 12%);\n  --success-text: hsl(150, 86%, 65%);\n  --info-bg: hsl(215, 100%, 6%);\n  --info-border: hsl(223, 43%, 17%);\n  --info-text: hsl(216, 87%, 65%);\n  --warning-bg: hsl(64, 100%, 6%);\n  --warning-border: hsl(60, 100%, 9%);\n  --warning-text: hsl(46, 87%, 65%);\n  --error-bg: hsl(358, 76%, 10%);\n  --error-border: hsl(357, 89%, 16%);\n  --error-text: hsl(358, 100%, 81%);\n}\n[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button] {\n  background: var(--normal-bg);\n  border-color: var(--normal-border);\n  color: var(--normal-text);\n}\n[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover {\n  background: var(--normal-bg-hover);\n  border-color: var(--normal-border-hover);\n}\n[data-rich-colors=true][data-sonner-toast][data-type=success] {\n  background: var(--success-bg);\n  border-color: var(--success-border);\n  color: var(--success-text);\n}\n[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button] {\n  background: var(--success-bg);\n  border-color: var(--success-border);\n  color: var(--success-text);\n}\n[data-rich-colors=true][data-sonner-toast][data-type=info] {\n  background: var(--info-bg);\n  border-color: var(--info-border);\n  color: var(--info-text);\n}\n[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button] {\n  background: var(--info-bg);\n  border-color: var(--info-border);\n  color: var(--info-text);\n}\n[data-rich-colors=true][data-sonner-toast][data-type=warning] {\n  background: var(--warning-bg);\n  border-color: var(--warning-border);\n  color: var(--warning-text);\n}\n[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button] {\n  background: var(--warning-bg);\n  border-color: var(--warning-border);\n  color: var(--warning-text);\n}\n[data-rich-colors=true][data-sonner-toast][data-type=error] {\n  background: var(--error-bg);\n  border-color: var(--error-border);\n  color: var(--error-text);\n}\n[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button] {\n  background: var(--error-bg);\n  border-color: var(--error-border);\n  color: var(--error-text);\n}\n.sonner-loading-wrapper {\n  --size: 16px;\n  height: var(--size);\n  width: var(--size);\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n}\n.sonner-loading-wrapper[data-visible=false] {\n  transform-origin: center;\n  animation: sonner-fade-out 0.2s ease forwards;\n}\n.sonner-spinner {\n  position: relative;\n  top: 50%;\n  left: 50%;\n  height: var(--size);\n  width: var(--size);\n}\n.sonner-loading-bar {\n  animation: sonner-spin 1.2s linear infinite;\n  background: var(--gray11);\n  border-radius: 6px;\n  height: 8%;\n  left: -10%;\n  position: absolute;\n  top: -3.9%;\n  width: 24%;\n}\n.sonner-loading-bar:nth-child(1) {\n  animation-delay: -1.2s;\n  transform: rotate(0.0001deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(2) {\n  animation-delay: -1.1s;\n  transform: rotate(30deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(3) {\n  animation-delay: -1s;\n  transform: rotate(60deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(4) {\n  animation-delay: -0.9s;\n  transform: rotate(90deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(5) {\n  animation-delay: -0.8s;\n  transform: rotate(120deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(6) {\n  animation-delay: -0.7s;\n  transform: rotate(150deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(7) {\n  animation-delay: -0.6s;\n  transform: rotate(180deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(8) {\n  animation-delay: -0.5s;\n  transform: rotate(210deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(9) {\n  animation-delay: -0.4s;\n  transform: rotate(240deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(10) {\n  animation-delay: -0.3s;\n  transform: rotate(270deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(11) {\n  animation-delay: -0.2s;\n  transform: rotate(300deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(12) {\n  animation-delay: -0.1s;\n  transform: rotate(330deg) translate(146%);\n}\n@keyframes sonner-fade-in {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes sonner-fade-out {\n  0% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n@keyframes sonner-spin {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.15;\n  }\n}\n@media (prefers-reduced-motion) {\n  [data-sonner-toast],\n  [data-sonner-toast] > *,\n  .sonner-loading-bar {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n.sonner-loader {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: center;\n  transition: opacity 200ms, transform 200ms;\n}\n.sonner-loader[data-visible=false] {\n  opacity: 0;\n  transform: scale(0.8) translate(-50%, -50%);\n}\n');

// src/index.tsx
import { For as For2, Show, createEffect, createMemo, createSignal as createSignal2, mergeProps, on, onCleanup as onCleanup2, onMount as onMount2 } from "solid-js";
import { createStore, produce, reconcile } from "solid-js/store";

// src/assets.tsx
import { For } from "solid-js";
var bars = Array(12).fill(0);
function Loader(props) {
  return <div class={["sonner-loading-wrapper", props.class ?? props.className].filter(Boolean).join(" ")} data-visible={props.visible}>
      <div class="sonner-spinner">
        <For each={bars}>{(_, i) => <div class="sonner-loading-bar" data-index={i()} />}</For>
      </div>
    </div>;
}
function SuccessIcon() {
  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
      <path
    fill-rule="evenodd"
    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
    clip-rule="evenodd"
  />
    </svg>;
}
function WarningIcon() {
  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="20">
      <path
    fill-rule="evenodd"
    d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
    clip-rule="evenodd"
  />
    </svg>;
}
function InfoIcon() {
  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
      <path
    fill-rule="evenodd"
    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
    clip-rule="evenodd"
  />
    </svg>;
}
function ErrorIcon() {
  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
      <path
    fill-rule="evenodd"
    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
    clip-rule="evenodd"
  />
    </svg>;
}
function getAsset(type) {
  switch (type) {
    case "success":
      return <SuccessIcon />;
    case "info":
      return <InfoIcon />;
    case "warning":
      return <WarningIcon />;
    case "error":
      return <ErrorIcon />;
    default:
      return null;
  }
}
function CloseIcon() {
  return <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>;
}

// src/primitives.ts
import { createSignal, onCleanup, onMount } from "solid-js";
function useIsDocumentHidden() {
  const [isDocumentHidden, setIsDocumentHidden] = createSignal(typeof document !== "undefined" ? document.hidden : false);
  onMount(() => {
    const callback = () => {
      setIsDocumentHidden(document.hidden);
    };
    document.addEventListener("visibilitychange", callback);
    onCleanup(() => {
      document.removeEventListener("visibilitychange", callback);
    });
  });
  return isDocumentHidden;
}

// src/state.ts
var toastsCounter = 1;
var Observer = class {
  subscribers;
  toasts;
  dismissedToasts;
  constructor() {
    this.subscribers = [];
    this.toasts = [];
    this.dismissedToasts = /* @__PURE__ */ new Set();
  }
  subscribe = (subscriber) => {
    this.subscribers.push(subscriber);
    return () => {
      const index = this.subscribers.indexOf(subscriber);
      this.subscribers.splice(index, 1);
    };
  };
  publish = (data) => {
    this.subscribers.forEach((subscriber) => subscriber(data));
  };
  addToast = (data) => {
    this.publish(data);
    this.toasts = [...this.toasts, data];
  };
  create = (data) => {
    const { message, ...rest } = data;
    const hasStringId = typeof data.id === "string" && data.id.length > 0;
    const id = typeof data.id === "number" || hasStringId ? data.id : toastsCounter++;
    const alreadyExists = this.toasts.find((toast2) => {
      return toast2.id === id;
    });
    const dismissible = data.dismissible === void 0 ? true : data.dismissible;
    if (this.dismissedToasts.has(id))
      this.dismissedToasts.delete(id);
    if (alreadyExists) {
      this.toasts = this.toasts.map((toast2) => {
        if (toast2.id === id) {
          this.publish({ ...toast2, ...data, id, title: message, dismissible });
          return {
            ...toast2,
            ...data,
            id,
            dismissible,
            title: message
          };
        }
        return toast2;
      });
    } else {
      this.addToast({ title: message, ...rest, dismissible, id });
    }
    return id;
  };
  dismiss = (id) => {
    if (id) {
      this.dismissedToasts.add(id);
      requestAnimationFrame(() => {
        this.subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
      });
    } else {
      this.toasts.forEach((toast2) => {
        this.dismissedToasts.add(toast2.id);
        this.subscribers.forEach((subscriber) => subscriber({ id: toast2.id, dismiss: true }));
      });
    }
    return id;
  };
  message = (message, data) => {
    return this.create({ ...data, message });
  };
  error = (message, data) => {
    return this.create({ ...data, message, type: "error" });
  };
  success = (message, data) => {
    return this.create({ ...data, type: "success", message });
  };
  info = (message, data) => {
    return this.create({ ...data, type: "info", message });
  };
  warning = (message, data) => {
    return this.create({ ...data, type: "warning", message });
  };
  loading = (message, data) => {
    return this.create({ ...data, type: "loading", message });
  };
  promise = (promise, data) => {
    if (!data)
      return;
    let id;
    if (data.loading !== void 0) {
      id = this.create({
        ...data,
        promise,
        type: "loading",
        message: data.loading,
        description: typeof data.description !== "function" ? data.description : void 0
      });
    }
    const p = Promise.resolve(typeof promise === "function" ? promise() : promise);
    let shouldDismiss = id !== void 0;
    let result;
    const originalPromise = p.then(async (response) => {
      result = ["resolve", response];
      if (isValidElement(response)) {
        shouldDismiss = false;
        this.create({ id, type: "default", message: response });
      } else if (isHttpResponse(response) && !response.ok) {
        shouldDismiss = false;
        const promiseData = typeof data.error === "function" ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
        const description = typeof data.description === "function" ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
        const toastSettings = isExtendedResult(promiseData) ? promiseData : { message: promiseData };
        this.create({ id, type: "error", description, ...toastSettings });
      } else if (response instanceof Error) {
        shouldDismiss = false;
        const promiseData = typeof data.error === "function" ? await data.error(response) : data.error;
        const description = typeof data.description === "function" ? await data.description(response) : data.description;
        const toastSettings = isExtendedResult(promiseData) ? promiseData : { message: promiseData };
        this.create({ id, type: "error", description, ...toastSettings });
      } else if (data.success !== void 0) {
        shouldDismiss = false;
        const promiseData = typeof data.success === "function" ? await data.success(response) : data.success;
        const description = typeof data.description === "function" ? await data.description(response) : data.description;
        const toastSettings = isExtendedResult(promiseData) ? promiseData : { message: promiseData };
        this.create({ id, type: "success", description, ...toastSettings });
      }
    }).catch(async (error) => {
      result = ["reject", error];
      if (data.error !== void 0) {
        shouldDismiss = false;
        const promiseData = typeof data.error === "function" ? await data.error(error) : data.error;
        const description = typeof data.description === "function" ? await data.description(error) : data.description;
        const toastSettings = isExtendedResult(promiseData) ? promiseData : { message: promiseData };
        this.create({ id, type: "error", description, ...toastSettings });
      }
    }).finally(() => {
      if (shouldDismiss) {
        this.dismiss(id);
        id = void 0;
      }
      data.finally?.();
    });
    const unwrap = () => new Promise((resolve, reject) => {
      originalPromise.then(() => {
        if (result[0] === "reject")
          reject(result[1]);
        else
          resolve(result[1]);
      }).catch(reject);
    });
    if (typeof id !== "string" && typeof id !== "number")
      return { unwrap };
    return Object.assign(id, { unwrap });
  };
  custom = (jsx, data) => {
    const id = data?.id || toastsCounter++;
    this.create({ jsx: jsx(id), ...data, id });
    return id;
  };
  getActiveToasts = () => {
    return this.toasts.filter((toast2) => !this.dismissedToasts.has(toast2.id));
  };
};
function isHttpResponse(data) {
  return data && typeof data === "object" && "ok" in data && typeof data.ok === "boolean" && "status" in data && typeof data.status === "number";
}
function isExtendedResult(value) {
  return typeof value === "object" && value !== null && "message" in value;
}
function isValidElement(value) {
  return typeof Node !== "undefined" && value instanceof Node;
}
var ToastState = new Observer();
function toastFunction(message, data) {
  const id = data?.id || toastsCounter++;
  ToastState.addToast({
    title: message,
    ...data,
    id
  });
  return id;
}
var basicToast = toastFunction;
var getHistory = () => ToastState.toasts;
var getToasts = () => ToastState.getActiveToasts();
var toast = Object.assign(
  basicToast,
  {
    success: ToastState.success,
    info: ToastState.info,
    warning: ToastState.warning,
    error: ToastState.error,
    custom: ToastState.custom,
    message: ToastState.message,
    promise: ToastState.promise,
    dismiss: ToastState.dismiss,
    loading: ToastState.loading
  },
  {
    getHistory,
    getToasts
  }
);

// src/types.ts
function isAction(action) {
  return typeof action === "object" && action !== null && "label" in action;
}

// src/index.tsx
var VISIBLE_TOASTS_AMOUNT = 3;
var VIEWPORT_OFFSET = "24px";
var MOBILE_VIEWPORT_OFFSET = "16px";
var TOAST_LIFETIME = 4e3;
var TOAST_WIDTH = 356;
var GAP = 14;
var SWIPE_THRESHOLD = 45;
var TIME_BEFORE_UNMOUNT = 200;
function cn(...classes) {
  return classes.filter(Boolean).join(" ");
}
function resolveContent(content) {
  return typeof content === "function" ? content() : content;
}
function getDefaultSwipeDirections(position) {
  const [y, x] = position.split("-");
  const directions = [];
  if (y)
    directions.push(y);
  if (x)
    directions.push(x);
  return directions;
}
function getDocumentDirection() {
  if (typeof window === "undefined" || typeof document === "undefined")
    return "ltr";
  const dirAttribute = document.documentElement.getAttribute("dir");
  if (dirAttribute === "auto" || !dirAttribute)
    return window.getComputedStyle(document.documentElement).direction;
  return dirAttribute;
}
function assignOffset(defaultOffset, mobileOffset) {
  const styles = {};
  [defaultOffset, mobileOffset].forEach((offset, index) => {
    const isMobile = index === 1;
    const prefix = isMobile ? "--mobile-offset" : "--offset";
    const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
    const assignAll = (value) => {
      for (const key of ["top", "right", "bottom", "left"])
        styles[`${prefix}-${key}`] = typeof value === "number" ? `${value}px` : value;
    };
    if (typeof offset === "number" || typeof offset === "string") {
      assignAll(offset);
      return;
    }
    if (typeof offset === "object" && offset !== null) {
      for (const key of ["top", "right", "bottom", "left"]) {
        const value = offset[key];
        styles[`${prefix}-${key}`] = value === void 0 ? defaultValue : typeof value === "number" ? `${value}px` : value;
      }
      return;
    }
    assignAll(defaultValue);
  });
  return styles;
}
function mergeClassNames(classNames, legacy) {
  return classNames ?? legacy;
}
function mergeDescriptionClassName(descriptionClassName, legacy) {
  return descriptionClassName ?? legacy ?? "";
}
function mergeClassName(className, legacy) {
  return className ?? legacy ?? "";
}
function useSonner() {
  const [activeToasts, setActiveToasts] = createSignal2(toast.getToasts());
  onMount2(() => {
    const unsubscribe = ToastState.subscribe((toastItem) => {
      if (toastItem.dismiss) {
        requestAnimationFrame(() => {
          setActiveToasts((toasts) => toasts.filter((t) => t.id !== toastItem.id));
        });
        return;
      }
      const nextToast = toastItem;
      setActiveToasts((toasts) => {
        const indexOfExistingToast = toasts.findIndex((t) => t.id === nextToast.id);
        if (indexOfExistingToast !== -1) {
          return [
            ...toasts.slice(0, indexOfExistingToast),
            { ...toasts[indexOfExistingToast], ...nextToast },
            ...toasts.slice(indexOfExistingToast + 1)
          ];
        }
        return [nextToast, ...toasts];
      });
    });
    onCleanup2(unsubscribe);
  });
  return {
    toasts: activeToasts
  };
}
function createToastTheme(theme) {
  return theme !== "system" ? theme : typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function Toast(props) {
  const [mounted, setMounted] = createSignal2(false);
  const [removed, setRemoved] = createSignal2(false);
  const [swiping, setSwiping] = createSignal2(false);
  const [swipeOut, setSwipeOut] = createSignal2(false);
  const [isSwiped, setIsSwiped] = createSignal2(false);
  const [swipeDirection, setSwipeDirection] = createSignal2(null);
  const [swipeOutDirection, setSwipeOutDirection] = createSignal2(null);
  const [offsetBeforeRemove, setOffsetBeforeRemove] = createSignal2(0);
  const [initialHeight, setInitialHeight] = createSignal2(0);
  let toastRef;
  let dragStartTime = null;
  let closeTimerStartTimeRef = 0;
  let lastCloseTimerStartTimeRef = 0;
  let remainingTime = TOAST_LIFETIME;
  const [pointerStartRef, setPointerStartRef] = createSignal2(null);
  const isFront = () => props.index === 0;
  const isVisible = () => props.index + 1 <= props.visibleToasts;
  const toastType = () => props.toast.type;
  const dismissible = () => props.toast.dismissible !== false;
  const classNames = () => mergeClassNames(props.classNames, props.classes);
  const className = () => mergeClassName(props.className, props.class);
  const descriptionClassName = () => mergeDescriptionClassName(props.descriptionClassName, props.descriptionClass);
  const toastClassName = () => mergeClassName(props.toast.className, props.toast.class);
  const toastDescriptionClassName = () => mergeDescriptionClassName(props.toast.descriptionClassName, props.toast.descriptionClass);
  const toastClassNames = () => mergeClassNames(props.toast.classNames, props.toast.classes);
  const closeButton = () => props.toast.closeButton ?? props.closeButton;
  const duration = () => props.toast.duration ?? props.duration ?? TOAST_LIFETIME;
  const invert = () => props.toast.invert ?? props.invert;
  const disabled = () => toastType() === "loading";
  const swipeDirections = () => props.swipeDirections ?? getDefaultSwipeDirections(props.position);
  const y = createMemo(() => props.position.split("-")[0]);
  const x = createMemo(() => props.position.split("-")[1]);
  const heightIndex = createMemo(() => Math.max(0, props.heights.findIndex((height) => height.toastId === props.toast.id)));
  const toastsHeightBefore = createMemo(() => {
    return props.heights.reduce((prev, curr, reducerIndex) => {
      if (reducerIndex >= heightIndex())
        return prev;
      return prev + curr.height;
    }, 0);
  });
  const offset = createMemo(() => heightIndex() * (props.gap ?? GAP) + toastsHeightBefore());
  const isDocumentHidden = useIsDocumentHidden();
  createEffect(() => {
    remainingTime = duration();
  });
  function deleteToast() {
    setRemoved(true);
    setOffsetBeforeRemove(offset());
    props.setHeights((heights) => heights.filter((height) => height.toastId !== props.toast.id));
    window.setTimeout(() => {
      props.removeToast(props.toast);
    }, TIME_BEFORE_UNMOUNT);
  }
  function getLoadingIcon() {
    if (props.icons?.loading) {
      return <div class={cn(classNames()?.loader, toastClassNames()?.loader, "sonner-loader")} data-visible={toastType() === "loading"}>
          {props.icons.loading}
        </div>;
    }
    return <Loader class={cn(classNames()?.loader, toastClassNames()?.loader)} visible={toastType() === "loading"} />;
  }
  const icon = () => props.toast.icon ?? props.icons?.[toastType()] ?? getAsset(toastType());
  onMount2(() => {
    setMounted(true);
    if (!toastRef)
      return;
    const height = toastRef.getBoundingClientRect().height;
    setInitialHeight(height);
    props.setHeights((h) => [{ toastId: props.toast.id, toasterId: props.toast.toasterId, height, position: props.toast.position }, ...h]);
    onCleanup2(() => {
      props.setHeights((h) => h.filter((height2) => height2.toastId !== props.toast.id));
    });
  });
  createEffect(() => {
    if (!mounted() || !toastRef)
      return;
    resolveContent(props.toast.title);
    resolveContent(props.toast.description);
    const originalHeight = toastRef.style.height;
    toastRef.style.height = "auto";
    const nextHeight = toastRef.getBoundingClientRect().height;
    toastRef.style.height = originalHeight;
    setInitialHeight(nextHeight);
    props.setHeights((heights) => {
      const alreadyExists = heights.find((height) => height.toastId === props.toast.id);
      if (!alreadyExists)
        return [{ toastId: props.toast.id, toasterId: props.toast.toasterId, height: nextHeight, position: props.toast.position }, ...heights];
      return heights.map((height) => height.toastId === props.toast.id ? { ...height, height: nextHeight } : height);
    });
  });
  createEffect(
    on(
      () => [props.expanded, props.interacting, props.toast, toastType(), isDocumentHidden(), duration()],
      ([expanded, interacting, currentToast, currentType]) => {
        if (currentToast.promise && currentType === "loading" || currentToast.duration === Number.POSITIVE_INFINITY || currentType === "loading")
          return;
        let timeoutId;
        const pauseTimer = () => {
          if (lastCloseTimerStartTimeRef < closeTimerStartTimeRef) {
            const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef;
            remainingTime -= elapsedTime;
          }
          lastCloseTimerStartTimeRef = (/* @__PURE__ */ new Date()).getTime();
        };
        const startTimer = () => {
          if (remainingTime === Number.POSITIVE_INFINITY)
            return;
          closeTimerStartTimeRef = (/* @__PURE__ */ new Date()).getTime();
          timeoutId = setTimeout(() => {
            currentToast.onAutoClose?.(currentToast);
            deleteToast();
          }, remainingTime);
        };
        const shouldPause = expanded || interacting || (props.pauseWhenPageIsHidden ?? true) && isDocumentHidden();
        if (shouldPause)
          pauseTimer();
        else
          startTimer();
        onCleanup2(() => {
          if (timeoutId)
            clearTimeout(timeoutId);
        });
      }
    )
  );
  createEffect(
    on(
      () => props.toast.delete,
      (shouldDelete) => {
        if (shouldDelete) {
          deleteToast();
          props.toast.onDismiss?.(props.toast);
        }
      }
    )
  );
  return <li
    tabIndex={0}
    ref={toastRef}
    class={cn(
      className(),
      toastClassName(),
      classNames()?.toast,
      toastClassNames()?.toast,
      classNames()?.default,
      classNames()?.[toastType()],
      toastClassNames()?.[toastType()]
    )}
    data-sonner-toast=""
    data-rich-colors={props.toast.richColors ?? props.defaultRichColors}
    data-styled={!(props.toast.jsx || props.toast.unstyled || props.unstyled)}
    data-mounted={mounted()}
    data-promise={Boolean(props.toast.promise)}
    data-swiped={isSwiped()}
    data-removed={removed()}
    data-visible={isVisible()}
    data-y-position={y()}
    data-x-position={x()}
    data-index={props.index}
    data-front={isFront()}
    data-swiping={swiping()}
    data-dismissible={dismissible()}
    data-type={toastType()}
    data-invert={invert()}
    data-swipe-out={swipeOut()}
    data-swipe-direction={swipeOutDirection()}
    data-expanded={Boolean(props.expanded || props.expandByDefault && mounted())}
    data-testid={props.toast.testId}
    style={{
      "--index": props.index,
      "--toasts-before": props.index,
      "--z-index": props.toasts.length - props.index,
      "--offset": `${removed() ? offsetBeforeRemove() : offset()}px`,
      "--initial-height": props.expandByDefault ? "auto" : `${initialHeight()}px`,
      ...props.style,
      ...props.toast.style
    }}
    onDragEnd={() => {
      setSwiping(false);
      setSwipeDirection(null);
      setPointerStartRef(null);
    }}
    onPointerDown={(event) => {
      if (event.button === 2)
        return;
      if (disabled() || !dismissible())
        return;
      if (event.target.closest("button"))
        return;
      dragStartTime = /* @__PURE__ */ new Date();
      setOffsetBeforeRemove(offset());
      event.currentTarget.setPointerCapture(event.pointerId);
      setSwiping(true);
      setPointerStartRef({ x: event.clientX, y: event.clientY });
    }}
    onPointerUp={() => {
      if (swipeOut() || !dismissible())
        return;
      setPointerStartRef(null);
      const swipeAmountX = Number(toastRef?.style.getPropertyValue("--swipe-amount-x").replace("px", "") || 0);
      const swipeAmountY = Number(toastRef?.style.getPropertyValue("--swipe-amount-y").replace("px", "") || 0);
      const timeTaken = Math.max(1, (/* @__PURE__ */ new Date()).getTime() - (dragStartTime?.getTime() ?? 0));
      const swipeAmount = swipeDirection() === "x" ? swipeAmountX : swipeAmountY;
      const velocity = Math.abs(swipeAmount) / timeTaken;
      if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
        setOffsetBeforeRemove(offset());
        props.toast.onDismiss?.(props.toast);
        if (swipeDirection() === "x")
          setSwipeOutDirection(swipeAmountX > 0 ? "right" : "left");
        else
          setSwipeOutDirection(swipeAmountY > 0 ? "down" : "up");
        deleteToast();
        setSwipeOut(true);
        return;
      }
      toastRef?.style.setProperty("--swipe-amount-x", "0px");
      toastRef?.style.setProperty("--swipe-amount-y", "0px");
      setIsSwiped(false);
      setSwiping(false);
      setSwipeDirection(null);
    }}
    onPointerMove={(event) => {
      if (!pointerStartRef() || !dismissible())
        return;
      if ((window.getSelection()?.toString().length ?? 0) > 0)
        return;
      const yDelta = event.clientY - pointerStartRef().y;
      const xDelta = event.clientX - pointerStartRef().x;
      if (!swipeDirection() && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1))
        setSwipeDirection(Math.abs(xDelta) > Math.abs(yDelta) ? "x" : "y");
      const swipeAmount = { x: 0, y: 0 };
      const getDampening = (delta) => {
        const factor = Math.abs(delta) / 20;
        return 1 / (1.5 + factor);
      };
      if (swipeDirection() === "y") {
        if (swipeDirections().includes("top") || swipeDirections().includes("bottom")) {
          if (swipeDirections().includes("top") && yDelta < 0 || swipeDirections().includes("bottom") && yDelta > 0)
            swipeAmount.y = yDelta;
          else
            swipeAmount.y = yDelta * getDampening(yDelta);
        }
      } else if (swipeDirection() === "x") {
        if (swipeDirections().includes("left") || swipeDirections().includes("right")) {
          if (swipeDirections().includes("left") && xDelta < 0 || swipeDirections().includes("right") && xDelta > 0)
            swipeAmount.x = xDelta;
          else
            swipeAmount.x = xDelta * getDampening(xDelta);
        }
      }
      if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0)
        setIsSwiped(true);
      toastRef?.style.setProperty("--swipe-amount-x", `${swipeAmount.x}px`);
      toastRef?.style.setProperty("--swipe-amount-y", `${swipeAmount.y}px`);
    }}
  >
      <Show when={closeButton() && !props.toast.jsx && toastType() !== "loading"}>
        <button
    aria-label={props.closeButtonAriaLabel ?? "Close toast"}
    data-disabled={disabled()}
    data-close-button
    onPointerDown={(event) => event.stopPropagation()}
    onPointerUp={(event) => event.stopPropagation()}
    onClick={() => {
      if (disabled() || !dismissible())
        return;
      deleteToast();
      props.toast.onDismiss?.(props.toast);
    }}
    class={cn(classNames()?.closeButton, toastClassNames()?.closeButton)}
  >
          {props.icons?.close ?? <CloseIcon />}
        </button>
      </Show>

      <Show when={(toastType() || props.toast.icon || props.toast.promise) && props.toast.icon !== null && (props.icons?.[toastType()] !== null || props.toast.icon)}>
        <div data-icon="" class={cn(classNames()?.icon, toastClassNames()?.icon)}>
          {props.toast.promise || props.toast.type === "loading" && !props.toast.icon ? props.toast.icon || getLoadingIcon() : null}
          {props.toast.type !== "loading" ? icon() : null}
        </div>
      </Show>

      <div data-content="" class={cn(classNames()?.content, toastClassNames()?.content)}>
        <div data-title="" class={cn(classNames()?.title, toastClassNames()?.title)}>
          {props.toast.jsx ? props.toast.jsx : resolveContent(props.toast.title)}
        </div>
        <Show when={props.toast.description}>
          <div
    data-description=""
    class={cn(
      descriptionClassName(),
      toastDescriptionClassName(),
      classNames()?.description,
      toastClassNames()?.description
    )}
  >
            {resolveContent(props.toast.description)}
          </div>
        </Show>
      </div>

      <Show when={props.toast.cancel}>
        {(cancel) => <Show when={!isAction(cancel())} fallback={<button
    data-button
    data-cancel
    style={props.toast.cancelButtonStyle ?? props.cancelButtonStyle}
    onClick={(event) => {
      const currentCancel = cancel();
      if (!dismissible())
        return;
      currentCancel.onClick?.(event);
      deleteToast();
    }}
    class={cn(classNames()?.cancelButton, toastClassNames()?.cancelButton)}
  >
              {cancel().label}
            </button>}>
            {cancel()}
          </Show>}
      </Show>

      <Show when={props.toast.action}>
        {(action) => <Show when={!isAction(action())} fallback={<button
    data-button
    data-action
    style={props.toast.actionButtonStyle ?? props.actionButtonStyle}
    onClick={(event) => {
      const currentAction = action();
      currentAction.onClick?.(event);
      if (event.defaultPrevented)
        return;
      deleteToast();
    }}
    class={cn(classNames()?.actionButton, toastClassNames()?.actionButton)}
  >
              {action().label}
            </button>}>
            {action()}
          </Show>}
      </Show>
    </li>;
}
function Toaster(props) {
  const propsWithDefaults = mergeProps({
    position: "bottom-right",
    hotkey: ["altKey", "KeyT"],
    theme: "light",
    gap: GAP,
    visibleToasts: VISIBLE_TOASTS_AMOUNT,
    dir: getDocumentDirection(),
    containerAriaLabel: "Notifications"
  }, props);
  const initialTheme = createToastTheme(propsWithDefaults.theme);
  const [toastsStore, setToastsStore] = createStore({ toasts: [] });
  const filteredToasts = createMemo(() => {
    const toasts = toastsStore.toasts;
    if (propsWithDefaults.id)
      return toasts.filter((toast2) => toast2.toasterId === propsWithDefaults.id);
    return toasts.filter((toast2) => !toast2.toasterId);
  });
  const possiblePositions = createMemo(() => {
    return Array.from(/* @__PURE__ */ new Set([propsWithDefaults.position, ...filteredToasts().filter((toast2) => toast2.position).map((toast2) => toast2.position)]));
  });
  const [heights, setHeights] = createSignal2([]);
  const [expanded, setExpanded] = createSignal2(false);
  const [interacting, setInteracting] = createSignal2(false);
  const [actualTheme, setActualTheme] = createSignal2(initialTheme);
  const [lastFocusedElementRef, setLastFocusedElementRef] = createSignal2(null);
  const [isFocusWithinRef, setIsFocusWithinRef] = createSignal2(false);
  let listRef;
  const hotkeyLabel = () => propsWithDefaults.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
  const className = () => mergeClassName(propsWithDefaults.className, propsWithDefaults.class);
  const toastOptions = () => propsWithDefaults.toastOptions;
  const toastClassNames = () => mergeClassNames(toastOptions()?.classNames, toastOptions()?.classes);
  const toastDescriptionClassName = () => mergeDescriptionClassName(toastOptions()?.descriptionClassName, toastOptions()?.descriptionClass);
  const toastClassName = () => mergeClassName(toastOptions()?.className, toastOptions()?.class);
  const removeToast = (toastToRemove) => {
    setToastsStore("toasts", (toasts) => {
      if (!toasts.find((toast2) => toast2.id === toastToRemove.id)?.delete)
        ToastState.dismiss(toastToRemove.id);
      return toasts.filter(({ id }) => id !== toastToRemove.id);
    });
  };
  onMount2(() => {
    const unsubscribe = ToastState.subscribe((toastItem) => {
      if (toastItem.dismiss) {
        requestAnimationFrame(() => {
          setToastsStore("toasts", produce((toasts) => {
            toasts.forEach((toast2) => {
              if (toast2.id === toastItem.id)
                toast2.delete = true;
            });
          }));
        });
        return;
      }
      const nextToast = toastItem;
      const indexOfExistingToast = toastsStore.toasts.findIndex((t) => t.id === nextToast.id);
      if (indexOfExistingToast !== -1) {
        setToastsStore("toasts", indexOfExistingToast, reconcile(nextToast));
        return;
      }
      setToastsStore("toasts", produce((toasts) => {
        toasts.unshift(nextToast);
      }));
    });
    onCleanup2(unsubscribe);
  });
  createEffect(() => {
    const theme = propsWithDefaults.theme;
    if (theme !== "system") {
      setActualTheme(theme);
      return;
    }
    if (typeof window === "undefined")
      return;
    const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const updateTheme = ({ matches }) => {
      setActualTheme(matches ? "dark" : "light");
    };
    updateTheme(darkMediaQuery);
    try {
      darkMediaQuery.addEventListener("change", updateTheme);
      onCleanup2(() => darkMediaQuery.removeEventListener("change", updateTheme));
    } catch {
      darkMediaQuery.addListener(updateTheme);
      onCleanup2(() => darkMediaQuery.removeListener(updateTheme));
    }
  });
  createEffect(() => {
    if (filteredToasts().length <= 1)
      setExpanded(false);
  });
  onMount2(() => {
    const handleKeyDown = (event) => {
      const isHotkeyPressed = propsWithDefaults.hotkey.length > 0 && propsWithDefaults.hotkey.every((key) => event[key] || event.code === key);
      if (isHotkeyPressed) {
        setExpanded(true);
        listRef?.focus();
      }
      if (event.code === "Escape" && (document.activeElement === listRef || listRef?.contains(document.activeElement)))
        setExpanded(false);
    };
    document.addEventListener("keydown", handleKeyDown);
    onCleanup2(() => document.removeEventListener("keydown", handleKeyDown));
  });
  onCleanup2(() => {
    if (lastFocusedElementRef()) {
      lastFocusedElementRef()?.focus({ preventScroll: true });
      setLastFocusedElementRef(null);
      setIsFocusWithinRef(false);
    }
  });
  return <section
    aria-label={propsWithDefaults.customAriaLabel ?? `${propsWithDefaults.containerAriaLabel} ${hotkeyLabel()}`}
    tabIndex={-1}
    aria-live="polite"
    aria-relevant="additions text"
    aria-atomic="false"
    data-react-aria-top-layer
  >
      <For2 each={possiblePositions()}>
        {(position, index) => {
    const [y, x] = position.split("-");
    const toastsByPosition = createMemo(() => filteredToasts().filter((toast2) => !toast2.position && index() === 0 || toast2.position === position));
    const heightsByPosition = createMemo(() => heights().filter((height) => index() === 0 && !height.position || height.position === position));
    return <Show when={filteredToasts().length > 0}>
              <ol
      tabIndex={-1}
      ref={listRef}
      dir={propsWithDefaults.dir === "auto" ? getDocumentDirection() : propsWithDefaults.dir}
      class={className()}
      data-sonner-toaster
      data-sonner-theme={actualTheme()}
      data-y-position={y}
      data-x-position={x}
      style={{
        "--front-toast-height": `${heightsByPosition()[0]?.height ?? 0}px`,
        "--width": `${TOAST_WIDTH}px`,
        "--gap": `${propsWithDefaults.gap}px`,
        ...propsWithDefaults.style,
        ...assignOffset(propsWithDefaults.offset, propsWithDefaults.mobileOffset)
      }}
      onBlur={(event) => {
        if (isFocusWithinRef() && !event.currentTarget.contains(event.relatedTarget)) {
          setIsFocusWithinRef(false);
          if (lastFocusedElementRef()) {
            lastFocusedElementRef()?.focus({ preventScroll: true });
            setLastFocusedElementRef(null);
          }
        }
      }}
      onFocus={(event) => {
        const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
        if (isNotDismissible)
          return;
        if (!isFocusWithinRef()) {
          setIsFocusWithinRef(true);
          setLastFocusedElementRef(event.relatedTarget);
        }
      }}
      onMouseEnter={() => setExpanded(true)}
      onMouseMove={() => setExpanded(true)}
      onMouseLeave={() => {
        if (!interacting())
          setExpanded(false);
      }}
      onDragEnd={() => setExpanded(false)}
      onPointerDown={(event) => {
        const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
        if (isNotDismissible)
          return;
        setInteracting(true);
      }}
      onPointerUp={() => setInteracting(false)}
    >
                <For2 each={toastsByPosition()}>
                  {(toastItem, toastIndex) => <Toast
      icons={propsWithDefaults.icons}
      index={toastIndex()}
      toast={toastItem}
      defaultRichColors={propsWithDefaults.richColors}
      duration={toastOptions()?.duration ?? propsWithDefaults.duration}
      class={toastClassName()}
      descriptionClassName={toastDescriptionClassName()}
      invert={Boolean(propsWithDefaults.invert)}
      visibleToasts={propsWithDefaults.visibleToasts}
      closeButton={toastOptions()?.closeButton ?? propsWithDefaults.closeButton ?? false}
      interacting={interacting()}
      position={position}
      style={toastOptions()?.style}
      unstyled={toastOptions()?.unstyled}
      classNames={toastClassNames()}
      cancelButtonStyle={toastOptions()?.cancelButtonStyle}
      actionButtonStyle={toastOptions()?.actionButtonStyle}
      closeButtonAriaLabel={toastOptions()?.closeButtonAriaLabel}
      removeToast={removeToast}
      toasts={toastsByPosition()}
      heights={heightsByPosition()}
      setHeights={setHeights}
      expandByDefault={Boolean(propsWithDefaults.expand)}
      gap={propsWithDefaults.gap}
      expanded={expanded()}
      swipeDirections={propsWithDefaults.swipeDirections}
      pauseWhenPageIsHidden={propsWithDefaults.pauseWhenPageIsHidden}
    />}
                </For2>
              </ol>
            </Show>;
  }}
      </For2>
    </section>;
}
export {
  Toaster,
  toast,
  useSonner
};
/*!
 * Original code by Emil Kowalski
 * MIT Licensed, Copyright 2023 Emil Kowalski, see https://github.com/emilkowalski/sonner/blob/main/LICENSE.md for details
 *
 * Credits:
 * https://github.com/emilkowalski/sonner/blob/main/src/index.tsx
 */