@soul-refiner/design-system 0.2.82 → 0.2.83

package/dist/components/feedback/animated_toast/animated_toast.js

@@ -7,13 +7,20 @@ export const AnimatedToast = ({ message, type, onClose, }) => {
     const handleDismiss = () => {
         setDismissed(true);
     };
-    return (React.createElement(Container, { className: `toast ${dismissed ? 'toast-dismissed' : ''}` },
-        React.createElement(Toast, { content: message, type: type, onClose: onClose, handleDismiss: handleDismiss })));
+    return (React.createElement(Wrapper, null,
+        React.createElement(Container, null,
+            React.createElement(Toast, { content: message, type: type, onClose: onClose, handleDismiss: handleDismiss }))));
 };
+const Wrapper = styled.div `
+  display: flex;
+  row-gap: 12px;
+  position: fixed;
+  z-index: 9999;
+  bottom: 16px;
+  right: 16px;
+`;
 const Container = styled.div `
-  .toast {
-    animation: slide-in 0.4s ease-in-out forwards;
-  }
+  animation: slide-in 0.4s ease-in-out forwards;
 
   .toast-dismissed {
     animation: slide-out 0.4s ease-in-out forwards;

package/dist/components/feedback/toast/toast.js

@@ -11,7 +11,7 @@ export const Toast = ({ content, href, onClose, type, handleDismiss, }) => {
         success: React.createElement(AlertCircle, { size: 24 }),
         warning: React.createElement(AlertTriangle, { size: 24 }),
     };
-    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type },
+    return (React.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type },
         iconLookup[type],
         React.createElement(P, { as: "span" }, content),
         href && (React.createElement(P, { sx: "padding-left: 8px;", as: "a", href: href, "$color": "primary-blue-2" }, "View")),
@@ -61,9 +61,6 @@ const ToastProgress = styled.div `
   }
 `;
 const Wrapper = styled.output `
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
   width: 99vw;
   max-width: 476px;
   box-sizing: border-box;
@@ -72,22 +69,6 @@ const Wrapper = styled.output `
   box-shadow: var(--elevation-2);
   border-radius: var(--small);
 
-  &::before {
-    position: absolute;
-    content: '';
-    left: 0px;
-    width: 4px;
-    height: 100%;
-    background-color: ${({ $type }) => $type === 'error'
-    ? 'var(--color-red-4)'
-    : $type === 'info'
-        ? 'var(--color-blue-4)'
-        : $type === 'success'
-            ? 'var(--color-green-3)'
-            : 'var(--color-orange-5)'};
-    border-radius: 8px 0px 0px 8px;
-  }
-
   & > svg {
     fill: ${({ $type }) => $type === 'error'
     ? 'var(--color-red-4)'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.82",
+  "version": "0.2.83",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {