vue-toastflow 1.2.0-beta.3 → 1.2.0-beta.4

package/dist/toastflow.es.js

@@ -73,7 +73,7 @@ var z = {
 	info: R("info"),
 	warning: R("warning"),
 	custom: R("custom")
-}, B = "@layer tf-defaults {\n  :root {\n    /* base look */\n    --tf-toast-font-family:\n      inherit, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      sans-serif;\n    --tf-toast-border-radius: 12px;\n    --tf-toast-border-width: 1px;\n    --tf-toast-padding: 16px;\n\n    /* layout inside toast */\n    --tf-toast-gap: 10px;\n    --tf-toast-buttons-gap: calc(var(--tf-toast-gap) / 2);\n    --tf-toast-buttons-content-gap: calc(var(--tf-toast-gap) / 2);\n\n    /* stack padding (used for scrollable stack) */\n    --tf-toast-stack-padding-top: 8px;\n    --tf-toast-stack-padding-right: 8px;\n    --tf-toast-stack-padding-bottom: 18px;\n    --tf-toast-stack-padding-left: 0;\n\n    /* title */\n    --tf-toast-title-font-size: 14px;\n    --tf-toast-title-font-weight: 600;\n    --tf-toast-title-line-height: 1.25;\n\n    /* description */\n    --tf-toast-description-font-size: 13px;\n    --tf-toast-description-line-height: 1.4;\n\n    /* created at and close floating bar */\n    --tf-toast-float-x: 0.4;\n    --tf-toast-float-y: -0.4;\n\n    /* created at badge */\n    --tf-toast-created-at-font-size: 11px;\n    --tf-toast-created-at-offset: 0;\n    --tf-toast-created-at-padding-x: 8px;\n    --tf-toast-created-at-border-radius: 999px;\n\n    /* close button */\n    --tf-toast-close-size: 18px;\n    --tf-toast-close-icon-size: 12px;\n    --tf-toast-close-border-width: var(--tf-toast-border-width);\n    --tf-toast-close-border-radius: var(--tf-toast-border-radius);\n    --tf-toast-close-font-size: 11px;\n\n    /* buttons */\n    --tf-toast-button-font-size: 12px;\n    --tf-toast-button-line-height: 1;\n    --tf-toast-button-padding-y: 7px;\n    --tf-toast-button-padding-x: 9px;\n    --tf-toast-button-border-radius: 10px;\n    --tf-toast-button-border-width: var(--tf-toast-border-width);\n\n    /* icon */\n    --tf-toast-icon-size: 24px;\n    --tf-toast-icon-loading: var(--tf-toast-loading-text-default);\n    --tf-toast-icon-default: var(--tf-toast-normal-text-default);\n    --tf-toast-icon-success: var(--tf-toast-success-text-default);\n    --tf-toast-icon-error: var(--tf-toast-error-text-default);\n    --tf-toast-icon-warning: var(--tf-toast-warning-text-default);\n    --tf-toast-icon-info: var(--tf-toast-info-text-default);\n    --tf-toast-icon-custom: var(--tf-toast-normal-text-default);\n\n    /* progress bar */\n    --tf-toast-progress-height: 4px;\n    --tf-toast-progress-border-radius: var(--tf-toast-border-radius);\n    --tf-toast-progress-duration: 5000ms;\n\n    /* accent presets */\n    --tf-toast-normal-bg-default: #fff;\n    --tf-toast-normal-border-default: #e6e8eb;\n    --tf-toast-normal-text-default: #11181c;\n    --tf-toast-normal-progress-bar-bg-default: var(\n      --tf-toast-normal-text-default\n    );\n    --tf-toast-normal-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-normal-text-default) 20%,\n      transparent\n    );\n    --tf-toast-normal-color-default: var(--tf-toast-normal-text-default);\n    --tf-toast-normal-title-color-default: var(--tf-toast-normal-text-default);\n    --tf-toast-normal-description-color-default: var(\n      --tf-toast-normal-text-default\n    );\n\n    --tf-toast-loading-bg-default: hsl(48, 100%, 96%);\n    --tf-toast-loading-border-default: hsl(46, 100%, 88%);\n    --tf-toast-loading-text-default: hsl(40, 100%, 32%);\n    --tf-toast-loading-progress-bar-bg-default: var(\n      --tf-toast-loading-text-default\n    );\n    --tf-toast-loading-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-loading-text-default) 20%,\n      transparent\n    );\n    --tf-toast-loading-color-default: var(--tf-toast-loading-text-default);\n    --tf-toast-loading-title-color-default: var(\n      --tf-toast-loading-text-default\n    );\n    --tf-toast-loading-description-color-default: var(\n      --tf-toast-loading-text-default\n    );\n\n    --tf-toast-success-bg-default: hsl(143, 85%, 96%);\n    --tf-toast-success-border-default: hsl(145, 92%, 87%);\n    --tf-toast-success-text-default: hsl(140, 100%, 27%);\n    --tf-toast-success-progress-bar-bg-default: var(\n      --tf-toast-success-text-default\n    );\n    --tf-toast-success-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-success-text-default) 20%,\n      transparent\n    );\n    --tf-toast-success-color-default: var(--tf-toast-success-text-default);\n    --tf-toast-success-title-color-default: var(\n      --tf-toast-success-text-default\n    );\n    --tf-toast-success-description-color-default: var(\n      --tf-toast-success-text-default\n    );\n\n    --tf-toast-info-bg-default: hsl(208, 100%, 97%);\n    --tf-toast-info-border-default: hsl(221, 91%, 93%);\n    --tf-toast-info-text-default: hsl(210, 92%, 45%);\n    --tf-toast-info-progress-bar-bg-default: var(--tf-toast-info-text-default);\n    --tf-toast-info-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-info-text-default) 20%,\n      transparent\n    );\n    --tf-toast-info-color-default: var(--tf-toast-info-text-default);\n    --tf-toast-info-title-color-default: var(--tf-toast-info-text-default);\n    --tf-toast-info-description-color-default: var(\n      --tf-toast-info-text-default\n    );\n\n    --tf-toast-warning-bg-default: hsl(49, 100%, 97%);\n    --tf-toast-warning-border-default: hsl(49, 91%, 84%);\n    --tf-toast-warning-text-default: hsl(31, 92%, 45%);\n    --tf-toast-warning-progress-bar-bg-default: var(\n      --tf-toast-warning-text-default\n    );\n    --tf-toast-warning-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-warning-text-default) 20%,\n      transparent\n    );\n    --tf-toast-warning-color-default: var(--tf-toast-warning-text-default);\n    --tf-toast-warning-title-color-default: var(\n      --tf-toast-warning-text-default\n    );\n    --tf-toast-warning-description-color-default: var(\n      --tf-toast-warning-text-default\n    );\n\n    --tf-toast-error-bg-default: hsl(359, 100%, 97%);\n    --tf-toast-error-border-default: hsl(359, 100%, 94%);\n    --tf-toast-error-text-default: hsl(360, 100%, 45%);\n    --tf-toast-error-progress-bar-bg-default: var(\n      --tf-toast-error-text-default\n    );\n    --tf-toast-error-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-error-text-default) 20%,\n      transparent\n    );\n    --tf-toast-error-color-default: var(--tf-toast-error-text-default);\n    --tf-toast-error-title-color-default: var(--tf-toast-error-text-default);\n    --tf-toast-error-description-color-default: var(\n      --tf-toast-error-text-default\n    );\n\n    /* animations */\n    --tf-toast-motion-offset: 10px;\n    --tf-toast-animation-in-duration: 260ms;\n    --tf-toast-animation-out-duration: 220ms;\n  }\n}\n\n.tf-toast--paused .tf-toast-progress-bar {\n  animation-play-state: paused;\n}\n\n.tf-toast-progress-wrapper {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n}\n\n.tf-toast-progress {\n  height: var(--tf-toast-progress-height);\n  width: 100%;\n  border-radius: 0 0 var(--tf-toast-progress-border-radius)\n    var(--tf-toast-progress-border-radius);\n  background: var(--_tf-resolved-progress-bg);\n}\n\n.tf-toast-progress-bar {\n  height: 100%;\n  width: 100%;\n  background: var(--_tf-resolved-progress-bar-bg);\n  transform-origin: left;\n  animation-name: tf-toast-progress-rtl;\n  animation-duration: var(--tf-toast-progress-duration, 5000ms);\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n  will-change: transform;\n}\n\n.tf-toast-progress[data-align=\"left-to-right\"] .tf-toast-progress-bar {\n  transform-origin: right;\n  animation-name: tf-toast-progress-ltr;\n}\n\n@keyframes tf-toast-progress-rtl {\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n}\n\n@keyframes tf-toast-progress-ltr {\n  from {\n    transform: scaleX(0);\n  }\n  to {\n    transform: scaleX(1);\n  }\n}\n\n.tf-toast-item[data-position^=\"top-\"] {\n  --tf-toast-motion-offset: -10px;\n}\n\n.tf-toast-item[data-position^=\"bottom-\"] {\n  --tf-toast-motion-offset: 10px;\n}\n\n.tf-toast-motion {\n  width: 100%;\n  transform-origin: center;\n}\n\n/* MOVE */\n.Toastflow__animation-move {\n  transition: transform var(--tf-toast-animation-in-duration)\n    cubic-bezier(0.5, 1, 0.25, 1);\n  will-change: transform;\n}\n\n/* ENTER */\n.Toastflow__animation-enter-from > .tf-toast-motion,\n.Toastflow__animation-appear-from > .tf-toast-motion {\n  opacity: 0;\n  transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);\n}\n\n.Toastflow__animation-enter-active > .tf-toast-motion,\n.Toastflow__animation-appear-active > .tf-toast-motion {\n  transition:\n    opacity var(--tf-toast-animation-in-duration) cubic-bezier(0.5, 1, 0.25, 1),\n    transform var(--tf-toast-animation-in-duration)\n      cubic-bezier(0.5, 1, 0.25, 1);\n}\n\n.Toastflow__animation-enter-to > .tf-toast-motion,\n.Toastflow__animation-appear-to > .tf-toast-motion {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n\n/* LEAVE */\n.Toastflow__animation-leave-from > .tf-toast-motion {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n\n.Toastflow__animation-leave-active > .tf-toast-motion {\n  transition:\n    opacity var(--tf-toast-animation-out-duration) ease,\n    transform var(--tf-toast-animation-out-duration) ease;\n}\n\n.Toastflow__animation-leave-to > .tf-toast-motion {\n  opacity: 0;\n  transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);\n}\n\n/* CLEAR ALL */\n.Toastflow__animation-clearAll .tf-toast-motion {\n  animation: Toastflow__clearAll-kf var(--tf-toast-animation-in-duration)\n    cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n\n/* BUMP & UPDATE */\n.Toastflow__animation-bump {\n  animation: Toastflow__bump-kf var(--tf-toast-animation-in-duration) ease-out;\n}\n\n.Toastflow__animation-update {\n  animation: Toastflow__bump-kf var(--tf-toast-animation-in-duration)\n    cubic-bezier(0.33, 1, 0.68, 1);\n}\n\n@keyframes Toastflow__clearAll-kf {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes Toastflow__bump-kf {\n  0% {\n    transform: scale(1);\n  }\n  40% {\n    transform: scale(1.01);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Toastflow__animation-move {\n    transition: none;\n  }\n\n  .Toastflow__animation-enter-active .tf-toast-motion,\n  .Toastflow__animation-leave-active .tf-toast-motion {\n    transition: none;\n  }\n\n  .Toastflow__animation-clearAll .tf-toast-motion {\n    animation: none;\n  }\n}\n\n/* Toast container */\n.tf-toast-root {\n  pointer-events: none;\n  position: fixed;\n  inset: 0;\n}\n\n.tf-toast-stack {\n  position: absolute;\n  height: 100%;\n  display: flex;\n  align-items: flex-start;\n}\n\n.tf-toast-stack-inner {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.tf-toast-stack-inner--scroll {\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  padding-top: var(--tf-toast-stack-padding-top);\n  padding-right: var(--tf-toast-stack-padding-right);\n  padding-bottom: var(--tf-toast-stack-padding-bottom);\n  padding-left: var(--tf-toast-stack-padding-left);\n  scroll-padding: var(--tf-toast-stack-padding-top)\n    var(--tf-toast-stack-padding-right) var(--tf-toast-stack-padding-bottom)\n    var(--tf-toast-stack-padding-left);\n}\n\n.tf-toast-stack-inner--bottom {\n  min-height: 100%;\n  justify-content: flex-end;\n}\n\n.tf-toast-stack--left {\n  justify-content: flex-start;\n}\n\n.tf-toast-stack--center {\n  justify-content: center;\n}\n\n.tf-toast-stack--right {\n  justify-content: flex-end;\n}\n\n.tf-toast-item {\n  pointer-events: auto;\n  width: 100%;\n  position: relative;\n  z-index: 1;\n}\n\n/* Toast component */\n.tf-toast-wrapper {\n  pointer-events: auto;\n  width: 100%;\n}\n\n.tf-toast {\n  cursor: pointer;\n  position: relative;\n  width: 100%;\n  --_tf-resolved-bg: var(\n    --tf-toast-bg,\n    var(--_tf-bg, var(--tf-toast-normal-bg-default))\n  );\n  --_tf-resolved-color: var(\n    --tf-toast-color,\n    var(\n      --tf-toast-accent-color,\n      var(--_tf-color, var(--tf-toast-normal-text-default))\n    )\n  );\n  --_tf-resolved-border: var(\n    --tf-toast-border-color,\n    var(--_tf-border-color, var(--tf-toast-normal-border-default))\n  );\n  --_tf-resolved-title-color: var(\n    --tf-toast-title-color,\n    var(\n      --tf-toast-color,\n      var(\n        --tf-toast-accent-color,\n        var(--_tf-title-color, var(--_tf-resolved-color))\n      )\n    )\n  );\n  --_tf-resolved-desc-color: var(\n    --tf-toast-description-color,\n    var(\n      --tf-toast-color,\n      var(\n        --tf-toast-accent-color,\n        var(--_tf-desc-color, var(--_tf-resolved-color))\n      )\n    )\n  );\n  --_tf-resolved-progress-bg: var(\n    --tf-toast-progress-bg,\n    var(\n      --_tf-progress-bg,\n      color-mix(in srgb, var(--_tf-resolved-color) 20%, transparent)\n    )\n  );\n  --_tf-resolved-progress-bar-bg: var(\n    --tf-toast-progress-bar-bg,\n    var(\n      --tf-toast-accent-color,\n      var(--_tf-progress-bar-bg, var(--_tf-resolved-color))\n    )\n  );\n  --tf-toast-button-color: var(--_tf-resolved-color);\n  --tf-toast-button-border-color: var(--_tf-resolved-border);\n  --tf-toast-button-border-width: var(--tf-toast-border-width);\n  --tf-toast-button-bg: var(--_tf-resolved-bg);\n  --tf-toast-close-color: var(--_tf-resolved-color);\n  --tf-toast-close-border-color: var(--_tf-resolved-border);\n  --tf-toast-close-bg: var(--_tf-resolved-bg);\n  --tf-toast-close-ring-color: var(--tf-toast-close-border-color);\n  --tf-toast-created-at-color: var(--_tf-resolved-desc-color);\n  --tf-toast-created-at-border-color: var(--_tf-resolved-border);\n  --tf-toast-created-at-bg: var(--_tf-resolved-bg);\n}\n\n.tf-toast--swipe-enabled {\n  touch-action: pan-y;\n  -webkit-user-select: none;\n  user-select: none;\n  cursor: grab;\n}\n\n.tf-toast--swipe-enabled:active {\n  cursor: grabbing;\n}\n\n.tf-toast[data-align=\"right\"] .tf-toast-main-content {\n  flex-direction: row-reverse;\n}\n\n.tf-toast[data-align=\"right\"] .tf-toast-text {\n  text-align: right;\n}\n\n.tf-toast-accent--default {\n  --_tf-bg: var(--tf-toast-normal-bg-default);\n  --_tf-color: var(--tf-toast-normal-color-default);\n  --_tf-border-color: var(--tf-toast-normal-border-default);\n  --_tf-title-color: var(--tf-toast-normal-title-color-default);\n  --_tf-desc-color: var(--tf-toast-normal-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-normal-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-normal-progress-bar-bg-default);\n}\n\n.tf-toast-accent--loading {\n  --_tf-bg: var(--tf-toast-loading-bg-default);\n  --_tf-color: var(--tf-toast-loading-color-default);\n  --_tf-border-color: var(--tf-toast-loading-border-default);\n  --_tf-title-color: var(--tf-toast-loading-title-color-default);\n  --_tf-desc-color: var(--tf-toast-loading-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-loading-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-loading-progress-bar-bg-default);\n}\n\n.tf-toast-accent--success {\n  --_tf-bg: var(--tf-toast-success-bg-default);\n  --_tf-color: var(--tf-toast-success-color-default);\n  --_tf-border-color: var(--tf-toast-success-border-default);\n  --_tf-title-color: var(--tf-toast-success-title-color-default);\n  --_tf-desc-color: var(--tf-toast-success-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-success-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-success-progress-bar-bg-default);\n}\n\n.tf-toast-accent--error {\n  --_tf-bg: var(--tf-toast-error-bg-default);\n  --_tf-color: var(--tf-toast-error-color-default);\n  --_tf-border-color: var(--tf-toast-error-border-default);\n  --_tf-title-color: var(--tf-toast-error-title-color-default);\n  --_tf-desc-color: var(--tf-toast-error-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-error-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-error-progress-bar-bg-default);\n}\n\n.tf-toast-accent--warning {\n  --_tf-bg: var(--tf-toast-warning-bg-default);\n  --_tf-color: var(--tf-toast-warning-color-default);\n  --_tf-border-color: var(--tf-toast-warning-border-default);\n  --_tf-title-color: var(--tf-toast-warning-title-color-default);\n  --_tf-desc-color: var(--tf-toast-warning-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-warning-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-warning-progress-bar-bg-default);\n}\n\n.tf-toast-accent--info {\n  --_tf-bg: var(--tf-toast-info-bg-default);\n  --_tf-color: var(--tf-toast-info-color-default);\n  --_tf-border-color: var(--tf-toast-info-border-default);\n  --_tf-title-color: var(--tf-toast-info-title-color-default);\n  --_tf-desc-color: var(--tf-toast-info-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-info-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-info-progress-bar-bg-default);\n}\n\n.tf-toast-accent--custom {\n  --_tf-bg: var(\n    --tf-toast-custom-bg-default,\n    var(--tf-toast-normal-bg-default)\n  );\n  --_tf-color: var(\n    --tf-toast-custom-color-default,\n    var(--tf-toast-normal-color-default)\n  );\n  --_tf-border-color: var(\n    --tf-toast-custom-border-default,\n    var(--tf-toast-normal-border-default)\n  );\n  --_tf-title-color: var(\n    --tf-toast-custom-title-color-default,\n    var(--tf-toast-normal-title-color-default)\n  );\n  --_tf-desc-color: var(\n    --tf-toast-custom-description-color-default,\n    var(--tf-toast-normal-description-color-default)\n  );\n  --_tf-progress-bg: var(\n    --tf-toast-custom-progress-bg-default,\n    var(--tf-toast-normal-progress-bg-default)\n  );\n  --_tf-progress-bar-bg: var(\n    --tf-toast-custom-progress-bar-bg-default,\n    var(--tf-toast-normal-progress-bar-bg-default)\n  );\n}\n\n.tf-toast-surface {\n  position: relative;\n  display: block;\n  min-width: 0;\n  padding: var(--tf-toast-padding);\n  border-radius: var(--tf-toast-border-radius);\n  background-color: var(--_tf-resolved-bg);\n  color: var(--_tf-resolved-color);\n  border: var(--tf-toast-border-width) solid var(--_tf-resolved-border);\n  font-family: var(--tf-toast-font-family), sans-serif;\n  overflow: hidden;\n}\n\n.tf-toast-main {\n  display: flex;\n  align-items: stretch;\n  gap: var(--tf-toast-buttons-content-gap);\n  width: 100%;\n}\n\n.tf-toast-main--full > .tf-toast-main-content {\n  width: 100%;\n  min-width: 0;\n  flex: 1 1 100%;\n}\n\n.tf-toast-main--content-end > .tf-toast-main-content {\n  margin-left: auto;\n  max-width: 100%;\n  flex: 0 1 auto;\n}\n\n.tf-toast-main--content-end > .tf-toast-main-content > .tf-toast-body {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.tf-toast-main-content {\n  display: flex;\n  align-items: center;\n  gap: var(--tf-toast-gap);\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.tf-toast-meta {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--tf-toast-gap) / 2);\n  min-width: 0;\n  flex-shrink: 0;\n}\n\n.tf-toast-meta--left {\n  align-items: flex-start;\n}\n\n.tf-toast-meta--right {\n  align-items: flex-end;\n}\n\n.tf-toast-meta-row {\n  display: flex;\n  min-width: 0;\n}\n\n.tf-toast-meta-row--top {\n  margin-bottom: var(--tf-toast-buttons-content-gap);\n}\n\n.tf-toast-meta-row--bottom {\n  margin-top: var(--tf-toast-buttons-content-gap);\n}\n\n.tf-toast-meta-row .tf-toast-actions--start {\n  margin-right: auto;\n}\n\n.tf-toast-meta-row .tf-toast-actions--end {\n  margin-left: auto;\n}\n\n.tf-toast-actions {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: var(--tf-toast-buttons-gap);\n}\n\n.tf-toast-buttons--center {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n\n.tf-toast-buttons--bottom {\n  margin-top: auto;\n}\n\n.tf-toast-actions--start {\n  justify-content: flex-start;\n}\n\n.tf-toast-actions--end {\n  justify-content: flex-end;\n}\n\n.tf-toast-button {\n  appearance: none;\n  border: var(--tf-toast-button-border-width) solid\n    var(--tf-toast-button-border-color);\n  background: var(--tf-toast-button-bg);\n  color: var(--tf-toast-button-color);\n  border-radius: var(--tf-toast-button-border-radius);\n  font-size: var(--tf-toast-button-font-size);\n  line-height: var(--tf-toast-button-line-height);\n  padding: var(--tf-toast-button-padding-y) var(--tf-toast-button-padding-x);\n  cursor: pointer;\n  user-select: none;\n  font-family: inherit;\n}\n\n.tf-toast-icon-spin {\n  display: inline-block;\n  animation: tf-toast-spin 0.8s linear infinite;\n  transform-origin: center;\n}\n\n@keyframes tf-toast-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.tf-toast-icon-svg {\n  width: var(--tf-toast-icon-size);\n  height: var(--tf-toast-icon-size);\n}\n\n.tf-toast-icon--loading .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-loading));\n}\n\n.tf-toast-icon--default .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-default));\n}\n\n.tf-toast-icon--success .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-success));\n}\n\n.tf-toast-icon--error .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-error));\n}\n\n.tf-toast-icon--warning .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-warning));\n}\n\n.tf-toast-icon--info .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-info));\n}\n\n.tf-toast-icon--custom .tf-toast-icon-svg {\n  color: var(\n    --tf-toast-icon-color,\n    var(--tf-toast-icon-custom, var(--tf-toast-icon-default))\n  );\n}\n\n.tf-toast-body {\n  position: relative;\n  z-index: 1;\n  min-width: 0;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.tf-toast-body--has-created-at {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  column-gap: calc(var(--tf-toast-gap) / 2);\n  grid-auto-flow: row;\n}\n\n.tf-toast-body--has-created-at > :not(.tf-toast-created-at) {\n  grid-column: 1;\n}\n\n.tf-toast-text {\n  min-width: 0;\n}\n\n.tf-toast-created-at {\n  color: var(--tf-toast-created-at-color);\n  font-size: var(--tf-toast-created-at-font-size);\n  font-style: italic;\n  white-space: nowrap;\n  align-self: end;\n  justify-self: end;\n  grid-column: 2;\n  grid-row: 1;\n}\n\n.tf-toast[data-align=\"right\"] .tf-toast-created-at {\n  text-align: right;\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.tf-toast[data-align=\"right\"] .tf-toast-body--has-created-at {\n  grid-template-columns: auto minmax(0, 1fr);\n}\n\n.tf-toast[data-align=\"right\"]\n  .tf-toast-body--has-created-at\n  > .tf-toast-created-at {\n  grid-column: 1;\n  justify-self: start;\n}\n\n.tf-toast[data-align=\"right\"]\n  .tf-toast-body--has-created-at\n  > :not(.tf-toast-created-at) {\n  grid-column: 2;\n}\n\n.tf-toast-floating-bar {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(\n    calc(var(--tf-toast-close-size) * var(--tf-toast-float-x)),\n    calc(var(--tf-toast-close-size) * var(--tf-toast-float-y))\n  );\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tf-toast-created-at-offset);\n  height: var(--tf-toast-close-size);\n  pointer-events: auto;\n  z-index: 2;\n}\n\n.tf-toast-created-at-float {\n  display: inline-flex;\n  align-items: center;\n  height: var(--tf-toast-close-size);\n  padding: 0 var(--tf-toast-created-at-padding-x);\n  border-radius: var(--tf-toast-created-at-border-radius);\n  border: var(--tf-toast-close-border-width) solid\n    var(--tf-toast-created-at-border-color);\n  background: var(--tf-toast-created-at-bg);\n  color: var(--tf-toast-created-at-color);\n  font-size: var(--tf-toast-created-at-font-size);\n  font-style: italic;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.tf-toast-title {\n  margin: 0;\n  font-size: var(--tf-toast-title-font-size);\n  font-weight: var(--tf-toast-title-font-weight);\n  line-height: var(--tf-toast-title-line-height);\n  color: var(--_tf-resolved-title-color);\n  word-wrap: break-word;\n}\n\n.tf-toast-description {\n  margin: 0;\n  font-size: var(--tf-toast-description-font-size);\n  line-height: var(--tf-toast-description-line-height);\n  color: var(--_tf-resolved-desc-color);\n  word-wrap: break-word;\n}\n\n.tf-toast-close {\n  position: relative;\n  height: var(--tf-toast-close-size);\n  width: var(--tf-toast-close-size);\n  border-radius: var(--tf-toast-close-border-radius);\n  border: var(--tf-toast-close-border-width) solid\n    var(--tf-toast-close-border-color);\n  background: var(--tf-toast-close-bg);\n  color: var(--tf-toast-close-color);\n  font-size: var(--tf-toast-close-font-size);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n  pointer-events: auto;\n  z-index: 2;\n}\n\n.tf-toast-close-icon {\n  width: var(--tf-toast-close-icon-size);\n  height: var(--tf-toast-close-icon-size);\n}\n\n.tf-toast-close:focus-visible {\n  outline: 2px solid var(--tf-toast-close-ring-color);\n  outline-offset: 2px;\n}\n", V = "data-toastflow-styles", H = !1;
+}, B = "@layer tf-defaults {\n  :root {\n    /* base look */\n    --tf-toast-font-family:\n      inherit, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      sans-serif;\n    --tf-toast-border-radius: 12px;\n    --tf-toast-border-width: 1px;\n    --tf-toast-padding: 16px;\n\n    /* layout inside toast */\n    --tf-toast-gap: 10px;\n    --tf-toast-buttons-gap: calc(var(--tf-toast-gap) / 2);\n    --tf-toast-buttons-content-gap: calc(var(--tf-toast-gap) / 2);\n\n    /* stack padding (used for scrollable stack) */\n    --tf-toast-stack-padding-top: 8px;\n    --tf-toast-stack-padding-right: 8px;\n    --tf-toast-stack-padding-bottom: 18px;\n    --tf-toast-stack-padding-left: 0;\n\n    /* title */\n    --tf-toast-title-font-size: 14px;\n    --tf-toast-title-font-weight: 600;\n    --tf-toast-title-line-height: 1.25;\n\n    /* description */\n    --tf-toast-description-font-size: 13px;\n    --tf-toast-description-line-height: 1.4;\n\n    /* created at and close floating bar */\n    --tf-toast-float-x: 0.4;\n    --tf-toast-float-y: -0.4;\n\n    /* created at badge */\n    --tf-toast-created-at-font-size: 11px;\n    --tf-toast-created-at-offset: 0;\n    --tf-toast-created-at-padding-x: 8px;\n    --tf-toast-created-at-border-radius: 999px;\n\n    /* close button */\n    --tf-toast-close-size: 18px;\n    --tf-toast-close-icon-size: 12px;\n    --tf-toast-close-border-width: var(--tf-toast-border-width);\n    --tf-toast-close-border-radius: var(--tf-toast-border-radius);\n    --tf-toast-close-font-size: 11px;\n\n    /* buttons */\n    --tf-toast-button-font-size: 12px;\n    --tf-toast-button-line-height: 1;\n    --tf-toast-button-padding-y: 7px;\n    --tf-toast-button-padding-x: 9px;\n    --tf-toast-button-border-radius: 10px;\n    --tf-toast-button-border-width: var(--tf-toast-border-width);\n\n    /* icon */\n    --tf-toast-icon-size: 24px;\n    --tf-toast-icon-loading: var(--tf-toast-loading-text-default);\n    --tf-toast-icon-default: var(--tf-toast-normal-text-default);\n    --tf-toast-icon-success: var(--tf-toast-success-text-default);\n    --tf-toast-icon-error: var(--tf-toast-error-text-default);\n    --tf-toast-icon-warning: var(--tf-toast-warning-text-default);\n    --tf-toast-icon-info: var(--tf-toast-info-text-default);\n    --tf-toast-icon-custom: var(--tf-toast-normal-text-default);\n\n    /* progress bar */\n    --tf-toast-progress-height: 4px;\n    --tf-toast-progress-border-radius: var(--tf-toast-border-radius);\n    --tf-toast-progress-duration: 5000ms;\n\n    /* accent presets */\n    --tf-toast-normal-bg-default: #fff;\n    --tf-toast-normal-border-default: #e6e8eb;\n    --tf-toast-normal-text-default: #11181c;\n    --tf-toast-normal-progress-bar-bg-default: var(\n      --tf-toast-normal-text-default\n    );\n    --tf-toast-normal-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-normal-text-default) 20%,\n      transparent\n    );\n    --tf-toast-normal-color-default: var(--tf-toast-normal-text-default);\n    --tf-toast-normal-title-color-default: var(--tf-toast-normal-text-default);\n    --tf-toast-normal-description-color-default: var(\n      --tf-toast-normal-text-default\n    );\n\n    --tf-toast-loading-bg-default: hsl(48, 100%, 96%);\n    --tf-toast-loading-border-default: hsl(46, 100%, 88%);\n    --tf-toast-loading-text-default: hsl(40, 100%, 32%);\n    --tf-toast-loading-progress-bar-bg-default: var(\n      --tf-toast-loading-text-default\n    );\n    --tf-toast-loading-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-loading-text-default) 20%,\n      transparent\n    );\n    --tf-toast-loading-color-default: var(--tf-toast-loading-text-default);\n    --tf-toast-loading-title-color-default: var(\n      --tf-toast-loading-text-default\n    );\n    --tf-toast-loading-description-color-default: var(\n      --tf-toast-loading-text-default\n    );\n\n    --tf-toast-success-bg-default: hsl(143, 85%, 96%);\n    --tf-toast-success-border-default: hsl(145, 92%, 87%);\n    --tf-toast-success-text-default: hsl(140, 100%, 27%);\n    --tf-toast-success-progress-bar-bg-default: var(\n      --tf-toast-success-text-default\n    );\n    --tf-toast-success-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-success-text-default) 20%,\n      transparent\n    );\n    --tf-toast-success-color-default: var(--tf-toast-success-text-default);\n    --tf-toast-success-title-color-default: var(\n      --tf-toast-success-text-default\n    );\n    --tf-toast-success-description-color-default: var(\n      --tf-toast-success-text-default\n    );\n\n    --tf-toast-info-bg-default: hsl(208, 100%, 97%);\n    --tf-toast-info-border-default: hsl(221, 91%, 93%);\n    --tf-toast-info-text-default: hsl(210, 92%, 45%);\n    --tf-toast-info-progress-bar-bg-default: var(--tf-toast-info-text-default);\n    --tf-toast-info-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-info-text-default) 20%,\n      transparent\n    );\n    --tf-toast-info-color-default: var(--tf-toast-info-text-default);\n    --tf-toast-info-title-color-default: var(--tf-toast-info-text-default);\n    --tf-toast-info-description-color-default: var(\n      --tf-toast-info-text-default\n    );\n\n    --tf-toast-warning-bg-default: hsl(49, 100%, 97%);\n    --tf-toast-warning-border-default: hsl(49, 91%, 84%);\n    --tf-toast-warning-text-default: hsl(31, 92%, 45%);\n    --tf-toast-warning-progress-bar-bg-default: var(\n      --tf-toast-warning-text-default\n    );\n    --tf-toast-warning-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-warning-text-default) 20%,\n      transparent\n    );\n    --tf-toast-warning-color-default: var(--tf-toast-warning-text-default);\n    --tf-toast-warning-title-color-default: var(\n      --tf-toast-warning-text-default\n    );\n    --tf-toast-warning-description-color-default: var(\n      --tf-toast-warning-text-default\n    );\n\n    --tf-toast-error-bg-default: hsl(359, 100%, 97%);\n    --tf-toast-error-border-default: hsl(359, 100%, 94%);\n    --tf-toast-error-text-default: hsl(360, 100%, 45%);\n    --tf-toast-error-progress-bar-bg-default: var(\n      --tf-toast-error-text-default\n    );\n    --tf-toast-error-progress-bg-default: color-mix(\n      in srgb,\n      var(--tf-toast-error-text-default) 20%,\n      transparent\n    );\n    --tf-toast-error-color-default: var(--tf-toast-error-text-default);\n    --tf-toast-error-title-color-default: var(--tf-toast-error-text-default);\n    --tf-toast-error-description-color-default: var(\n      --tf-toast-error-text-default\n    );\n\n    /* animations */\n    --tf-toast-motion-offset: 10px;\n    --tf-toast-animation-in-duration: 260ms;\n    --tf-toast-animation-out-duration: 220ms;\n  }\n}\n\n.tf-toast--paused .tf-toast-progress-bar {\n  animation-play-state: paused;\n}\n\n.tf-toast-progress-wrapper {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n}\n\n.tf-toast-progress {\n  height: var(--tf-toast-progress-height);\n  width: 100%;\n  border-radius: 0 0 var(--tf-toast-progress-border-radius)\n    var(--tf-toast-progress-border-radius);\n  background: var(--_tf-resolved-progress-bg);\n}\n\n.tf-toast-progress-bar {\n  height: 100%;\n  width: 100%;\n  background: var(--_tf-resolved-progress-bar-bg);\n  transform-origin: left;\n  animation-name: tf-toast-progress-rtl;\n  animation-duration: var(--tf-toast-progress-duration, 5000ms);\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n  will-change: transform;\n}\n\n.tf-toast-progress[data-align=\"left-to-right\"] .tf-toast-progress-bar {\n  transform-origin: right;\n  animation-name: tf-toast-progress-ltr;\n}\n\n@keyframes tf-toast-progress-rtl {\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n}\n\n@keyframes tf-toast-progress-ltr {\n  from {\n    transform: scaleX(0);\n  }\n  to {\n    transform: scaleX(1);\n  }\n}\n\n.tf-toast-item[data-position^=\"top-\"] {\n  --tf-toast-motion-offset: -10px;\n}\n\n.tf-toast-item[data-position^=\"bottom-\"] {\n  --tf-toast-motion-offset: 10px;\n}\n\n.tf-toast-motion {\n  width: 100%;\n  transform-origin: center;\n  backface-visibility: hidden;\n  will-change: transform, opacity;\n}\n\n/* MOVE */\n.Toastflow__animation-move {\n  transition: transform var(--tf-toast-animation-in-duration)\n    cubic-bezier(0.5, 1, 0.25, 1);\n  will-change: transform;\n}\n\n/* ENTER */\n.Toastflow__animation-enter-from > .tf-toast-motion,\n.Toastflow__animation-appear-from > .tf-toast-motion {\n  opacity: 0;\n  transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);\n}\n\n.Toastflow__animation-enter-active > .tf-toast-motion,\n.Toastflow__animation-appear-active > .tf-toast-motion {\n  transition:\n    opacity var(--tf-toast-animation-in-duration) cubic-bezier(0.5, 1, 0.25, 1),\n    transform var(--tf-toast-animation-in-duration)\n      cubic-bezier(0.5, 1, 0.25, 1);\n}\n\n.Toastflow__animation-enter-to > .tf-toast-motion,\n.Toastflow__animation-appear-to > .tf-toast-motion {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n\n/* LEAVE */\n.Toastflow__animation-leave-from > .tf-toast-motion {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n\n.Toastflow__animation-leave-active > .tf-toast-motion {\n  transition:\n    opacity var(--tf-toast-animation-out-duration) ease,\n    transform var(--tf-toast-animation-out-duration) ease;\n}\n\n.Toastflow__animation-leave-to > .tf-toast-motion {\n  opacity: 0;\n  transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);\n}\n\n@media (max-width: 640px) {\n  .tf-toast-item[data-position^=\"top-\"] {\n    --tf-toast-motion-offset: -18px;\n  }\n\n  .tf-toast-item[data-position^=\"bottom-\"] {\n    --tf-toast-motion-offset: 18px;\n  }\n\n  .Toastflow__animation-enter-from > .tf-toast-motion,\n  .Toastflow__animation-appear-from > .tf-toast-motion {\n    transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.98);\n  }\n\n  .Toastflow__animation-leave-to > .tf-toast-motion {\n    transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.98);\n  }\n}\n\n/* CLEAR ALL */\n.Toastflow__animation-clearAll .tf-toast-motion {\n  animation: Toastflow__clearAll-kf var(--tf-toast-animation-in-duration)\n    cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n\n/* BUMP & UPDATE */\n.Toastflow__animation-bump {\n  animation: Toastflow__bump-kf var(--tf-toast-animation-in-duration) ease-out;\n}\n\n.Toastflow__animation-update {\n  animation: Toastflow__bump-kf var(--tf-toast-animation-in-duration)\n    cubic-bezier(0.33, 1, 0.68, 1);\n}\n\n@keyframes Toastflow__clearAll-kf {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes Toastflow__bump-kf {\n  0% {\n    transform: scale(1);\n  }\n  40% {\n    transform: scale(1.01);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Toastflow__animation-move {\n    transition: none;\n  }\n\n  .Toastflow__animation-enter-active .tf-toast-motion,\n  .Toastflow__animation-leave-active .tf-toast-motion {\n    transition: none;\n  }\n\n  .Toastflow__animation-clearAll .tf-toast-motion {\n    animation: none;\n  }\n}\n\n/* Toast container */\n.tf-toast-root {\n  pointer-events: none;\n  position: fixed;\n  inset: 0;\n}\n\n.tf-toast-stack {\n  position: absolute;\n  height: 100%;\n  display: flex;\n  align-items: flex-start;\n}\n\n.tf-toast-stack-inner {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.tf-toast-stack-inner--scroll {\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  padding-top: var(--tf-toast-stack-padding-top);\n  padding-right: var(--tf-toast-stack-padding-right);\n  padding-bottom: var(--tf-toast-stack-padding-bottom);\n  padding-left: var(--tf-toast-stack-padding-left);\n  scroll-padding: var(--tf-toast-stack-padding-top)\n    var(--tf-toast-stack-padding-right) var(--tf-toast-stack-padding-bottom)\n    var(--tf-toast-stack-padding-left);\n}\n\n.tf-toast-stack-inner--bottom {\n  min-height: 100%;\n  justify-content: flex-end;\n}\n\n.tf-toast-stack--left {\n  justify-content: flex-start;\n}\n\n.tf-toast-stack--center {\n  justify-content: center;\n}\n\n.tf-toast-stack--right {\n  justify-content: flex-end;\n}\n\n.tf-toast-item {\n  pointer-events: auto;\n  width: 100%;\n  position: relative;\n  z-index: 1;\n}\n\n/* Toast component */\n.tf-toast-wrapper {\n  pointer-events: auto;\n  width: 100%;\n}\n\n.tf-toast {\n  cursor: pointer;\n  position: relative;\n  width: 100%;\n  --_tf-resolved-bg: var(\n    --tf-toast-bg,\n    var(--_tf-bg, var(--tf-toast-normal-bg-default))\n  );\n  --_tf-resolved-color: var(\n    --tf-toast-color,\n    var(\n      --tf-toast-accent-color,\n      var(--_tf-color, var(--tf-toast-normal-text-default))\n    )\n  );\n  --_tf-resolved-border: var(\n    --tf-toast-border-color,\n    var(--_tf-border-color, var(--tf-toast-normal-border-default))\n  );\n  --_tf-resolved-title-color: var(\n    --tf-toast-title-color,\n    var(\n      --tf-toast-color,\n      var(\n        --tf-toast-accent-color,\n        var(--_tf-title-color, var(--_tf-resolved-color))\n      )\n    )\n  );\n  --_tf-resolved-desc-color: var(\n    --tf-toast-description-color,\n    var(\n      --tf-toast-color,\n      var(\n        --tf-toast-accent-color,\n        var(--_tf-desc-color, var(--_tf-resolved-color))\n      )\n    )\n  );\n  --_tf-resolved-progress-bg: var(\n    --tf-toast-progress-bg,\n    var(\n      --_tf-progress-bg,\n      color-mix(in srgb, var(--_tf-resolved-color) 20%, transparent)\n    )\n  );\n  --_tf-resolved-progress-bar-bg: var(\n    --tf-toast-progress-bar-bg,\n    var(\n      --tf-toast-accent-color,\n      var(--_tf-progress-bar-bg, var(--_tf-resolved-color))\n    )\n  );\n  --tf-toast-button-color: var(--_tf-resolved-color);\n  --tf-toast-button-border-color: var(--_tf-resolved-border);\n  --tf-toast-button-border-width: var(--tf-toast-border-width);\n  --tf-toast-button-bg: var(--_tf-resolved-bg);\n  --tf-toast-close-color: var(--_tf-resolved-color);\n  --tf-toast-close-border-color: var(--_tf-resolved-border);\n  --tf-toast-close-bg: var(--_tf-resolved-bg);\n  --tf-toast-close-ring-color: var(--tf-toast-close-border-color);\n  --tf-toast-created-at-color: var(--_tf-resolved-desc-color);\n  --tf-toast-created-at-border-color: var(--_tf-resolved-border);\n  --tf-toast-created-at-bg: var(--_tf-resolved-bg);\n}\n\n.tf-toast--swipe-enabled {\n  touch-action: pan-y;\n  -webkit-user-select: none;\n  user-select: none;\n  cursor: grab;\n}\n\n.tf-toast--swipe-enabled:active {\n  cursor: grabbing;\n}\n\n.tf-toast[data-align=\"right\"] .tf-toast-main-content {\n  flex-direction: row-reverse;\n}\n\n.tf-toast[data-align=\"right\"] .tf-toast-text {\n  text-align: right;\n}\n\n.tf-toast-accent--default {\n  --_tf-bg: var(--tf-toast-normal-bg-default);\n  --_tf-color: var(--tf-toast-normal-color-default);\n  --_tf-border-color: var(--tf-toast-normal-border-default);\n  --_tf-title-color: var(--tf-toast-normal-title-color-default);\n  --_tf-desc-color: var(--tf-toast-normal-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-normal-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-normal-progress-bar-bg-default);\n}\n\n.tf-toast-accent--loading {\n  --_tf-bg: var(--tf-toast-loading-bg-default);\n  --_tf-color: var(--tf-toast-loading-color-default);\n  --_tf-border-color: var(--tf-toast-loading-border-default);\n  --_tf-title-color: var(--tf-toast-loading-title-color-default);\n  --_tf-desc-color: var(--tf-toast-loading-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-loading-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-loading-progress-bar-bg-default);\n}\n\n.tf-toast-accent--success {\n  --_tf-bg: var(--tf-toast-success-bg-default);\n  --_tf-color: var(--tf-toast-success-color-default);\n  --_tf-border-color: var(--tf-toast-success-border-default);\n  --_tf-title-color: var(--tf-toast-success-title-color-default);\n  --_tf-desc-color: var(--tf-toast-success-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-success-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-success-progress-bar-bg-default);\n}\n\n.tf-toast-accent--error {\n  --_tf-bg: var(--tf-toast-error-bg-default);\n  --_tf-color: var(--tf-toast-error-color-default);\n  --_tf-border-color: var(--tf-toast-error-border-default);\n  --_tf-title-color: var(--tf-toast-error-title-color-default);\n  --_tf-desc-color: var(--tf-toast-error-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-error-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-error-progress-bar-bg-default);\n}\n\n.tf-toast-accent--warning {\n  --_tf-bg: var(--tf-toast-warning-bg-default);\n  --_tf-color: var(--tf-toast-warning-color-default);\n  --_tf-border-color: var(--tf-toast-warning-border-default);\n  --_tf-title-color: var(--tf-toast-warning-title-color-default);\n  --_tf-desc-color: var(--tf-toast-warning-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-warning-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-warning-progress-bar-bg-default);\n}\n\n.tf-toast-accent--info {\n  --_tf-bg: var(--tf-toast-info-bg-default);\n  --_tf-color: var(--tf-toast-info-color-default);\n  --_tf-border-color: var(--tf-toast-info-border-default);\n  --_tf-title-color: var(--tf-toast-info-title-color-default);\n  --_tf-desc-color: var(--tf-toast-info-description-color-default);\n  --_tf-progress-bg: var(--tf-toast-info-progress-bg-default);\n  --_tf-progress-bar-bg: var(--tf-toast-info-progress-bar-bg-default);\n}\n\n.tf-toast-accent--custom {\n  --_tf-bg: var(\n    --tf-toast-custom-bg-default,\n    var(--tf-toast-normal-bg-default)\n  );\n  --_tf-color: var(\n    --tf-toast-custom-color-default,\n    var(--tf-toast-normal-color-default)\n  );\n  --_tf-border-color: var(\n    --tf-toast-custom-border-default,\n    var(--tf-toast-normal-border-default)\n  );\n  --_tf-title-color: var(\n    --tf-toast-custom-title-color-default,\n    var(--tf-toast-normal-title-color-default)\n  );\n  --_tf-desc-color: var(\n    --tf-toast-custom-description-color-default,\n    var(--tf-toast-normal-description-color-default)\n  );\n  --_tf-progress-bg: var(\n    --tf-toast-custom-progress-bg-default,\n    var(--tf-toast-normal-progress-bg-default)\n  );\n  --_tf-progress-bar-bg: var(\n    --tf-toast-custom-progress-bar-bg-default,\n    var(--tf-toast-normal-progress-bar-bg-default)\n  );\n}\n\n.tf-toast-surface {\n  position: relative;\n  display: block;\n  min-width: 0;\n  padding: var(--tf-toast-padding);\n  border-radius: var(--tf-toast-border-radius);\n  background-color: var(--_tf-resolved-bg);\n  color: var(--_tf-resolved-color);\n  border: var(--tf-toast-border-width) solid var(--_tf-resolved-border);\n  font-family: var(--tf-toast-font-family), sans-serif;\n  overflow: hidden;\n}\n\n.tf-toast-main {\n  display: flex;\n  align-items: stretch;\n  gap: var(--tf-toast-buttons-content-gap);\n  width: 100%;\n}\n\n.tf-toast-main--full > .tf-toast-main-content {\n  width: 100%;\n  min-width: 0;\n  flex: 1 1 100%;\n}\n\n.tf-toast-main--content-end > .tf-toast-main-content {\n  margin-left: auto;\n  max-width: 100%;\n  flex: 0 1 auto;\n}\n\n.tf-toast-main--content-end > .tf-toast-main-content > .tf-toast-body {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.tf-toast-main-content {\n  display: flex;\n  align-items: center;\n  gap: var(--tf-toast-gap);\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.tf-toast-meta {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--tf-toast-gap) / 2);\n  min-width: 0;\n  flex-shrink: 0;\n}\n\n.tf-toast-meta--left {\n  align-items: flex-start;\n}\n\n.tf-toast-meta--right {\n  align-items: flex-end;\n}\n\n.tf-toast-meta-row {\n  display: flex;\n  min-width: 0;\n}\n\n.tf-toast-meta-row--top {\n  margin-bottom: var(--tf-toast-buttons-content-gap);\n}\n\n.tf-toast-meta-row--bottom {\n  margin-top: var(--tf-toast-buttons-content-gap);\n}\n\n.tf-toast-meta-row .tf-toast-actions--start {\n  margin-right: auto;\n}\n\n.tf-toast-meta-row .tf-toast-actions--end {\n  margin-left: auto;\n}\n\n.tf-toast-actions {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: var(--tf-toast-buttons-gap);\n}\n\n.tf-toast-buttons--center {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n\n.tf-toast-buttons--bottom {\n  margin-top: auto;\n}\n\n.tf-toast-actions--start {\n  justify-content: flex-start;\n}\n\n.tf-toast-actions--end {\n  justify-content: flex-end;\n}\n\n.tf-toast-button {\n  appearance: none;\n  border: var(--tf-toast-button-border-width) solid\n    var(--tf-toast-button-border-color);\n  background: var(--tf-toast-button-bg);\n  color: var(--tf-toast-button-color);\n  border-radius: var(--tf-toast-button-border-radius);\n  font-size: var(--tf-toast-button-font-size);\n  line-height: var(--tf-toast-button-line-height);\n  padding: var(--tf-toast-button-padding-y) var(--tf-toast-button-padding-x);\n  cursor: pointer;\n  user-select: none;\n  font-family: inherit;\n}\n\n.tf-toast-icon-spin {\n  display: inline-block;\n  animation: tf-toast-spin 0.8s linear infinite;\n  transform-origin: center;\n}\n\n@keyframes tf-toast-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.tf-toast-icon-svg {\n  width: var(--tf-toast-icon-size);\n  height: var(--tf-toast-icon-size);\n}\n\n.tf-toast-icon--loading .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-loading));\n}\n\n.tf-toast-icon--default .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-default));\n}\n\n.tf-toast-icon--success .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-success));\n}\n\n.tf-toast-icon--error .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-error));\n}\n\n.tf-toast-icon--warning .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-warning));\n}\n\n.tf-toast-icon--info .tf-toast-icon-svg {\n  color: var(--tf-toast-icon-color, var(--tf-toast-icon-info));\n}\n\n.tf-toast-icon--custom .tf-toast-icon-svg {\n  color: var(\n    --tf-toast-icon-color,\n    var(--tf-toast-icon-custom, var(--tf-toast-icon-default))\n  );\n}\n\n.tf-toast-body {\n  position: relative;\n  z-index: 1;\n  min-width: 0;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.tf-toast-body--has-created-at {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  column-gap: calc(var(--tf-toast-gap) / 2);\n  grid-auto-flow: row;\n}\n\n.tf-toast-body--has-created-at > :not(.tf-toast-created-at) {\n  grid-column: 1;\n}\n\n.tf-toast-text {\n  min-width: 0;\n}\n\n.tf-toast-created-at {\n  color: var(--tf-toast-created-at-color);\n  font-size: var(--tf-toast-created-at-font-size);\n  font-style: italic;\n  white-space: nowrap;\n  align-self: end;\n  justify-self: end;\n  grid-column: 2;\n  grid-row: 1;\n}\n\n.tf-toast[data-align=\"right\"] .tf-toast-created-at {\n  text-align: right;\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.tf-toast[data-align=\"right\"] .tf-toast-body--has-created-at {\n  grid-template-columns: auto minmax(0, 1fr);\n}\n\n.tf-toast[data-align=\"right\"]\n  .tf-toast-body--has-created-at\n  > .tf-toast-created-at {\n  grid-column: 1;\n  justify-self: start;\n}\n\n.tf-toast[data-align=\"right\"]\n  .tf-toast-body--has-created-at\n  > :not(.tf-toast-created-at) {\n  grid-column: 2;\n}\n\n.tf-toast-floating-bar {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(\n    calc(var(--tf-toast-close-size) * var(--tf-toast-float-x)),\n    calc(var(--tf-toast-close-size) * var(--tf-toast-float-y))\n  );\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tf-toast-created-at-offset);\n  height: var(--tf-toast-close-size);\n  pointer-events: auto;\n  z-index: 2;\n}\n\n.tf-toast-created-at-float {\n  display: inline-flex;\n  align-items: center;\n  height: var(--tf-toast-close-size);\n  padding: 0 var(--tf-toast-created-at-padding-x);\n  border-radius: var(--tf-toast-created-at-border-radius);\n  border: var(--tf-toast-close-border-width) solid\n    var(--tf-toast-created-at-border-color);\n  background: var(--tf-toast-created-at-bg);\n  color: var(--tf-toast-created-at-color);\n  font-size: var(--tf-toast-created-at-font-size);\n  font-style: italic;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.tf-toast-title {\n  margin: 0;\n  font-size: var(--tf-toast-title-font-size);\n  font-weight: var(--tf-toast-title-font-weight);\n  line-height: var(--tf-toast-title-line-height);\n  color: var(--_tf-resolved-title-color);\n  word-wrap: break-word;\n}\n\n.tf-toast-description {\n  margin: 0;\n  font-size: var(--tf-toast-description-font-size);\n  line-height: var(--tf-toast-description-line-height);\n  color: var(--_tf-resolved-desc-color);\n  word-wrap: break-word;\n}\n\n.tf-toast-close {\n  position: relative;\n  height: var(--tf-toast-close-size);\n  width: var(--tf-toast-close-size);\n  border-radius: var(--tf-toast-close-border-radius);\n  border: var(--tf-toast-close-border-width) solid\n    var(--tf-toast-close-border-color);\n  background: var(--tf-toast-close-bg);\n  color: var(--tf-toast-close-color);\n  font-size: var(--tf-toast-close-font-size);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n  pointer-events: auto;\n  z-index: 2;\n}\n\n.tf-toast-close-icon {\n  width: var(--tf-toast-close-icon-size);\n  height: var(--tf-toast-close-icon-size);\n}\n\n.tf-toast-close:focus-visible {\n  outline: 2px solid var(--tf-toast-close-ring-color);\n  outline-offset: 2px;\n}\n", V = "data-toastflow-styles", H = !1;
 function U() {
 	if (H || typeof document > "u") return;
 	if (document.head.querySelector(`style[${V}]`)) {
@@ -419,7 +419,8 @@ function Ne({ toast: e, store: t, progressResetKey: n, duplicateKey: i, updateKe
 	}), ye = o(function() {
 		return {
 			class: "tf-toast-progress",
-			"data-align": d.value.progressAlignment
+			"data-align": d.value.progressAlignment,
+			style: E.value
 		};
 	}), be = o(function() {
 		return { class: ["tf-toast-progress-bar", `tf-toast-progress-bar--${d.value.type}`] };
@@ -719,20 +720,22 @@ function Re(e, t) {
 function ze(e, t, n) {
 	let r = C(!1), i = "";
 	function a() {
-		i === "touch" || i === "pen" || l() && d();
+		d() && (i === "touch" || i === "pen" || l() && f());
 	}
 	function o() {
-		if (i === "touch" || i === "pen") {
-			i = "";
-			return;
+		if (d()) {
+			if (i === "touch" || i === "pen") {
+				i = "";
+				return;
+			}
+			l() && p();
 		}
-		l() && f();
 	}
 	function s(e) {
-		i = e.pointerType, l(e, !0) && d();
+		i = e.pointerType, l(e, !0) && f();
 	}
 	function c(e) {
-		l(e, !0) && f();
+		l(e, !0) && p();
 	}
 	function l(t, r = !1) {
 		return !n.value || !e.value.pauseOnHover ? !1 : !(r && t && !u(t));
@@ -741,15 +744,18 @@ function ze(e, t, n) {
 		return e.pointerType === "touch" || e.pointerType === "pen";
 	}
 	function d() {
-		r.value = !0, t.pause(e.value.id);
+		return typeof window > "u" || !window.matchMedia ? !0 : window.matchMedia("(hover: hover), (any-hover: hover) and (any-pointer: fine)").matches;
 	}
 	function f() {
+		r.value = !0, t.pause(e.value.id);
+	}
+	function p() {
 		r.value = !1, t.resume(e.value.id);
 	}
 	return {
 		isHovered: r,
-		pause: d,
-		resume: f,
+		pause: f,
+		resume: p,
 		handleMouseEnter: a,
 		handleMouseLeave: o,
 		handlePointerDown: s,

package/dist/toastflow.umd.js

@@ -248,6 +248,8 @@
 .tf-toast-motion {
   width: 100%;
   transform-origin: center;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
 }
 
 /* MOVE */
@@ -295,6 +297,25 @@
   transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);
 }
 
+@media (max-width: 640px) {
+  .tf-toast-item[data-position^="top-"] {
+    --tf-toast-motion-offset: -18px;
+  }
+
+  .tf-toast-item[data-position^="bottom-"] {
+    --tf-toast-motion-offset: 18px;
+  }
+
+  .Toastflow__animation-enter-from > .tf-toast-motion,
+  .Toastflow__animation-appear-from > .tf-toast-motion {
+    transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.98);
+  }
+
+  .Toastflow__animation-leave-to > .tf-toast-motion {
+    transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.98);
+  }
+}
+
 /* CLEAR ALL */
 .Toastflow__animation-clearAll .tf-toast-motion {
   animation: Toastflow__clearAll-kf var(--tf-toast-animation-in-duration)
@@ -898,4 +919,4 @@
   outline: 2px solid var(--tf-toast-close-ring-color);
   outline-offset: 2px;
 }
-`,d=`data-toastflow-styles`,f=!1;function p(){if(f||typeof document>`u`)return;if(document.head.querySelector(`style[${d}]`)){f=!0;return}let e=document.createElement(`style`);e.setAttribute(d,`true`),e.textContent=u,document.head.appendChild(e),f=!0}function m(e={},n={}){let i=(0,t.createToastStore)(e);return o(i),{install(e){n.css!==!1&&p(),e.provide(r,i)}}}var h=[`aria-label`,`onClick`],g={key:0},_=[`innerHTML`],v=(0,n.defineComponent)({__name:`ToastButtonsGroup`,props:{buttons:{},classes:{},onButtonClick:{type:Function}},setup(e){let t=e;function r(e,n){t.onButtonClick(e,n)}return(t,i)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:(0,n.normalizeClass)(e.classes)},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.buttons,(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:e.id??t,type:`button`,class:(0,n.normalizeClass)([`tf-toast-button`,e.className]),"aria-label":e.ariaLabel||void 0,onClick:(0,n.withModifiers)(t=>r(e,t),[`stop`]),onPointerdown:i[0]||=(0,n.withModifiers)(()=>{},[`stop`]),onPointerup:i[1]||=(0,n.withModifiers)(()=>{},[`stop`]),onPointercancel:i[2]||=(0,n.withModifiers)(()=>{},[`stop`])},[e.label?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,g,(0,n.toDisplayString)(e.label),1)):e.html?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:1,innerHTML:e.html},null,8,_)):(0,n.createCommentVNode)(``,!0)],42,h))),128))],2))}}),y=(0,n.defineComponent)({__name:`ToastProgress`,props:{type:{default:`default`},progressAlignment:{default:`right-to-left`},trackProps:{},barProps:{}},setup(e){let t=e,r=(0,n.computed)(function(){return t.trackProps??{class:`tf-toast-progress`,"data-align":t.progressAlignment}}),i=(0,n.computed)(function(){return t.barProps??{class:[`tf-toast-progress-bar`,`tf-toast-progress-bar--${t.type}`]}});return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.normalizeProps)((0,n.guardReactiveProps)(r.value)),[(0,n.createElementVNode)(`div`,(0,n.normalizeProps)((0,n.guardReactiveProps)(i.value)),null,16)],16))}}),b=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},x={},S={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function C(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,S,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z`,"clip-rule":`evenodd`},null,-1)]])}var w=b(x,[[`render`,C]]),T={},E={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function D(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,E,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M4.755 10.059a7.5 7.5 0 0 1 12.548-3.364l1.903 1.903h-3.183a.75.75 0 1 0 0 1.5h4.992a.75.75 0 0 0 .75-.75V4.356a.75.75 0 0 0-1.5 0v3.18l-1.9-1.9A9 9 0 0 0 3.306 9.67a.75.75 0 1 0 1.45.388Zm15.408 3.352a.75.75 0 0 0-.919.53 7.5 7.5 0 0 1-12.548 3.364l-1.902-1.903h3.183a.75.75 0 0 0 0-1.5H2.984a.75.75 0 0 0-.75.75v4.992a.75.75 0 0 0 1.5 0v-3.18l1.9 1.9a9 9 0 0 0 15.059-4.035.75.75 0 0 0-.53-.918Z`,"clip-rule":`evenodd`},null,-1)]])}var O=b(T,[[`render`,D]]),k={},A={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function j(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,A,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z`,"clip-rule":`evenodd`},null,-1)]])}var M=b(k,[[`render`,j]]),N={},P={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function ee(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,P,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z`,"clip-rule":`evenodd`},null,-1)]])}var F=b(N,[[`render`,ee]]),I={},L={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function R(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,L,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z`,"clip-rule":`evenodd`},null,-1)]])}var te=b(I,[[`render`,R]]),ne={},re={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function ie(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,re,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 0 1-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 0 1-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 0 1-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584ZM12 18a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z`,"clip-rule":`evenodd`},null,-1)]])}var z=b(ne,[[`render`,ie]]),B={},V={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function H(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,V,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z`,"clip-rule":`evenodd`},null,-1)]])}var U=b(B,[[`render`,H]]),W={success:{accent:`tf-toast-accent--success`,icon:`tf-toast-icon--success`,close:`tf-toast-close--success`,component:F},error:{accent:`tf-toast-accent--error`,icon:`tf-toast-icon--error`,close:`tf-toast-close--error`,component:U},warning:{accent:`tf-toast-accent--warning`,icon:`tf-toast-icon--warning`,close:`tf-toast-close--warning`,component:M},info:{accent:`tf-toast-accent--info`,icon:`tf-toast-icon--info`,close:`tf-toast-close--info`,component:te},default:{accent:`tf-toast-accent--default`,icon:`tf-toast-icon--default`,close:`tf-toast-close--default`,component:z},loading:{accent:`tf-toast-accent--loading`,icon:`tf-toast-icon--loading`,close:`tf-toast-close--loading`,component:O},custom:{accent:`tf-toast-accent--custom`,icon:`tf-toast-icon--custom`,close:`tf-toast-close--custom`,component:z}},G=new Set([`error`,`warning`]),K=8,q=.35,J=96,Y=160,X=140,ae={iconColor:`--tf-toast-icon-color`,bg:`--tf-toast-bg`,color:`--tf-toast-color`,borderColor:`--tf-toast-border-color`,borderRadius:`--tf-toast-border-radius`,borderWidth:`--tf-toast-border-width`,padding:`--tf-toast-padding`,fontFamily:`--tf-toast-font-family`,gap:`--tf-toast-gap`,titleColor:`--tf-toast-title-color`,titleFontSize:`--tf-toast-title-font-size`,titleFontWeight:`--tf-toast-title-font-weight`,titleLineHeight:`--tf-toast-title-line-height`,descriptionColor:`--tf-toast-description-color`,descriptionFontSize:`--tf-toast-description-font-size`,descriptionLineHeight:`--tf-toast-description-line-height`,iconSize:`--tf-toast-icon-size`,progressBarBg:`--tf-toast-progress-bar-bg`,progressBg:`--tf-toast-progress-bg`,progressHeight:`--tf-toast-progress-height`,closeBg:`--tf-toast-close-bg`,closeColor:`--tf-toast-close-color`,closeBorderColor:`--tf-toast-close-border-color`,closeSize:`--tf-toast-close-size`,closeIconSize:`--tf-toast-close-icon-size`,buttonBg:`--tf-toast-button-bg`,buttonColor:`--tf-toast-button-color`,buttonBorderColor:`--tf-toast-button-border-color`,createdAtColor:`--tf-toast-created-at-color`,createdAtBg:`--tf-toast-created-at-bg`,createdAtBorderColor:`--tf-toast-created-at-border-color`};function Z({toast:e,store:r,progressResetKey:i,duplicateKey:a,updateKey:o,onDismiss:s,bumpAnimationClass:c,clearAllAnimationClass:l,updateAnimationClass:u}){let d=(0,n.computed)(function(){let n=(0,t.isNumberFinite)(e.value.createdAt)?e.value.createdAt:Date.now();return{...r.getConfig(),...e.value,createdAt:n,id:e.value.id??`toast-${n}`,type:oe(e.value.type),title:e.value.title??``,description:e.value.description??``,progressBar:e.value.progressBar??!1,duration:e.value.duration??1/0}}),{accentClass:f,iconWrapperClass:p,closeWrapperClass:m,defaultIconComponent:h}=se(d),{role:g,ariaLive:_,hasCreatedAt:v,createdAtText:y,createdAtAriaLabel:b,titleAriaLabel:x,descriptionAriaLabel:S,toastAriaLabel:C}=ce(d),{duration:w,progressStyle:T,showProgressBar:E,progressKeyLocal:D}=le(d,i,a),{isBumped:O,isUpdated:k}=ue(a,o),{isHovered:A,pause:j,resume:M,handleMouseEnter:N,handleMouseLeave:P,handlePointerDown:ee,handlePointerUp:F}=de(d,r,w);function I(){if(s){s(d.value.id);return}r.dismiss(d.value.id)}let{isSwipeEnabled:L,swipeStyle:R,handlePointerDown:te,handlePointerMove:ne,handlePointerUp:re,handlePointerCancel:ie,consumeSuppressedClick:z}=fe(d,I),{handleClick:B,handleCloseClick:V}=pe(d,I,z),{hasButtons:H,buttons:U,buttonsPlacement:W,buttonsClasses:G,buttonsVarsStyle:K,handleButtonClick:q}=me(d,I),J=(0,n.computed)(function(){let e={},t=K.value;for(let n of Object.keys(t)){let r=t[n];r!=null&&(e[n]=r)}let n=d.value.css;if(!n)return e;if(n.accentColor){let t=n.accentColor;e[`--tf-toast-accent-color`]=t,e[`--tf-toast-color`]=t,e[`--tf-toast-title-color`]=t,e[`--tf-toast-description-color`]=t,e[`--tf-toast-progress-bar-bg`]=t}n.color&&(n.titleColor||(e[`--tf-toast-title-color`]=n.color),n.descriptionColor||(e[`--tf-toast-description-color`]=n.color));for(let[t,r]of Object.entries(ae)){let i=n[t];i!=null&&(e[r]=i)}return e}),Y=(0,n.computed)(function(){return d.value.showIcon!==!1});function X(e){ee(e),te(e)}function Z(e){ne(e)}function Q(e){re(e),F(e)}function $(e){ie(e),F(e)}let he=(0,n.computed)(function(){return H.value&&W.value===`left`}),ge=(0,n.computed)(function(){return H.value&&W.value===`right`}),_e=(0,n.computed)(function(){return H.value&&W.value===`top`}),ve=(0,n.computed)(function(){return H.value&&W.value===`bottom`}),ye=(0,n.computed)(function(){return _e.value||ve.value}),be=(0,n.computed)(function(){return v.value&&!H.value}),xe=(0,n.computed)(function(){return v.value&&H.value}),Se=(0,n.computed)(function(){return[`tf-toast`,f.value,O.value&&d.value.phase!==`leaving`&&d.value.phase!==`clear-all`&&c?.value,k.value&&d.value.phase!==`leaving`&&d.value.phase!==`clear-all`&&u?.value,d.value.phase===`clear-all`&&l?.value,A.value&&`tf-toast--paused`,L.value&&`tf-toast--swipe-enabled`]}),Ce=(0,n.computed)(function(){return{role:g.value,"aria-live":_.value,class:`tf-toast-wrapper`,style:R.value}}),we=(0,n.computed)(function(){return{class:Se.value,"aria-label":C.value||void 0,"data-align":d.value.alignment,style:J.value,onClick:B,onMouseenter:N,onMouseleave:P,onPointerdown:X,onPointermove:Z,onPointerup:Q,onPointercancel:$}}),Te=(0,n.computed)(function(){return{type:`button`,class:[`tf-toast-close`,m.value],"aria-label":`Close notification`,onClick:function(e){e.stopPropagation(),V()}}}),Ee=(0,n.computed)(function(){return{class:G.value}}),De=(0,n.computed)(function(){return{class:`tf-toast-progress-wrapper`,style:T.value}}),Oe=(0,n.computed)(function(){return{class:`tf-toast-progress`,"data-align":d.value.progressAlignment}}),ke=(0,n.computed)(function(){return{class:[`tf-toast-progress-bar`,`tf-toast-progress-bar--${d.value.type}`]}}),Ae=(0,n.computed)(function(){return{class:[`tf-toast-icon`,p.value],"aria-hidden":`true`}}),je=(0,n.computed)(function(){return{class:[`tf-toast-icon-svg`,d.value.type===`loading`&&`tf-toast-icon-spin`],"aria-hidden":!0}});function Me(e){return(0,n.mergeProps)(Ce.value,e??{})}function Ne(e){return(0,n.mergeProps)(we.value,e??{})}function Pe(e){return(0,n.mergeProps)(Te.value,e??{})}function Fe(e){return(0,n.mergeProps)(Ee.value,e??{})}function Ie(e,t){return(0,n.mergeProps)({type:`button`,class:[`tf-toast-button`,e.className],"aria-label":e.ariaLabel||void 0,onClick:function(t){t.stopPropagation(),q(e,t)},onPointerdown:function(e){e.stopPropagation()},onPointerup:function(e){e.stopPropagation()},onPointercancel:function(e){e.stopPropagation()}},t??{})}function Le(e){return(0,n.mergeProps)(De.value,e??{})}function Re(e){return(0,n.mergeProps)(Oe.value,e??{})}function ze(e){return(0,n.mergeProps)(ke.value,e??{})}return{toast:d,accentClass:f,iconWrapperClass:p,closeWrapperClass:m,defaultIconComponent:h,role:g,ariaLive:_,hasCreatedAt:v,createdAtText:y,createdAtAriaLabel:b,titleAriaLabel:x,descriptionAriaLabel:S,toastAriaLabel:C,duration:w,progressStyle:T,showProgressBar:E,progressKeyLocal:D,isBumped:O,isUpdated:k,isHovered:A,handleMouseEnter:N,handleMouseLeave:P,handlePointerDown:X,handlePointerMove:Z,handlePointerUp:Q,handlePointerCancel:$,isSwipeEnabled:L,swipeStyle:R,handleClick:B,handleCloseClick:V,dismissCurrent:I,pause:j,resume:M,hasButtons:H,buttons:U,buttonsPlacement:W,buttonsClasses:G,buttonsVarsStyle:K,handleButtonClick:q,toastStyle:J,showIconElement:Y,showMetaLeft:he,showMetaRight:ge,showMetaTop:_e,showMetaBottom:ve,hasOutsideButtons:ye,showInlineCreatedAt:be,showFloatingCreatedAt:xe,ui:(0,n.computed)(function(){return{wrapperProps:Ce.value,rootProps:we.value,closeProps:Te.value,getWrapperProps:Me,getRootProps:Ne,getCloseProps:Pe,getButtonProps:Ie,actions:{dismiss:I,pause:j,resume:M,onClick:B,onCloseClick:V,onButtonClick:q,onMouseEnter:N,onMouseLeave:P,onPointerDown:X,onPointerMove:Z,onPointerUp:Q,onPointerCancel:$},a11y:{role:g.value,ariaLive:_.value,titleLabel:x.value,descriptionLabel:S.value,toastLabel:C.value,createdAtLabel:b.value},state:{isHovered:A.value,isBumped:O.value,isUpdated:k.value,isSwipeEnabled:L.value},classes:{wrapper:`tf-toast-wrapper`,root:Se.value,accent:f.value,icon:p.value,close:m.value,buttons:G.value},styles:{wrapper:R.value,root:J.value,progress:T.value},icon:{show:Y.value,component:h.value,wrapperProps:Ae.value,componentProps:je.value},createdAt:{show:v.value,inline:be.value,floating:xe.value,formatted:y.value,ariaLabel:b.value},buttons:{items:U.value,has:H.value,placement:W.value,groupProps:Ee.value,getGroupProps:Fe},progress:{show:E.value,key:D.value,wrapperProps:De.value,trackProps:Oe.value,barProps:ke.value,getWrapperProps:Le,getTrackProps:Re,getBarProps:ze,componentProps:{key:D.value,type:d.value.type,progressAlignment:d.value.progressAlignment}},layout:{hasOutsideButtons:ye.value,showMetaLeft:he.value,showMetaRight:ge.value,showMetaTop:_e.value,showMetaBottom:ve.value}}})}}function oe(e){return typeof e==`string`&&t.VALID_TOAST_TYPES.has(e)?e:`default`}function se(e){return{accentClass:(0,n.computed)(function(){return e.value.theme?e.value.theme.startsWith(`tf-toast-accent--`)?e.value.theme:`tf-toast-accent--${e.value.theme}`:W[e.value.type].accent}),iconWrapperClass:(0,n.computed)(function(){return W[e.value.type].icon}),closeWrapperClass:(0,n.computed)(function(){return W[e.value.type].close}),defaultIconComponent:(0,n.computed)(function(){return W[e.value.type].component})}}function ce(e){let r=(0,n.computed)(function(){return G.has(e.value.type)?`alert`:`status`}),i=(0,n.computed)(function(){return G.has(e.value.type)?`assertive`:`polite`}),a=(0,n.computed)(function(){return!!(e.value.showCreatedAt&&(0,t.isNumberFinite)(e.value.createdAt))}),o=(0,n.computed)(function(){if(!a.value)return``;let n=e.value.createdAtFormatter;if(typeof n!=`function`)return(0,t.defaultCreatedAtFormatter)(e.value.createdAt);try{return n(e.value.createdAt)}catch(e){console.error(`[vue-toastflow] Something failed in createdAtFormatter`,e)}return(0,t.defaultCreatedAtFormatter)(e.value.createdAt)}),s=(0,n.computed)(function(){return o.value?`Sent at ${o.value}`:``}),c=(0,n.computed)(function(){return ge(e.value.title)}),l=(0,n.computed)(function(){return ge(e.value.description)});return{role:r,ariaLive:i,hasCreatedAt:a,createdAtText:o,createdAtAriaLabel:s,titleAriaLabel:c,descriptionAriaLabel:l,toastAriaLabel:(0,n.computed)(function(){let t=[];return c.value&&t.push(c.value),l.value&&t.push(l.value),a.value&&s.value&&t.push(s.value),t.length||t.push(`${e.value.type} notification`),t.join(`. `)})}}function le(e,r,i){let a=(0,n.computed)(function(){if((0,t.isNumberFinite)(e.value.duration))return e.value.duration}),o=(0,n.computed)(function(){return a.value?{"--tf-toast-progress-duration":`${a.value}ms`}:{}}),s=(0,n.computed)(function(){return e.value.progressBar&&!!a.value}),c=(0,n.ref)(0);return(0,n.watch)(()=>r?.value,function(e){e!=null&&(c.value+=1)}),(0,n.watch)(()=>i?.value,function(e){e!=null&&(c.value+=1)}),{duration:a,progressStyle:o,showProgressBar:s,progressKeyLocal:c}}function ue(e,t){let r=(0,n.ref)(!1),i=(0,n.ref)(!1);function a(){r.value=!1,requestAnimationFrame(function(){r.value=!0})}function o(){i.value=!1,requestAnimationFrame(function(){i.value=!0})}return(0,n.watch)(()=>e?.value,function(e){e!=null&&a()}),(0,n.watch)(()=>t?.value,function(e){e!=null&&o()}),{isBumped:r,isUpdated:i}}function de(e,t,r){let i=(0,n.ref)(!1),a=``;function o(){a===`touch`||a===`pen`||u()&&f()}function s(){if(a===`touch`||a===`pen`){a=``;return}u()&&p()}function c(e){a=e.pointerType,u(e,!0)&&f()}function l(e){u(e,!0)&&p()}function u(t,n=!1){return!r.value||!e.value.pauseOnHover?!1:!(n&&t&&!d(t))}function d(e){return e.pointerType===`touch`||e.pointerType===`pen`}function f(){i.value=!0,t.pause(e.value.id)}function p(){i.value=!1,t.resume(e.value.id)}return{isHovered:i,pause:f,resume:p,handleMouseEnter:o,handleMouseLeave:s,handlePointerDown:c,handlePointerUp:l}}function fe(e,t){let r=(0,n.computed)(function(){return!!e.value.swipeToDismiss}),i=(0,n.ref)(0),a=(0,n.ref)(1),o=(0,n.ref)(!1),s=(0,n.ref)(!1),c=(0,n.ref)(null),l=(0,n.ref)(0),u=(0,n.ref)(0),d=(0,n.ref)(0),f=(0,n.ref)(!1),p=(0,n.ref)(!1),m=(0,n.ref)(!1),h=null,g=(0,n.computed)(function(){return!r.value&&i.value===0&&a.value===1?{}:{transform:`translate3d(${i.value}px, 0, 0)`,opacity:a.value,transition:o.value?`none`:`transform ${Y}ms ease, opacity ${Y}ms ease`}});function _(){h&&=(clearTimeout(h),null)}function v(){c.value=null,f.value=!1,p.value=!1,m.value=!1,d.value=0}function y(){o.value=!1,!(i.value===0&&a.value===1)&&(i.value=0,a.value=1)}function b(e){return c.value!==null&&c.value===e.pointerId}function x(e){let t=e.currentTarget;if(t?.releasePointerCapture)try{t.releasePointerCapture(e.pointerId)}catch{}}function S(e){return!r.value||e.button!==void 0&&e.button!==0?!1:!Q(e.target)}function C(e){if(!S(e))return;_(),s.value=!1,o.value=!1,c.value=e.pointerId,l.value=e.clientX,u.value=e.clientY;let t=e.currentTarget;if(d.value=t?.getBoundingClientRect().width??0,t?.setPointerCapture)try{t.setPointerCapture(e.pointerId)}catch{}}function w(e){if(!b(e)||p.value)return;let t=e.clientX-l.value,n=e.clientY-u.value,r=Math.abs(t),s=Math.abs(n);if(!f.value){if(r<K&&s<K)return;if(t<=0||s>r){p.value=!0,y();return}f.value=!0}e.preventDefault(),o.value=!0,m.value=!0;let c=Math.max(0,t),h=d.value>0?d.value:1,g=Math.min(c/h,1);i.value=c,a.value=Math.max(1-g*.85,.15)}function T(e){if(!b(e))return;if(x(e),!f.value||p.value||!m.value){y(),v();return}let n=d.value>0?d.value:1,r=Math.max(n*q,J);i.value>=r?(o.value=!1,s.value=!0,i.value=n+24,a.value=0,h=setTimeout(function(){t(),h=null},X)):(i.value>K&&(s.value=!0),y()),v()}function E(e){b(e)&&(x(e),y(),v())}function D(){return s.value?(s.value=!1,!0):!1}return(0,n.watch)(r,function(e){e||(_(),y(),v())}),(0,n.onUnmounted)(function(){_()}),{isSwipeEnabled:r,swipeStyle:g,handlePointerDown:C,handlePointerMove:w,handlePointerUp:T,handlePointerCancel:E,consumeSuppressedClick:D}}function pe(e,t,n){function r(t){if(n&&n())return;let r=$(e.value);e.value.onClick&&e.value.onClick(r,t),e.value.closeOnClick&&i()}function i(){t()}return{handleClick:r,handleCloseClick:i}}function me(e,t){let r=(0,n.computed)(function(){return e.value.buttons?.buttons??[]}),i=(0,n.computed)(function(){return e.value.buttons?.layout??`row`}),a=(0,n.computed)(function(){let t=e.value.buttons?.alignment??`bottom-right`;return e.value.alignment===`right`?t.endsWith(`-left`)?t.replace(/-left$/,`-right`):t.endsWith(`-right`)?t.replace(/-right$/,`-left`):t:t}),o=(0,n.computed)(function(){return r.value.length>0}),s=(0,n.computed)(function(){return a.value.endsWith(`-left`)?`left`:`right`}),c=(0,n.computed)(function(){let e=a.value;return e.startsWith(`top-`)?`top`:e.startsWith(`bottom-`)?`bottom`:`center`}),l=(0,n.computed)(function(){if(i.value===`row`)return s.value;let e=c.value;return e===`top`?`top`:e===`bottom`?`bottom`:s.value}),u=(0,n.computed)(function(){return l.value===`left`||l.value===`right`}),d=(0,n.computed)(function(){return s.value===`left`?`tf-toast-actions--start`:`tf-toast-actions--end`}),f=(0,n.computed)(function(){return{"--tf-toast-buttons-gap":e.value.buttons?.gap,"--tf-toast-buttons-content-gap":e.value.buttons?.contentGap}}),p=(0,n.computed)(function(){if(!u.value)return;let e=c.value;if(e===`bottom`)return`tf-toast-buttons--bottom`;if(e===`center`)return`tf-toast-buttons--center`}),m=(0,n.computed)(function(){return[`tf-toast-actions`,d.value,p.value]});function h(n,r){let i=$(e.value);n.dismissOnClick&&t(),n.onClick&&n.onClick(i,r),n.dismissAfterClick&&t()}return{hasButtons:o,buttons:r,buttonsPlacement:l,buttonsClasses:m,buttonsVarsStyle:f,handleButtonClick:h}}function Q(e){return e instanceof Element?!!e.closest(`button, a, input, textarea, select, option, [role='button'], [contenteditable='true']`):!1}function $(e){return{id:e.id,position:e.position,type:e.type,title:e.title,description:e.description,createdAt:e.createdAt}}function he(e){return e.replace(/\s+/g,` `).trim()}function ge(e){if(!e)return``;let t=he(e.replace(/<[^>]*>/g,` `));if(typeof window>`u`||!window.document)return t;try{let t=window.document.createElement(`div`);return t.innerHTML=e,he(t.textContent??``)}catch{return t}}var _e={class:`tf-toast-surface`},ve={key:0,class:`tf-toast-meta-row tf-toast-meta-row--top`},ye={key:0,class:`tf-toast-meta tf-toast-meta--left`},be={class:`tf-toast-main-content`},xe={class:`tf-toast-text`},Se=[`aria-label`],Ce=[`aria-label`,`innerHTML`],we=[`aria-label`],Te=[`aria-label`,`innerHTML`],Ee={key:0,class:`tf-toast-created-at`},De=[`aria-label`],Oe={key:1,class:`tf-toast-meta tf-toast-meta--right`},ke={key:1,class:`tf-toast-meta-row tf-toast-meta-row--bottom`},Ae={key:0,class:`tf-toast-floating-bar`},je={key:0,class:`tf-toast-created-at-float`},Me=[`aria-label`],Ne=(0,n.defineComponent)({__name:`Toast`,props:{toast:{},progressResetKey:{},duplicateKey:{},updateKey:{},bumpAnimationClass:{},clearAllAnimationClass:{},updateAnimationClass:{}},emits:[`dismiss`],setup(e,{emit:t}){let{toast:i,progressResetKey:a,duplicateKey:o,updateKey:c,bumpAnimationClass:l,clearAllAnimationClass:u,updateAnimationClass:d}=(0,n.toRefs)(e),f=t,p=(0,n.inject)(r,null)??s();function m(e){f(`dismiss`,e)}let{toast:h,createdAtText:g,createdAtAriaLabel:_,titleAriaLabel:b,descriptionAriaLabel:x,buttons:S,buttonsClasses:C,handleButtonClick:T,showMetaTop:E,showMetaLeft:D,showMetaRight:O,showMetaBottom:k,hasOutsideButtons:A,showInlineCreatedAt:j,showFloatingCreatedAt:M,ui:N}=Z({toast:i,store:p,progressResetKey:a,duplicateKey:o,updateKey:c,onDismiss:m,bumpAnimationClass:l,clearAllAnimationClass:u,updateAnimationClass:d});return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(N).wrapperProps)),[(0,n.createElementVNode)(`div`,(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(N).rootProps)),[(0,n.createElementVNode)(`div`,_e,[(0,n.unref)(E)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ve,[(0,n.createVNode)(v,{buttons:(0,n.unref)(S),classes:(0,n.unref)(C),"on-button-click":(0,n.unref)(T)},null,8,[`buttons`,`classes`,`on-button-click`])])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,{class:(0,n.normalizeClass)([`tf-toast-main`,[(0,n.unref)(A)&&`tf-toast-main--full`,(0,n.unref)(D)&&`tf-toast-main--content-end`]])},[(0,n.unref)(D)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ye,[(0,n.createVNode)(v,{buttons:(0,n.unref)(S),classes:(0,n.unref)(C),"on-button-click":(0,n.unref)(T)},null,8,[`buttons`,`classes`,`on-button-click`])])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,be,[(0,n.unref)(N).icon.show?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.normalizeProps)((0,n.mergeProps)({key:0},(0,n.unref)(N).icon.wrapperProps)),[(0,n.renderSlot)(e.$slots,`icon`,{toast:(0,n.unref)(h)},()=>[((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)((0,n.unref)(N).icon.component),(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(N).icon.componentProps)),null,16))])],16)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,{class:(0,n.normalizeClass)([`tf-toast-body`,[(0,n.unref)(j)&&`tf-toast-body--has-created-at`]])},[(0,n.createElementVNode)(`div`,xe,[(0,n.unref)(h).title&&!(0,n.unref)(h).supportHtml?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,{key:0,"aria-label":(0,n.unref)(b)||void 0,class:`tf-toast-title`},(0,n.toDisplayString)((0,n.unref)(h).title),9,Se)):(0,n.unref)(h).title&&(0,n.unref)(h).supportHtml?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,{key:1,class:`tf-toast-title`,"aria-label":(0,n.unref)(b)||void 0,innerHTML:(0,n.unref)(h).title},null,8,Ce)):(0,n.createCommentVNode)(``,!0),(0,n.unref)(h).description&&!(0,n.unref)(h).supportHtml?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,{key:2,"aria-label":(0,n.unref)(x)||void 0,class:`tf-toast-description`},(0,n.toDisplayString)((0,n.unref)(h).description),9,we)):(0,n.unref)(h).description&&(0,n.unref)(h).supportHtml?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,{key:3,class:`tf-toast-description`,"aria-label":(0,n.unref)(x)||void 0,innerHTML:(0,n.unref)(h).description},null,8,Te)):(0,n.createCommentVNode)(``,!0)]),(0,n.renderSlot)(e.$slots,`default`,{toast:(0,n.unref)(h)}),(0,n.unref)(j)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,Ee,[(0,n.renderSlot)(e.$slots,`created-at`,{toast:(0,n.unref)(h),formatted:(0,n.unref)(g)},()=>[(0,n.createElementVNode)(`span`,{"aria-label":(0,n.unref)(_)||void 0},(0,n.toDisplayString)((0,n.unref)(g)),9,De)])])):(0,n.createCommentVNode)(``,!0)],2)]),(0,n.unref)(O)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,Oe,[(0,n.createVNode)(v,{buttons:(0,n.unref)(S),classes:(0,n.unref)(C),"on-button-click":(0,n.unref)(T)},null,8,[`buttons`,`classes`,`on-button-click`])])):(0,n.createCommentVNode)(``,!0)],2),(0,n.unref)(k)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ke,[(0,n.createVNode)(v,{buttons:(0,n.unref)(S),classes:(0,n.unref)(C),"on-button-click":(0,n.unref)(T)},null,8,[`buttons`,`classes`,`on-button-click`])])):(0,n.createCommentVNode)(``,!0),(0,n.unref)(N).progress.show?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.normalizeProps)((0,n.mergeProps)({key:2},(0,n.unref)(N).progress.wrapperProps)),[(0,n.renderSlot)(e.$slots,`progress`,{toast:(0,n.unref)(h)},()=>[((0,n.openBlock)(),(0,n.createBlock)(y,{key:(0,n.unref)(N).progress.key,"track-props":(0,n.unref)(N).progress.trackProps,"bar-props":(0,n.unref)(N).progress.barProps},null,8,[`track-props`,`bar-props`]))])],16)):(0,n.createCommentVNode)(``,!0)]),(0,n.unref)(M)||(0,n.unref)(h).closeButton?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,Ae,[(0,n.unref)(M)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,je,[(0,n.renderSlot)(e.$slots,`created-at`,{toast:(0,n.unref)(h),formatted:(0,n.unref)(g)},()=>[(0,n.createElementVNode)(`span`,{"aria-label":(0,n.unref)(_)||void 0},(0,n.toDisplayString)((0,n.unref)(g)),9,Me)])])):(0,n.createCommentVNode)(``,!0),(0,n.unref)(h).closeButton?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,(0,n.normalizeProps)((0,n.mergeProps)({key:1},(0,n.unref)(N).closeProps)),[(0,n.renderSlot)(e.$slots,`close-icon`,{toast:(0,n.unref)(h)},()=>[(0,n.createVNode)(w,{class:`tf-toast-close-icon`,"aria-hidden":`true`})])],16)):(0,n.createCommentVNode)(``,!0)])):(0,n.createCommentVNode)(``,!0)],16)],16))}}),Pe=(0,n.defineComponent)({__name:`ToastSlotProvider`,props:{toast:{},progressResetKey:{},duplicateKey:{},updateKey:{},bumpAnimationClass:{},clearAllAnimationClass:{},updateAnimationClass:{}},setup(e){let{toast:t,progressResetKey:i,duplicateKey:a,updateKey:o,bumpAnimationClass:c,clearAllAnimationClass:l,updateAnimationClass:u}=(0,n.toRefs)(e),d=(0,n.inject)(r,null)??s();function f(e){d.dismiss(e)}let{toast:p,ui:m}=Z({toast:t,store:d,progressResetKey:i,duplicateKey:a,updateKey:o,onDismiss:f,bumpAnimationClass:c,clearAllAnimationClass:l,updateAnimationClass:u});return(e,t)=>(0,n.renderSlot)(e.$slots,`default`,{toast:(0,n.unref)(p),progressResetKey:(0,n.unref)(i),duplicateKey:(0,n.unref)(a),updateKey:(0,n.unref)(o),bumpAnimationClass:(0,n.unref)(c),clearAllAnimationClass:(0,n.unref)(l),updateAnimationClass:(0,n.unref)(u),dismiss:f,ui:(0,n.unref)(m)})}}),Fe=[`data-position`],Ie=260,Le=220,Re=(0,n.defineComponent)({__name:`ToastContainer`,setup(e){let t=[`top-left`,`top-center`,`top-right`,`bottom-left`,`bottom-center`,`bottom-right`],i=(0,n.inject)(r,null)??s(),a=(0,n.ref)([]),o=(0,n.ref)({enter:Ie,leave:Le}),c=(0,n.ref)({}),l=(0,n.ref)({}),u=(0,n.ref)({}),d=null,f=null;(0,n.onMounted)(function(){d=i.subscribe(function(e){a.value=e.toasts}),f=i.subscribeEvents(function(e){e.kind===`timer-reset`&&(c.value[e.id]=Math.random()),e.kind===`duplicate`&&(l.value[e.id]=Math.random()),e.kind===`update`&&(u.value[e.id]=Math.random())}),D()}),(0,n.onUnmounted)(function(){d&&d(),f&&f()});function p(e){return c.value[e]??0}function m(e){return l.value[e]??0}function h(e){return u.value[e]??0}let g=(0,n.computed)(function(){let e={"top-left":[],"top-center":[],"top-right":[],"bottom-left":[],"bottom-center":[],"bottom-right":[]};for(let t of a.value)e[t.position].push(t);return e}),_=i.getConfig(),v=(0,n.ref)({"top-left":{..._,position:`top-left`},"top-center":{..._,position:`top-center`},"top-right":{..._,position:`top-right`},"bottom-left":{..._,position:`bottom-left`},"bottom-center":{..._,position:`bottom-center`},"bottom-right":{..._,position:`bottom-right`}}),y=(0,n.computed)(function(){return a.value.length?Math.max(...a.value.map(e=>e.zIndex)):_.zIndex});function b(e){return v.value[e]??{..._,position:e}}function x(e){let{offset:t,width:n}=b(e),r={width:n,maxWidth:`calc(100vw - (${t}) - (${t}))`};return e.startsWith(`top-`)&&(r.top=t),e.startsWith(`bottom-`)&&(r.bottom=t),e.endsWith(`left`)?r.left=t:e.endsWith(`right`)?r.right=t:e.endsWith(`center`)&&(r.left=`50%`,r.transform=`translateX(-50%)`),r}function S(e){return e.endsWith(`left`)?`tf-toast-stack--left`:e.endsWith(`center`)?`tf-toast-stack--center`:`tf-toast-stack--right`}function C(e){return e.startsWith(`bottom-`)?`tf-toast-stack-inner--bottom`:null}function w(e){return b(e).overflowScroll&&e.startsWith(`top-`)}function T(e){i.dismiss(e)}function E(e,t){let n=e.trim().toLowerCase();if(!n)return t;if(n.endsWith(`ms`)){let e=Number(n.slice(0,-2));return Number.isFinite(e)?e:t}if(n.endsWith(`s`)){let e=Number(n.slice(0,-1));return Number.isFinite(e)?e*1e3:t}let r=Number(n);return Number.isFinite(r)?r:t}function D(){if(typeof window>`u`)return;let e=getComputedStyle(document.documentElement);o.value={enter:E(e.getPropertyValue(`--tf-toast-animation-in-duration`),Ie),leave:E(e.getPropertyValue(`--tf-toast-animation-out-duration`),Le)}}let O=new WeakMap;(0,n.onBeforeUpdate)(function(){let e=document.querySelectorAll(`.tf-toast-item`);for(let t=0;t<e.length;t++){let n=e[t],r=n.parentElement;r&&O.set(n,{top:n.offsetTop,height:n.offsetHeight,parentHeight:r.clientHeight,parentWidth:r.clientWidth})}});function k(e){let t=e,n=t.parentElement;if(!n||n.children.length<=1)return;let r=O.get(t),i=(t.dataset.position??``).startsWith(`bottom-`)||n.classList.contains(`tf-toast-stack-inner--bottom`),a=r?.top??t.offsetTop,o=r?.height??t.offsetHeight,s=r?.parentHeight??n.clientHeight,c=r?.parentWidth??n.clientWidth;if(t.style.position=`absolute`,t.style.zIndex=`0`,t.style.width=`${c}px`,t.style.left=`0`,t.style.right=`0`,i){let e=s-(a+o);t.style.bottom=`${e}px`,t.style.top=`auto`}else t.style.top=`${a}px`,t.style.bottom=`auto`}function A(e){let t=e;t.style.position=``,t.style.zIndex=``,t.style.width=``,t.style.left=``,t.style.right=``,t.style.top=``,t.style.bottom=``}(0,n.watch)(a,function(e){let t=new Set(e.map(function(e){return e.id}));for(let e of Object.keys(c.value))t.has(e)||delete c.value[e];for(let e of Object.keys(l.value))t.has(e)||delete l.value[e];for(let e of Object.keys(u.value))t.has(e)||delete u.value[e]},{deep:!1});function j(e){return{..._.animation,...e.animation}}return(0,n.watch)(g,function(e){let t={...v.value};Object.keys(e).forEach(function(n){let r=e[n][0];r&&(t[n]={..._,...r,position:n,animation:{..._.animation,...r.animation}})}),v.value=t},{deep:!1}),(e,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:`tf-toast-root`,style:(0,n.normalizeStyle)({zIndex:y.value})},[((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t,t=>(0,n.createElementVNode)(`div`,{key:t,class:(0,n.normalizeClass)([`tf-toast-stack`,S(t)]),style:(0,n.normalizeStyle)(x(t))},[(0,n.createVNode)(n.TransitionGroup,{appear:``,duration:o.value,name:b(t).animation.name,onBeforeLeave:k,onAfterLeave:A,tag:`div`,class:(0,n.normalizeClass)([`tf-toast-stack-inner`,C(t),w(t)&&`tf-toast-stack-inner--scroll`]),style:(0,n.normalizeStyle)({gap:b(t).gap})},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(g.value[t],(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:t.id,class:`tf-toast-item`,style:(0,n.normalizeStyle)({width:t.width,maxWidth:`100%`}),"data-position":t.position},[(0,n.createElementVNode)(`div`,{class:`tf-toast-motion`,style:(0,n.normalizeStyle)({"--tf-toast-index":r})},[e.$slots.default?((0,n.openBlock)(),(0,n.createBlock)(Pe,{key:0,toast:t,progressResetKey:p(t.id),duplicateKey:m(t.id),updateKey:h(t.id),bumpAnimationClass:j(t).bump,clearAllAnimationClass:j(t).clearAll,updateAnimationClass:j(t).update},{default:(0,n.withCtx)(t=>[(0,n.renderSlot)(e.$slots,`default`,(0,n.mergeProps)({ref_for:!0},t))]),_:3},8,[`toast`,`progressResetKey`,`duplicateKey`,`updateKey`,`bumpAnimationClass`,`clearAllAnimationClass`,`updateAnimationClass`])):((0,n.openBlock)(),(0,n.createBlock)(Ne,{key:1,toast:t,progressResetKey:p(t.id),duplicateKey:m(t.id),updateKey:h(t.id),bumpAnimationClass:j(t).bump,clearAllAnimationClass:j(t).clearAll,updateAnimationClass:j(t).update,onDismiss:T},null,8,[`toast`,`progressResetKey`,`duplicateKey`,`updateKey`,`bumpAnimationClass`,`clearAllAnimationClass`,`updateAnimationClass`]))],4)],12,Fe))),128))]),_:2},1032,[`duration`,`name`,`class`,`style`])],6)),64))],4))}});e.ArrowPath=O,e.Bell=M,e.CheckCircle=F,e.InfoCircle=te,e.QuestionMarkCircle=z,e.Toast=Ne,e.ToastContainer=Re,e.ToastProgress=y,e.XCircle=U,e.XMark=w,e.createToastflow=m,e.getToastStore=s,e.injectToastflowStyles=p,e.setToastStore=o,e.toast=l,Object.keys(t).forEach(function(n){n!==`default`&&!Object.prototype.hasOwnProperty.call(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})});
+`,d=`data-toastflow-styles`,f=!1;function p(){if(f||typeof document>`u`)return;if(document.head.querySelector(`style[${d}]`)){f=!0;return}let e=document.createElement(`style`);e.setAttribute(d,`true`),e.textContent=u,document.head.appendChild(e),f=!0}function m(e={},n={}){let i=(0,t.createToastStore)(e);return o(i),{install(e){n.css!==!1&&p(),e.provide(r,i)}}}var h=[`aria-label`,`onClick`],g={key:0},_=[`innerHTML`],v=(0,n.defineComponent)({__name:`ToastButtonsGroup`,props:{buttons:{},classes:{},onButtonClick:{type:Function}},setup(e){let t=e;function r(e,n){t.onButtonClick(e,n)}return(t,i)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:(0,n.normalizeClass)(e.classes)},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.buttons,(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:e.id??t,type:`button`,class:(0,n.normalizeClass)([`tf-toast-button`,e.className]),"aria-label":e.ariaLabel||void 0,onClick:(0,n.withModifiers)(t=>r(e,t),[`stop`]),onPointerdown:i[0]||=(0,n.withModifiers)(()=>{},[`stop`]),onPointerup:i[1]||=(0,n.withModifiers)(()=>{},[`stop`]),onPointercancel:i[2]||=(0,n.withModifiers)(()=>{},[`stop`])},[e.label?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,g,(0,n.toDisplayString)(e.label),1)):e.html?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:1,innerHTML:e.html},null,8,_)):(0,n.createCommentVNode)(``,!0)],42,h))),128))],2))}}),y=(0,n.defineComponent)({__name:`ToastProgress`,props:{type:{default:`default`},progressAlignment:{default:`right-to-left`},trackProps:{},barProps:{}},setup(e){let t=e,r=(0,n.computed)(function(){return t.trackProps??{class:`tf-toast-progress`,"data-align":t.progressAlignment}}),i=(0,n.computed)(function(){return t.barProps??{class:[`tf-toast-progress-bar`,`tf-toast-progress-bar--${t.type}`]}});return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.normalizeProps)((0,n.guardReactiveProps)(r.value)),[(0,n.createElementVNode)(`div`,(0,n.normalizeProps)((0,n.guardReactiveProps)(i.value)),null,16)],16))}}),b=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},x={},S={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function C(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,S,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z`,"clip-rule":`evenodd`},null,-1)]])}var w=b(x,[[`render`,C]]),T={},E={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function D(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,E,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M4.755 10.059a7.5 7.5 0 0 1 12.548-3.364l1.903 1.903h-3.183a.75.75 0 1 0 0 1.5h4.992a.75.75 0 0 0 .75-.75V4.356a.75.75 0 0 0-1.5 0v3.18l-1.9-1.9A9 9 0 0 0 3.306 9.67a.75.75 0 1 0 1.45.388Zm15.408 3.352a.75.75 0 0 0-.919.53 7.5 7.5 0 0 1-12.548 3.364l-1.902-1.903h3.183a.75.75 0 0 0 0-1.5H2.984a.75.75 0 0 0-.75.75v4.992a.75.75 0 0 0 1.5 0v-3.18l1.9 1.9a9 9 0 0 0 15.059-4.035.75.75 0 0 0-.53-.918Z`,"clip-rule":`evenodd`},null,-1)]])}var O=b(T,[[`render`,D]]),k={},A={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function j(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,A,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z`,"clip-rule":`evenodd`},null,-1)]])}var M=b(k,[[`render`,j]]),N={},P={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function ee(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,P,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z`,"clip-rule":`evenodd`},null,-1)]])}var F=b(N,[[`render`,ee]]),I={},L={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function R(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,L,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z`,"clip-rule":`evenodd`},null,-1)]])}var te=b(I,[[`render`,R]]),ne={},re={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function ie(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,re,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 0 1-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 0 1-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 0 1-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584ZM12 18a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z`,"clip-rule":`evenodd`},null,-1)]])}var z=b(ne,[[`render`,ie]]),B={},V={xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`};function H(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`svg`,V,[...t[0]||=[(0,n.createElementVNode)(`path`,{"fill-rule":`evenodd`,d:`M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z`,"clip-rule":`evenodd`},null,-1)]])}var U=b(B,[[`render`,H]]),W={success:{accent:`tf-toast-accent--success`,icon:`tf-toast-icon--success`,close:`tf-toast-close--success`,component:F},error:{accent:`tf-toast-accent--error`,icon:`tf-toast-icon--error`,close:`tf-toast-close--error`,component:U},warning:{accent:`tf-toast-accent--warning`,icon:`tf-toast-icon--warning`,close:`tf-toast-close--warning`,component:M},info:{accent:`tf-toast-accent--info`,icon:`tf-toast-icon--info`,close:`tf-toast-close--info`,component:te},default:{accent:`tf-toast-accent--default`,icon:`tf-toast-icon--default`,close:`tf-toast-close--default`,component:z},loading:{accent:`tf-toast-accent--loading`,icon:`tf-toast-icon--loading`,close:`tf-toast-close--loading`,component:O},custom:{accent:`tf-toast-accent--custom`,icon:`tf-toast-icon--custom`,close:`tf-toast-close--custom`,component:z}},G=new Set([`error`,`warning`]),K=8,q=.35,J=96,Y=160,X=140,ae={iconColor:`--tf-toast-icon-color`,bg:`--tf-toast-bg`,color:`--tf-toast-color`,borderColor:`--tf-toast-border-color`,borderRadius:`--tf-toast-border-radius`,borderWidth:`--tf-toast-border-width`,padding:`--tf-toast-padding`,fontFamily:`--tf-toast-font-family`,gap:`--tf-toast-gap`,titleColor:`--tf-toast-title-color`,titleFontSize:`--tf-toast-title-font-size`,titleFontWeight:`--tf-toast-title-font-weight`,titleLineHeight:`--tf-toast-title-line-height`,descriptionColor:`--tf-toast-description-color`,descriptionFontSize:`--tf-toast-description-font-size`,descriptionLineHeight:`--tf-toast-description-line-height`,iconSize:`--tf-toast-icon-size`,progressBarBg:`--tf-toast-progress-bar-bg`,progressBg:`--tf-toast-progress-bg`,progressHeight:`--tf-toast-progress-height`,closeBg:`--tf-toast-close-bg`,closeColor:`--tf-toast-close-color`,closeBorderColor:`--tf-toast-close-border-color`,closeSize:`--tf-toast-close-size`,closeIconSize:`--tf-toast-close-icon-size`,buttonBg:`--tf-toast-button-bg`,buttonColor:`--tf-toast-button-color`,buttonBorderColor:`--tf-toast-button-border-color`,createdAtColor:`--tf-toast-created-at-color`,createdAtBg:`--tf-toast-created-at-bg`,createdAtBorderColor:`--tf-toast-created-at-border-color`};function Z({toast:e,store:r,progressResetKey:i,duplicateKey:a,updateKey:o,onDismiss:s,bumpAnimationClass:c,clearAllAnimationClass:l,updateAnimationClass:u}){let d=(0,n.computed)(function(){let n=(0,t.isNumberFinite)(e.value.createdAt)?e.value.createdAt:Date.now();return{...r.getConfig(),...e.value,createdAt:n,id:e.value.id??`toast-${n}`,type:oe(e.value.type),title:e.value.title??``,description:e.value.description??``,progressBar:e.value.progressBar??!1,duration:e.value.duration??1/0}}),{accentClass:f,iconWrapperClass:p,closeWrapperClass:m,defaultIconComponent:h}=se(d),{role:g,ariaLive:_,hasCreatedAt:v,createdAtText:y,createdAtAriaLabel:b,titleAriaLabel:x,descriptionAriaLabel:S,toastAriaLabel:C}=ce(d),{duration:w,progressStyle:T,showProgressBar:E,progressKeyLocal:D}=le(d,i,a),{isBumped:O,isUpdated:k}=ue(a,o),{isHovered:A,pause:j,resume:M,handleMouseEnter:N,handleMouseLeave:P,handlePointerDown:ee,handlePointerUp:F}=de(d,r,w);function I(){if(s){s(d.value.id);return}r.dismiss(d.value.id)}let{isSwipeEnabled:L,swipeStyle:R,handlePointerDown:te,handlePointerMove:ne,handlePointerUp:re,handlePointerCancel:ie,consumeSuppressedClick:z}=fe(d,I),{handleClick:B,handleCloseClick:V}=pe(d,I,z),{hasButtons:H,buttons:U,buttonsPlacement:W,buttonsClasses:G,buttonsVarsStyle:K,handleButtonClick:q}=me(d,I),J=(0,n.computed)(function(){let e={},t=K.value;for(let n of Object.keys(t)){let r=t[n];r!=null&&(e[n]=r)}let n=d.value.css;if(!n)return e;if(n.accentColor){let t=n.accentColor;e[`--tf-toast-accent-color`]=t,e[`--tf-toast-color`]=t,e[`--tf-toast-title-color`]=t,e[`--tf-toast-description-color`]=t,e[`--tf-toast-progress-bar-bg`]=t}n.color&&(n.titleColor||(e[`--tf-toast-title-color`]=n.color),n.descriptionColor||(e[`--tf-toast-description-color`]=n.color));for(let[t,r]of Object.entries(ae)){let i=n[t];i!=null&&(e[r]=i)}return e}),Y=(0,n.computed)(function(){return d.value.showIcon!==!1});function X(e){ee(e),te(e)}function Z(e){ne(e)}function Q(e){re(e),F(e)}function $(e){ie(e),F(e)}let he=(0,n.computed)(function(){return H.value&&W.value===`left`}),ge=(0,n.computed)(function(){return H.value&&W.value===`right`}),_e=(0,n.computed)(function(){return H.value&&W.value===`top`}),ve=(0,n.computed)(function(){return H.value&&W.value===`bottom`}),ye=(0,n.computed)(function(){return _e.value||ve.value}),be=(0,n.computed)(function(){return v.value&&!H.value}),xe=(0,n.computed)(function(){return v.value&&H.value}),Se=(0,n.computed)(function(){return[`tf-toast`,f.value,O.value&&d.value.phase!==`leaving`&&d.value.phase!==`clear-all`&&c?.value,k.value&&d.value.phase!==`leaving`&&d.value.phase!==`clear-all`&&u?.value,d.value.phase===`clear-all`&&l?.value,A.value&&`tf-toast--paused`,L.value&&`tf-toast--swipe-enabled`]}),Ce=(0,n.computed)(function(){return{role:g.value,"aria-live":_.value,class:`tf-toast-wrapper`,style:R.value}}),we=(0,n.computed)(function(){return{class:Se.value,"aria-label":C.value||void 0,"data-align":d.value.alignment,style:J.value,onClick:B,onMouseenter:N,onMouseleave:P,onPointerdown:X,onPointermove:Z,onPointerup:Q,onPointercancel:$}}),Te=(0,n.computed)(function(){return{type:`button`,class:[`tf-toast-close`,m.value],"aria-label":`Close notification`,onClick:function(e){e.stopPropagation(),V()}}}),Ee=(0,n.computed)(function(){return{class:G.value}}),De=(0,n.computed)(function(){return{class:`tf-toast-progress-wrapper`,style:T.value}}),Oe=(0,n.computed)(function(){return{class:`tf-toast-progress`,"data-align":d.value.progressAlignment,style:T.value}}),ke=(0,n.computed)(function(){return{class:[`tf-toast-progress-bar`,`tf-toast-progress-bar--${d.value.type}`]}}),Ae=(0,n.computed)(function(){return{class:[`tf-toast-icon`,p.value],"aria-hidden":`true`}}),je=(0,n.computed)(function(){return{class:[`tf-toast-icon-svg`,d.value.type===`loading`&&`tf-toast-icon-spin`],"aria-hidden":!0}});function Me(e){return(0,n.mergeProps)(Ce.value,e??{})}function Ne(e){return(0,n.mergeProps)(we.value,e??{})}function Pe(e){return(0,n.mergeProps)(Te.value,e??{})}function Fe(e){return(0,n.mergeProps)(Ee.value,e??{})}function Ie(e,t){return(0,n.mergeProps)({type:`button`,class:[`tf-toast-button`,e.className],"aria-label":e.ariaLabel||void 0,onClick:function(t){t.stopPropagation(),q(e,t)},onPointerdown:function(e){e.stopPropagation()},onPointerup:function(e){e.stopPropagation()},onPointercancel:function(e){e.stopPropagation()}},t??{})}function Le(e){return(0,n.mergeProps)(De.value,e??{})}function Re(e){return(0,n.mergeProps)(Oe.value,e??{})}function ze(e){return(0,n.mergeProps)(ke.value,e??{})}return{toast:d,accentClass:f,iconWrapperClass:p,closeWrapperClass:m,defaultIconComponent:h,role:g,ariaLive:_,hasCreatedAt:v,createdAtText:y,createdAtAriaLabel:b,titleAriaLabel:x,descriptionAriaLabel:S,toastAriaLabel:C,duration:w,progressStyle:T,showProgressBar:E,progressKeyLocal:D,isBumped:O,isUpdated:k,isHovered:A,handleMouseEnter:N,handleMouseLeave:P,handlePointerDown:X,handlePointerMove:Z,handlePointerUp:Q,handlePointerCancel:$,isSwipeEnabled:L,swipeStyle:R,handleClick:B,handleCloseClick:V,dismissCurrent:I,pause:j,resume:M,hasButtons:H,buttons:U,buttonsPlacement:W,buttonsClasses:G,buttonsVarsStyle:K,handleButtonClick:q,toastStyle:J,showIconElement:Y,showMetaLeft:he,showMetaRight:ge,showMetaTop:_e,showMetaBottom:ve,hasOutsideButtons:ye,showInlineCreatedAt:be,showFloatingCreatedAt:xe,ui:(0,n.computed)(function(){return{wrapperProps:Ce.value,rootProps:we.value,closeProps:Te.value,getWrapperProps:Me,getRootProps:Ne,getCloseProps:Pe,getButtonProps:Ie,actions:{dismiss:I,pause:j,resume:M,onClick:B,onCloseClick:V,onButtonClick:q,onMouseEnter:N,onMouseLeave:P,onPointerDown:X,onPointerMove:Z,onPointerUp:Q,onPointerCancel:$},a11y:{role:g.value,ariaLive:_.value,titleLabel:x.value,descriptionLabel:S.value,toastLabel:C.value,createdAtLabel:b.value},state:{isHovered:A.value,isBumped:O.value,isUpdated:k.value,isSwipeEnabled:L.value},classes:{wrapper:`tf-toast-wrapper`,root:Se.value,accent:f.value,icon:p.value,close:m.value,buttons:G.value},styles:{wrapper:R.value,root:J.value,progress:T.value},icon:{show:Y.value,component:h.value,wrapperProps:Ae.value,componentProps:je.value},createdAt:{show:v.value,inline:be.value,floating:xe.value,formatted:y.value,ariaLabel:b.value},buttons:{items:U.value,has:H.value,placement:W.value,groupProps:Ee.value,getGroupProps:Fe},progress:{show:E.value,key:D.value,wrapperProps:De.value,trackProps:Oe.value,barProps:ke.value,getWrapperProps:Le,getTrackProps:Re,getBarProps:ze,componentProps:{key:D.value,type:d.value.type,progressAlignment:d.value.progressAlignment}},layout:{hasOutsideButtons:ye.value,showMetaLeft:he.value,showMetaRight:ge.value,showMetaTop:_e.value,showMetaBottom:ve.value}}})}}function oe(e){return typeof e==`string`&&t.VALID_TOAST_TYPES.has(e)?e:`default`}function se(e){return{accentClass:(0,n.computed)(function(){return e.value.theme?e.value.theme.startsWith(`tf-toast-accent--`)?e.value.theme:`tf-toast-accent--${e.value.theme}`:W[e.value.type].accent}),iconWrapperClass:(0,n.computed)(function(){return W[e.value.type].icon}),closeWrapperClass:(0,n.computed)(function(){return W[e.value.type].close}),defaultIconComponent:(0,n.computed)(function(){return W[e.value.type].component})}}function ce(e){let r=(0,n.computed)(function(){return G.has(e.value.type)?`alert`:`status`}),i=(0,n.computed)(function(){return G.has(e.value.type)?`assertive`:`polite`}),a=(0,n.computed)(function(){return!!(e.value.showCreatedAt&&(0,t.isNumberFinite)(e.value.createdAt))}),o=(0,n.computed)(function(){if(!a.value)return``;let n=e.value.createdAtFormatter;if(typeof n!=`function`)return(0,t.defaultCreatedAtFormatter)(e.value.createdAt);try{return n(e.value.createdAt)}catch(e){console.error(`[vue-toastflow] Something failed in createdAtFormatter`,e)}return(0,t.defaultCreatedAtFormatter)(e.value.createdAt)}),s=(0,n.computed)(function(){return o.value?`Sent at ${o.value}`:``}),c=(0,n.computed)(function(){return ge(e.value.title)}),l=(0,n.computed)(function(){return ge(e.value.description)});return{role:r,ariaLive:i,hasCreatedAt:a,createdAtText:o,createdAtAriaLabel:s,titleAriaLabel:c,descriptionAriaLabel:l,toastAriaLabel:(0,n.computed)(function(){let t=[];return c.value&&t.push(c.value),l.value&&t.push(l.value),a.value&&s.value&&t.push(s.value),t.length||t.push(`${e.value.type} notification`),t.join(`. `)})}}function le(e,r,i){let a=(0,n.computed)(function(){if((0,t.isNumberFinite)(e.value.duration))return e.value.duration}),o=(0,n.computed)(function(){return a.value?{"--tf-toast-progress-duration":`${a.value}ms`}:{}}),s=(0,n.computed)(function(){return e.value.progressBar&&!!a.value}),c=(0,n.ref)(0);return(0,n.watch)(()=>r?.value,function(e){e!=null&&(c.value+=1)}),(0,n.watch)(()=>i?.value,function(e){e!=null&&(c.value+=1)}),{duration:a,progressStyle:o,showProgressBar:s,progressKeyLocal:c}}function ue(e,t){let r=(0,n.ref)(!1),i=(0,n.ref)(!1);function a(){r.value=!1,requestAnimationFrame(function(){r.value=!0})}function o(){i.value=!1,requestAnimationFrame(function(){i.value=!0})}return(0,n.watch)(()=>e?.value,function(e){e!=null&&a()}),(0,n.watch)(()=>t?.value,function(e){e!=null&&o()}),{isBumped:r,isUpdated:i}}function de(e,t,r){let i=(0,n.ref)(!1),a=``;function o(){f()&&(a===`touch`||a===`pen`||u()&&p())}function s(){if(f()){if(a===`touch`||a===`pen`){a=``;return}u()&&m()}}function c(e){a=e.pointerType,u(e,!0)&&p()}function l(e){u(e,!0)&&m()}function u(t,n=!1){return!r.value||!e.value.pauseOnHover?!1:!(n&&t&&!d(t))}function d(e){return e.pointerType===`touch`||e.pointerType===`pen`}function f(){return typeof window>`u`||!window.matchMedia?!0:window.matchMedia(`(hover: hover), (any-hover: hover) and (any-pointer: fine)`).matches}function p(){i.value=!0,t.pause(e.value.id)}function m(){i.value=!1,t.resume(e.value.id)}return{isHovered:i,pause:p,resume:m,handleMouseEnter:o,handleMouseLeave:s,handlePointerDown:c,handlePointerUp:l}}function fe(e,t){let r=(0,n.computed)(function(){return!!e.value.swipeToDismiss}),i=(0,n.ref)(0),a=(0,n.ref)(1),o=(0,n.ref)(!1),s=(0,n.ref)(!1),c=(0,n.ref)(null),l=(0,n.ref)(0),u=(0,n.ref)(0),d=(0,n.ref)(0),f=(0,n.ref)(!1),p=(0,n.ref)(!1),m=(0,n.ref)(!1),h=null,g=(0,n.computed)(function(){return!r.value&&i.value===0&&a.value===1?{}:{transform:`translate3d(${i.value}px, 0, 0)`,opacity:a.value,transition:o.value?`none`:`transform ${Y}ms ease, opacity ${Y}ms ease`}});function _(){h&&=(clearTimeout(h),null)}function v(){c.value=null,f.value=!1,p.value=!1,m.value=!1,d.value=0}function y(){o.value=!1,!(i.value===0&&a.value===1)&&(i.value=0,a.value=1)}function b(e){return c.value!==null&&c.value===e.pointerId}function x(e){let t=e.currentTarget;if(t?.releasePointerCapture)try{t.releasePointerCapture(e.pointerId)}catch{}}function S(e){return!r.value||e.button!==void 0&&e.button!==0?!1:!Q(e.target)}function C(e){if(!S(e))return;_(),s.value=!1,o.value=!1,c.value=e.pointerId,l.value=e.clientX,u.value=e.clientY;let t=e.currentTarget;if(d.value=t?.getBoundingClientRect().width??0,t?.setPointerCapture)try{t.setPointerCapture(e.pointerId)}catch{}}function w(e){if(!b(e)||p.value)return;let t=e.clientX-l.value,n=e.clientY-u.value,r=Math.abs(t),s=Math.abs(n);if(!f.value){if(r<K&&s<K)return;if(t<=0||s>r){p.value=!0,y();return}f.value=!0}e.preventDefault(),o.value=!0,m.value=!0;let c=Math.max(0,t),h=d.value>0?d.value:1,g=Math.min(c/h,1);i.value=c,a.value=Math.max(1-g*.85,.15)}function T(e){if(!b(e))return;if(x(e),!f.value||p.value||!m.value){y(),v();return}let n=d.value>0?d.value:1,r=Math.max(n*q,J);i.value>=r?(o.value=!1,s.value=!0,i.value=n+24,a.value=0,h=setTimeout(function(){t(),h=null},X)):(i.value>K&&(s.value=!0),y()),v()}function E(e){b(e)&&(x(e),y(),v())}function D(){return s.value?(s.value=!1,!0):!1}return(0,n.watch)(r,function(e){e||(_(),y(),v())}),(0,n.onUnmounted)(function(){_()}),{isSwipeEnabled:r,swipeStyle:g,handlePointerDown:C,handlePointerMove:w,handlePointerUp:T,handlePointerCancel:E,consumeSuppressedClick:D}}function pe(e,t,n){function r(t){if(n&&n())return;let r=$(e.value);e.value.onClick&&e.value.onClick(r,t),e.value.closeOnClick&&i()}function i(){t()}return{handleClick:r,handleCloseClick:i}}function me(e,t){let r=(0,n.computed)(function(){return e.value.buttons?.buttons??[]}),i=(0,n.computed)(function(){return e.value.buttons?.layout??`row`}),a=(0,n.computed)(function(){let t=e.value.buttons?.alignment??`bottom-right`;return e.value.alignment===`right`?t.endsWith(`-left`)?t.replace(/-left$/,`-right`):t.endsWith(`-right`)?t.replace(/-right$/,`-left`):t:t}),o=(0,n.computed)(function(){return r.value.length>0}),s=(0,n.computed)(function(){return a.value.endsWith(`-left`)?`left`:`right`}),c=(0,n.computed)(function(){let e=a.value;return e.startsWith(`top-`)?`top`:e.startsWith(`bottom-`)?`bottom`:`center`}),l=(0,n.computed)(function(){if(i.value===`row`)return s.value;let e=c.value;return e===`top`?`top`:e===`bottom`?`bottom`:s.value}),u=(0,n.computed)(function(){return l.value===`left`||l.value===`right`}),d=(0,n.computed)(function(){return s.value===`left`?`tf-toast-actions--start`:`tf-toast-actions--end`}),f=(0,n.computed)(function(){return{"--tf-toast-buttons-gap":e.value.buttons?.gap,"--tf-toast-buttons-content-gap":e.value.buttons?.contentGap}}),p=(0,n.computed)(function(){if(!u.value)return;let e=c.value;if(e===`bottom`)return`tf-toast-buttons--bottom`;if(e===`center`)return`tf-toast-buttons--center`}),m=(0,n.computed)(function(){return[`tf-toast-actions`,d.value,p.value]});function h(n,r){let i=$(e.value);n.dismissOnClick&&t(),n.onClick&&n.onClick(i,r),n.dismissAfterClick&&t()}return{hasButtons:o,buttons:r,buttonsPlacement:l,buttonsClasses:m,buttonsVarsStyle:f,handleButtonClick:h}}function Q(e){return e instanceof Element?!!e.closest(`button, a, input, textarea, select, option, [role='button'], [contenteditable='true']`):!1}function $(e){return{id:e.id,position:e.position,type:e.type,title:e.title,description:e.description,createdAt:e.createdAt}}function he(e){return e.replace(/\s+/g,` `).trim()}function ge(e){if(!e)return``;let t=he(e.replace(/<[^>]*>/g,` `));if(typeof window>`u`||!window.document)return t;try{let t=window.document.createElement(`div`);return t.innerHTML=e,he(t.textContent??``)}catch{return t}}var _e={class:`tf-toast-surface`},ve={key:0,class:`tf-toast-meta-row tf-toast-meta-row--top`},ye={key:0,class:`tf-toast-meta tf-toast-meta--left`},be={class:`tf-toast-main-content`},xe={class:`tf-toast-text`},Se=[`aria-label`],Ce=[`aria-label`,`innerHTML`],we=[`aria-label`],Te=[`aria-label`,`innerHTML`],Ee={key:0,class:`tf-toast-created-at`},De=[`aria-label`],Oe={key:1,class:`tf-toast-meta tf-toast-meta--right`},ke={key:1,class:`tf-toast-meta-row tf-toast-meta-row--bottom`},Ae={key:0,class:`tf-toast-floating-bar`},je={key:0,class:`tf-toast-created-at-float`},Me=[`aria-label`],Ne=(0,n.defineComponent)({__name:`Toast`,props:{toast:{},progressResetKey:{},duplicateKey:{},updateKey:{},bumpAnimationClass:{},clearAllAnimationClass:{},updateAnimationClass:{}},emits:[`dismiss`],setup(e,{emit:t}){let{toast:i,progressResetKey:a,duplicateKey:o,updateKey:c,bumpAnimationClass:l,clearAllAnimationClass:u,updateAnimationClass:d}=(0,n.toRefs)(e),f=t,p=(0,n.inject)(r,null)??s();function m(e){f(`dismiss`,e)}let{toast:h,createdAtText:g,createdAtAriaLabel:_,titleAriaLabel:b,descriptionAriaLabel:x,buttons:S,buttonsClasses:C,handleButtonClick:T,showMetaTop:E,showMetaLeft:D,showMetaRight:O,showMetaBottom:k,hasOutsideButtons:A,showInlineCreatedAt:j,showFloatingCreatedAt:M,ui:N}=Z({toast:i,store:p,progressResetKey:a,duplicateKey:o,updateKey:c,onDismiss:m,bumpAnimationClass:l,clearAllAnimationClass:u,updateAnimationClass:d});return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(N).wrapperProps)),[(0,n.createElementVNode)(`div`,(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(N).rootProps)),[(0,n.createElementVNode)(`div`,_e,[(0,n.unref)(E)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ve,[(0,n.createVNode)(v,{buttons:(0,n.unref)(S),classes:(0,n.unref)(C),"on-button-click":(0,n.unref)(T)},null,8,[`buttons`,`classes`,`on-button-click`])])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,{class:(0,n.normalizeClass)([`tf-toast-main`,[(0,n.unref)(A)&&`tf-toast-main--full`,(0,n.unref)(D)&&`tf-toast-main--content-end`]])},[(0,n.unref)(D)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ye,[(0,n.createVNode)(v,{buttons:(0,n.unref)(S),classes:(0,n.unref)(C),"on-button-click":(0,n.unref)(T)},null,8,[`buttons`,`classes`,`on-button-click`])])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,be,[(0,n.unref)(N).icon.show?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.normalizeProps)((0,n.mergeProps)({key:0},(0,n.unref)(N).icon.wrapperProps)),[(0,n.renderSlot)(e.$slots,`icon`,{toast:(0,n.unref)(h)},()=>[((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)((0,n.unref)(N).icon.component),(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(N).icon.componentProps)),null,16))])],16)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,{class:(0,n.normalizeClass)([`tf-toast-body`,[(0,n.unref)(j)&&`tf-toast-body--has-created-at`]])},[(0,n.createElementVNode)(`div`,xe,[(0,n.unref)(h).title&&!(0,n.unref)(h).supportHtml?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,{key:0,"aria-label":(0,n.unref)(b)||void 0,class:`tf-toast-title`},(0,n.toDisplayString)((0,n.unref)(h).title),9,Se)):(0,n.unref)(h).title&&(0,n.unref)(h).supportHtml?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,{key:1,class:`tf-toast-title`,"aria-label":(0,n.unref)(b)||void 0,innerHTML:(0,n.unref)(h).title},null,8,Ce)):(0,n.createCommentVNode)(``,!0),(0,n.unref)(h).description&&!(0,n.unref)(h).supportHtml?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,{key:2,"aria-label":(0,n.unref)(x)||void 0,class:`tf-toast-description`},(0,n.toDisplayString)((0,n.unref)(h).description),9,we)):(0,n.unref)(h).description&&(0,n.unref)(h).supportHtml?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,{key:3,class:`tf-toast-description`,"aria-label":(0,n.unref)(x)||void 0,innerHTML:(0,n.unref)(h).description},null,8,Te)):(0,n.createCommentVNode)(``,!0)]),(0,n.renderSlot)(e.$slots,`default`,{toast:(0,n.unref)(h)}),(0,n.unref)(j)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,Ee,[(0,n.renderSlot)(e.$slots,`created-at`,{toast:(0,n.unref)(h),formatted:(0,n.unref)(g)},()=>[(0,n.createElementVNode)(`span`,{"aria-label":(0,n.unref)(_)||void 0},(0,n.toDisplayString)((0,n.unref)(g)),9,De)])])):(0,n.createCommentVNode)(``,!0)],2)]),(0,n.unref)(O)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,Oe,[(0,n.createVNode)(v,{buttons:(0,n.unref)(S),classes:(0,n.unref)(C),"on-button-click":(0,n.unref)(T)},null,8,[`buttons`,`classes`,`on-button-click`])])):(0,n.createCommentVNode)(``,!0)],2),(0,n.unref)(k)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ke,[(0,n.createVNode)(v,{buttons:(0,n.unref)(S),classes:(0,n.unref)(C),"on-button-click":(0,n.unref)(T)},null,8,[`buttons`,`classes`,`on-button-click`])])):(0,n.createCommentVNode)(``,!0),(0,n.unref)(N).progress.show?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.normalizeProps)((0,n.mergeProps)({key:2},(0,n.unref)(N).progress.wrapperProps)),[(0,n.renderSlot)(e.$slots,`progress`,{toast:(0,n.unref)(h)},()=>[((0,n.openBlock)(),(0,n.createBlock)(y,{key:(0,n.unref)(N).progress.key,"track-props":(0,n.unref)(N).progress.trackProps,"bar-props":(0,n.unref)(N).progress.barProps},null,8,[`track-props`,`bar-props`]))])],16)):(0,n.createCommentVNode)(``,!0)]),(0,n.unref)(M)||(0,n.unref)(h).closeButton?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,Ae,[(0,n.unref)(M)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,je,[(0,n.renderSlot)(e.$slots,`created-at`,{toast:(0,n.unref)(h),formatted:(0,n.unref)(g)},()=>[(0,n.createElementVNode)(`span`,{"aria-label":(0,n.unref)(_)||void 0},(0,n.toDisplayString)((0,n.unref)(g)),9,Me)])])):(0,n.createCommentVNode)(``,!0),(0,n.unref)(h).closeButton?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,(0,n.normalizeProps)((0,n.mergeProps)({key:1},(0,n.unref)(N).closeProps)),[(0,n.renderSlot)(e.$slots,`close-icon`,{toast:(0,n.unref)(h)},()=>[(0,n.createVNode)(w,{class:`tf-toast-close-icon`,"aria-hidden":`true`})])],16)):(0,n.createCommentVNode)(``,!0)])):(0,n.createCommentVNode)(``,!0)],16)],16))}}),Pe=(0,n.defineComponent)({__name:`ToastSlotProvider`,props:{toast:{},progressResetKey:{},duplicateKey:{},updateKey:{},bumpAnimationClass:{},clearAllAnimationClass:{},updateAnimationClass:{}},setup(e){let{toast:t,progressResetKey:i,duplicateKey:a,updateKey:o,bumpAnimationClass:c,clearAllAnimationClass:l,updateAnimationClass:u}=(0,n.toRefs)(e),d=(0,n.inject)(r,null)??s();function f(e){d.dismiss(e)}let{toast:p,ui:m}=Z({toast:t,store:d,progressResetKey:i,duplicateKey:a,updateKey:o,onDismiss:f,bumpAnimationClass:c,clearAllAnimationClass:l,updateAnimationClass:u});return(e,t)=>(0,n.renderSlot)(e.$slots,`default`,{toast:(0,n.unref)(p),progressResetKey:(0,n.unref)(i),duplicateKey:(0,n.unref)(a),updateKey:(0,n.unref)(o),bumpAnimationClass:(0,n.unref)(c),clearAllAnimationClass:(0,n.unref)(l),updateAnimationClass:(0,n.unref)(u),dismiss:f,ui:(0,n.unref)(m)})}}),Fe=[`data-position`],Ie=260,Le=220,Re=(0,n.defineComponent)({__name:`ToastContainer`,setup(e){let t=[`top-left`,`top-center`,`top-right`,`bottom-left`,`bottom-center`,`bottom-right`],i=(0,n.inject)(r,null)??s(),a=(0,n.ref)([]),o=(0,n.ref)({enter:Ie,leave:Le}),c=(0,n.ref)({}),l=(0,n.ref)({}),u=(0,n.ref)({}),d=null,f=null;(0,n.onMounted)(function(){d=i.subscribe(function(e){a.value=e.toasts}),f=i.subscribeEvents(function(e){e.kind===`timer-reset`&&(c.value[e.id]=Math.random()),e.kind===`duplicate`&&(l.value[e.id]=Math.random()),e.kind===`update`&&(u.value[e.id]=Math.random())}),D()}),(0,n.onUnmounted)(function(){d&&d(),f&&f()});function p(e){return c.value[e]??0}function m(e){return l.value[e]??0}function h(e){return u.value[e]??0}let g=(0,n.computed)(function(){let e={"top-left":[],"top-center":[],"top-right":[],"bottom-left":[],"bottom-center":[],"bottom-right":[]};for(let t of a.value)e[t.position].push(t);return e}),_=i.getConfig(),v=(0,n.ref)({"top-left":{..._,position:`top-left`},"top-center":{..._,position:`top-center`},"top-right":{..._,position:`top-right`},"bottom-left":{..._,position:`bottom-left`},"bottom-center":{..._,position:`bottom-center`},"bottom-right":{..._,position:`bottom-right`}}),y=(0,n.computed)(function(){return a.value.length?Math.max(...a.value.map(e=>e.zIndex)):_.zIndex});function b(e){return v.value[e]??{..._,position:e}}function x(e){let{offset:t,width:n}=b(e),r={width:n,maxWidth:`calc(100vw - (${t}) - (${t}))`};return e.startsWith(`top-`)&&(r.top=t),e.startsWith(`bottom-`)&&(r.bottom=t),e.endsWith(`left`)?r.left=t:e.endsWith(`right`)?r.right=t:e.endsWith(`center`)&&(r.left=`50%`,r.transform=`translateX(-50%)`),r}function S(e){return e.endsWith(`left`)?`tf-toast-stack--left`:e.endsWith(`center`)?`tf-toast-stack--center`:`tf-toast-stack--right`}function C(e){return e.startsWith(`bottom-`)?`tf-toast-stack-inner--bottom`:null}function w(e){return b(e).overflowScroll&&e.startsWith(`top-`)}function T(e){i.dismiss(e)}function E(e,t){let n=e.trim().toLowerCase();if(!n)return t;if(n.endsWith(`ms`)){let e=Number(n.slice(0,-2));return Number.isFinite(e)?e:t}if(n.endsWith(`s`)){let e=Number(n.slice(0,-1));return Number.isFinite(e)?e*1e3:t}let r=Number(n);return Number.isFinite(r)?r:t}function D(){if(typeof window>`u`)return;let e=getComputedStyle(document.documentElement);o.value={enter:E(e.getPropertyValue(`--tf-toast-animation-in-duration`),Ie),leave:E(e.getPropertyValue(`--tf-toast-animation-out-duration`),Le)}}let O=new WeakMap;(0,n.onBeforeUpdate)(function(){let e=document.querySelectorAll(`.tf-toast-item`);for(let t=0;t<e.length;t++){let n=e[t],r=n.parentElement;r&&O.set(n,{top:n.offsetTop,height:n.offsetHeight,parentHeight:r.clientHeight,parentWidth:r.clientWidth})}});function k(e){let t=e,n=t.parentElement;if(!n||n.children.length<=1)return;let r=O.get(t),i=(t.dataset.position??``).startsWith(`bottom-`)||n.classList.contains(`tf-toast-stack-inner--bottom`),a=r?.top??t.offsetTop,o=r?.height??t.offsetHeight,s=r?.parentHeight??n.clientHeight,c=r?.parentWidth??n.clientWidth;if(t.style.position=`absolute`,t.style.zIndex=`0`,t.style.width=`${c}px`,t.style.left=`0`,t.style.right=`0`,i){let e=s-(a+o);t.style.bottom=`${e}px`,t.style.top=`auto`}else t.style.top=`${a}px`,t.style.bottom=`auto`}function A(e){let t=e;t.style.position=``,t.style.zIndex=``,t.style.width=``,t.style.left=``,t.style.right=``,t.style.top=``,t.style.bottom=``}(0,n.watch)(a,function(e){let t=new Set(e.map(function(e){return e.id}));for(let e of Object.keys(c.value))t.has(e)||delete c.value[e];for(let e of Object.keys(l.value))t.has(e)||delete l.value[e];for(let e of Object.keys(u.value))t.has(e)||delete u.value[e]},{deep:!1});function j(e){return{..._.animation,...e.animation}}return(0,n.watch)(g,function(e){let t={...v.value};Object.keys(e).forEach(function(n){let r=e[n][0];r&&(t[n]={..._,...r,position:n,animation:{..._.animation,...r.animation}})}),v.value=t},{deep:!1}),(e,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:`tf-toast-root`,style:(0,n.normalizeStyle)({zIndex:y.value})},[((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t,t=>(0,n.createElementVNode)(`div`,{key:t,class:(0,n.normalizeClass)([`tf-toast-stack`,S(t)]),style:(0,n.normalizeStyle)(x(t))},[(0,n.createVNode)(n.TransitionGroup,{appear:``,duration:o.value,name:b(t).animation.name,onBeforeLeave:k,onAfterLeave:A,tag:`div`,class:(0,n.normalizeClass)([`tf-toast-stack-inner`,C(t),w(t)&&`tf-toast-stack-inner--scroll`]),style:(0,n.normalizeStyle)({gap:b(t).gap})},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(g.value[t],(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:t.id,class:`tf-toast-item`,style:(0,n.normalizeStyle)({width:t.width,maxWidth:`100%`}),"data-position":t.position},[(0,n.createElementVNode)(`div`,{class:`tf-toast-motion`,style:(0,n.normalizeStyle)({"--tf-toast-index":r})},[e.$slots.default?((0,n.openBlock)(),(0,n.createBlock)(Pe,{key:0,toast:t,progressResetKey:p(t.id),duplicateKey:m(t.id),updateKey:h(t.id),bumpAnimationClass:j(t).bump,clearAllAnimationClass:j(t).clearAll,updateAnimationClass:j(t).update},{default:(0,n.withCtx)(t=>[(0,n.renderSlot)(e.$slots,`default`,(0,n.mergeProps)({ref_for:!0},t))]),_:3},8,[`toast`,`progressResetKey`,`duplicateKey`,`updateKey`,`bumpAnimationClass`,`clearAllAnimationClass`,`updateAnimationClass`])):((0,n.openBlock)(),(0,n.createBlock)(Ne,{key:1,toast:t,progressResetKey:p(t.id),duplicateKey:m(t.id),updateKey:h(t.id),bumpAnimationClass:j(t).bump,clearAllAnimationClass:j(t).clearAll,updateAnimationClass:j(t).update,onDismiss:T},null,8,[`toast`,`progressResetKey`,`duplicateKey`,`updateKey`,`bumpAnimationClass`,`clearAllAnimationClass`,`updateAnimationClass`]))],4)],12,Fe))),128))]),_:2},1032,[`duration`,`name`,`class`,`style`])],6)),64))],4))}});e.ArrowPath=O,e.Bell=M,e.CheckCircle=F,e.InfoCircle=te,e.QuestionMarkCircle=z,e.Toast=Ne,e.ToastContainer=Re,e.ToastProgress=y,e.XCircle=U,e.XMark=w,e.createToastflow=m,e.getToastStore=s,e.injectToastflowStyles=p,e.setToastStore=o,e.toast=l,Object.keys(t).forEach(function(n){n!==`default`&&!Object.prototype.hasOwnProperty.call(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})});

package/dist/vue-toastflow.css

@@ -248,6 +248,8 @@
 .tf-toast-motion {
   width: 100%;
   transform-origin: center;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
 }
 
 /* MOVE */
@@ -295,6 +297,25 @@
   transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);
 }
 
+@media (max-width: 640px) {
+  .tf-toast-item[data-position^="top-"] {
+    --tf-toast-motion-offset: -18px;
+  }
+
+  .tf-toast-item[data-position^="bottom-"] {
+    --tf-toast-motion-offset: 18px;
+  }
+
+  .Toastflow__animation-enter-from > .tf-toast-motion,
+  .Toastflow__animation-appear-from > .tf-toast-motion {
+    transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.98);
+  }
+
+  .Toastflow__animation-leave-to > .tf-toast-motion {
+    transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.98);
+  }
+}
+
 /* CLEAR ALL */
 .Toastflow__animation-clearAll .tf-toast-motion {
   animation: Toastflow__clearAll-kf var(--tf-toast-animation-in-duration)

package/package.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/adrianjanocko/toastflow.git",
     "directory": "packages/vue"
   },
-  "version": "1.2.0-beta.3",
+  "version": "1.2.0-beta.4",
   "main": "./dist/toastflow.umd.js",
   "module": "./dist/toastflow.es.js",
   "types": "./dist/src/index.d.ts",

