@jordan-mace/chaser-design-system 1.2.2 → 1.2.4

package/dist/components/Toast/Toast.js

@@ -1,21 +1,21 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import clsx from "clsx";
-import { fadeOutError, fadeOutInfo, fadeOutSuccess, fadeOutWarning, slideInRight, toastCloseButton, toastContainer, toastContent, toastItem, toastProgressBar, toastProgressBarContainer, toastWrapper } from "./styles.css.js";
-import { Icon } from "../Icon/index.js";
-const ToastContext = /*#__PURE__*/ createContext({
-    addToast: ()=>'',
-    removeToast: ()=>{},
-    handleDismissAll: ()=>{},
-    handleResumeAll: ()=>{}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import { toastContainer, toastWrapper, toastItem, toastCloseButton, toastProgressBarContainer, toastProgressBar, toastContent, fadeOutSuccess, fadeOutError, fadeOutWarning, fadeOutInfo, slideInRight, } from './styles.css';
+import { Icon } from '../Icon';
+const ToastContext = createContext({
+    addToast: () => '',
+    removeToast: () => { },
+    handleDismissAll: () => { },
+    handleResumeAll: () => { },
 });
-const getFadeOutForVariant = (variant)=>{
+const getFadeOutForVariant = (variant) => {
     const fadeOutMap = {
         success: fadeOutSuccess,
         error: fadeOutError,
         warning: fadeOutWarning,
-        info: fadeOutInfo
+        info: fadeOutInfo,
     };
     return fadeOutMap[variant] || fadeOutInfo;
 };
@@ -25,24 +25,25 @@ const positionToClassKey = {
     'top-right': 'topRight',
     'bottom-left': 'bottomLeft',
     'bottom-center': 'bottomCenter',
-    'bottom-right': 'bottomRight'
+    'bottom-right': 'bottomRight',
 };
-const ToastProvider = ({ children, position = 'top-right', maxVisible = 5, stacking = 'stack' })=>{
+export const ToastProvider = ({ children, position = 'top-right', maxVisible = 5, stacking = 'stack', }) => {
     const [toasts, setToasts] = useState([]);
     const [pauseId, setPauseId] = useState(null);
     const timeoutsRef = useRef(new Map());
     const pauseTimeoutRef = useRef(null);
     const toastsRef = useRef([]);
-    useEffect(()=>{
+    // Keep ref in sync with state
+    useEffect(() => {
         toastsRef.current = toasts;
-    }, [
-        toasts
-    ]);
-    const removeToastInternal = useCallback((id)=>{
-        setToasts((prev)=>{
-            const toast = prev.find((t)=>t.id === id);
-            if (toast) toast.options.onClose?.();
-            return prev.filter((t)=>t.id !== id);
+    }, [toasts]);
+    const removeToastInternal = useCallback((id) => {
+        setToasts((prev) => {
+            const toast = prev.find((t) => t.id === id);
+            if (toast) {
+                toast.options.onClose?.();
+            }
+            return prev.filter((t) => t.id !== id);
         });
         const timeout = timeoutsRef.current.get(id);
         if (timeout) {
@@ -50,7 +51,7 @@ const ToastProvider = ({ children, position = 'top-right', maxVisible = 5, stack
             timeoutsRef.current.delete(id);
         }
     }, []);
-    const addToast = useCallback((message, variant = 'info', options = {})=>{
+    const addToast = useCallback((message, variant = 'info', options = {}) => {
         const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const duration = options.duration ?? 5000;
         const startTime = Date.now();
@@ -58,52 +59,42 @@ const ToastProvider = ({ children, position = 'top-right', maxVisible = 5, stack
             id,
             message,
             variant,
-            options: {
-                ...options,
-                duration,
-                position: options.position ?? position
-            },
+            options: { ...options, duration, position: options.position ?? position },
             startTime,
             paused: false,
-            duration
+            duration,
         };
-        setToasts((prev)=>{
-            if ('replace' === stacking) return [
-                newToast
-            ];
-            const filtered = prev.filter((t)=>{
+        setToasts((prev) => {
+            if (stacking === 'replace') {
+                return [newToast];
+            }
+            const filtered = prev.filter((t) => {
                 const elapsed = Date.now() - t.startTime;
                 return elapsed < (t.options.duration ?? 5000);
             });
-            return [
-                ...filtered,
-                newToast
-            ].slice(-maxVisible);
+            return [...filtered, newToast].slice(-maxVisible);
         });
-        const timeoutId = setTimeout(()=>{
+        const timeoutId = setTimeout(() => {
             removeToastInternal(id);
         }, duration);
         timeoutsRef.current.set(id, timeoutId);
         return id;
-    }, [
-        maxVisible,
-        stacking,
-        position,
-        removeToastInternal
-    ]);
-    const dismissInternal = useCallback((id)=>{
-        const toast = toastsRef.current.find((t)=>t.id === id);
-        if (!toast) return;
-        setToasts((prev)=>prev.map((t)=>{
-                if (t.id === id) return {
-                    ...t,
-                    paused: true
-                };
-                return t;
-            }));
-        if (pauseTimeoutRef.current) clearTimeout(pauseTimeoutRef.current);
+    }, [maxVisible, stacking, position, removeToastInternal]);
+    const dismissInternal = useCallback((id) => {
+        const toast = toastsRef.current.find((t) => t.id === id);
+        if (!toast)
+            return;
+        setToasts((prev) => prev.map((t) => {
+            if (t.id === id) {
+                return { ...t, paused: true };
+            }
+            return t;
+        }));
+        if (pauseTimeoutRef.current) {
+            clearTimeout(pauseTimeoutRef.current);
+        }
         setPauseId(id);
-        pauseTimeoutRef.current = setTimeout(()=>{
+        pauseTimeoutRef.current = setTimeout(() => {
             setPauseId(null);
             removeToastInternal(id);
         }, 500);
@@ -112,12 +103,10 @@ const ToastProvider = ({ children, position = 'top-right', maxVisible = 5, stack
             clearTimeout(timeout);
             timeoutsRef.current.delete(id);
         }
-    }, [
-        removeToastInternal
-    ]);
-    const dismissAllInternal = useCallback(()=>{
+    }, [removeToastInternal]);
+    const dismissAllInternal = useCallback(() => {
         setPauseId('all');
-        toastsRef.current.forEach((toast)=>{
+        toastsRef.current.forEach((toast) => {
             const timeout = timeoutsRef.current.get(toast.id);
             if (timeout) {
                 clearTimeout(timeout);
@@ -125,49 +114,40 @@ const ToastProvider = ({ children, position = 'top-right', maxVisible = 5, stack
             }
         });
     }, []);
-    const resumeAllInternal = useCallback(()=>{
+    const resumeAllInternal = useCallback(() => {
         setPauseId(null);
-        toastsRef.current.forEach((toast)=>{
+        toastsRef.current.forEach((toast) => {
             if (toast.paused && toast.duration > 500) {
-                const timeout = setTimeout(()=>{
+                const timeout = setTimeout(() => {
                     removeToastInternal(toast.id);
                 }, toast.duration - (Date.now() - toast.startTime));
                 timeoutsRef.current.set(toast.id, timeout);
             }
         });
-    }, [
-        removeToastInternal
-    ]);
-    useEffect(()=>()=>{
-            timeoutsRef.current.forEach((timeout)=>clearTimeout(timeout));
-            if (pauseTimeoutRef.current) clearTimeout(pauseTimeoutRef.current);
-        }, []);
+    }, [removeToastInternal]);
+    useEffect(() => {
+        return () => {
+            timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+            if (pauseTimeoutRef.current) {
+                clearTimeout(pauseTimeoutRef.current);
+            }
+        };
+    }, []);
     const value = {
         addToast,
         removeToast: removeToastInternal,
         handleDismissAll: dismissAllInternal,
-        handleResumeAll: resumeAllInternal
+        handleResumeAll: resumeAllInternal,
     };
-    return /*#__PURE__*/ jsxs(ToastContext.Provider, {
-        value: value,
-        children: [
-            children,
-            /*#__PURE__*/ jsx(ToastContainer, {
-                toasts: toasts,
-                position: position,
-                pauseId: pauseId,
-                onDismiss: dismissInternal,
-                onDismissAll: dismissAllInternal,
-                onResumeAll: resumeAllInternal
-            })
-        ]
-    });
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(ToastContainer, { toasts: toasts, position: position, pauseId: pauseId, onDismiss: dismissInternal, onDismissAll: dismissAllInternal, onResumeAll: resumeAllInternal })] }));
 };
-const ToastContainer = ({ toasts, position, pauseId, onDismiss, onDismissAll, onResumeAll })=>{
+const ToastContainer = ({ toasts, position, pauseId, onDismiss, onDismissAll, onResumeAll, }) => {
     const [container, setContainer] = useState(null);
-    useEffect(()=>{
+    useEffect(() => {
         const existingContainer = document.getElementById('toast-container');
-        if (existingContainer) setContainer(existingContainer);
+        if (existingContainer) {
+            setContainer(existingContainer);
+        }
         else {
             const el = document.createElement('div');
             el.id = 'toast-container';
@@ -175,62 +155,23 @@ const ToastContainer = ({ toasts, position, pauseId, onDismiss, onDismissAll, on
             setContainer(el);
         }
     }, []);
-    if (!container) return null;
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
-        className: clsx(toastContainer, toastWrapper[positionToClassKey[position]]),
-        onMouseEnter: onDismissAll,
-        onMouseLeave: onResumeAll,
-        children: toasts.map((toast)=>{
+    if (!container)
+        return null;
+    return createPortal(_jsx("div", { className: clsx(toastContainer, toastWrapper[positionToClassKey[position]]), onMouseEnter: onDismissAll, onMouseLeave: onResumeAll, children: toasts.map((toast) => {
             const elapsed = Date.now() - toast.startTime;
-            const progress = (toast.duration - elapsed) / toast.duration * 100;
+            const progress = ((toast.duration - elapsed) / toast.duration) * 100;
             const fadeOutAnimation = getFadeOutForVariant(toast.variant);
-            return /*#__PURE__*/ jsx("div", {
-                className: toastItem,
-                style: {
-                    opacity: toast.paused || null !== pauseId ? 0.7 : 1,
-                    animation: `${slideInRight} 0.2s ease, 0.2s ease ${fadeOutAnimation} forwards`
-                },
-                onMouseEnter: ()=>onDismiss(toast.id),
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: toastContent,
-                    children: [
-                        /*#__PURE__*/ jsx(Icon, {
-                            name: 'success' === toast.variant ? 'check' : 'error' === toast.variant ? 'error' : 'info'
-                        }),
-                        /*#__PURE__*/ jsx("span", {
-                            style: {
-                                marginLeft: '8px'
-                            },
-                            children: toast.message
-                        }),
-                        false !== toast.options.closable && /*#__PURE__*/ jsx("button", {
-                            type: "button",
-                            className: toastCloseButton,
-                            onClick: ()=>onDismiss(toast.id),
-                            "aria-label": "Close toast",
-                            children: /*#__PURE__*/ jsx(Icon, {
-                                name: "close"
-                            })
-                        }),
-                        toast.duration > 0 && /*#__PURE__*/ jsx("div", {
-                            className: toastProgressBarContainer,
-                            children: /*#__PURE__*/ jsx("div", {
-                                className: toastProgressBar,
-                                style: {
-                                    width: `${progress}%`
-                                }
-                            })
-                        })
-                    ]
-                })
-            }, toast.id);
-        })
-    }), container);
+            return (_jsx("div", { className: toastItem, style: {
+                    opacity: toast.paused || pauseId !== null ? 0.7 : 1,
+                    animation: `${slideInRight} 0.2s ease, 0.2s ease ${fadeOutAnimation} forwards`,
+                }, onMouseEnter: () => onDismiss(toast.id), children: _jsxs("div", { className: toastContent, children: [_jsx(Icon, { name: toast.variant === 'success' ? 'check' : toast.variant === 'error' ? 'error' : 'info' }), _jsx("span", { style: { marginLeft: '8px' }, children: toast.message }), toast.options.closable !== false && (_jsx("button", { type: "button", className: toastCloseButton, onClick: () => onDismiss(toast.id), "aria-label": "Close toast", children: _jsx(Icon, { name: "close" }) })), toast.duration > 0 && (_jsx("div", { className: toastProgressBarContainer, children: _jsx("div", { className: toastProgressBar, style: { width: `${progress}%` } }) }))] }) }, toast.id));
+        }) }), container);
 };
-const useToast = ()=>{
+export const useToast = () => {
     const context = useContext(ToastContext);
     return context;
 };
-const Toast = ({ message, variant = 'info', options, className })=>null;
+export const Toast = ({ message, variant = 'info', options, className }) => {
+    return null;
+};
 Toast.displayName = 'Toast';
-export { Toast, ToastProvider, useToast };

package/dist/components/Toast/index.js

@@ -1,2 +1 @@
-import { Toast, ToastProvider, useToast } from "./Toast.js";
-export { Toast, ToastProvider, useToast };
+export { ToastProvider, Toast, useToast, } from './Toast';

package/dist/components/Toast/styles.css.d.ts

@@ -13,7 +13,7 @@ export declare const fadeOutWarning: string;
 export declare const fadeOutInfo: string;
 export declare const slideOut: string;
 export declare const toastContainer: string;
-export declare const toastWrapper: Record<"bottomLeft" | "bottomRight" | "topLeft" | "topRight" | "topCenter" | "bottomCenter", string>;
+export declare const toastWrapper: Record<"topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight", string>;
 export declare const toastItem: string;
 export declare const toastCloseButton: string;
 export declare const toastProgressBarContainer: string;

package/dist/components/Toast/styles.css.js

@@ -1,32 +1,192 @@
-import "src/styles/sprinkles.css.ts.vanilla.css!=!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/styles/sprinkles.css.ts.vanilla.css\",\"source\":\"#H4sIAAAAAAAAA5Wc227jVhJF3_srBAwGyDw4EG-HpPMSSpR-Y0CRh6Rs3ZqS23YP-t8HaZItn127SDfylqyyVdIqWrsC1N-H4t12i_J8vJxP9nS7_vXlz_9678H1W3eMXxb_-7JYlOfDuXtc_GsbbbPt5q8vPz4Qrw6R55vNNneJd4dYbfPtdu0QydIhMpMHSPgOkSTrEInQIcxmFSNhHCIKsxUSiUMEYbqGbpPCIbwsXW63LlE6xNJLvG3qEtYlgjjM3XcsaVwiNOEKXsceiCjOQpd4dokozJLMJY7wM4LMwPtxBsLPo8AlvkIvXh5ELnF1Cd9betCtcEy86-jY1oBjCTq2QcdSdGyTIoGObdDCFB3LcyTQsTxBAh3Lfeg2RcfWOTiWomPrABxL0bFsA46l6FhqwLEUHUs8cCxFx0wOjqXoWBSBYyk6FvrgWIqO-Rk4lgrHYnAsFY6l-K6L59gKHEtdx9bLPIPPtgDH4vV6u3IJcCxdZUi4jsXLTPwMcMykORLgmEnW-ErBsXWcQ7cFOBaafGtcAhwzxs_hdYBjJopW8DrAMRNmme8S4JgJtkniEkckPAOvAxyLfBPBbxHPsRQcK9Cx5caDXsCxZCs-W9exTbJZb13XC9exPMxXG7fbnevYOljnuft02LmOZdtVnru97FzH0n9Edj_9netYkmfe2p39netYHKfLldvtznXMmMRfue_6znUsCmM_cx3buY6FaxOn8Dpcx0I_SpOlS7iOBVmYG3f2d65jgRd6ERCuY34chKH7xN25jnkbPwngk3Md80Iv86EXcGy13HhAgGPZP_-4BDiWb9Yb6AUcy_P1xn3HStexfLne5O7rKF3H1svVZu1-cqXr2CpYLVfuKy1dx7Io8zP3lZauY6lJ_QxeqetYkiYh-FG6jsVpHCbwSl3HTG6S2P3kStexaBNlBgjXscgLNxF06zoWRqEfus-P0nUsiIMocCeqdB3zMz_14R0Dx1Ze5gEBjm2XGw_e096xXVE-N9355VTxL_7lq8TIt__yXWIkAlRLiZEcUPkSI2GgCiVGEkFlJEZiQZVIjGSDqpAYCQhVKTGSEipLMBkVqoZgMi9Ue4aJ0FA9E0wmh-rIfpqID9WZYSJDVF9ZpyJIVFeCyTRRcXvFh0XtFbmiovaKcGGpvSJhWGqviBmW2iuyhqX2isBhqb0idVhqr4geltor8oel9ooQYqm9IolYaq-II5baKzKJpfaKYGKpvSKdWGqviCiW24s5xXJ7MaxY_uzFxGKJvSS21MxemV1qZq8MMDWxl6SYmtkro0zN7JV5pmb2ylBTM3tlsqmZvTLe1MxemXFqZq8MOjWzV6admtkrI0_N7JW5p-bPXgw_NbVXJKCa2StjUE3sJVmoJvaSQNQQe0kqaoi9JBo1xF6SjxpiLwlJDbGXJKWG2EviUkPsJZmpIfaS4NQQe0l6aoi9JEI1xF6SoxpiLwlTDbGXJKqG2EtiVcPsldmqYfbKgNUwe2XKapi9Mmq1xF6St1piLwldLbGXJK-W2EviV0vsJRmsJfaSINYSe0kaa4m9JJK1xF6Sy1piLwlnLbGXJLSW2EtiWkvsJVmtZfbKwNYye3-ltr_xf978hH8V93YtFtX-ejkU74-L0_lk__qyWPz4SAVI1Qf7JiiD1O5wLp8FliK2Px325JeWA_e6r27t46J4uZ0FU7uMt1z-WzB7l4kIcnARP5LIeUBau2_am_JyOoDo63kBiL2gN2DYK_LGz-6fD-Oh2ne2vO3Pp8dFd36VcKDA5fnwcjxJfvwwn16ut339_lCeTzd7uj0urrfO3spWVqRaxc9feb0V3U0WlVpRaU8328mCevK32FMlS_ZqK5eitA_Fz6GRZYfpsp29vVpL3rnRlOKwb04P-5s9XifetY7RU-_YCyvQ3q039aezd8ofjboUVbU_NQ-38-VxsZRcwLjwIh8JvmFkwsiUkZ5haMlQOpB-DejufLudj7SpvYLSvg4KTFs7KzDvrlNo3uAL0Adb32h7bxRkzQWoQY-y1gI0oUdpYwG60LO0rQBt6PrnoOwrQBkGkjaGNgws7Qx1GFjeGurQTfyRCEYdjkXX7E_qJxZ0jKN9vTCSdvXGSNpTuGQo7SgMXFT9sEJDQdZTmFKUNRWWFOVd1ZTlbe1dVnkahgeC0ZbOBKQNdQTk7bwQkjcDn7z-IIyWnGQtRQFnWVeR4SxtLEo5THuLRgF2566ynTpRUc042teekbSrAyN5T2eG8o46F1UnKnqhIO3pjaKsKbOkKO3KBJSlbRnjsspEmZRgrCVTEpA2VBOQt7MnJG8GPnl9osyZk7SljrO0qxfO8sbeOEx7i1GAotq_XFlvMX78A8l6iw1nWW9xylnaW1xymPc2utAU1L54__G_0z4OHwn66s8fCf6au4_Ix1f699FW-2JxLTtrT4viVC3-OO5PD0M4jU1yefvPUHv_pj_8C5Lk-x_68U-BZMc8L9hYsr9SvYALCd-zvaCrXzQkfEE2SI65WpBPSEYKeERwSNgCvPwCMfkL9CpQ9XV-E6j2Qt8Fqb1S7-6AshGQJaFact8LyKq7FFPbAVlX6HVu4pWllV56z76yrJn5jUMKloVPEy3C1kAWH-eKP-wOZPXdOG2DIGuuvGbuXf3Gy6be0feJ36S9m_7dTLlZkHTI6eFJLPmY84nGF5wfn9KyoOIF6oPAb0SB8-VAFjypBWrXR7VEbfyilui9X9Uavf1voubDN3KJvyu41nogdXK-n8sCaZT7NV1WSKfcb-uyQlr18Uu75KVU7nd3WSGtcr_CywqpFXyTlyVSq27mz15w10puNCR95bTa9TfOqz2_c17tOPR4gdpvGGLB5AcdxgqudRwWSoHWclgpBXrPjVKhN_2EFRNP8PBIYbVhIdDk8zsUBk0_vkNh0PTTOxQGTT-8IyHQ3LM7EgbNPbojIdHskzsSGs0-uKO7SHKTIumG02rXT5xXez5yXu_4wgv0fq9YMDnJ0TcFVzt-Vwq0lo2nFKg9m1CpUJs2MVZMTLIpKKw1bIRAk5NshEHTk2yEQdOTbIRB05NshEBzk2yEQXOTbIREs5NshEazkxxLkT5ucCQvNXL3OLJCaATbHFkhXMKdjiwRPuFmR5bcnbrvdyT15FJql0eXU3u7uJze0dUF3T7mtz_e0g_J-sf_jfVP9Bvrn-R31j-731r_2E-vf9pPr3-eP7v-OX12_fP18-uf2-fXP6-fXv98__z65-7Ap9c_kVoytf65S_F765-dXje3qLB66dSyop35jer653mixdn1z2mueHL9czfu8-ufG6-Ze1dfednUO_p94jep65-7mZ9Z_0ScVhchCefVLciO8_oKxPICff_RioKZ9c-zWqB2fVJL1Ma_qiV67ze1Rm__VdRMrn--K7i6EZA6zawEpFFz6x_p1Nz6R1o1vf6RUs2tf6RVc-sfqdXs-kdqNbv-uWv1mfXPjdNq16-cV3v-znl9O-DzAn09EGHB9PonUXB1G7JTCtR9iFUK9J5bpUJv-hkrptY_JwqrDQuBptc_wqCZ9Y8waGb9IwyaWf8IgWbXP8Kg2fWPkGh-_SM0ml__3EX6zPqn5bTa9TPn1Z5PnNc7_soL9H5vWDC9_nlVcLXj70qBuhvwlQJ9NRApFfpOJMGKqfXPjsLqNkQINL3-EQbNrH-EQTPrH2HQzPpHCDS7_hEGza5_hETz6x-h0fz6R4o0vf6RGs2tf4RGs-sf4dL8-kf4NL_-uTs1tf55dim1y5PLqb19dTm9o5sL4vrnx5dh_fPHpbO17a4PP-8wPFzL1h7t46Iquud--XP_keNCEW-w9T_zzr0BN95iQO47cOMxBuASD7jxGgNyAXDjOQbkIuDGewzIxcCNBxmQS4EbLzIgtwNuPMmAXAXceJMBuRq54SgDci1yw1UG5J4E159lQO6A3HCXAbmT-Hn9YQbkLoLrLzMg14l--9MMyN2QG24zIEd8pp-b9Lm_zoCc9HnDfE6lz_19BuSkzxvmfSp97i80ICd97k80ICd97m80ICd97o80ICd97q80ICd97s80ICd97u80ICd97g81ICd97i81ICd97k81ICd97m81ICd97o81IEd8jonPKfE5ZZ8beT6viM8p-jwebACuED4PFxuQEz4PJxuQQ5_Hmw3ICZ-How3ICZ-Hqw3ICZ-Hsw3ICZ-Huw3ICZ-Hww3ICZ-Hyw3ICZ-H0w3ICZ-H2w3ICZ-H4w3ICZ-H6w3IkedzSnwupM_9_QbkhM_DAQfk0OfxggNy6PN4wgG4Hfo83nBADn0ejzgghz6PVxyQQ5_HMw7Ioc_jHQfk0OfxkANy6PN4yQE59Hk85YAc-jzeckAOfR6POSCHPo_XHJBDn8dzDsihz-M9B-TQ5_GgA3LC5-GiA3LC5-GkA3LC5-GmA3LC5-GoA3Al-jxedUAOfR7POiCHPo93HZBDn8fDDsihz-NlB-TQ5_G0A3Lo83jbATn0eTzugBz6PF53QA59Hs87IIc-j_cdkEOfxwMPyKHP44UH5ITPw4kH5ITPw40H5Eaf6X0-hN8YrCTD8juDlXhYeQxWMmIVMFgJilXEYCUtVjGDlchYpQxWcmO1Y7ASHquKwUqCrGoK8xhZtRTmWbJ64jANlNWBwjxVVif-k2m0rC4cpvmy6vi7QUNmdaMwT5qVNin041YmhWbOSpkUGjytMik0fVplUmgEtcqk0BxqlUmhYdQqk0ITqVUmhcZSq0wKzaZWmRQaUK0yKTSlWmVSaFS1yqTQvGqVSaGh1SqTQpOrVSaFxlerTQrLsFabFBZkrfY3haVZSydFibQ1nxSea2s-KTzc1nRSlIRb80nhMbfmk8Kzbs0nhQfemk8KT701nxQefWs-KTz_1nxSeAiu-aTwJFzzSeFxuOaTwjNxrf1NYcG4ViaFpuOaTwqPyDWdFCUn13RSlLDc0ElREnNDJ0WJzQ2dFCU7N3RSlADd0ElRUnRDJ0WJ0g2dFCVPN3RSlFDd0ElRknVDJ0WJ1w2dFCVjN3RSlKDd0ElR0nZDJ0WJ3A2fFJ67Gz4pPHw3fFJ4Am_4pPAY3tJJUbJ4SydFCeQtnRQllbd0UpRo3tJJUfJ5SydFCektnRQlqbd0UpS43tJJUTJ7SydFCe4tnRQlvbd0UpQI39JJUXJ8yyeFh_mWT8qHRP_j__OspDh2awAA\"}!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-import "src/styles/theme.css.ts.vanilla.css!=!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/styles/theme.css.ts.vanilla.css\",\"source\":\"QGxheWVyIHRoZW1lOwpib2R5IHsKICBmb250LWZhbWlseTogJ0ludGVyJywgc2Fucy1zZXJpZjsKfQpoMSwgaDIsIGgzLCBoNCwgaDUsIGg2IHsKICBmb250LWZhbWlseTogJ1BvcHBpbnMnLCBzYW5zLXNlcmlmOwp9CkBsYXllciB0aGVtZSB7CiAgOnJvb3QgewogICAgLS1fNGxzaGd6MDogIzJBMjkyRTsKICAgIC0tXzRsc2hnejE6ICM3OTc0ODY7CiAgICAtLV80bHNoZ3oyOiAjQTVBMkFFOwogICAgLS1fNGxzaGd6MzogI0Y1RkFGRTsKICAgIC0tXzRsc2hnejQ6ICMwMjEwMUQ7CiAgICAtLV80bHNoZ3o1OiAjMDQ2NEJFOwogICAgLS1fNGxzaGd6NjogIzAxODFGOTsKICAgIC0tXzRsc2hnejc6ICNEREVFRkQ7CiAgICAtLV80bHNoZ3o4OiAjQTZEM0ZDOwogICAgLS1fNGxzaGd6OTogI0MzQ0RERjsKICAgIC0tXzRsc2hnemE6ICNFOEVDRjM7CiAgICAtLV80bHNoZ3piOiAjRjhGQUZCOwogICAgLS1fNGxzaGd6YzogI0Y4RkFGQjsKICAgIC0tXzRsc2hnemQ6ICNGNUZDRkU7CiAgICAtLV80bHNoZ3plOiAjMDFDM0Y5OwogICAgLS1fNGxzaGd6ZjogIzA0NDI1MzsKICAgIC0tXzRsc2hnemc6ICNGNUY5RkU7CiAgICAtLV80bHNoZ3poOiAjMDQ2REY2OwogICAgLS1fNGxzaGd6aTogIzA1MjY1MjsKICAgIC0tXzRsc2hnemo6ICNGOEZBRkI7CiAgICAtLV80bHNoZ3prOiAjNTQ3MkE2OwogICAgLS1fNGxzaGd6bDogIzFFMjgzODsKICAgIC0tXzRsc2hnem06ICNGNUZBRkU7CiAgICAtLV80bHNoZ3puOiAjMDE4MUY5OwogICAgLS1fNGxzaGd6bzogIzA0MkQ1MzsKICAgIC0tXzRsc2hnenA6ICNGOEZBRkI7CiAgICAtLV80bHNoZ3pxOiAjQzNDRERGOwogICAgLS1fNGxzaGd6cjogIzAxODFGOTsKICAgIC0tXzRsc2hnenM6ICNBNUEyQUU7CiAgICAtLV80bHNoZ3p0OiAjRThFQ0YzOwogICAgLS1fNGxzaGd6dTogJ0ludGVyJywgc2Fucy1zZXJpZjsKICAgIC0tXzRsc2hnenY6ICdQb3BwaW5zJywgc2Fucy1zZXJpZjsKICB9Cn0\"}!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-import "src/components/Toast/styles.css.ts.vanilla.css!=!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/components/Toast/styles.css.ts.vanilla.css\",\"source\":\"#H4sIAAAAAAAAA8WV3Y7aMBCF73mKuUGiUo1Mge1iblZ9iu5VZeJJ4iWxI9vhr-LdKzsJUBTS0KVbCQTG9plvzkyGlzXuY8NztFDS6BDPKfwcANBh-ABwhisba5Oz6mvGHX4fTSgdflqGA7rgkXR7BtSvjwMAv9l5m15fnVRXj4OXa5pJHxryYThf_ozz-j6c13twpn3cuaXXw5mORFpoZv-YpsvXFpx5n1p9WKme-tD8tTmdibTQfP2dpjP1Hsk935Brw-9Bt3isHH-s3OqxctFj5cR_HQkZ36OBSOeFVqicXQ7GFRYG0UJb6aRWDGK5Q-GvHYhUAncMFovFYhnOSOXQENx4AQZKK1wOjo1QfEvI6YLB5KnY-UWGsTuvrmKctJI7tOZ0GHbaJ9O8NuVWpLRXJCOTtAe2vCW20s7p_F4X3u6Te58R677BenqRBb2tFC5lMKW0On3dQ7x02v-ec5NIRZpYz_70SSoPUiserROjSyWa1vNsRqA5r6PSWG1YEyZE5EJIldTPgpC2yPieQZxhAOKZTBSRDnPLIMLm1ltpnYz3JNLKoXKXW5HOfIgNNyNCfswymyaHSbA21soRKw94URmpkKRYW3aZE0v1Bk3IrE3RD4LTYXVVG76yOisdnmtPLypDL6sWFg3AtII6O0nq0CZZ8RH9DPVrXOVTuUsMF7K0DChQmBU7__a7Hj_O9JZBKoVAdcGrA-8pbVo1Zrdc6NU6v9A1HsMGA3nwnSuZ82q_MDoxaO03boCOpxaQWzz9gcbabLkRdtk29wJZjVnU89T3Qj1pAXKpSN21zfT8BVADXy6KCwAA\"}!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-var slideInRight = 'u0czf50';
-var slideInBottom = 'u0czf55';
-var toastContainer = 'u0czf5e';
-var slideInLeft = 'u0czf51';
-var slideOutRight = 'u0czf53';
-var fadeOut = 'u0czf58';
-var toastCloseButton = 'u0czf5m';
-var toastItem = 'u0czf5l';
-var toastContent = 'u0czf5p';
-var fadeOutError = 'u0czf5a';
-var slideOut = 'u0czf5d';
-var toastWrapper = {
-    topLeft: 'u0czf5f',
-    topCenter: 'u0czf5g',
-    topRight: 'u0czf5h',
-    bottomLeft: 'u0czf5i',
-    bottomCenter: 'u0czf5j',
-    bottomRight: 'u0czf5k'
-};
-var toastProgressBar = 'u0czf5o';
-var slideOutBottom = 'u0czf56';
-var slideOutLeft = 'u0czf54';
-var fadeOutInfo = 'u0czf5c';
-var fadeOutSuccess = 'u0czf59';
-var fadeIn = 'u0czf57';
-var fadeOutWarning = 'u0czf5b';
-var slideInTop = 'u0czf52';
-var toastProgressBarContainer = 'u0czf5n';
-export { fadeIn, fadeOut, fadeOutError, fadeOutInfo, fadeOutSuccess, fadeOutWarning, slideInBottom, slideInLeft, slideInRight, slideInTop, slideOut, slideOutBottom, slideOutLeft, slideOutRight, toastCloseButton, toastContainer, toastContent, toastItem, toastProgressBar, toastProgressBarContainer, toastWrapper };
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const slideInRight = keyframes({
+    '0%': {
+        transform: 'translateX(100%)',
+        opacity: '0',
+    },
+    '100%': {
+        transform: 'translateX(0)',
+        opacity: '1',
+    },
+});
+export const slideInLeft = keyframes({
+    '0%': {
+        transform: 'translateX(-100%)',
+        opacity: '0',
+    },
+    '100%': {
+        transform: 'translateX(0)',
+        opacity: '1',
+    },
+});
+export const slideInTop = keyframes({
+    '0%': {
+        transform: 'translateY(-100%)',
+        opacity: '0',
+    },
+    '100%': {
+        transform: 'translateY(0)',
+        opacity: '1',
+    },
+});
+export const slideOutRight = keyframes({
+    '0%': {
+        transform: 'translateX(0)',
+        opacity: '1',
+    },
+    '100%': {
+        transform: 'translateX(100%)',
+        opacity: '0',
+    },
+});
+export const slideOutLeft = keyframes({
+    '0%': {
+        transform: 'translateX(0)',
+        opacity: '1',
+    },
+    '100%': {
+        transform: 'translateX(-100%)',
+        opacity: '0',
+    },
+});
+export const slideInBottom = keyframes({
+    '0%': {
+        transform: 'translateY(100%)',
+        opacity: '0',
+    },
+    '100%': {
+        transform: 'translateY(0)',
+        opacity: '1',
+    },
+});
+export const slideOutBottom = keyframes({
+    '0%': {
+        transform: 'translateY(0)',
+        opacity: '1',
+    },
+    '100%': {
+        transform: 'translateY(100%)',
+        opacity: '0',
+    },
+});
+export const fadeIn = keyframes({
+    '0%': { opacity: '0' },
+    '100%': { opacity: '1' },
+});
+export const fadeOut = keyframes({
+    '0%': { opacity: '1' },
+    '100%': { opacity: '0' },
+});
+export const fadeOutSuccess = keyframes({
+    '0%': { opacity: '1' },
+    '100%': { opacity: '0' },
+});
+export const fadeOutError = keyframes({
+    '0%': { opacity: '1' },
+    '100%': { opacity: '0' },
+});
+export const fadeOutWarning = keyframes({
+    '0%': { opacity: '1' },
+    '100%': { opacity: '0' },
+});
+export const fadeOutInfo = keyframes({
+    '0%': { opacity: '1' },
+    '100%': { opacity: '0' },
+});
+export const slideOut = keyframes({
+    '0%': {
+        transform: 'translateX(0)',
+        opacity: '1',
+    },
+    '100%': {
+        transform: 'translateX(100%)',
+        opacity: '0',
+    },
+});
+export const toastContainer = style({
+    position: 'fixed',
+    zIndex: '9999',
+    pointerEvents: 'none',
+});
+export const toastWrapper = styleVariants({
+    topLeft: {
+        position: 'fixed',
+        top: '16px',
+        left: '16px',
+        zIndex: '9999',
+    },
+    topCenter: {
+        position: 'fixed',
+        top: '16px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: '9999',
+    },
+    topRight: {
+        position: 'fixed',
+        top: '16px',
+        right: '16px',
+        zIndex: '9999',
+    },
+    bottomLeft: {
+        position: 'fixed',
+        bottom: '16px',
+        left: '16px',
+        zIndex: '9999',
+    },
+    bottomCenter: {
+        position: 'fixed',
+        bottom: '16px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: '9999',
+    },
+    bottomRight: {
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: '9999',
+    },
+});
+export const toastItem = style({
+    width: '300px',
+    pointerEvents: 'auto',
+    marginBottom: '8px',
+});
+export const toastCloseButton = style({
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: vars.colors.textSecondary,
+    fontSize: '16px',
+    lineHeight: '1',
+    ':hover': {
+        color: vars.colors.textPrimary,
+    },
+});
+export const toastProgressBarContainer = style({
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: '3px',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    borderRadius: '0 0 4px 4px',
+    overflow: 'hidden',
+});
+export const toastProgressBar = style({
+    height: '100%',
+    borderRadius: '0 0 4px 4px',
+    transition: 'width 0.1s linear',
+    animation: `progressBar 0.3s ease ${fadeIn} forwards`,
+});
+export const toastContent = styleWithLayer({
+    flex: 1,
+    minWidth: 0,
+});

package/dist/components/Toggle/Toggle.d.ts

@@ -6,5 +6,5 @@ export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     size?: ToggleSize;
     label?: string;
 }
-declare const Toggle: ({ checked, onChange, size, label, disabled, id, ...props }: ToggleProps) => React.JSX.Element;
+declare const Toggle: ({ checked, onChange, size, label, disabled, id, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

package/dist/components/Toggle/Toggle.js

@@ -1,62 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { toggle, toggleFocusRing, toggleInput, toggleLabel, toggleSizes, toggleThumb, toggleThumbChecked, toggleThumbSizes, toggleThumbUnchecked, toggleTrack, toggleTrackChecked, toggleTrackUnchecked } from "./styles.css.js";
-import { useId, useState } from "react";
-import Box from "../Box/index.js";
-const Toggle = ({ checked = false, onChange, size = 'medium', label, disabled = false, id, ...props })=>{
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { toggle, toggleLabel, toggleInput, toggleTrack, toggleTrackChecked, toggleTrackUnchecked, toggleThumb, toggleThumbSizes, toggleThumbChecked, toggleThumbUnchecked, toggleFocusRing, toggleSizes, } from './styles.css';
+import { useState, useId } from 'react';
+import Box from '../Box';
+const Toggle = ({ checked = false, onChange, size = 'medium', label, disabled = false, id, ...props }) => {
     const [isFocused, setIsFocused] = useState(false);
     const generatedId = useId();
     const toggleId = id || `toggle-${generatedId}`;
-    const handleChange = (e)=>{
-        if (!disabled && onChange) onChange(e.target.checked);
+    const handleChange = (e) => {
+        if (!disabled && onChange) {
+            onChange(e.target.checked);
+        }
     };
-    return /*#__PURE__*/ jsxs(Box, {
-        as: "div",
-        className: toggle,
-        children: [
-            /*#__PURE__*/ jsxs(Box, {
-                as: "label",
-                htmlFor: toggleId,
-                className: toggleLabel,
-                children: [
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "input",
-                        type: "checkbox",
-                        id: toggleId,
-                        checked: checked,
-                        onChange: handleChange,
-                        disabled: disabled,
-                        className: toggleInput,
-                        onFocus: ()=>setIsFocused(true),
-                        onBlur: ()=>setIsFocused(false),
-                        "aria-checked": checked,
-                        role: "switch",
-                        ...props
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "span",
-                        className: clsx(toggleTrack, toggleSizes[size], checked ? toggleTrackChecked : toggleTrackUnchecked),
-                        "data-size": size,
-                        children: /*#__PURE__*/ jsx(Box, {
-                            as: "span",
-                            className: clsx(toggleThumb, toggleThumbSizes[size], checked ? toggleThumbChecked : toggleThumbUnchecked)
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "span",
-                        className: toggleFocusRing,
-                        "data-focused": isFocused,
-                        "aria-hidden": "true"
-                    })
-                ]
-            }),
-            label && /*#__PURE__*/ jsx(Box, {
-                as: "span",
-                marginLeft: "small",
-                children: label
-            })
-        ]
-    });
+    return (_jsxs(Box, { as: "div", className: toggle, children: [_jsxs(Box, { as: "label", htmlFor: toggleId, className: toggleLabel, children: [_jsx(Box, { as: "input", type: "checkbox", id: toggleId, checked: checked, onChange: handleChange, disabled: disabled, className: toggleInput, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "aria-checked": checked, role: "switch", ...props }), _jsx(Box, { as: "span", className: clsx(toggleTrack, toggleSizes[size], checked ? toggleTrackChecked : toggleTrackUnchecked), "data-size": size, children: _jsx(Box, { as: "span", className: clsx(toggleThumb, toggleThumbSizes[size], checked ? toggleThumbChecked : toggleThumbUnchecked) }) }), _jsx(Box, { as: "span", className: toggleFocusRing, "data-focused": isFocused, "aria-hidden": "true" })] }), label && _jsx(Box, { as: "span", marginLeft: "small", children: label })] }));
 };
-const Toggle_Toggle = Toggle;
-export { Toggle_Toggle as default };
+export default Toggle;