@esportsplus/ui 0.51.7 → 0.54.0

package/build/components/textarea/index.js

@@ -1,9 +1,10 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import form from '../form/index.js';
 import './scss/index.scss';
-const template_1x5yfkx2 = template_u1.template(`<textarea class='textarea' >`);
+const template_u22 = template_u0.template(`<textarea class='textarea' >`);
 class ReactiveObject_1x5yfkx0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -23,23 +24,44 @@ class ReactiveObject_1x5yfkx0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#error, _v1);
     }
 }
-const OMIT = ['state'];
-export default function (attributes) {
+const OMIT = ['autoresize', 'state'];
+function autoresize({ height }) {
+    let attributes = {
+        class: 'textarea--autoresize',
+        style: `
+                --max-height: ${height.max};
+                --min-height: ${height.min};
+            `
+    };
+    if (CSS.supports('field-sizing', 'content')) {
+        return attributes;
+    }
+    return {
+        ...attributes,
+        class: `${attributes.class} textarea--autoresize-fallback`,
+        oninput: (e) => {
+            let element = e.target;
+            element.style.setProperty('--content-height', '0px');
+            element.style.setProperty('--content-height', `${element.scrollHeight}px`);
+        }
+    };
+}
+export default component(function (attributes) {
     let state = attributes.state || new ReactiveObject_1x5yfkx0();
     return (() => {
-        let root_1x5yfkx1 = template_1x5yfkx2(), element_1x5yfkx3 = root_1x5yfkx1.firstChild;
-        template_u1.setProperties(element_1x5yfkx3, this?.attributes && omit(this.attributes, OMIT));
-        template_u1.setProperties(element_1x5yfkx3, omit(attributes, OMIT));
-        template_u1.setList(element_1x5yfkx3, 'class', () => state.active && '--active');
-        template_u1.on(element_1x5yfkx3, 'focusin', () => {
+        let root_u21 = template_u22(), element_u23 = root_u21.firstChild;
+        template_u0.setProperties(element_u23, this?.attributes && omit(this.attributes, OMIT));
+        template_u0.setProperties(element_u23, omit(attributes, OMIT));
+        template_u0.setProperties(element_u23, attributes.autoresize && autoresize(attributes.autoresize));
+        template_u0.setList(element_u23, 'class', () => state.active && '--active');
+        template_u0.on(element_u23, 'focusin', () => {
             state.active = true;
         });
-        template_u1.on(element_1x5yfkx3, 'focusout', () => {
+        template_u0.on(element_u23, 'focusout', () => {
             state.active = false;
         });
-        template_u1.onrender(element_1x5yfkx3, form.input.onrender(state));
-        template_u1.setProperty(element_1x5yfkx3, 'value', attributes?.value || '');
-        return root_1x5yfkx1;
+        template_u0.onrender(element_u23, form.input.onrender(state));
+        template_u0.setProperty(element_u23, 'value', attributes?.value || '');
+        return root_u21;
     })();
-}
-;
+});

package/build/components/textarea/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.textarea{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.textarea:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.textarea:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.textarea.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.textarea{background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;field-sizing:content;font-size:var(--font-size);line-height:var(--line-height);min-width:0;padding:var(--padding-vertical) var(--padding-horizontal);transition:background var(--transition-duration) ease-in-out, border-color var(--transition-duration) ease-in-out, box-shadow var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;white-space:normal;flex-wrap:wrap;flex:auto;align-items:center;width:100%;display:flex;position:relative}.textarea:invalid,.textarea:required{box-shadow:none}}
+@layer components {.textarea{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.textarea:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.textarea:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.textarea.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.textarea{background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;font-size:var(--font-size);min-width:0;padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);flex:auto;width:100%;position:relative}.textarea:invalid,.textarea:required{box-shadow:none}.textarea--autoresize{field-sizing:content;height:auto;max-height:var(--max-height);min-height:var(--min-height);resize:none;overflow-y:auto}.textarea--autoresize-fallback{box-sizing:border-box;height:calc(var(--content-height,var(--min-height)) + 2 * var(--border-width))}}
 /*$vite$:1*/

package/build/components/toast/index.d.ts

@@ -0,0 +1,9 @@
+import { remove, toast } from './manager.js';
+import './scss/index.scss';
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+declare const toaster: (options?: {
+    position?: Position;
+}) => DocumentFragment | Text;
+export default toaster;
+export { remove, toast };
+export type { Position };

package/build/components/toast/index.js

@@ -0,0 +1,157 @@
+import * as template_u0 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import clipboard from '../clipboard/index.js';
+import icon from '../icon/index.js';
+import { buildVisibleToastLayout, remove, state, toast } from './manager.js';
+import { toasts } from './manager.js';
+import check from './svg/check.svg';
+import close from './svg/close.svg';
+import copy from './svg/copy.svg';
+import error from './svg/error.svg';
+import info from './svg/info.svg';
+import loading from './svg/loading.svg';
+import success from './svg/success.svg';
+import warning from './svg/warning.svg';
+import './scss/index.scss';
+const template_u25 = template_u0.template(`<div class='toast-description '>`);
+const template_u28 = template_u0.template(`<div class='toast-action button button--primary' >`);
+const template_u2b = template_u0.template(`<button class='toast-close' aria-label='Dismiss' >`);
+const template_u2e = template_u0.template(`<div ><div class='toast-content'><!--$--><div class='--flex-column --flex-fill'><div class='toast-title'></div></div><!--$-->`);
+const template_u2m = template_u0.template(`<div class='toaster ' >`);
+class ReactiveObject_1ali9cs0 extends reactivity_u0.ReactiveObject {
+    #direction = this[reactivity_u0.SIGNAL]('');
+    #x = this[reactivity_u0.SIGNAL](0);
+    #y = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get direction() {
+        return reactivity_u0.read(this.#direction);
+    }
+    set direction(_v0) {
+        reactivity_u0.write(this.#direction, _v0);
+    }
+    get x() {
+        return reactivity_u0.read(this.#x);
+    }
+    set x(_v1) {
+        reactivity_u0.write(this.#x, _v1);
+    }
+    get y() {
+        return reactivity_u0.read(this.#y);
+    }
+    set y(_v2) {
+        reactivity_u0.write(this.#y, _v2);
+    }
+}
+const ICONS = { error, info, loading, success, warning };
+const dismiss = toast.dismiss;
+function row(toast, position) {
+    let swipe = new ReactiveObject_1ali9cs0(), horizontal = position.endsWith('left') || position.endsWith('right'), pointerId = -1, pressed = false, startX = 0, startY = 0, swiping = false, top = position.startsWith('top');
+    const finish = () => {
+        pressed = false;
+        if (!swiping) {
+            return;
+        }
+        swiping = false;
+        if (Math.hypot(swipe.x, swipe.y) > 80) {
+            swipe.direction = Math.abs(swipe.x) > Math.abs(swipe.y)
+                ? (swipe.x < 0 ? 'left' : 'right')
+                : (swipe.y < 0 ? 'up' : 'down');
+            dismiss(toast.id);
+        }
+        else {
+            swipe.direction = '';
+            swipe.x = 0;
+            swipe.y = 0;
+        }
+    };
+    return (() => {
+        let root_u2d = template_u2e(), element_u2f = root_u2d.firstChild, element_u2g = element_u2f.firstElementChild.firstChild, element_u2h = element_u2f.firstElementChild.firstElementChild.firstElementChild, element_u2i = element_u2f.firstElementChild.firstElementChild, element_u2j = element_u2g.nextSibling.nextSibling, element_u2k = element_u2f.firstElementChild;
+        template_u0.setList(element_u2f, 'class', () => `toast toast--${toast.type}${toast.status === 'starting' ? ' toast--starting' : toast.status === 'ending' ? ' toast--ending' : ''}${swipe.x !== 0 || swipe.y !== 0 ? ' toast--swiping' : ''}`);
+        template_u0.setList(element_u2f, 'style', () => {
+            let item = buildVisibleToastLayout([...toasts]).items.find((i) => i.toast === toast), visibleIndex = item?.visibleIndex ?? 0, offsetY = item?.offsetY ?? 0;
+            return `
+                        --toast-index:${visibleIndex};
+                        --toast-offset-y:${offsetY}px;
+                        --toast-height:${toast.height}px;
+                        --toast-swipe-x:${swipe.x}px;
+                        --toast-swipe-y:${swipe.y}px;`;
+        });
+        template_u0.setProperty(element_u2f, 'data-swipe-direction', () => swipe.direction);
+        template_u0.onconnect(element_u2f, (el) => {
+            let observer = new ResizeObserver(() => { toast.height = el.offsetHeight; });
+            el.__toastObserver = observer;
+            observer.observe(el);
+        });
+        template_u0.ondisconnect(element_u2f, (el) => {
+            el.__toastObserver?.disconnect();
+        });
+        template_u0.delegate(element_u2f, 'pointerdown', (e) => {
+            pointerId = e.pointerId;
+            pressed = true;
+            startX = e.clientX;
+            startY = e.clientY;
+        });
+        template_u0.delegate(element_u2f, 'pointermove', (e) => {
+            if (!pressed) {
+                return;
+            }
+            let x = horizontal ? e.clientX - startX : 0, y = top ? Math.min(0, e.clientY - startY) : Math.max(0, e.clientY - startY);
+            if (!swiping) {
+                if (Math.hypot(x, y) < 6) {
+                    return;
+                }
+                swiping = true;
+                e.currentTarget.setPointerCapture(pointerId);
+            }
+            swipe.x = x;
+            swipe.y = y;
+        });
+        template_u0.delegate(element_u2f, 'pointerup', finish);
+        template_u0.delegate(element_u2f, 'pointercancel', finish);
+        template_u0.slot(element_u2g, toast.type !== 'message' ? icon({ class: 'toast-icon' }, ICONS[toast.type]) : '');
+        template_u0.slot(element_u2h, toast.title, 1);
+        template_u0.slot(element_u2i, toast.description && (() => {
+            let root_u24 = template_u25(), element_u26 = root_u24.firstChild;
+            template_u0.setList(element_u26, 'class', toast.type === 'error' && typeof toast.description === 'string' && toast.description.length > 180 && 'toast-description--clamp');
+            template_u0.slot(element_u26, toast.description, 1);
+            return root_u24;
+        })(), 2);
+        template_u0.slot(element_u2j, toast.type === 'error' && typeof toast.description === 'string' && clipboard.onclick({
+            class: 'toast-copy button',
+            value: String(toast.description)
+        }, (state) => icon(state.copied ? check : copy)));
+        template_u0.slot(element_u2k, toast.action && (() => {
+            let root_u27 = template_u28(), element_u29 = root_u27.firstChild;
+            template_u0.delegate(element_u29, 'click', () => {
+                toast.action?.onclick();
+                dismiss(toast.id);
+            });
+            template_u0.slot(element_u29, toast.action?.label, 1);
+            return root_u27;
+        })(), 2);
+        new template_u0.EffectSlot(element_u2f, () => toast.dismissible && (() => {
+            let root_u2a = template_u2b(), element_u2c = root_u2a.firstChild;
+            template_u0.delegate(element_u2c, 'click', () => dismiss(toast.id));
+            template_u0.slot(element_u2c, icon(close), 1);
+            return root_u2a;
+        })(), 2);
+        return root_u2d;
+    })();
+}
+const toaster = (options) => {
+    let position = options?.position ?? 'top-right';
+    return (() => {
+        let root_u2l = template_u2m(), element_u2n = root_u2l.firstChild;
+        template_u0.setList(element_u2n, 'class', () => state.active ? '--active' : '');
+        template_u0.setProperty(element_u2n, 'data-position', position);
+        template_u0.setList(element_u2n, 'style', () => `--toast-frontmost-height:${buildVisibleToastLayout([...toasts]).frontmostHeight}px;`);
+        template_u0.on(element_u2n, 'mouseenter', () => { state.active = true; });
+        template_u0.on(element_u2n, 'mouseleave', () => { state.active = false; });
+        element_u2n.appendChild(new template_u0.ArraySlot(toasts, (value) => row(value, position), true).fragment);
+        return root_u2l;
+    })();
+};
+export default toaster;
+export { remove, toast };

package/build/components/toast/manager.d.ts

@@ -0,0 +1,60 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray } from '@esportsplus/reactivity';
+import { type Renderable } from '@esportsplus/template';
+declare class ReactiveObject_0ktzs5p0 extends reactivity_u0.ReactiveObject<any> {
+    #private;
+    constructor();
+    get active(): boolean;
+    set active(_v0: boolean);
+}
+type Action = {
+    label: string;
+    onclick: () => void;
+};
+type Options = {
+    action?: Action;
+    description?: Renderable<unknown> | string;
+    dismissible?: boolean;
+    duration?: number;
+    id?: string;
+    priority?: 'low' | 'high';
+};
+type Status = 'ending' | 'starting' | 'visible';
+type Toast = {
+    action?: Action;
+    createdAt: number;
+    description?: Renderable<unknown> | string;
+    dismissible: boolean;
+    duration: number;
+    height: number;
+    id: string;
+    priority: 'low' | 'high';
+    status: Status;
+    title: Renderable<unknown> | string;
+    type: Type;
+};
+type Type = 'success' | 'error' | 'info' | 'warning' | 'loading' | 'message';
+declare function buildVisibleToastLayout(toasts: Toast[]): {
+    frontmostHeight: number;
+    items: {
+        offsetY: number;
+        toast: Toast;
+        visibleIndex: number;
+    }[];
+};
+declare function remove(id: string): void;
+declare function update(id: string, options: Options): void;
+declare const state: ReactiveObject_0ktzs5p0;
+declare const toasts: ReactiveArray<Toast>;
+declare const toast: {
+    dismiss: (id?: string) => void;
+    error: (title: Renderable<unknown> | string, options?: Options) => string;
+    info: (title: Renderable<unknown> | string, options?: Options) => string;
+    loading: (title: Renderable<unknown> | string, options?: Options) => string;
+    message: (title: Renderable<unknown> | string, options?: Options) => string;
+    success: (title: Renderable<unknown> | string, options?: Options) => string;
+    update: typeof update;
+    warning: (title: Renderable<unknown> | string, options?: Options) => string;
+};
+export { buildVisibleToastLayout, remove, state, toast, toasts };
+export type { Options, Toast, Type };

package/build/components/toast/manager.js

@@ -0,0 +1,203 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray, effect } from '@esportsplus/reactivity';
+class ReactiveObject_0ktzs5p0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+const DURATIONS = {
+    error: 6000,
+    info: 4000,
+    loading: 0,
+    message: 4000,
+    success: 4000,
+    warning: 6000
+};
+const EXIT_DURATION = 300;
+let counter = 0, paused = false, timers = new Map();
+function buildVisibleToastLayout(toasts) {
+    let fullIndex = 0, fullOffsetY = 0, liveIndex = 0, liveOffsetY = 0, items = toasts.map((toast) => {
+        let height = normalizeToastHeight(toast.height), item;
+        if (toast.status === 'ending') {
+            item = {
+                offsetY: fullOffsetY,
+                toast,
+                visibleIndex: fullIndex
+            };
+            fullOffsetY += height;
+            fullIndex += 1;
+            return item;
+        }
+        item = {
+            offsetY: liveOffsetY,
+            toast,
+            visibleIndex: liveIndex
+        };
+        fullOffsetY += height;
+        fullIndex += 1;
+        liveOffsetY += height;
+        liveIndex += 1;
+        return item;
+    }), frontmostLiveToast = toasts.find((toast) => toast.status !== 'ending');
+    return {
+        frontmostHeight: normalizeToastHeight(frontmostLiveToast?.height),
+        items
+    };
+}
+function clearTimer(id) {
+    let timer = timers.get(id);
+    if (!timer) {
+        return;
+    }
+    if (timer.handle !== undefined) {
+        clearTimeout(timer.handle);
+    }
+    timers.delete(id);
+}
+function create(type, title, options = {}) {
+    let id = options.id ?? `toast-${++counter}`, toast = reactivity_u0.reactive({
+        action: options.action,
+        createdAt: Date.now(),
+        description: options.description,
+        dismissible: options.dismissible ?? true,
+        duration: options.duration ?? DURATIONS[type],
+        height: 0,
+        id,
+        priority: options.priority ?? 'low',
+        status: 'starting',
+        title,
+        type
+    });
+    toasts.push(toast);
+    queueMicrotask(() => {
+        if (toast.status === 'starting' && toasts.includes(toast)) {
+            toast.status = 'visible';
+        }
+    });
+    if (type !== 'loading' && toast.duration > 0) {
+        schedule(toast);
+    }
+    return id;
+}
+function dismiss(id) {
+    let toast = toasts.find((value) => value.id === id);
+    if (!toast || toast.status === 'ending') {
+        return;
+    }
+    clearTimer(id);
+    toast.status = 'ending';
+    setTimeout(() => remove(id), EXIT_DURATION);
+}
+function normalizeToastHeight(height) {
+    return typeof height === 'number' && Number.isFinite(height) && height > 0 ? height : 0;
+}
+function pause() {
+    for (let timer of timers.values()) {
+        if (timer.handle === undefined) {
+            continue;
+        }
+        clearTimeout(timer.handle);
+        timer.remaining = Math.max(0, timer.remaining - (performance.now() - timer.started));
+        timer.handle = undefined;
+    }
+}
+function remove(id) {
+    let index = toasts.findIndex((toast) => toast.id === id);
+    clearTimer(id);
+    if (index !== -1) {
+        toasts.splice(index, 1);
+    }
+}
+function resume() {
+    for (let [id, timer] of timers) {
+        if (timer.handle !== undefined) {
+            continue;
+        }
+        timer.started = performance.now();
+        timer.handle = setTimeout(() => dismiss(id), timer.remaining);
+    }
+}
+function schedule(toast) {
+    if (toast.duration <= 0) {
+        return;
+    }
+    if (state.active) {
+        timers.set(toast.id, {
+            handle: undefined,
+            remaining: toast.duration,
+            started: 0
+        });
+        return;
+    }
+    timers.set(toast.id, {
+        handle: setTimeout(() => dismiss(toast.id), toast.duration),
+        remaining: toast.duration,
+        started: performance.now()
+    });
+}
+function update(id, options) {
+    let toast = toasts.find((value) => value.id === id);
+    if (!toast) {
+        return;
+    }
+    if (options.action !== undefined) {
+        toast.action = options.action;
+    }
+    if (options.description !== undefined) {
+        toast.description = options.description;
+    }
+    if (options.dismissible !== undefined) {
+        toast.dismissible = options.dismissible;
+    }
+    if (options.priority !== undefined) {
+        toast.priority = options.priority;
+    }
+    if (options.duration !== undefined) {
+        toast.duration = options.duration;
+        clearTimer(id);
+        if (toast.type !== 'loading' && toast.duration > 0 && toast.status !== 'ending') {
+            schedule(toast);
+        }
+    }
+}
+const state = new ReactiveObject_0ktzs5p0();
+const toasts = new ReactiveArray();
+effect(() => {
+    let active = state.active;
+    if (active === paused) {
+        return;
+    }
+    paused = active;
+    if (active) {
+        pause();
+    }
+    else {
+        resume();
+    }
+});
+const toast = {
+    dismiss: (id) => {
+        if (id === undefined) {
+            for (let value of [...toasts]) {
+                dismiss(value.id);
+            }
+            return;
+        }
+        dismiss(id);
+    },
+    error: (title, options) => create('error', title, options),
+    info: (title, options) => create('info', title, options),
+    loading: (title, options) => create('loading', title, options),
+    message: (title, options) => create('message', title, options),
+    success: (title, options) => create('success', title, options),
+    update,
+    warning: (title, options) => create('warning', title, options)
+};
+export { buildVisibleToastLayout, remove, state, toast, toasts };

package/build/components/toast/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.toaster{--toast-gap:var(--size-300);--toast-inset:var(--size-500);--toast-peek:var(--size-300)}.toast{--toast-calc-height:max(var(--toast-frontmost-height,var(--toast-height,0px)), var(--toast-height,0px));--toast-calc-offset-y:calc(var(--toast-offset-y,0px) + (var(--toast-index,0) * var(--toast-gap)) + var(--toast-swipe-y,0px));--toast-color:var(--color-text-300);--toast-height:0px;--toast-index:0;--toast-offset-y:0px;--toast-scale:max(0, 1 - (var(--toast-index,0) * .06));--toast-shrink:calc(1 - var(--toast-scale));--toast-swipe-x:0px;--toast-swipe-y:0px}.toaster{width:min(360px, 100% - var(--toast-inset) * 2);z-index:9999;position:fixed;inset:auto}.toaster[data-position^=top]{top:var(--toast-inset)}.toaster[data-position^=bottom]{bottom:var(--toast-inset)}.toaster[data-position$=left]{left:var(--toast-inset)}.toaster[data-position$=right]{right:var(--toast-inset)}.toaster[data-position$=center]{left:50%;transform:translate(-50%)}.toast{background:var(--background);border:1px solid var(--color-border-400);border-radius:var(--border-radius-500);box-shadow:var(--box-shadow-300);color:var(--color-text-400);transform:translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) + var(--toast-index) * var(--toast-peek) + var(--toast-shrink) * var(--toast-calc-height))) scale(var(--toast-scale));-webkit-user-select:none;user-select:none;width:100%;z-index:calc(9999 - var(--toast-index,0));transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s,height .2s;position:absolute;left:0;right:0;overflow:visible}[data-position*=top] .toast{transform-origin:top;top:0;bottom:auto}[data-position*=bottom] .toast{--toast-calc-offset-y:calc((var(--toast-offset-y,0px) * -1) + (var(--toast-index,0) * var(--toast-gap) * -1) + var(--toast-swipe-y,0px));transform:translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) - var(--toast-index) * var(--toast-peek) - var(--toast-shrink) * var(--toast-calc-height))) scale(var(--toast-scale));transform-origin:bottom;top:auto;bottom:0}.toast:after{content:"";height:calc(var(--toast-gap) + 1px);width:100%;position:absolute;left:0}[data-position*=top] .toast:after{top:100%}[data-position*=bottom] .toast:after{bottom:100%}.toast-action{flex-shrink:0}.toast-close{background:var(--background);border:1px solid var(--color-border-400);color:var(--color-text-500);height:var(--size-500);right:calc(var(--size-200) * -1);top:calc(var(--size-200) * -1);width:var(--size-500);z-index:1;border-radius:100%;justify-content:center;align-items:center;display:flex;position:absolute}.toast-content{align-items:center;gap:var(--size-300);min-height:0;opacity:max(0, 1 - var(--toast-index,0));padding:var(--size-400);justify-content:space-between;transition:opacity .3s;display:flex;overflow:clip visible}.toast-copy{justify-content:center;align-items:center;display:inline-flex}.toast-description{color:var(--color-text-300);overflow-wrap:anywhere}.toast-description--clamp{-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.toast-details{margin-top:var(--size-200);max-height:160px;overflow-y:auto}.toast-details-toggle{cursor:pointer;align-items:center;gap:var(--size-200);display:flex}.toast-icon{color:var(--toast-color);flex-shrink:0;width:18px;height:18px}.toast-title{font-weight:var(--font-weight-400);overflow-wrap:anywhere}.toast--error{--toast-color:var(--color-red-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--warning{--toast-color:var(--color-yellow-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--success{--toast-color:var(--color-green-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--info{--toast-color:var(--color-blue-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--loading{--toast-color:var(--color-grey-500);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--loading .toast-icon{animation:1s linear infinite toast-spin}.toast--message{--toast-color:var(--color-text-300);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toaster.--active .toast{height:auto;transform:translateX(var(--toast-swipe-x)) translateY(var(--toast-calc-offset-y))}.toaster.--active .toast-content{opacity:1}.toaster .toast.toast--starting{opacity:0}.toaster[data-position*=top] .toast.toast--starting{transform:translateY(-120%)}.toaster[data-position*=bottom] .toast.toast--starting{transform:translateY(120%)}.toaster .toast.toast--ending{opacity:0}.toaster[data-position*=top] .toast.toast--ending{transform:translateY(calc(-100% - var(--toast-inset)))}.toaster[data-position*=bottom] .toast.toast--ending{transform:translateY(calc(100% + var(--toast-inset)))}.toaster .toast.toast--ending[data-swipe-direction=left]{transform:translateX(calc(var(--toast-swipe-x) - 100% - var(--toast-inset))) translateY(var(--toast-calc-offset-y))}.toaster .toast.toast--ending[data-swipe-direction=right]{transform:translateX(calc(var(--toast-swipe-x) + 100% + var(--toast-inset))) translateY(var(--toast-calc-offset-y))}.toaster .toast.toast--ending[data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-y) - 100% - var(--toast-inset)))}.toaster .toast.toast--ending[data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-y) + 100% + var(--toast-inset)))}.toast--swiping{transition:none}@keyframes toast-spin{to{transform:rotate(360deg)}}}
+/*$vite$:1*/

package/build/components/toast/svg/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>

package/build/components/toast/svg/chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>

package/build/components/toast/svg/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

package/build/components/toast/svg/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/build/components/toast/svg/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>

package/build/components/toast/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

package/build/components/toast/svg/loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/build/components/toast/svg/success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

package/build/components/toast/svg/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>