@enigmax/primitives 0.21.0 → 0.23.0

package/dist/chunk-WPTBURIC.js

@@ -0,0 +1,1627 @@
+import { defaultQueue } from './chunk-QYMUIW5I.js';
+import React3, { forwardRef, isValidElement, useLayoutEffect, useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/react/toast/styles.ts
+var TOAST_STYLES = `:where(html[dir="ltr"]),
+:where([data-toastcmp-toaster][dir="ltr"]) {
+    --toast-icon-margin-start: -3px;
+    --toast-icon-margin-end: 4px;
+    --toast-svg-margin-start: -1px;
+    --toast-svg-margin-end: 0px;
+    --toast-button-margin-start: auto;
+    --toast-button-margin-end: 0;
+    --toast-close-button-start: 0;
+    --toast-close-button-end: unset;
+    --toast-close-button-transform: translate(-35%, -35%);
+}
+
+:where(html[dir="rtl"]),
+:where([data-toastcmp-toaster][dir="rtl"]) {
+    --toast-icon-margin-start: 4px;
+    --toast-icon-margin-end: -3px;
+    --toast-svg-margin-start: 0px;
+    --toast-svg-margin-end: -1px;
+    --toast-button-margin-start: 0;
+    --toast-button-margin-end: auto;
+    --toast-close-button-start: unset;
+    --toast-close-button-end: 0;
+    --toast-close-button-transform: translate(35%, -35%);
+}
+
+:where([data-toastcmp-toaster]) {
+    position: fixed;
+    width: var(--width);
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
+        Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    --gray1: hsl(0, 0%, 99%);
+    --gray2: hsl(0, 0%, 97.3%);
+    --gray3: hsl(0, 0%, 95.1%);
+    --gray4: hsl(0, 0%, 93%);
+    --gray5: hsl(0, 0%, 90.9%);
+    --gray6: hsl(0, 0%, 88.7%);
+    --gray7: hsl(0, 0%, 85.8%);
+    --gray8: hsl(0, 0%, 78%);
+    --gray9: hsl(0, 0%, 56.1%);
+    --gray10: hsl(0, 0%, 52.3%);
+    --gray11: hsl(0, 0%, 43.5%);
+    --gray12: hsl(0, 0%, 9%);
+    --border-radius: 8px;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    outline: none;
+    z-index: 999999999;
+    transition: transform 400ms ease;
+}
+
+:where([data-toastcmp-toaster][data-lifted="true"]) {
+    transform: translateY(-10px);
+}
+
+@media (hover: none) and (pointer: coarse) {
+    :where([data-toastcmp-toaster][data-lifted="true"]) {
+        transform: none;
+    }
+}
+
+:where([data-toastcmp-toaster][data-x-position="right"]) {
+    right: var(--offset-right);
+}
+
+:where([data-toastcmp-toaster][data-x-position="left"]) {
+    left: var(--offset-left);
+}
+
+:where([data-toastcmp-toaster][data-x-position="center"]) {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+:where([data-toastcmp-toaster][data-y-position="top"]) {
+    top: var(--offset-top);
+}
+
+:where([data-toastcmp-toaster][data-y-position="bottom"]) {
+    bottom: var(--offset-bottom);
+}
+
+:where([data-toastcmp-toast]) {
+    --y: translateY(100%);
+    --lift-amount: calc(var(--lift) * var(--gap));
+    z-index: var(--z-index);
+    position: absolute;
+    opacity: 0;
+    transform: var(--y);
+    filter: blur(0);
+    /* https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not */
+    touch-action: none;
+    transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
+    box-sizing: border-box;
+    outline: none;
+    overflow-wrap: anywhere;
+}
+
+:where([data-toastcmp-toast][data-styled="true"]) {
+    padding: 16px;
+    background: var(--normal-bg);
+    border: 1px solid var(--normal-border);
+    color: var(--normal-text);
+    border-radius: var(--border-radius);
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+    width: var(--width);
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+:where([data-toastcmp-toast]:focus-visible) {
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+:where([data-toastcmp-toast][data-y-position="top"]) {
+    top: 0;
+    --y: translateY(-100%);
+    --lift: 1;
+    --lift-amount: calc(1 * var(--gap));
+}
+
+:where([data-toastcmp-toast][data-y-position="bottom"]) {
+    bottom: 0;
+    --y: translateY(100%);
+    --lift: -1;
+    --lift-amount: calc(var(--lift) * var(--gap));
+}
+
+:where([data-toastcmp-toast]) :where([data-description]) {
+    font-weight: 400;
+    line-height: 1.4;
+    color: inherit;
+}
+
+:where([data-toastcmp-toast]) :where([data-title]) {
+    font-weight: 500;
+    line-height: 1.5;
+    color: inherit;
+}
+
+:where([data-toastcmp-toast]) :where([data-icon]) {
+    display: flex;
+    height: 16px;
+    width: 16px;
+    position: relative;
+    justify-content: flex-start;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: var(--toast-icon-margin-start);
+    margin-right: var(--toast-icon-margin-end);
+}
+
+:where([data-toastcmp-toast][data-promise="true"]) :where([data-icon])>svg {
+    opacity: 0;
+    transform: scale(0.8);
+    transform-origin: center;
+    animation: toastcmp-fade-in 300ms ease forwards;
+}
+
+:where([data-toastcmp-toast]) :where([data-icon])>* {
+    flex-shrink: 0;
+}
+
+:where([data-toastcmp-toast]) :where([data-icon]) svg {
+    margin-left: var(--toast-svg-margin-start);
+    margin-right: var(--toast-svg-margin-end);
+}
+
+:where([data-toastcmp-toast]) :where([data-content]) {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+[data-toastcmp-toast][data-styled="true"] [data-button] {
+    border-radius: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    height: 24px;
+    font-size: 12px;
+    color: var(--normal-bg);
+    background: var(--normal-text);
+    margin-left: var(--toast-button-margin-start);
+    margin-right: var(--toast-button-margin-end);
+    border: none;
+    cursor: pointer;
+    outline: none;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    transition: opacity 400ms, box-shadow 200ms;
+}
+
+:where([data-toastcmp-toast]) :where([data-button]):focus-visible {
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
+}
+
+:where([data-toastcmp-toast]) :where([data-button]):first-of-type {
+    margin-left: var(--toast-button-margin-start);
+    margin-right: var(--toast-button-margin-end);
+}
+
+:where([data-toastcmp-toast]) :where([data-cancel]) {
+    color: var(--normal-text);
+    background: rgba(0, 0, 0, 0.08);
+}
+
+:where([data-toastcmp-toast][data-theme="dark"]) :where([data-cancel]) {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+:where([data-toastcmp-toast]) :where([data-close-button]) {
+    position: absolute;
+    left: var(--toast-close-button-start);
+    right: var(--toast-close-button-end);
+    top: 0;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    color: var(--gray12);
+    border: 1px solid var(--gray4);
+    transform: var(--toast-close-button-transform);
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1;
+    transition: opacity 100ms, background 200ms, border-color 200ms;
+}
+
+[data-toastcmp-toast] [data-close-button] {
+    background: var(--gray1);
+}
+
+:where([data-toastcmp-toast]) :where([data-close-button]):focus-visible {
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+:where([data-toastcmp-toast]) :where([data-disabled="true"]) {
+    cursor: not-allowed;
+}
+
+:where([data-toastcmp-toast]):hover :where([data-close-button]):hover {
+    background: var(--gray2);
+    border-color: var(--gray5);
+}
+
+/* Leave a ghost div to avoid setting hover to false when swiping out */
+:where([data-toastcmp-toast][data-swiping="true"])::before {
+    content: "";
+    position: absolute;
+    left: -50%;
+    right: -50%;
+    height: 100%;
+    z-index: -1;
+}
+
+:where([data-toastcmp-toast][data-y-position="top"][data-swiping="true"])::before {
+    /* y 50% needed to distribute height additional height evenly */
+    bottom: 50%;
+    transform: scaleY(3) translateY(50%);
+}
+
+:where([data-toastcmp-toast][data-y-position="bottom"][data-swiping="true"])::before {
+    /* y -50% needed to distribute height additional height evenly */
+    top: 50%;
+    transform: scaleY(3) translateY(-50%);
+}
+
+/* Leave a ghost div to avoid setting hover to false when transitioning out */
+:where([data-toastcmp-toast][data-swiping="false"][data-removed="true"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: scaleY(2);
+}
+
+/* Needed to avoid setting hover to false when inbetween toasts */
+:where([data-toastcmp-toast])::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    height: calc(var(--gap) + 1px);
+    bottom: 100%;
+    width: 100%;
+}
+
+:where([data-toastcmp-toast][data-mounted="true"]) {
+    --y: translateY(0);
+    opacity: 1;
+}
+
+:where([data-toastcmp-toast][data-expanded="false"][data-front="false"]) {
+    --scale: var(--toasts-before) * 0.05 + 1;
+    --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+    height: var(--front-toast-height);
+}
+
+:where([data-toastcmp-toast])>* {
+    transition: opacity 400ms;
+}
+
+:where([data-toastcmp-toast][data-expanded="false"][data-front="false"][data-styled="true"])>* {
+    opacity: 0;
+}
+
+:where([data-toastcmp-toast][data-visible="false"]) {
+    opacity: 0;
+    pointer-events: none;
+}
+
+:where([data-toastcmp-toast][data-mounted="true"][data-expanded="true"]) {
+    --y: translateY(calc(var(--lift) * var(--offset)));
+    height: var(--initial-height);
+}
+
+:where([data-toastcmp-toast][data-removed="true"][data-front="true"][data-swipe-out="false"]) {
+    --y: translateY(calc(var(--lift) * -100%));
+    opacity: 0;
+}
+
+:where([data-toastcmp-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"]) {
+    --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
+    opacity: 0;
+}
+
+:where([data-toastcmp-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"]) {
+    --y: translateY(40%);
+    opacity: 0;
+    transition: transform 500ms, opacity 200ms;
+}
+
+/* Bump up the height to make sure hover state doesn"t get set to false */
+:where([data-toastcmp-toast][data-removed="true"][data-front="false"])::before {
+    height: calc(var(--initial-height) + 20%);
+}
+
+[data-toastcmp-toast][data-swiping="true"] {
+    transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
+    transition: none;
+}
+
+[data-toastcmp-toast][data-swiped="true"] {
+    user-select: none;
+}
+
+[data-toastcmp-toast][data-swipe-out="true"][data-y-position="bottom"],
+[data-toastcmp-toast][data-swipe-out="true"][data-y-position="top"] {
+    animation-duration: 200ms;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+}
+
+[data-toastcmp-toast][data-swipe-out="true"][data-swipe-direction="left"] {
+    animation-name: swipe-out-left;
+}
+
+[data-toastcmp-toast][data-swipe-out="true"][data-swipe-direction="right"] {
+    animation-name: swipe-out-right;
+}
+
+[data-toastcmp-toast][data-swipe-out="true"][data-swipe-direction="up"] {
+    animation-name: swipe-out-up;
+}
+
+[data-toastcmp-toast][data-swipe-out="true"][data-swipe-direction="down"] {
+    animation-name: swipe-out-down;
+}
+
+@keyframes swipe-out-left {
+    from {
+        transform: var(--y) translateX(var(--swipe-amount-x));
+        opacity: 1;
+    }
+
+    to {
+        transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
+        opacity: 0;
+    }
+}
+
+@keyframes swipe-out-right {
+    from {
+        transform: var(--y) translateX(var(--swipe-amount-x));
+        opacity: 1;
+    }
+
+    to {
+        transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
+        opacity: 0;
+    }
+}
+
+@keyframes swipe-out-up {
+    from {
+        transform: var(--y) translateY(var(--swipe-amount-y));
+        opacity: 1;
+    }
+
+    to {
+        transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
+        opacity: 0;
+    }
+}
+
+@keyframes swipe-out-down {
+    from {
+        transform: var(--y) translateY(var(--swipe-amount-y));
+        opacity: 1;
+    }
+
+    to {
+        transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
+        opacity: 0;
+    }
+}
+
+@media (max-width: 600px) {
+    [data-toastcmp-toaster] {
+        position: fixed;
+        right: var(--mobile-offset-right);
+        left: var(--mobile-offset-left);
+        width: 100%;
+    }
+
+    [data-toastcmp-toaster][dir="rtl"] {
+        left: calc(var(--mobile-offset-left) * -1);
+    }
+
+    [data-toastcmp-toaster] [data-toastcmp-toast] {
+        left: 0;
+        right: 0;
+        width: calc(100% - var(--mobile-offset-left) * 2);
+    }
+
+    [data-toastcmp-toaster][data-x-position="left"] {
+        left: var(--mobile-offset-left);
+    }
+
+    [data-toastcmp-toaster][data-y-position="bottom"] {
+        bottom: var(--mobile-offset-bottom);
+    }
+
+    [data-toastcmp-toaster][data-y-position="top"] {
+        top: var(--mobile-offset-top);
+    }
+
+    [data-toastcmp-toaster][data-x-position="center"] {
+        left: var(--mobile-offset-left);
+        right: var(--mobile-offset-right);
+        transform: none;
+    }
+}
+
+[data-toastcmp-toaster][data-theme="light"] {
+    --normal-bg: #fff;
+    --normal-border: var(--gray4);
+    --normal-text: var(--gray12);
+
+    --success-bg: hsl(143, 85%, 96%);
+    --success-border: hsl(145, 92%, 91%);
+    --success-text: hsl(140, 100%, 27%);
+
+    --info-bg: hsl(208, 100%, 97%);
+    --info-border: hsl(221, 91%, 91%);
+    --info-text: hsl(210, 92%, 45%);
+
+    --warning-bg: hsl(49, 100%, 97%);
+    --warning-border: hsl(49, 91%, 91%);
+    --warning-text: hsl(31, 92%, 45%);
+
+    --error-bg: hsl(359, 100%, 97%);
+    --error-border: hsl(359, 100%, 94%);
+    --error-text: hsl(360, 100%, 45%);
+}
+
+[data-toastcmp-toaster][data-theme="light"] [data-toastcmp-toast][data-invert="true"] {
+    --normal-bg: #000;
+    --normal-border: hsl(0, 0%, 20%);
+    --normal-text: var(--gray1);
+}
+
+[data-toastcmp-toaster][data-theme="dark"] [data-toastcmp-toast][data-invert="true"] {
+    --normal-bg: #fff;
+    --normal-border: var(--gray3);
+    --normal-text: var(--gray12);
+}
+
+[data-toastcmp-toaster][data-theme="dark"] {
+    --normal-bg: #000;
+    --normal-bg-hover: hsl(0, 0%, 12%);
+    --normal-border: hsl(0, 0%, 20%);
+    --normal-border-hover: hsl(0, 0%, 25%);
+    --normal-text: var(--gray1);
+
+    --success-bg: hsl(150, 100%, 6%);
+    --success-border: hsl(147, 100%, 12%);
+    --success-text: hsl(150, 86%, 65%);
+
+    --info-bg: hsl(215, 100%, 6%);
+    --info-border: hsl(223, 100%, 12%);
+    --info-text: hsl(216, 87%, 65%);
+
+    --warning-bg: hsl(64, 100%, 6%);
+    --warning-border: hsl(60, 100%, 12%);
+    --warning-text: hsl(46, 87%, 65%);
+
+    --error-bg: hsl(358, 76%, 10%);
+    --error-border: hsl(357, 89%, 16%);
+    --error-text: hsl(358, 100%, 81%);
+}
+
+[data-toastcmp-toaster][data-theme="dark"] [data-toastcmp-toast] [data-close-button] {
+    background: var(--normal-bg);
+    border-color: var(--normal-border);
+    color: var(--normal-text);
+}
+
+[data-toastcmp-toaster][data-theme="dark"] [data-toastcmp-toast] [data-close-button]:hover {
+    background: var(--normal-bg-hover);
+    border-color: var(--normal-border-hover);
+}
+
+[data-rich-colors="true"][data-toastcmp-toast][data-type="success"] {
+    background: var(--success-bg);
+    border-color: var(--success-border);
+    color: var(--success-text);
+}
+
+[data-rich-colors="true"][data-toastcmp-toast][data-type="success"] [data-close-button] {
+    background: var(--success-bg);
+    border-color: var(--success-border);
+    color: var(--success-text);
+}
+
+[data-rich-colors="true"][data-toastcmp-toast][data-type="info"] {
+    background: var(--info-bg);
+    border-color: var(--info-border);
+    color: var(--info-text);
+}
+
+[data-rich-colors="true"][data-toastcmp-toast][data-type="info"] [data-close-button] {
+    background: var(--info-bg);
+    border-color: var(--info-border);
+    color: var(--info-text);
+}
+
+[data-rich-colors="true"][data-toastcmp-toast][data-type="warning"] {
+    background: var(--warning-bg);
+    border-color: var(--warning-border);
+    color: var(--warning-text);
+}
+
+[data-rich-colors="true"][data-toastcmp-toast][data-type="warning"] [data-close-button] {
+    background: var(--warning-bg);
+    border-color: var(--warning-border);
+    color: var(--warning-text);
+}
+
+[data-rich-colors="true"][data-toastcmp-toast][data-type="error"] {
+    background: var(--error-bg);
+    border-color: var(--error-border);
+    color: var(--error-text);
+}
+
+[data-rich-colors="true"][data-toastcmp-toast][data-type="error"] [data-close-button] {
+    background: var(--error-bg);
+    border-color: var(--error-border);
+    color: var(--error-text);
+}
+
+.toastcmp-loading-wrapper {
+    --size: 16px;
+    height: var(--size);
+    width: var(--size);
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+}
+
+.toastcmp-loading-wrapper[data-visible="false"] {
+    transform-origin: center;
+    animation: toastcmp-fade-out 0.2s ease forwards;
+}
+
+.toastcmp-spinner {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    height: var(--size);
+    width: var(--size);
+}
+
+.toastcmp-loading-bar {
+    animation: toastcmp-spin 1.2s linear infinite;
+    background: var(--gray11);
+    border-radius: 6px;
+    height: 8%;
+    left: -10%;
+    position: absolute;
+    top: -3.9%;
+    width: 24%;
+}
+
+.toastcmp-loading-bar:nth-child(1) {
+    animation-delay: -1.2s;
+    transform: rotate(0.0001deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(2) {
+    animation-delay: -1.1s;
+    transform: rotate(30deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(3) {
+    animation-delay: -1s;
+    transform: rotate(60deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(4) {
+    animation-delay: -0.9s;
+    transform: rotate(90deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(5) {
+    animation-delay: -0.8s;
+    transform: rotate(120deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(6) {
+    animation-delay: -0.7s;
+    transform: rotate(150deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(7) {
+    animation-delay: -0.6s;
+    transform: rotate(180deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(8) {
+    animation-delay: -0.5s;
+    transform: rotate(210deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(9) {
+    animation-delay: -0.4s;
+    transform: rotate(240deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(10) {
+    animation-delay: -0.3s;
+    transform: rotate(270deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(11) {
+    animation-delay: -0.2s;
+    transform: rotate(300deg) translate(146%);
+}
+
+.toastcmp-loading-bar:nth-child(12) {
+    animation-delay: -0.1s;
+    transform: rotate(330deg) translate(146%);
+}
+
+@keyframes toastcmp-fade-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes toastcmp-fade-out {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+
+@keyframes toastcmp-spin {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0.15;
+    }
+}
+
+@media (prefers-reduced-motion) {
+
+    [data-toastcmp-toast],
+    [data-toastcmp-toast]>*,
+    .toastcmp-loading-bar {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+.toastcmp-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transform-origin: center;
+    transition: opacity 200ms, transform 200ms;
+}
+
+.toastcmp-loader[data-visible="false"] {
+    opacity: 0;
+    transform: scale(0.8) translate(-50%, -50%);
+}`;
+var toastsCounter = 1;
+var Observer = class {
+  subscribers;
+  toasts;
+  constructor() {
+    this.subscribers = [];
+    this.toasts = [];
+  }
+  // We use arrow functions to maintain the correct `this` reference.
+  subscribe = (subscriber) => {
+    this.subscribers.push(subscriber);
+    return () => {
+      const index = this.subscribers.indexOf(subscriber);
+      this.subscribers.splice(index, 1);
+    };
+  };
+  publish = (data) => {
+    this.subscribers.forEach((subscriber) => subscriber(data));
+  };
+  addToast = (data) => {
+    this.publish(data);
+    this.toasts = [...this.toasts, data];
+  };
+  create = (data) => {
+    const { message, ...rest } = data;
+    const id = typeof data?.id === "number" || typeof data?.id === "string" && data.id?.length > 0 ? data.id : toastsCounter++;
+    const alreadyExists = this.toasts.find((toast2) => toast2.id === id);
+    const dismissible = data.dismissible === void 0 ? true : data.dismissible;
+    if (alreadyExists) {
+      this.toasts = this.toasts.map((toast2) => {
+        if (toast2.id === id) {
+          this.publish({ ...toast2, ...data, id, title: message });
+          return {
+            ...toast2,
+            ...data,
+            id,
+            dismissible,
+            title: message
+          };
+        }
+        return toast2;
+      });
+    } else this.addToast({ title: message, ...rest, dismissible, id });
+    return id;
+  };
+  dismiss = (id) => {
+    if (!id) this.toasts.forEach((toast2) => this.subscribers.forEach((subscriber) => subscriber({ id: toast2.id, dismiss: true })));
+    this.subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
+    return id;
+  };
+  message = (message, data) => {
+    return this.create({ ...data, message });
+  };
+  error = (message, data) => {
+    return this.create({ ...data, message, type: "error" });
+  };
+  success = (message, data) => {
+    return this.create({ ...data, type: "success", message });
+  };
+  info = (message, data) => {
+    return this.create({ ...data, type: "info", message });
+  };
+  warning = (message, data) => {
+    return this.create({ ...data, type: "warning", message });
+  };
+  loading = (message, data) => {
+    return this.create({ ...data, type: "loading", message });
+  };
+  promise = (promise, data) => {
+    if (!data) return;
+    let id = void 0;
+    if (data.loading !== void 0) {
+      id = this.create({
+        ...data,
+        promise,
+        type: "loading",
+        message: data.loading,
+        description: typeof data.description !== "function" ? data.description : void 0
+      });
+    }
+    const p = promise instanceof Promise ? promise : promise();
+    let shouldDismiss = id !== void 0;
+    let result;
+    const originalPromise = p.then(async (response) => {
+      result = ["resolve", response];
+      const isReactElementResponse = React3.isValidElement(response);
+      if (isReactElementResponse) {
+        shouldDismiss = false;
+        this.create({ id, type: "default", message: response });
+      } else if (isHttpResponse(response) && !response.ok) {
+        shouldDismiss = false;
+        const message = typeof data.error === "function" ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
+        const description = typeof data.description === "function" ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
+        this.create({ id, type: "error", message, description });
+      } else if (data.success !== void 0) {
+        shouldDismiss = false;
+        const message = typeof data.success === "function" ? await data.success(response) : data.success;
+        const description = typeof data.description === "function" ? await data.description(response) : data.description;
+        this.create({ id, type: "success", message, description });
+      }
+    }).catch(async (error) => {
+      result = ["reject", error];
+      if (data.error !== void 0) {
+        shouldDismiss = false;
+        const message = typeof data.error === "function" ? await data.error(error) : data.error;
+        const description = typeof data.description === "function" ? await data.description(error) : data.description;
+        this.create({ id, type: "error", message, description });
+      }
+    }).finally(() => {
+      if (shouldDismiss) {
+        this.dismiss(id);
+        id = void 0;
+      }
+      data.finally?.();
+    });
+    const unwrap = () => new Promise((resolve, reject) => originalPromise.then(() => result[0] === "reject" ? reject(result[1]) : resolve(result[1])).catch(reject));
+    if (typeof id !== "string" && typeof id !== "number") return { unwrap };
+    else return Object.assign(id, { unwrap });
+  };
+  custom = (jsx4, data) => {
+    const id = data?.id || toastsCounter++;
+    this.create({ jsx: jsx4(id), id, ...data });
+    return id;
+  };
+};
+var ToastState = new Observer();
+var toastFunction = (message, data) => {
+  const id = data?.id || toastsCounter++;
+  ToastState.addToast({
+    title: message,
+    ...data,
+    id
+  });
+  return id;
+};
+var isHttpResponse = (data) => {
+  return data && typeof data === "object" && "ok" in data && typeof data.ok === "boolean" && "status" in data && typeof data.status === "number";
+};
+var basicToast = toastFunction;
+var getHistory = () => ToastState.toasts;
+var toast = Object.assign(
+  basicToast,
+  {
+    success: ToastState.success,
+    info: ToastState.info,
+    warning: ToastState.warning,
+    error: ToastState.error,
+    custom: ToastState.custom,
+    message: ToastState.message,
+    promise: ToastState.promise,
+    dismiss: ToastState.dismiss,
+    loading: ToastState.loading
+  },
+  { getHistory }
+);
+
+// src/react/toast/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var useIsDocumentHidden = () => {
+  const [isDocumentHidden, setIsDocumentHidden] = React3.useState(document.hidden);
+  React3.useEffect(() => {
+    const callback = () => setIsDocumentHidden(document.hidden);
+    document.addEventListener("visibilitychange", callback);
+    return () => window.removeEventListener("visibilitychange", callback);
+  }, []);
+  return isDocumentHidden;
+};
+var getAsset = (type) => {
+  switch (type) {
+    case "success":
+      return SuccessIcon;
+    case "info":
+      return InfoIcon;
+    case "warning":
+      return WarningIcon;
+    case "error":
+      return ErrorIcon;
+    default:
+      return null;
+  }
+};
+var bars = Array(12).fill(0);
+var Loader = ({ visible, className }) => {
+  return /* @__PURE__ */ jsx("div", { className: ["toastcmp-loading-wrapper", className].filter(Boolean).join(" "), "data-visible": visible, children: /* @__PURE__ */ jsx("div", { className: "toastcmp-spinner", children: bars.map((_, i) => /* @__PURE__ */ jsx("div", { className: "toastcmp-loading-bar" }, `spinner-bar-${i}`)) }) });
+};
+var SuccessIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: "20", width: "20", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
+    clipRule: "evenodd"
+  }
+) });
+var WarningIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: "20", width: "20", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+    clipRule: "evenodd"
+  }
+) });
+var InfoIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: "20", width: "20", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+    clipRule: "evenodd"
+  }
+) });
+var ErrorIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: "20", width: "20", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
+    clipRule: "evenodd"
+  }
+) });
+var CloseIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+);
+
+// src/react/toast/types.ts
+function isAction(action) {
+  return action.label !== void 0;
+}
+var VISIBLE_TOASTS_AMOUNT = 3;
+var VIEWPORT_OFFSET = "32px";
+var MOBILE_VIEWPORT_OFFSET = "16px";
+var TOAST_LIFETIME = 4e3;
+var TOAST_WIDTH = 356;
+var GAP = 14;
+var SWIPE_THRESHOLD = 20;
+var TIME_BEFORE_UNMOUNT = 200;
+function getDefaultSwipeDirections(position) {
+  const [y, x] = position.split("-");
+  const directions = [];
+  if (y) directions.push(y);
+  if (x) directions.push(x);
+  return directions;
+}
+var Toast = (props) => {
+  const {
+    invert: ToasterInvert,
+    toast: toast2,
+    unstyled,
+    interacting,
+    setHeights,
+    visibleToasts,
+    heights,
+    index,
+    toasts,
+    expanded,
+    removeToast,
+    defaultRichColors,
+    closeButton: closeButtonFromToaster,
+    style,
+    cancelButtonStyle,
+    actionButtonStyle,
+    className = "",
+    descriptionClassName = "",
+    duration: durationFromToaster,
+    position,
+    gap,
+    loadingIcon: loadingIconProp,
+    expandByDefault,
+    classNames,
+    icons,
+    closeButtonAriaLabel = "Close toast",
+    pauseWhenPageIsHidden
+  } = props;
+  const [swipeDirection, setSwipeDirection] = React3.useState(null);
+  const [swipeOutDirection, setSwipeOutDirection] = React3.useState(null);
+  const [mounted, setMounted] = React3.useState(false);
+  const [removed, setRemoved] = React3.useState(false);
+  const [swiping, setSwiping] = React3.useState(false);
+  const [swipeOut, setSwipeOut] = React3.useState(false);
+  const [isSwiped, setIsSwiped] = React3.useState(false);
+  const [offsetBeforeRemove, setOffsetBeforeRemove] = React3.useState(0);
+  const [initialHeight, setInitialHeight] = React3.useState(0);
+  const remainingTime = React3.useRef(toast2.duration || durationFromToaster || TOAST_LIFETIME);
+  const dragStartTime = React3.useRef(null);
+  const toastRef = React3.useRef(null);
+  const isFront = index === 0;
+  const isVisible = index + 1 <= visibleToasts;
+  const toastType = toast2.type;
+  const dismissible = toast2.dismissible !== false;
+  const toastClassname = toast2.className || "";
+  const toastDescriptionClassname = toast2.descriptionClassName || "";
+  const heightIndex = React3.useMemo(() => heights.findIndex((height) => height.toastId === toast2.id) || 0, [heights, toast2.id]);
+  const closeButton = React3.useMemo(() => toast2.closeButton ?? closeButtonFromToaster, [toast2.closeButton, closeButtonFromToaster]);
+  const duration = React3.useMemo(() => toast2.duration || durationFromToaster || TOAST_LIFETIME, [toast2.duration, durationFromToaster]);
+  const closeTimerStartTimeRef = React3.useRef(0);
+  const offset = React3.useRef(0);
+  const lastCloseTimerStartTimeRef = React3.useRef(0);
+  const pointerStartRef = React3.useRef(null);
+  const [y, x] = position.split("-");
+  const toastsHeightBefore = React3.useMemo(() => {
+    return heights.reduce((prev, curr, reducerIndex) => {
+      if (reducerIndex >= heightIndex) return prev;
+      return prev + curr.height;
+    }, 0);
+  }, [heights, heightIndex]);
+  const isDocumentHidden = useIsDocumentHidden();
+  const invert = toast2.invert || ToasterInvert;
+  const disabled = toastType === "loading";
+  offset.current = React3.useMemo(() => heightIndex * (gap ?? 0) + toastsHeightBefore, [heightIndex, gap, toastsHeightBefore]);
+  React3.useEffect(() => {
+    remainingTime.current = duration;
+  }, [duration]);
+  React3.useEffect(() => setMounted(true), []);
+  React3.useEffect(() => {
+    const toastNode = toastRef.current;
+    if (toastNode) {
+      const height = toastNode.getBoundingClientRect().height;
+      setInitialHeight(height);
+      setHeights((h) => [{ toastId: toast2.id, height, position: toast2.position }, ...h]);
+      return () => setHeights((h) => h.filter((height2) => height2.toastId !== toast2.id));
+    }
+  }, [setHeights, toast2.id]);
+  React3.useLayoutEffect(() => {
+    if (!mounted) return;
+    const toastNode = toastRef.current;
+    const originalHeight = toastNode?.style.height || "";
+    if (toastNode) toastNode.style.height = "auto";
+    const newHeight = toastNode?.getBoundingClientRect().height;
+    if (toastNode) toastNode.style.height = originalHeight;
+    setInitialHeight(newHeight);
+    setHeights((heights2) => {
+      const alreadyExists = heights2.find((height) => height.toastId === toast2.id);
+      if (!alreadyExists) return [{ toastId: toast2.id, height: newHeight, position: toast2.position }, ...heights2];
+      else return heights2.map((height) => height.toastId === toast2.id ? { ...height, height: newHeight } : height);
+    });
+  }, [mounted, toast2.title, toast2.description, setHeights, toast2.id]);
+  const deleteToast = React3.useCallback(() => {
+    setRemoved(true);
+    setOffsetBeforeRemove(offset.current);
+    setHeights((h) => h.filter((height) => height.toastId !== toast2.id));
+    setTimeout(() => removeToast(toast2), TIME_BEFORE_UNMOUNT);
+  }, [toast2, removeToast, setHeights, offset]);
+  React3.useEffect(() => {
+    if (toast2.promise && toastType === "loading" || toast2.duration === Infinity || toast2.type === "loading") return;
+    let timeoutId;
+    const pauseTimer = () => {
+      if (lastCloseTimerStartTimeRef.current < closeTimerStartTimeRef.current) remainingTime.current = remainingTime.current - (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
+      lastCloseTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
+    };
+    const startTimer = () => {
+      if (remainingTime.current === Infinity) return;
+      closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
+      timeoutId = setTimeout(() => {
+        toast2.onAutoClose?.(toast2);
+        deleteToast();
+      }, remainingTime.current);
+    };
+    if (expanded || interacting || pauseWhenPageIsHidden && isDocumentHidden) pauseTimer();
+    else startTimer();
+    return () => clearTimeout(timeoutId);
+  }, [expanded, interacting, toast2, toastType, pauseWhenPageIsHidden, isDocumentHidden, deleteToast]);
+  React3.useEffect(() => {
+    if (toast2.delete) deleteToast();
+  }, [deleteToast, toast2.delete]);
+  function getLoadingIcon() {
+    if (icons?.loading) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(classNames?.loader, toast2?.classNames?.loader, "toastcmp-loader"),
+          "data-visible": toastType === "loading",
+          children: icons.loading
+        }
+      );
+    }
+    if (loadingIconProp) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(classNames?.loader, toast2?.classNames?.loader, "toastcmp-loader"),
+          "data-visible": toastType === "loading",
+          children: loadingIconProp
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Loader, { className: cn(classNames?.loader, toast2?.classNames?.loader), visible: toastType === "loading" });
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      tabIndex: 0,
+      ref: toastRef,
+      className: cn(
+        className,
+        toastClassname,
+        classNames?.toast,
+        toast2?.classNames?.toast,
+        classNames?.default,
+        //@ts-ignore
+        classNames?.[toastType],
+        //@ts-ignore
+        toast2?.classNames?.[toastType]
+      ),
+      "data-toastcmp-toast": true,
+      "data-rich-colors": toast2.richColors ?? defaultRichColors ?? true,
+      "data-styled": !Boolean(toast2.jsx || toast2.unstyled || unstyled),
+      "data-mounted": mounted,
+      "data-promise": Boolean(toast2.promise),
+      "data-swiped": isSwiped,
+      "data-removed": removed,
+      "data-visible": isVisible,
+      "data-y-position": y,
+      "data-x-position": x,
+      "data-index": index,
+      "data-front": isFront,
+      "data-swiping": swiping,
+      "data-dismissible": dismissible,
+      "data-type": toastType,
+      "data-invert": invert,
+      "data-swipe-out": swipeOut,
+      "data-swipe-direction": swipeOutDirection,
+      "data-expanded": Boolean(expanded || expandByDefault && mounted),
+      style: {
+        "--index": index,
+        "--toasts-before": index,
+        "--z-index": toasts.length - index,
+        "--offset": `${removed ? offsetBeforeRemove : offset.current}px`,
+        "--initial-height": expandByDefault ? "auto" : `${initialHeight}px`,
+        ...style,
+        ...toast2.style
+      },
+      onPointerDown: (event) => {
+        if (disabled || !dismissible) return;
+        dragStartTime.current = /* @__PURE__ */ new Date();
+        setOffsetBeforeRemove(offset.current);
+        event.target.setPointerCapture(event.pointerId);
+        if (event.target.tagName === "BUTTON") return;
+        setSwiping(true);
+        pointerStartRef.current = { x: event.clientX, y: event.clientY };
+      },
+      onPointerUp: () => {
+        if (swipeOut || !dismissible) return;
+        pointerStartRef.current = null;
+        const swipeAmountX = Number(toastRef.current?.style.getPropertyValue("--swipe-amount-x").replace("px", "") || 0);
+        const swipeAmountY = Number(toastRef.current?.style.getPropertyValue("--swipe-amount-y").replace("px", "") || 0);
+        const timeTaken = (/* @__PURE__ */ new Date()).getTime() - (dragStartTime.current?.getTime() || 0);
+        const swipeAmount = swipeDirection === "x" ? swipeAmountX : swipeAmountY;
+        const velocity = Math.abs(swipeAmount) / timeTaken;
+        if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
+          setOffsetBeforeRemove(offset.current);
+          toast2.onDismiss?.(toast2);
+          if (swipeDirection === "x") setSwipeOutDirection(swipeAmountX > 0 ? "right" : "left");
+          else setSwipeOutDirection(swipeAmountY > 0 ? "down" : "up");
+          deleteToast();
+          setSwipeOut(true);
+          setIsSwiped(false);
+          return;
+        }
+        setSwiping(false);
+        setSwipeDirection(null);
+      },
+      onPointerMove: (event) => {
+        if (!pointerStartRef.current || !dismissible) return;
+        const selection = window.getSelection();
+        const isHighlighted = selection ? selection.toString().length > 0 : false;
+        if (isHighlighted) return;
+        const yDelta = event.clientY - pointerStartRef.current.y;
+        const xDelta = event.clientX - pointerStartRef.current.x;
+        const swipeDirections = props.swipeDirections ?? getDefaultSwipeDirections(position);
+        if (!swipeDirection && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) setSwipeDirection(Math.abs(xDelta) > Math.abs(yDelta) ? "x" : "y");
+        let swipeAmount = { x: 0, y: 0 };
+        if (swipeDirection === "y") {
+          if (swipeDirections.includes("top") || swipeDirections.includes("bottom")) {
+            if (swipeDirections.includes("top") && yDelta < 0) swipeAmount.y = yDelta;
+            else if (swipeDirections.includes("bottom") && yDelta > 0) swipeAmount.y = yDelta;
+          }
+        } else if (swipeDirection === "x") {
+          if (swipeDirections.includes("left") || swipeDirections.includes("right")) {
+            if (swipeDirections.includes("left") && xDelta < 0) swipeAmount.x = xDelta;
+            else if (swipeDirections.includes("right") && xDelta > 0) swipeAmount.x = xDelta;
+          }
+        }
+        if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) setIsSwiped(true);
+        toastRef.current?.style.setProperty("--swipe-amount-x", `${swipeAmount.x}px`);
+        toastRef.current?.style.setProperty("--swipe-amount-y", `${swipeAmount.y}px`);
+      },
+      children: [
+        closeButton && !toast2.jsx ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": closeButtonAriaLabel,
+            "data-disabled": disabled,
+            "data-close-button": true,
+            onClick: disabled || !dismissible ? () => {
+            } : () => {
+              deleteToast();
+              toast2.onDismiss?.(toast2);
+            },
+            className: cn(classNames?.closeButton, toast2?.classNames?.closeButton),
+            children: icons?.close ?? CloseIcon
+          }
+        ) : null,
+        toast2.jsx || isValidElement(toast2.title) ? toast2.jsx ? toast2.jsx : typeof toast2.title === "function" ? toast2.title() : toast2.title : /* @__PURE__ */ jsxs(Fragment, { children: [
+          toastType || toast2.icon || toast2.promise ? /* @__PURE__ */ jsxs("div", { "data-icon": "", className: cn(classNames?.icon, toast2?.classNames?.icon), children: [
+            toast2.promise || toast2.type === "loading" && !toast2.icon ? toast2.icon || getLoadingIcon() : null,
+            toast2.type !== "loading" ? toast2.icon || icons?.[toastType] || getAsset(toastType ?? "default") : null
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { "data-content": "", className: cn(classNames?.content, toast2?.classNames?.content), children: [
+            /* @__PURE__ */ jsx("div", { "data-title": "", className: cn(classNames?.title, toast2?.classNames?.title), children: typeof toast2.title === "function" ? toast2.title() : toast2.title }),
+            toast2.description ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-description": "",
+                className: cn(
+                  descriptionClassName,
+                  toastDescriptionClassname,
+                  classNames?.description,
+                  toast2?.classNames?.description
+                ),
+                children: typeof toast2.description === "function" ? toast2.description() : toast2.description
+              }
+            ) : null
+          ] }),
+          isValidElement(toast2.cancel) ? toast2.cancel : toast2.cancel && isAction(toast2.cancel) ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-button": true,
+              "data-cancel": true,
+              style: toast2.cancelButtonStyle || cancelButtonStyle,
+              onClick: (event) => {
+                if (!isAction(toast2.cancel)) return;
+                if (!dismissible) return;
+                toast2.cancel.onClick?.(event);
+                deleteToast();
+              },
+              className: cn(classNames?.cancelButton, toast2?.classNames?.cancelButton),
+              children: toast2.cancel.label
+            }
+          ) : null,
+          isValidElement(toast2.action) ? toast2.action : toast2.action && isAction(toast2.action) ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-button": true,
+              "data-action": true,
+              style: toast2.actionButtonStyle || actionButtonStyle,
+              onClick: (event) => {
+                if (!isAction(toast2.action)) return;
+                toast2.action.onClick?.(event);
+                if (event.defaultPrevented) return;
+                deleteToast();
+              },
+              className: cn(classNames?.actionButton, toast2?.classNames?.actionButton),
+              children: toast2.action.label
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+};
+function getDocumentDirection() {
+  if (typeof window === "undefined") return "ltr";
+  if (typeof document === "undefined") return "ltr";
+  const dirAttribute = document.documentElement.getAttribute("dir");
+  if (dirAttribute === "auto" || !dirAttribute) return window.getComputedStyle(document.documentElement).direction;
+  return dirAttribute;
+}
+function assignOffset(defaultOffset, mobileOffset) {
+  const styles = {};
+  [defaultOffset, mobileOffset].forEach((offset, index) => {
+    const isMobile = index === 1;
+    const prefix = isMobile ? "--mobile-offset" : "--offset";
+    const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
+    function assignAll(offset2) {
+      ["top", "right", "bottom", "left"].forEach((key) => {
+        styles[`${prefix}-${key}`] = typeof offset2 === "number" ? `${offset2}px` : offset2;
+      });
+    }
+    if (typeof offset === "number" || typeof offset === "string") assignAll(offset);
+    else if (typeof offset === "object") {
+      ["top", "right", "bottom", "left"].forEach((key) => {
+        if (offset[key] === void 0) styles[`${prefix}-${key}`] = defaultValue;
+        else styles[`${prefix}-${key}`] = typeof offset[key] === "number" ? `${offset[key]}px` : offset[key];
+      });
+    } else assignAll(defaultValue);
+  });
+  return styles;
+}
+function useSonner() {
+  const [activeToasts, setActiveToasts] = React3.useState([]);
+  React3.useEffect(() => {
+    return ToastState.subscribe((toast2) => {
+      setActiveToasts((currentToasts) => {
+        if ("dismiss" in toast2 && toast2.dismiss) return currentToasts.filter((t) => t.id !== toast2.id);
+        const existingToastIndex = currentToasts.findIndex((t) => t.id === toast2.id);
+        if (existingToastIndex !== -1) {
+          const updatedToasts = [...currentToasts];
+          updatedToasts[existingToastIndex] = { ...updatedToasts[existingToastIndex], ...toast2 };
+          return updatedToasts;
+        } else return [toast2, ...currentToasts];
+      });
+    });
+  }, []);
+  return {
+    toasts: activeToasts
+  };
+}
+var Toaster = forwardRef(function Toaster2(props, ref) {
+  const {
+    invert,
+    position = "bottom-right",
+    hotkey = ["altKey", "KeyT"],
+    expand,
+    closeButton,
+    className,
+    offset,
+    mobileOffset,
+    theme = "dark",
+    richColors,
+    duration = 4e3,
+    style,
+    visibleToasts = VISIBLE_TOASTS_AMOUNT,
+    toastOptions,
+    dir = getDocumentDirection(),
+    gap = GAP,
+    loadingIcon,
+    icons,
+    containerAriaLabel = "Notifications",
+    pauseWhenPageIsHidden
+  } = props;
+  const [toasts, setToasts] = React3.useState([]);
+  const possiblePositions = React3.useMemo(() => Array.from(/* @__PURE__ */ new Set([position, ...toasts.filter((toast2) => toast2.position !== void 0).map((toast2) => toast2.position)])), [toasts, position]);
+  const [heights, setHeights] = React3.useState([]);
+  const [expanded, setExpanded] = React3.useState(false);
+  const [interacting, setInteracting] = React3.useState(false);
+  const [actualTheme, setActualTheme] = React3.useState(theme !== "system" ? theme : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
+  const listRef = React3.useRef(null);
+  const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+  const lastFocusedElementRef = React3.useRef(null);
+  const isFocusWithinRef = React3.useRef(false);
+  const removeToast = React3.useCallback((toastToRemove) => {
+    setToasts((toasts2) => {
+      if (!toasts2.find((toast2) => toast2.id === toastToRemove.id)?.delete) ToastState.dismiss(toastToRemove.id);
+      return toasts2.filter(({ id }) => id !== toastToRemove.id);
+    });
+  }, []);
+  React3.useEffect(() => {
+    return ToastState.subscribe((toast2) => {
+      if (toast2.dismiss) return setToasts((toasts2) => toasts2.map((t) => t.id === toast2.id ? { ...t, delete: true } : t));
+      setTimeout(() => {
+        ReactDOM.flushSync(() => {
+          setToasts((toasts2) => {
+            const indexOfExistingToast = toasts2.findIndex((t) => t.id === toast2.id);
+            if (indexOfExistingToast !== -1) {
+              return [
+                ...toasts2.slice(0, indexOfExistingToast),
+                { ...toasts2[indexOfExistingToast], ...toast2 },
+                ...toasts2.slice(indexOfExistingToast + 1)
+              ];
+            }
+            return [toast2, ...toasts2];
+          });
+        });
+      });
+    });
+  }, []);
+  React3.useEffect(() => {
+    if (theme !== "system") return setActualTheme(theme);
+    if (theme === "system") {
+      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        setActualTheme("dark");
+      } else {
+        setActualTheme("light");
+      }
+    }
+    if (typeof window === "undefined") return;
+    const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    try {
+      darkMediaQuery.addEventListener("change", ({ matches }) => {
+        if (matches) setActualTheme("dark");
+        else setActualTheme("light");
+      });
+    } catch (error) {
+      darkMediaQuery.addListener(({ matches }) => {
+        try {
+          if (matches) setActualTheme("dark");
+          else setActualTheme("light");
+        } catch (e) {
+          console.error(e);
+        }
+      });
+    }
+  }, [theme]);
+  React3.useEffect(() => {
+    if (toasts.length <= 1) setExpanded(false);
+  }, [toasts]);
+  React3.useEffect(() => {
+    const handleKeyDown = (event) => {
+      const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
+      if (isHotkeyPressed) {
+        setExpanded(true);
+        listRef.current?.focus();
+      }
+      if (event.code === "Escape" && (document.activeElement === listRef.current || listRef.current?.contains(document.activeElement))) setExpanded(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [hotkey]);
+  React3.useEffect(() => {
+    if (listRef.current) {
+      return () => {
+        if (lastFocusedElementRef.current) {
+          lastFocusedElementRef.current.focus({ preventScroll: true });
+          lastFocusedElementRef.current = null;
+          isFocusWithinRef.current = false;
+        }
+      };
+    }
+  }, [listRef.current]);
+  return (
+    // Remove item from normal navigation flow, only available via hotkey.
+    /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        "aria-label": `${containerAriaLabel} ${hotkeyLabel}`,
+        tabIndex: -1,
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
+        "aria-atomic": "false",
+        suppressHydrationWarning: true,
+        children: possiblePositions.map((position2, index) => {
+          const [y, x] = (position2 ?? "").split("-");
+          if (!toasts.length) return null;
+          return /* @__PURE__ */ jsx(
+            "ol",
+            {
+              dir: dir === "auto" ? getDocumentDirection() : dir,
+              tabIndex: -1,
+              ref: listRef,
+              className,
+              "data-toastcmp-toaster": true,
+              "data-theme": actualTheme,
+              "data-y-position": y,
+              "data-lifted": expanded && toasts.length > 1 && !expand,
+              "data-x-position": x,
+              style: {
+                "--front-toast-height": `${heights[0]?.height || 0}px`,
+                "--width": `${TOAST_WIDTH}px`,
+                "--gap": `${gap}px`,
+                ...style,
+                ...assignOffset(offset, mobileOffset)
+              },
+              onBlur: (event) => {
+                if (isFocusWithinRef.current && !event.currentTarget.contains(event.relatedTarget)) {
+                  isFocusWithinRef.current = false;
+                  if (lastFocusedElementRef.current) {
+                    lastFocusedElementRef.current.focus({ preventScroll: true });
+                    lastFocusedElementRef.current = null;
+                  }
+                }
+              },
+              onFocus: (event) => {
+                const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
+                if (isNotDismissible) return;
+                if (!isFocusWithinRef.current) {
+                  isFocusWithinRef.current = true;
+                  lastFocusedElementRef.current = event.relatedTarget;
+                }
+              },
+              onMouseEnter: () => setExpanded(true),
+              onMouseMove: () => setExpanded(true),
+              onMouseLeave: () => {
+                if (!interacting) setExpanded(false);
+              },
+              onPointerDown: (event) => {
+                const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
+                if (isNotDismissible) return;
+                setInteracting(true);
+              },
+              onPointerUp: () => setInteracting(false),
+              children: toasts.filter((toast2) => !toast2.position && index === 0 || toast2.position === position2).map((toast2, index2) => /* @__PURE__ */ jsx(
+                Toast,
+                {
+                  icons,
+                  index: index2,
+                  toast: toast2,
+                  defaultRichColors: richColors,
+                  duration: toastOptions?.duration ?? duration,
+                  className: toastOptions?.className,
+                  descriptionClassName: toastOptions?.descriptionClassName,
+                  invert,
+                  visibleToasts,
+                  closeButton: toastOptions?.closeButton ?? closeButton,
+                  interacting,
+                  position: position2,
+                  style: toastOptions?.style,
+                  unstyled: toastOptions?.unstyled,
+                  classNames: toastOptions?.classNames,
+                  cancelButtonStyle: toastOptions?.cancelButtonStyle,
+                  actionButtonStyle: toastOptions?.actionButtonStyle,
+                  removeToast,
+                  toasts: toasts.filter((t) => t.position == toast2.position),
+                  heights: heights.filter((h) => h.position == toast2.position),
+                  setHeights,
+                  expandByDefault: expand,
+                  gap,
+                  loadingIcon,
+                  expanded,
+                  pauseWhenPageIsHidden,
+                  swipeDirections: props.swipeDirections
+                },
+                toast2.id
+              ))
+            },
+            position2
+          );
+        })
+      }
+    )
+  );
+});
+var injected = false;
+function injectStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  if (document.querySelector("[data-enigma-toast-styles]")) return;
+  const element = document.createElement("style");
+  element.setAttribute("data-enigma-toast-styles", "");
+  element.textContent = TOAST_STYLES;
+  document.head.prepend(element);
+}
+function Toaster3({ styles = true, queue = defaultQueue, ...props }) {
+  useLayoutEffect(() => {
+    if (styles) injectStyles();
+  }, [styles]);
+  const forwarded = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!queue) return;
+    const sync = (items) => {
+      const live = new Set(items.map((item) => item.id));
+      for (const item of items) {
+        if (forwarded.current.has(item.id)) continue;
+        forwarded.current.set(item.id, raise(item));
+      }
+      for (const [id, toastId] of forwarded.current) {
+        if (live.has(id)) continue;
+        toast.dismiss(toastId);
+        forwarded.current.delete(id);
+      }
+    };
+    sync(queue.items);
+    return queue.subscribe(sync);
+  }, [queue]);
+  return /* @__PURE__ */ jsx(Toaster, { ...props });
+}
+function raise(item) {
+  const options = {
+    description: item.body,
+    // The queue already counts down and removes the item; leaving the toast's own timer
+    // running as well would race it, and the shorter of the two would win at random.
+    duration: Infinity,
+    action: item.action ? { label: item.action.label, onClick: () => item.action?.onSelect() } : void 0
+  };
+  switch (item.tone) {
+    case "success":
+      return toast.success(item.title, options);
+    case "error":
+      return toast.error(item.title, options);
+    case "warning":
+      return toast.warning(item.title, options);
+    case "info":
+      return toast.info(item.title, options);
+    case "loading":
+      return toast.loading(item.title, options);
+    default:
+      return toast(item.title, options);
+  }
+}
+
+export { Toaster3 as Toaster, toast, useSonner };