@payloadcms/ui 3.0.0-beta.44 → 3.0.0-beta.45

package/dist/scss/toasts.scss

@@ -0,0 +1,111 @@
+.payload-toast-container {
+  .payload-toast-close-button {
+    left: unset;
+    right: 0.5rem;
+    top: 1.55rem;
+    color: var(--theme-elevation-400);
+    background: unset;
+    border: none;
+    display: flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background: none;
+    }
+
+    svg {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    [dir='RTL'] & {
+      right: unset;
+      left: 0.5rem;
+    }
+  }
+
+  .payload-toast-item {
+    padding: 1rem 2.5rem 1rem 1rem;
+    color: var(--theme-text);
+    font-style: normal;
+    font-weight: 600;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    border-radius: 0.15rem;
+    border: 1px solid var(--theme-border-color);
+    background: var(--theme-input-bg);
+    box-shadow:
+      0px 10px 4px -8px rgba(0, 2, 4, 0.02),
+      0px 2px 3px 0px rgba(0, 2, 4, 0.05);
+
+    .toast-content {
+      transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    &[data-front='false'] {
+      .toast-content {
+        opacity: 0;
+      }
+    }
+
+    &[data-expanded='true'] {
+      .toast-content {
+        opacity: 1;
+      }
+    }
+
+    .toast-icon {
+      svg {
+        width: 2.4rem;
+        height: 2.4rem;
+      }
+    }
+
+    &.toast-warning {
+      border-color: var(--theme-warning-200);
+      background-color: var(--theme-warning-100);
+    }
+
+    &.toast-error {
+      border-color: var(--theme-error-300);
+      background-color: var(--theme-error-150);
+    }
+
+    &.toast-success {
+      border-color: var(--theme-success-200);
+      background-color: var(--theme-success-100);
+    }
+
+    &.toast-info {
+      border-color: var(--theme-elevation-250);
+      background-color: var(--theme-elevation-100);
+    }
+
+    [data-theme='light'] & {
+      &.toast-warning {
+        border-color: var(--theme-warning-550);
+        background-color: var(--theme-warning-100);
+      }
+
+      &.toast-error {
+        border-color: var(--theme-error-200);
+        background-color: var(--theme-error-50);
+      }
+
+      &.toast-success {
+        border-color: var(--theme-success-550);
+        background-color: var(--theme-success-50);
+      }
+
+      &.toast-info {
+        border-color: var(--theme-border-color);
+        background-color: var(--theme-elevation-50);
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/ui",
-  "version": "3.0.0-beta.44",
+  "version": "3.0.0-beta.45",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -110,11 +110,11 @@
     "react-datepicker": "6.9.0",
     "react-image-crop": "10.1.8",
     "react-select": "5.8.0",
-    "react-toastify": "10.0.5",
     "scheduler": "0.25.0-rc-f994737d14-20240522",
+    "sonner": "^1.5.0",
     "use-context-selector": "2.0.0",
     "uuid": "^9.0.1",
-    "@payloadcms/translations": "3.0.0-beta.44"
+    "@payloadcms/translations": "3.0.0-beta.45"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.5",
@@ -142,13 +142,13 @@
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
     "@payloadcms/eslint-config": "1.1.1",
-    "payload": "3.0.0-beta.44"
+    "payload": "3.0.0-beta.45"
   },
   "peerDependencies": {
     "next": "^15.0.0-rc.0",
     "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
     "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
-    "payload": "3.0.0-beta.44"
+    "payload": "3.0.0-beta.45"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"