package/src/styles.css

@@ -248,6 +248,8 @@
 .tf-toast-motion {
   width: 100%;
   transform-origin: center;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
 }
 
 /* MOVE */
@@ -295,6 +297,25 @@
   transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);
 }
 
+@media (max-width: 640px) {
+  .tf-toast-item[data-position^="top-"] {
+    --tf-toast-motion-offset: -18px;
+  }
+
+  .tf-toast-item[data-position^="bottom-"] {
+    --tf-toast-motion-offset: 18px;
+  }
+
+  .Toastflow__animation-enter-from > .tf-toast-motion,
+  .Toastflow__animation-appear-from > .tf-toast-motion {
+    transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.98);
+  }
+
+  .Toastflow__animation-leave-to > .tf-toast-motion {
+    transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.98);
+  }
+}
+
 /* CLEAR ALL */
 .Toastflow__animation-clearAll .tf-toast-motion {
   animation: Toastflow__clearAll-kf var(--tf-toast-animation-in-duration)

package/src/toast-ui.ts

@@ -493,6 +493,7 @@ export function useToastUI({
     return {
       class: "tf-toast-progress",
       "data-align": toast.value.progressAlignment,
+      style: progressStyle.value,
     };
   });
 
@@ -960,6 +961,9 @@ function useHoverPause(
   let lastPointerType = "";
 
   function handleMouseEnter() {
+    if (!canUseMouseHover()) {
+      return;
+    }
     if (lastPointerType === "touch" || lastPointerType === "pen") {
       return;
     }
@@ -970,6 +974,9 @@ function useHoverPause(
   }
 
   function handleMouseLeave() {
+    if (!canUseMouseHover()) {
+      return;
+    }
     if (lastPointerType === "touch" || lastPointerType === "pen") {
       lastPointerType = "";
       return;
@@ -1009,6 +1016,16 @@ function useHoverPause(
     return event.pointerType === "touch" || event.pointerType === "pen";
   }
 
+  function canUseMouseHover() {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return true;
+    }
+
+    return window.matchMedia(
+      "(hover: hover), (any-hover: hover) and (any-pointer: fine)",
+    ).matches;
+  }
+
   function pause() {
     isHovered.value = true;
     store.pause(toast.value.id);