import { c as create_ssr_component, v as validate_component, e as escape, a as each, b as add_attribute, s as spread, d as escape_attribute_value, f as escape_object, g as add_styles, h as merge_ssr_styles, m as missing_component } from './ssr-ipqebOFl.js'; import { I as Icon$1 } from './Icon-a6cUNPyd.js'; import { c as compute_rest_props, b as getContext, a as subscribe, o as onDestroy, s as setContext, n as noop } from './lifecycle-px-3doLe.js'; import { i as is_void, o as omit, w as withGet, c as createElHelpers, m as makeElement, s as styleToString, p as portalAttr, e as effect, a as isHTMLElement, b as executeCallbacks, d as addMeltEventListener, F as FIRST_LAST_KEYS, k as kbd, S as SELECTION_KEYS, u as useEscapeKeydown, n as noop$1, f as isElementDisabled, g as safeOnMount, h as isBrowser, j as addEventListener, l as disabledAttr } from './index3-4H3SMWet.js'; import { d as derived, w as writable } from './index2-D4yenS_5.js'; import { c as createDispatcher, d as disabledAttrs, a as createBitAttrs, r as removeUndefined, g as getOptionUpdater, b as cn$1, t as toastState, e as toWritableStores, o as overridable, u as useEffect } from './index-pRP-dlMc.js'; import { D as Dialog_content, a as Dialog_close, X as X$1, b as Dialog, c as Dialog_trigger, d as Dialog_portal, e as Dialog_overlay, f as fly, g as generateId, h as fade, i as getPositioningUpdater, j as createTypeaheadSearch, k as generateIds, l as derivedVisible, u as usePopper, m as getPortalDestination, n as handleRovingFocus, o as usePortal, s as sleep, r as removeHighlight, p as handleFocus, q as removeScroll, t as getNextFocusable, v as getPreviousFocusable, w as addHighlight } from './x-BYSy-ttj.js'; import { t as tick } from './scheduler-1Ju9dhbL.js'; import 'clsx'; import { tv } from 'tailwind-variants'; import { M as Mode_watcher, d as derivedMode } from './mode-watcher-CR12JZYP.js'; import { c as config } from './config-BHx687w1.js'; import { B as Button, c as cn, f as flyAndScale } from './button-CeH7Xj2c.js'; import './ssr2-BVSPLo1E.js'; import './shared-server-i79vVjEm.js'; import 'tailwind-merge'; const Menu$1 = create_ssr_component(($$result, $$props, $$bindings, slots) => { const iconNode = [ [ "line", { "x1": "4", "x2": "20", "y1": "12", "y2": "12" } ], [ "line", { "x1": "4", "x2": "20", "y1": "6", "y2": "6" } ], [ "line", { "x1": "4", "x2": "20", "y1": "18", "y2": "18" } ] ]; return `${validate_component(Icon$1, "Icon").$$render($$result, Object.assign({}, { name: "menu" }, $$props, { iconNode }), {}, { default: () => { return `${slots.default ? slots.default({}) : ``}`; } })}`; }); const Menu$2 = Menu$1; const Package_2 = create_ssr_component(($$result, $$props, $$bindings, slots) => { const iconNode = [ [ "path", { "d": "M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z" } ], [ "path", { "d": "m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9" } ], ["path", { "d": "M12 3v6" }] ]; return `${validate_component(Icon$1, "Icon").$$render($$result, Object.assign({}, { name: "package-2" }, $$props, { iconNode }), {}, { default: () => { return `${slots.default ? slots.default({}) : ``}`; } })}`; }); const Package2 = Package_2; const Circle_user = create_ssr_component(($$result, $$props, $$bindings, slots) => { const iconNode = [ ["circle", { "cx": "12", "cy": "12", "r": "10" }], ["circle", { "cx": "12", "cy": "10", "r": "3" }], [ "path", { "d": "M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" } ] ]; return `${validate_component(Icon$1, "Icon").$$render($$result, Object.assign({}, { name: "circle-user" }, $$props, { iconNode }), {}, { default: () => { return `${slots.default ? slots.default({}) : ``}`; } })}`; }); const CircleUser = Circle_user; const Sun = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, ["size", "role", "color", "ariaLabel", "withEvents"]); const ctx = getContext("iconCtx") ?? {}; let { size = ctx.size || "24" } = $$props; let { role = ctx.role || "img" } = $$props; let { color = ctx.color || "currentColor" } = $$props; let { ariaLabel = "sun," } = $$props; let { withEvents = false } = $$props; if ($$props.size === void 0 && $$bindings.size && size !== void 0) $$bindings.size(size); if ($$props.role === void 0 && $$bindings.role && role !== void 0) $$bindings.role(role); if ($$props.color === void 0 && $$bindings.color && color !== void 0) $$bindings.color(color); if ($$props.ariaLabel === void 0 && $$bindings.ariaLabel && ariaLabel !== void 0) $$bindings.ariaLabel(ariaLabel); if ($$props.withEvents === void 0 && $$bindings.withEvents && withEvents !== void 0) $$bindings.withEvents(withEvents); return `${withEvents ? `` : ``} `; }); const Moon = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, ["size", "role", "color", "ariaLabel", "withEvents"]); const ctx = getContext("iconCtx") ?? {}; let { size = ctx.size || "24" } = $$props; let { role = ctx.role || "img" } = $$props; let { color = ctx.color || "currentColor" } = $$props; let { ariaLabel = "moon," } = $$props; let { withEvents = false } = $$props; if ($$props.size === void 0 && $$bindings.size && size !== void 0) $$bindings.size(size); if ($$props.role === void 0 && $$bindings.role && role !== void 0) $$bindings.role(role); if ($$props.color === void 0 && $$bindings.color && color !== void 0) $$bindings.color(color); if ($$props.ariaLabel === void 0 && $$bindings.ariaLabel && ariaLabel !== void 0) $$bindings.ariaLabel(ariaLabel); if ($$props.withEvents === void 0 && $$bindings.withEvents && withEvents !== void 0) $$bindings.withEvents(withEvents); return `${withEvents ? `` : ``} `; }); const SUB_OPEN_KEYS = { ltr: [...SELECTION_KEYS, kbd.ARROW_RIGHT], rtl: [...SELECTION_KEYS, kbd.ARROW_LEFT] }; const SUB_CLOSE_KEYS = { ltr: [kbd.ARROW_LEFT], rtl: [kbd.ARROW_RIGHT] }; const menuIdParts = ["menu", "trigger"]; const defaults$2 = { arrowSize: 8, positioning: { placement: "bottom" }, preventScroll: true, closeOnEscape: true, closeOnOutsideClick: true, portal: void 0, loop: false, dir: "ltr", defaultOpen: false, typeahead: true, closeOnItemClick: true, onOutsideClick: void 0 }; function createMenuBuilder(opts) { const { name, selector } = createElHelpers(opts.selector); const { preventScroll, arrowSize, positioning, closeOnEscape, closeOnOutsideClick, portal, forceVisible, typeahead, loop, closeFocus, disableFocusFirstItem, closeOnItemClick, onOutsideClick } = opts.rootOptions; const rootOpen = opts.rootOpen; const rootActiveTrigger = opts.rootActiveTrigger; const nextFocusable = opts.nextFocusable; const prevFocusable = opts.prevFocusable; const isUsingKeyboard = withGet.writable(false); const lastPointerX = withGet(writable(0)); const pointerGraceIntent = withGet(writable(null)); const pointerDir = withGet(writable("right")); const currentFocusedItem = withGet(writable(null)); const pointerMovingToSubmenu = withGet(derived([pointerDir, pointerGraceIntent], ([$pointerDir, $pointerGraceIntent]) => { return (e) => { const isMovingTowards = $pointerDir === $pointerGraceIntent?.side; return isMovingTowards && isPointerInGraceArea(e, $pointerGraceIntent?.area); }; })); const { typed, handleTypeaheadSearch } = createTypeaheadSearch(); const rootIds = toWritableStores({ ...generateIds(menuIdParts), ...opts.ids }); const isVisible = derivedVisible({ open: rootOpen, forceVisible, activeTrigger: rootActiveTrigger }); const rootMenu = makeElement(name(), { stores: [isVisible, portal, rootIds.menu, rootIds.trigger], returned: ([$isVisible, $portal, $rootMenuId, $rootTriggerId]) => { return { role: "menu", hidden: $isVisible ? void 0 : true, style: styleToString({ display: $isVisible ? void 0 : "none" }), id: $rootMenuId, "aria-labelledby": $rootTriggerId, "data-state": $isVisible ? "open" : "closed", "data-portal": portalAttr($portal), tabindex: -1 }; }, action: (node) => { let unsubPopper = noop$1; const unsubDerived = effect([isVisible, rootActiveTrigger, positioning, closeOnOutsideClick, portal, closeOnEscape], ([$isVisible, $rootActiveTrigger, $positioning, $closeOnOutsideClick, $portal, $closeOnEscape]) => { unsubPopper(); if (!$isVisible || !$rootActiveTrigger) return; tick().then(() => { unsubPopper(); setMeltMenuAttribute(node, selector); unsubPopper = usePopper(node, { anchorElement: $rootActiveTrigger, open: rootOpen, options: { floating: $positioning, modal: { closeOnInteractOutside: $closeOnOutsideClick, shouldCloseOnInteractOutside: (e) => { onOutsideClick.get()?.(e); if (e.defaultPrevented) return false; if (isHTMLElement($rootActiveTrigger) && $rootActiveTrigger.contains(e.target)) { return false; } return true; }, onClose: () => { rootOpen.set(false); $rootActiveTrigger.focus(); }, open: $isVisible }, portal: getPortalDestination(node, $portal), escapeKeydown: $closeOnEscape ? void 0 : null } }).destroy; }); }); const unsubEvents = executeCallbacks(addMeltEventListener(node, "keydown", (e) => { const target = e.target; const menuEl = e.currentTarget; if (!isHTMLElement(target) || !isHTMLElement(menuEl)) return; const isKeyDownInside = target.closest('[role="menu"]') === menuEl; if (!isKeyDownInside) return; if (FIRST_LAST_KEYS.includes(e.key)) { handleMenuNavigation(e, loop.get() ?? false); } if (e.key === kbd.TAB) { e.preventDefault(); rootOpen.set(false); handleTabNavigation(e, nextFocusable, prevFocusable); return; } const isCharacterKey = e.key.length === 1; const isModifierKey = e.ctrlKey || e.altKey || e.metaKey; if (!isModifierKey && isCharacterKey && typeahead.get() === true) { handleTypeaheadSearch(e.key, getMenuItems(menuEl)); } })); return { destroy() { unsubDerived(); unsubEvents(); unsubPopper(); } }; } }); const rootTrigger = makeElement(name("trigger"), { stores: [rootOpen, rootIds.menu, rootIds.trigger], returned: ([$rootOpen, $rootMenuId, $rootTriggerId]) => { return { "aria-controls": $rootMenuId, "aria-expanded": $rootOpen, "data-state": $rootOpen ? "open" : "closed", id: $rootTriggerId, tabindex: 0 }; }, action: (node) => { applyAttrsIfDisabled(node); rootActiveTrigger.update((p) => { if (p) return p; return node; }); const unsub = executeCallbacks(addMeltEventListener(node, "click", (e) => { const $rootOpen = rootOpen.get(); const triggerEl = e.currentTarget; if (!isHTMLElement(triggerEl)) return; handleOpen(triggerEl); if (!$rootOpen) e.preventDefault(); }), addMeltEventListener(node, "keydown", (e) => { const triggerEl = e.currentTarget; if (!isHTMLElement(triggerEl)) return; if (!(SELECTION_KEYS.includes(e.key) || e.key === kbd.ARROW_DOWN)) return; e.preventDefault(); handleOpen(triggerEl); const menuId = triggerEl.getAttribute("aria-controls"); if (!menuId) return; const menu = document.getElementById(menuId); if (!menu) return; const menuItems = getMenuItems(menu); if (!menuItems.length) return; handleRovingFocus(menuItems[0]); })); return { destroy: unsub }; } }); const rootArrow = makeElement(name("arrow"), { stores: arrowSize, returned: ($arrowSize) => ({ "data-arrow": true, style: styleToString({ position: "absolute", width: `var(--arrow-size, ${$arrowSize}px)`, height: `var(--arrow-size, ${$arrowSize}px)` }) }) }); const overlay = makeElement(name("overlay"), { stores: [isVisible], returned: ([$isVisible]) => { return { hidden: $isVisible ? void 0 : true, tabindex: -1, style: styleToString({ display: $isVisible ? void 0 : "none" }), "aria-hidden": "true", "data-state": stateAttr($isVisible) }; }, action: (node) => { let unsubEscapeKeydown = noop$1; if (closeOnEscape.get()) { const escapeKeydown = useEscapeKeydown(node, { handler: () => { rootOpen.set(false); const $rootActiveTrigger = rootActiveTrigger.get(); if ($rootActiveTrigger) $rootActiveTrigger.focus(); } }); if (escapeKeydown && escapeKeydown.destroy) { unsubEscapeKeydown = escapeKeydown.destroy; } } const unsubPortal = effect([portal], ([$portal]) => { if ($portal === null) return noop$1; const portalDestination = getPortalDestination(node, $portal); if (portalDestination === null) return noop$1; return usePortal(node, portalDestination).destroy; }); return { destroy() { unsubEscapeKeydown(); unsubPortal(); } }; } }); const item = makeElement(name("item"), { returned: () => { return { role: "menuitem", tabindex: -1, "data-orientation": "vertical" }; }, action: (node) => { setMeltMenuAttribute(node, selector); applyAttrsIfDisabled(node); const unsub = executeCallbacks(addMeltEventListener(node, "pointerdown", (e) => { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; if (isElementDisabled(itemEl)) { e.preventDefault(); return; } }), addMeltEventListener(node, "click", (e) => { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; if (isElementDisabled(itemEl)) { e.preventDefault(); return; } if (e.defaultPrevented) { handleRovingFocus(itemEl); return; } if (closeOnItemClick.get()) { sleep(1).then(() => { rootOpen.set(false); }); } }), addMeltEventListener(node, "keydown", (e) => { onItemKeyDown(e); }), addMeltEventListener(node, "pointermove", (e) => { onMenuItemPointerMove(e); }), addMeltEventListener(node, "pointerleave", (e) => { onMenuItemPointerLeave(e); }), addMeltEventListener(node, "focusin", (e) => { onItemFocusIn(e); }), addMeltEventListener(node, "focusout", (e) => { onItemFocusOut(e); })); return { destroy: unsub }; } }); const group = makeElement(name("group"), { returned: () => { return (groupId) => ({ role: "group", "aria-labelledby": groupId }); } }); const groupLabel = makeElement(name("group-label"), { returned: () => { return (groupId) => ({ id: groupId }); } }); const checkboxItemDefaults = { defaultChecked: false, disabled: false }; const createCheckboxItem = (props) => { const withDefaults = { ...checkboxItemDefaults, ...props }; const checkedWritable = withDefaults.checked ?? writable(withDefaults.defaultChecked ?? null); const checked = overridable(checkedWritable, withDefaults.onCheckedChange); const disabled = writable(withDefaults.disabled); const checkboxItem = makeElement(name("checkbox-item"), { stores: [checked, disabled], returned: ([$checked, $disabled]) => { return { role: "menuitemcheckbox", tabindex: -1, "data-orientation": "vertical", "aria-checked": isIndeterminate($checked) ? "mixed" : $checked ? "true" : "false", "data-disabled": disabledAttr($disabled), "data-state": getCheckedState($checked) }; }, action: (node) => { setMeltMenuAttribute(node, selector); applyAttrsIfDisabled(node); const unsub = executeCallbacks(addMeltEventListener(node, "pointerdown", (e) => { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; if (isElementDisabled(itemEl)) { e.preventDefault(); return; } }), addMeltEventListener(node, "click", (e) => { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; if (isElementDisabled(itemEl)) { e.preventDefault(); return; } if (e.defaultPrevented) { handleRovingFocus(itemEl); return; } checked.update((prev) => { if (isIndeterminate(prev)) return true; return !prev; }); if (closeOnItemClick.get()) { tick().then(() => { rootOpen.set(false); }); } }), addMeltEventListener(node, "keydown", (e) => { onItemKeyDown(e); }), addMeltEventListener(node, "pointermove", (e) => { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; if (isElementDisabled(itemEl)) { onItemLeave(e); return; } onMenuItemPointerMove(e, itemEl); }), addMeltEventListener(node, "pointerleave", (e) => { onMenuItemPointerLeave(e); }), addMeltEventListener(node, "focusin", (e) => { onItemFocusIn(e); }), addMeltEventListener(node, "focusout", (e) => { onItemFocusOut(e); })); return { destroy: unsub }; } }); const isChecked = derived(checked, ($checked) => $checked === true); const _isIndeterminate = derived(checked, ($checked) => $checked === "indeterminate"); return { elements: { checkboxItem }, states: { checked }, helpers: { isChecked, isIndeterminate: _isIndeterminate }, options: { disabled } }; }; const createMenuRadioGroup = (args = {}) => { const valueWritable = args.value ?? writable(args.defaultValue ?? null); const value = overridable(valueWritable, args.onValueChange); const radioGroup = makeElement(name("radio-group"), { returned: () => ({ role: "group" }) }); const radioItemDefaults = { disabled: false }; const radioItem = makeElement(name("radio-item"), { stores: [value], returned: ([$value]) => { return (itemProps) => { const { value: itemValue, disabled } = { ...radioItemDefaults, ...itemProps }; const checked = $value === itemValue; return { disabled, role: "menuitemradio", "data-state": checked ? "checked" : "unchecked", "aria-checked": checked, "data-disabled": disabledAttr(disabled), "data-value": itemValue, "data-orientation": "vertical", tabindex: -1 }; }; }, action: (node) => { setMeltMenuAttribute(node, selector); const unsub = executeCallbacks(addMeltEventListener(node, "pointerdown", (e) => { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; const itemValue = node.dataset.value; const disabled = node.dataset.disabled; if (disabled || itemValue === void 0) { e.preventDefault(); return; } }), addMeltEventListener(node, "click", (e) => { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; const itemValue = node.dataset.value; const disabled = node.dataset.disabled; if (disabled || itemValue === void 0) { e.preventDefault(); return; } if (e.defaultPrevented) { if (!isHTMLElement(itemEl)) return; handleRovingFocus(itemEl); return; } value.set(itemValue); if (closeOnItemClick.get()) { tick().then(() => { rootOpen.set(false); }); } }), addMeltEventListener(node, "keydown", (e) => { onItemKeyDown(e); }), addMeltEventListener(node, "pointermove", (e) => { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; const itemValue = node.dataset.value; const disabled = node.dataset.disabled; if (disabled || itemValue === void 0) { onItemLeave(e); return; } onMenuItemPointerMove(e, itemEl); }), addMeltEventListener(node, "pointerleave", (e) => { onMenuItemPointerLeave(e); }), addMeltEventListener(node, "focusin", (e) => { onItemFocusIn(e); }), addMeltEventListener(node, "focusout", (e) => { onItemFocusOut(e); })); return { destroy: unsub }; } }); const isChecked = derived(value, ($value) => { return (itemValue) => { return $value === itemValue; }; }); return { elements: { radioGroup, radioItem }, states: { value }, helpers: { isChecked } }; }; const { elements: { root: separator } } = createSeparator({ orientation: "horizontal" }); const subMenuDefaults = { ...defaults$2, disabled: false, positioning: { placement: "right-start", gutter: 8 } }; const createSubmenu = (args) => { const withDefaults = { ...subMenuDefaults, ...args }; const subOpenWritable = withDefaults.open ?? writable(false); const subOpen = overridable(subOpenWritable, withDefaults?.onOpenChange); const options = toWritableStores(omit(withDefaults, "ids")); const { positioning: positioning2, arrowSize: arrowSize2, disabled } = options; const subActiveTrigger = withGet(writable(null)); const subOpenTimer = withGet(writable(null)); const pointerGraceTimer = withGet(writable(0)); const subIds = toWritableStores({ ...generateIds(menuIdParts), ...withDefaults.ids }); safeOnMount(() => { const subTrigger2 = document.getElementById(subIds.trigger.get()); if (subTrigger2) { subActiveTrigger.set(subTrigger2); } }); const subIsVisible = derivedVisible({ open: subOpen, forceVisible, activeTrigger: subActiveTrigger }); const subMenu = makeElement(name("submenu"), { stores: [subIsVisible, subIds.menu, subIds.trigger], returned: ([$subIsVisible, $subMenuId, $subTriggerId]) => { return { role: "menu", hidden: $subIsVisible ? void 0 : true, style: styleToString({ display: $subIsVisible ? void 0 : "none" }), id: $subMenuId, "aria-labelledby": $subTriggerId, "data-state": $subIsVisible ? "open" : "closed", // unit tests fail on `.closest` if the id starts with a number // so using a data attribute "data-id": $subMenuId, tabindex: -1 }; }, action: (node) => { let unsubPopper = noop$1; const unsubDerived = effect([subIsVisible, positioning2], ([$subIsVisible, $positioning]) => { unsubPopper(); if (!$subIsVisible) return; const activeTrigger = subActiveTrigger.get(); if (!activeTrigger) return; tick().then(() => { unsubPopper(); const parentMenuEl = getParentMenu(activeTrigger); unsubPopper = usePopper(node, { anchorElement: activeTrigger, open: subOpen, options: { floating: $positioning, portal: isHTMLElement(parentMenuEl) ? parentMenuEl : void 0, modal: null, focusTrap: null, escapeKeydown: null } }).destroy; }); }); const unsubEvents = executeCallbacks(addMeltEventListener(node, "keydown", (e) => { if (e.key === kbd.ESCAPE) { return; } const target = e.target; const menuEl = e.currentTarget; if (!isHTMLElement(target) || !isHTMLElement(menuEl)) return; const isKeyDownInside = target.closest('[role="menu"]') === menuEl; if (!isKeyDownInside) return; if (FIRST_LAST_KEYS.includes(e.key)) { e.stopImmediatePropagation(); handleMenuNavigation(e, loop.get() ?? false); return; } const isCloseKey = SUB_CLOSE_KEYS["ltr"].includes(e.key); const isModifierKey = e.ctrlKey || e.altKey || e.metaKey; const isCharacterKey = e.key.length === 1; if (isCloseKey) { const $subActiveTrigger = subActiveTrigger.get(); e.preventDefault(); subOpen.update(() => { if ($subActiveTrigger) { handleRovingFocus($subActiveTrigger); } return false; }); return; } if (e.key === kbd.TAB) { e.preventDefault(); rootOpen.set(false); handleTabNavigation(e, nextFocusable, prevFocusable); return; } if (!isModifierKey && isCharacterKey && typeahead.get() === true) { handleTypeaheadSearch(e.key, getMenuItems(menuEl)); } }), addMeltEventListener(node, "pointermove", (e) => { onMenuPointerMove(e); }), addMeltEventListener(node, "focusout", (e) => { const $subActiveTrigger = subActiveTrigger.get(); if (isUsingKeyboard.get()) { const target = e.target; const submenuEl = document.getElementById(subIds.menu.get()); if (!isHTMLElement(submenuEl) || !isHTMLElement(target)) return; if (!submenuEl.contains(target) && target !== $subActiveTrigger) { subOpen.set(false); } } else { const menuEl = e.currentTarget; const relatedTarget = e.relatedTarget; if (!isHTMLElement(relatedTarget) || !isHTMLElement(menuEl)) return; if (!menuEl.contains(relatedTarget) && relatedTarget !== $subActiveTrigger) { subOpen.set(false); } } })); return { destroy() { unsubDerived(); unsubPopper(); unsubEvents(); } }; } }); const subTrigger = makeElement(name("subtrigger"), { stores: [subOpen, disabled, subIds.menu, subIds.trigger], returned: ([$subOpen, $disabled, $subMenuId, $subTriggerId]) => { return { role: "menuitem", id: $subTriggerId, tabindex: -1, "aria-controls": $subMenuId, "aria-expanded": $subOpen, "data-state": $subOpen ? "open" : "closed", "data-disabled": disabledAttr($disabled), "aria-haspopop": "menu" }; }, action: (node) => { setMeltMenuAttribute(node, selector); applyAttrsIfDisabled(node); subActiveTrigger.update((p) => { if (p) return p; return node; }); const unsubTimer = () => { clearTimerStore(subOpenTimer); window.clearTimeout(pointerGraceTimer.get()); pointerGraceIntent.set(null); }; const unsubEvents = executeCallbacks(addMeltEventListener(node, "click", (e) => { if (e.defaultPrevented) return; const triggerEl = e.currentTarget; if (!isHTMLElement(triggerEl) || isElementDisabled(triggerEl)) return; handleRovingFocus(triggerEl); if (!subOpen.get()) { subOpen.update((prev) => { const isAlreadyOpen = prev; if (!isAlreadyOpen) { subActiveTrigger.set(triggerEl); return !prev; } return prev; }); } }), addMeltEventListener(node, "keydown", (e) => { const $typed = typed.get(); const triggerEl = e.currentTarget; if (!isHTMLElement(triggerEl) || isElementDisabled(triggerEl)) return; const isTypingAhead = $typed.length > 0; if (isTypingAhead && e.key === kbd.SPACE) return; if (SUB_OPEN_KEYS["ltr"].includes(e.key)) { if (!subOpen.get()) { triggerEl.click(); e.preventDefault(); return; } const menuId = triggerEl.getAttribute("aria-controls"); if (!menuId) return; const menuEl = document.getElementById(menuId); if (!isHTMLElement(menuEl)) return; const firstItem = getMenuItems(menuEl)[0]; handleRovingFocus(firstItem); } }), addMeltEventListener(node, "pointermove", (e) => { if (!isMouse(e)) return; onItemEnter(e); if (e.defaultPrevented) return; const triggerEl = e.currentTarget; if (!isHTMLElement(triggerEl)) return; if (!isFocusWithinSubmenu(subIds.menu.get())) { handleRovingFocus(triggerEl); } const openTimer = subOpenTimer.get(); if (!subOpen.get() && !openTimer && !isElementDisabled(triggerEl)) { subOpenTimer.set(window.setTimeout(() => { subOpen.update(() => { subActiveTrigger.set(triggerEl); return true; }); clearTimerStore(subOpenTimer); }, 100)); } }), addMeltEventListener(node, "pointerleave", (e) => { if (!isMouse(e)) return; clearTimerStore(subOpenTimer); const submenuEl = document.getElementById(subIds.menu.get()); const contentRect = submenuEl?.getBoundingClientRect(); if (contentRect) { const side = submenuEl?.dataset.side; const rightSide = side === "right"; const bleed = rightSide ? -5 : 5; const contentNearEdge = contentRect[rightSide ? "left" : "right"]; const contentFarEdge = contentRect[rightSide ? "right" : "left"]; pointerGraceIntent.set({ area: [ // Apply a bleed on clientX to ensure that our exit point is // consistently within polygon bounds { x: e.clientX + bleed, y: e.clientY }, { x: contentNearEdge, y: contentRect.top }, { x: contentFarEdge, y: contentRect.top }, { x: contentFarEdge, y: contentRect.bottom }, { x: contentNearEdge, y: contentRect.bottom } ], side }); window.clearTimeout(pointerGraceTimer.get()); pointerGraceTimer.set(window.setTimeout(() => { pointerGraceIntent.set(null); }, 300)); } else { onTriggerLeave(e); if (e.defaultPrevented) return; pointerGraceIntent.set(null); } }), addMeltEventListener(node, "focusout", (e) => { const triggerEl = e.currentTarget; if (!isHTMLElement(triggerEl)) return; removeHighlight(triggerEl); const relatedTarget = e.relatedTarget; if (!isHTMLElement(relatedTarget)) return; const menuId = triggerEl.getAttribute("aria-controls"); if (!menuId) return; const menu = document.getElementById(menuId); if (menu && !menu.contains(relatedTarget)) { subOpen.set(false); } }), addMeltEventListener(node, "focusin", (e) => { onItemFocusIn(e); })); return { destroy() { unsubTimer(); unsubEvents(); } }; } }); const subArrow = makeElement(name("subarrow"), { stores: arrowSize2, returned: ($arrowSize) => ({ "data-arrow": true, style: styleToString({ position: "absolute", width: `var(--arrow-size, ${$arrowSize}px)`, height: `var(--arrow-size, ${$arrowSize}px)` }) }) }); effect([rootOpen], ([$rootOpen]) => { if (!$rootOpen) { subActiveTrigger.set(null); subOpen.set(false); } }); effect([pointerGraceIntent], ([$pointerGraceIntent]) => { if (!isBrowser || $pointerGraceIntent) return; window.clearTimeout(pointerGraceTimer.get()); }); effect([subOpen], ([$subOpen]) => { if (!isBrowser) return; if ($subOpen && isUsingKeyboard.get()) { sleep(1).then(() => { const menuEl = document.getElementById(subIds.menu.get()); if (!menuEl) return; const menuItems = getMenuItems(menuEl); if (!menuItems.length) return; handleRovingFocus(menuItems[0]); }); } if (!$subOpen) { const focusedItem = currentFocusedItem.get(); const subTriggerEl = document.getElementById(subIds.trigger.get()); if (focusedItem) { sleep(1).then(() => { const menuEl = document.getElementById(subIds.menu.get()); if (!menuEl) return; if (menuEl.contains(focusedItem)) { removeHighlight(focusedItem); } }); } if (!subTriggerEl || document.activeElement === subTriggerEl) return; removeHighlight(subTriggerEl); } }); return { ids: subIds, elements: { subTrigger, subMenu, subArrow }, states: { subOpen }, options }; }; safeOnMount(() => { const triggerEl = document.getElementById(rootIds.trigger.get()); if (isHTMLElement(triggerEl) && rootOpen.get()) { rootActiveTrigger.set(triggerEl); } const unsubs = []; const handlePointer = () => isUsingKeyboard.set(false); const handleKeyDown = () => { isUsingKeyboard.set(true); unsubs.push(executeCallbacks(addEventListener(document, "pointerdown", handlePointer, { capture: true, once: true }), addEventListener(document, "pointermove", handlePointer, { capture: true, once: true }))); }; const keydownListener = (e) => { if (e.key === kbd.ESCAPE && closeOnEscape.get()) { rootOpen.set(false); return; } }; unsubs.push(addEventListener(document, "keydown", handleKeyDown, { capture: true })); unsubs.push(addEventListener(document, "keydown", keydownListener)); return () => { unsubs.forEach((unsub) => unsub()); }; }); effect([rootOpen, currentFocusedItem], ([$rootOpen, $currentFocusedItem]) => { if (!$rootOpen && $currentFocusedItem) { removeHighlight($currentFocusedItem); } }); effect([rootOpen], ([$rootOpen]) => { if (!isBrowser) return; if (!$rootOpen) { const $rootActiveTrigger = rootActiveTrigger.get(); if (!$rootActiveTrigger) return; const $closeFocus = closeFocus.get(); if (!$rootOpen && $rootActiveTrigger) { handleFocus({ prop: $closeFocus, defaultEl: $rootActiveTrigger }); } } }); effect([rootOpen, preventScroll], ([$rootOpen, $preventScroll]) => { if (!isBrowser) return; const unsubs = []; if (opts.removeScroll && $rootOpen && $preventScroll) { unsubs.push(removeScroll()); } sleep(1).then(() => { const menuEl = document.getElementById(rootIds.menu.get()); if (menuEl && $rootOpen && isUsingKeyboard.get()) { if (disableFocusFirstItem.get()) { handleRovingFocus(menuEl); return; } const menuItems = getMenuItems(menuEl); if (!menuItems.length) return; handleRovingFocus(menuItems[0]); } }); return () => { unsubs.forEach((unsub) => unsub()); }; }); effect(rootOpen, ($rootOpen) => { if (!isBrowser) return; const handlePointer = () => isUsingKeyboard.set(false); const handleKeyDown = (e) => { isUsingKeyboard.set(true); if (e.key === kbd.ESCAPE && $rootOpen && closeOnEscape.get()) { rootOpen.set(false); return; } }; return executeCallbacks(addEventListener(document, "pointerdown", handlePointer, { capture: true, once: true }), addEventListener(document, "pointermove", handlePointer, { capture: true, once: true }), addEventListener(document, "keydown", handleKeyDown, { capture: true })); }); function handleOpen(triggerEl) { rootOpen.update((prev) => { const isOpen = !prev; if (isOpen) { nextFocusable.set(getNextFocusable(triggerEl)); prevFocusable.set(getPreviousFocusable(triggerEl)); rootActiveTrigger.set(triggerEl); } return isOpen; }); } function onItemFocusIn(e) { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; const $currentFocusedItem = currentFocusedItem.get(); if ($currentFocusedItem) { removeHighlight($currentFocusedItem); } addHighlight(itemEl); currentFocusedItem.set(itemEl); } function onItemFocusOut(e) { const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; removeHighlight(itemEl); } function onItemEnter(e) { if (isPointerMovingToSubmenu(e)) { e.preventDefault(); } } function onItemLeave(e) { if (isPointerMovingToSubmenu(e)) { return; } const target = e.target; if (!isHTMLElement(target)) return; const parentMenuEl = getParentMenu(target); if (!parentMenuEl) return; handleRovingFocus(parentMenuEl); } function onTriggerLeave(e) { if (isPointerMovingToSubmenu(e)) { e.preventDefault(); } } function onMenuPointerMove(e) { if (!isMouse(e)) return; const target = e.target; const currentTarget = e.currentTarget; if (!isHTMLElement(currentTarget) || !isHTMLElement(target)) return; const $lastPointerX = lastPointerX.get(); const pointerXHasChanged = $lastPointerX !== e.clientX; if (currentTarget.contains(target) && pointerXHasChanged) { const newDir = e.clientX > $lastPointerX ? "right" : "left"; pointerDir.set(newDir); lastPointerX.set(e.clientX); } } function onMenuItemPointerMove(e, currTarget = null) { if (!isMouse(e)) return; onItemEnter(e); if (e.defaultPrevented) return; if (currTarget) { handleRovingFocus(currTarget); return; } const currentTarget = e.currentTarget; if (!isHTMLElement(currentTarget)) return; handleRovingFocus(currentTarget); } function onMenuItemPointerLeave(e) { if (!isMouse(e)) return; onItemLeave(e); } function onItemKeyDown(e) { const $typed = typed.get(); const isTypingAhead = $typed.length > 0; if (isTypingAhead && e.key === kbd.SPACE) { e.preventDefault(); return; } if (SELECTION_KEYS.includes(e.key)) { e.preventDefault(); const itemEl = e.currentTarget; if (!isHTMLElement(itemEl)) return; itemEl.click(); } } function isIndeterminate(checked) { return checked === "indeterminate"; } function getCheckedState(checked) { return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked"; } function isPointerMovingToSubmenu(e) { return pointerMovingToSubmenu.get()(e); } function getParentMenu(element) { const parentMenuEl = element.closest('[role="menu"]'); if (!isHTMLElement(parentMenuEl)) return null; return parentMenuEl; } return { elements: { trigger: rootTrigger, menu: rootMenu, overlay, item, group, groupLabel, arrow: rootArrow, separator }, builders: { createCheckboxItem, createSubmenu, createMenuRadioGroup }, states: { open: rootOpen }, helpers: { handleTypeaheadSearch }, ids: rootIds, options: opts.rootOptions }; } function handleTabNavigation(e, nextFocusable, prevFocusable) { if (e.shiftKey) { const $prevFocusable = prevFocusable.get(); if ($prevFocusable) { e.preventDefault(); sleep(1).then(() => $prevFocusable.focus()); prevFocusable.set(null); } } else { const $nextFocusable = nextFocusable.get(); if ($nextFocusable) { e.preventDefault(); sleep(1).then(() => $nextFocusable.focus()); nextFocusable.set(null); } } } function getMenuItems(menuElement) { return Array.from(menuElement.querySelectorAll(`[data-melt-menu-id="${menuElement.id}"]`)).filter((item) => isHTMLElement(item)); } function applyAttrsIfDisabled(element) { if (!element || !isElementDisabled(element)) return; element.setAttribute("data-disabled", ""); element.setAttribute("aria-disabled", "true"); } function clearTimerStore(timerStore) { if (!isBrowser) return; const timer = timerStore.get(); if (timer) { window.clearTimeout(timer); timerStore.set(null); } } function isMouse(e) { return e.pointerType === "mouse"; } function setMeltMenuAttribute(element, selector) { if (!element) return; const menuEl = element.closest(`${selector()}, ${selector("submenu")}`); if (!isHTMLElement(menuEl)) return; element.setAttribute("data-melt-menu-id", menuEl.id); } function handleMenuNavigation(e, loop) { e.preventDefault(); const currentFocusedItem = document.activeElement; const currentTarget = e.currentTarget; if (!isHTMLElement(currentFocusedItem) || !isHTMLElement(currentTarget)) return; const menuItems = getMenuItems(currentTarget); if (!menuItems.length) return; const candidateNodes = menuItems.filter((item) => { if (item.hasAttribute("data-disabled") || item.getAttribute("disabled") === "true") { return false; } return true; }); const currentIndex = candidateNodes.indexOf(currentFocusedItem); let nextIndex; switch (e.key) { case kbd.ARROW_DOWN: if (loop) { nextIndex = currentIndex < candidateNodes.length - 1 ? currentIndex + 1 : 0; } else { nextIndex = currentIndex < candidateNodes.length - 1 ? currentIndex + 1 : currentIndex; } break; case kbd.ARROW_UP: if (loop) { nextIndex = currentIndex > 0 ? currentIndex - 1 : candidateNodes.length - 1; } else { nextIndex = currentIndex < 0 ? candidateNodes.length - 1 : currentIndex > 0 ? currentIndex - 1 : 0; } break; case kbd.HOME: nextIndex = 0; break; case kbd.END: nextIndex = candidateNodes.length - 1; break; default: return; } handleRovingFocus(candidateNodes[nextIndex]); } function isPointerInGraceArea(e, area) { if (!area) return false; const cursorPos = { x: e.clientX, y: e.clientY }; return isPointInPolygon(cursorPos, area); } function isPointInPolygon(point, polygon) { const { x, y } = point; let inside = false; for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { const xi = polygon[i].x; const yi = polygon[i].y; const xj = polygon[j].x; const yj = polygon[j].y; const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi; if (intersect) inside = !inside; } return inside; } function isFocusWithinSubmenu(submenuId) { const activeEl = document.activeElement; if (!isHTMLElement(activeEl)) return false; const submenuEl = activeEl.closest(`[data-id="${submenuId}"]`); return isHTMLElement(submenuEl); } function stateAttr(open) { return open ? "open" : "closed"; } const defaults$1 = { arrowSize: 8, positioning: { placement: "bottom" }, preventScroll: true, closeOnEscape: true, closeOnOutsideClick: true, portal: void 0, loop: false, dir: "ltr", defaultOpen: false, forceVisible: false, typeahead: true, closeFocus: void 0, disableFocusFirstItem: false, closeOnItemClick: true, onOutsideClick: void 0 }; function createDropdownMenu(props) { const withDefaults = { ...defaults$1, ...props }; const rootOptions = toWritableStores(omit(withDefaults, "ids")); const openWritable = withDefaults.open ?? writable(withDefaults.defaultOpen); const rootOpen = overridable(openWritable, withDefaults?.onOpenChange); const rootActiveTrigger = withGet(writable(null)); const nextFocusable = withGet(writable(null)); const prevFocusable = withGet(writable(null)); const { elements, builders, ids, states, options } = createMenuBuilder({ rootOptions, rootOpen, rootActiveTrigger: withGet(rootActiveTrigger), nextFocusable: withGet(nextFocusable), prevFocusable: withGet(prevFocusable), selector: "dropdown-menu", removeScroll: true, ids: withDefaults.ids }); return { ids, elements, states, builders, options }; } const defaults = { orientation: "horizontal", decorative: false }; const createSeparator = (props) => { const withDefaults = { ...defaults, ...props }; const options = toWritableStores(withDefaults); const { orientation, decorative } = options; const root = makeElement("separator", { stores: [orientation, decorative], returned: ([$orientation, $decorative]) => { const ariaOrientation = $orientation === "vertical" ? $orientation : void 0; return { role: $decorative ? "none" : "separator", "aria-orientation": ariaOrientation, "aria-hidden": $decorative, "data-orientation": $orientation }; } }); return { elements: { root }, options }; }; function getMenuData() { const NAME = "menu"; const SUB_NAME = "menu-submenu"; const RADIO_GROUP_NAME = "menu-radiogroup"; const CHECKBOX_ITEM_NAME = "menu-checkboxitem"; const RADIO_ITEM_NAME = "menu-radioitem"; const GROUP_NAME = "menu-group"; const PARTS = [ "arrow", "checkbox-indicator", "checkbox-item", "content", "group", "item", "label", "radio-group", "radio-item", "radio-indicator", "separator", "sub-content", "sub-trigger", "trigger" ]; return { NAME, SUB_NAME, RADIO_GROUP_NAME, CHECKBOX_ITEM_NAME, RADIO_ITEM_NAME, GROUP_NAME, PARTS }; } function getCtx() { const { NAME } = getMenuData(); return getContext(NAME); } function setCtx(props) { const { NAME, PARTS } = getMenuData(); const getAttrs = createBitAttrs("menu", PARTS); const dropdownMenu = { ...createDropdownMenu({ ...removeUndefined(props), forceVisible: true }), getAttrs }; setContext(NAME, dropdownMenu); return { ...dropdownMenu, updateOption: getOptionUpdater(dropdownMenu.options) }; } function getGroupLabel() { const { GROUP_NAME } = getMenuData(); const id = getContext(GROUP_NAME) ?? generateId(); const { elements: { groupLabel }, getAttrs } = getCtx(); return { groupLabel, id, getAttrs }; } function updatePositioning(props) { const defaultPlacement = { side: "bottom", align: "center" }; const withDefaults = { ...defaultPlacement, ...props }; const { options: { positioning } } = getCtx(); const updater = getPositioningUpdater(positioning); updater(withDefaults); } const Menu_item = create_ssr_component(($$result, $$props, $$bindings, slots) => { let builder; let attrs; let $$restProps = compute_rest_props($$props, ["href", "asChild", "disabled", "el"]); let $item, $$unsubscribe_item; let { href = void 0 } = $$props; let { asChild = false } = $$props; let { disabled = false } = $$props; let { el = void 0 } = $$props; const { elements: { item }, getAttrs } = getCtx(); $$unsubscribe_item = subscribe(item, (value) => $item = value); createDispatcher(); if ($$props.href === void 0 && $$bindings.href && href !== void 0) $$bindings.href(href); if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0) $$bindings.asChild(asChild); if ($$props.disabled === void 0 && $$bindings.disabled && disabled !== void 0) $$bindings.disabled(disabled); if ($$props.el === void 0 && $$bindings.el && el !== void 0) $$bindings.el(el); builder = $item; attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) }; { Object.assign(builder, attrs); } $$unsubscribe_item(); return `${asChild ? `${slots.default ? slots.default({ builder }) : ``}` : `${((tag) => { return tag ? `<${href ? "a" : "div"}${spread( [ { href: escape_attribute_value(href) }, escape_object(builder), escape_object($$restProps) ], {} )}${add_attribute("this", el, 0)}>${is_void(tag) ? "" : `${slots.default ? slots.default({ builder }) : ``}`}${is_void(tag) ? "" : ``}` : ""; })(href ? "a" : "div")}`}`; }); const Menu_label = create_ssr_component(($$result, $$props, $$bindings, slots) => { let builder; let $$restProps = compute_rest_props($$props, ["asChild", "el"]); let $groupLabel, $$unsubscribe_groupLabel; let { asChild = false } = $$props; let { el = void 0 } = $$props; const { groupLabel, id, getAttrs } = getGroupLabel(); $$unsubscribe_groupLabel = subscribe(groupLabel, (value) => $groupLabel = value); const attrs = getAttrs("label"); if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0) $$bindings.asChild(asChild); if ($$props.el === void 0 && $$bindings.el && el !== void 0) $$bindings.el(el); builder = $groupLabel(id); { Object.assign(builder, attrs); } $$unsubscribe_groupLabel(); return `${asChild ? `${slots.default ? slots.default({ builder }) : ``}` : `${slots.default ? slots.default({ builder }) : ``}`}`; }); const Menu_separator = create_ssr_component(($$result, $$props, $$bindings, slots) => { let builder; let $$restProps = compute_rest_props($$props, ["asChild", "el"]); let $separator, $$unsubscribe_separator; let { asChild = false } = $$props; let { el = void 0 } = $$props; const { elements: { separator }, getAttrs } = getCtx(); $$unsubscribe_separator = subscribe(separator, (value) => $separator = value); const attrs = getAttrs("separator"); if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0) $$bindings.asChild(asChild); if ($$props.el === void 0 && $$bindings.el && el !== void 0) $$bindings.el(el); builder = $separator; { Object.assign(builder, attrs); } $$unsubscribe_separator(); return `${asChild ? `${slots.default ? slots.default({ builder }) : ``}` : ``}`; }); const Menu = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $idValues, $$unsubscribe_idValues; let { closeOnOutsideClick = void 0 } = $$props; let { closeOnEscape = void 0 } = $$props; let { portal = void 0 } = $$props; let { open = void 0 } = $$props; let { onOpenChange = void 0 } = $$props; let { preventScroll = void 0 } = $$props; let { loop = void 0 } = $$props; let { dir = void 0 } = $$props; let { typeahead = void 0 } = $$props; let { closeFocus = void 0 } = $$props; let { disableFocusFirstItem = void 0 } = $$props; let { closeOnItemClick = void 0 } = $$props; let { onOutsideClick = void 0 } = $$props; const { states: { open: localOpen }, updateOption, ids } = setCtx({ closeOnOutsideClick, closeOnEscape, portal, forceVisible: true, defaultOpen: open, preventScroll, loop, dir, typeahead, closeFocus, disableFocusFirstItem, closeOnItemClick, onOutsideClick, onOpenChange: ({ next }) => { if (open !== next) { onOpenChange?.(next); open = next; } return next; } }); const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({ menu: $menuId, trigger: $triggerId })); $$unsubscribe_idValues = subscribe(idValues, (value) => $idValues = value); if ($$props.closeOnOutsideClick === void 0 && $$bindings.closeOnOutsideClick && closeOnOutsideClick !== void 0) $$bindings.closeOnOutsideClick(closeOnOutsideClick); if ($$props.closeOnEscape === void 0 && $$bindings.closeOnEscape && closeOnEscape !== void 0) $$bindings.closeOnEscape(closeOnEscape); if ($$props.portal === void 0 && $$bindings.portal && portal !== void 0) $$bindings.portal(portal); if ($$props.open === void 0 && $$bindings.open && open !== void 0) $$bindings.open(open); if ($$props.onOpenChange === void 0 && $$bindings.onOpenChange && onOpenChange !== void 0) $$bindings.onOpenChange(onOpenChange); if ($$props.preventScroll === void 0 && $$bindings.preventScroll && preventScroll !== void 0) $$bindings.preventScroll(preventScroll); if ($$props.loop === void 0 && $$bindings.loop && loop !== void 0) $$bindings.loop(loop); if ($$props.dir === void 0 && $$bindings.dir && dir !== void 0) $$bindings.dir(dir); if ($$props.typeahead === void 0 && $$bindings.typeahead && typeahead !== void 0) $$bindings.typeahead(typeahead); if ($$props.closeFocus === void 0 && $$bindings.closeFocus && closeFocus !== void 0) $$bindings.closeFocus(closeFocus); if ($$props.disableFocusFirstItem === void 0 && $$bindings.disableFocusFirstItem && disableFocusFirstItem !== void 0) $$bindings.disableFocusFirstItem(disableFocusFirstItem); if ($$props.closeOnItemClick === void 0 && $$bindings.closeOnItemClick && closeOnItemClick !== void 0) $$bindings.closeOnItemClick(closeOnItemClick); if ($$props.onOutsideClick === void 0 && $$bindings.onOutsideClick && onOutsideClick !== void 0) $$bindings.onOutsideClick(onOutsideClick); open !== void 0 && localOpen.set(open); { updateOption("closeOnOutsideClick", closeOnOutsideClick); } { updateOption("closeOnEscape", closeOnEscape); } { updateOption("portal", portal); } { updateOption("preventScroll", preventScroll); } { updateOption("loop", loop); } { updateOption("dir", dir); } { updateOption("closeFocus", closeFocus); } { updateOption("disableFocusFirstItem", disableFocusFirstItem); } { updateOption("typeahead", typeahead); } { updateOption("closeOnItemClick", closeOnItemClick); } { updateOption("onOutsideClick", onOutsideClick); } $$unsubscribe_idValues(); return `${slots.default ? slots.default({ ids: $idValues }) : ``}`; }); const Menu_content = create_ssr_component(($$result, $$props, $$bindings, slots) => { let builder; let $$restProps = compute_rest_props($$props, [ "transition", "transitionConfig", "inTransition", "inTransitionConfig", "outTransition", "outTransitionConfig", "asChild", "id", "side", "align", "sideOffset", "alignOffset", "collisionPadding", "avoidCollisions", "collisionBoundary", "sameWidth", "fitViewport", "strategy", "overlap", "el" ]); let $open, $$unsubscribe_open; let $menu, $$unsubscribe_menu; let { transition = void 0 } = $$props; let { transitionConfig = void 0 } = $$props; let { inTransition = void 0 } = $$props; let { inTransitionConfig = void 0 } = $$props; let { outTransition = void 0 } = $$props; let { outTransitionConfig = void 0 } = $$props; let { asChild = false } = $$props; let { id = void 0 } = $$props; let { side = "bottom" } = $$props; let { align = "center" } = $$props; let { sideOffset = 0 } = $$props; let { alignOffset = 0 } = $$props; let { collisionPadding = 8 } = $$props; let { avoidCollisions = true } = $$props; let { collisionBoundary = void 0 } = $$props; let { sameWidth = false } = $$props; let { fitViewport = false } = $$props; let { strategy = "absolute" } = $$props; let { overlap = false } = $$props; let { el = void 0 } = $$props; const { elements: { menu }, states: { open }, ids, getAttrs } = getCtx(); $$unsubscribe_menu = subscribe(menu, (value) => $menu = value); $$unsubscribe_open = subscribe(open, (value) => $open = value); createDispatcher(); const attrs = getAttrs("content"); if ($$props.transition === void 0 && $$bindings.transition && transition !== void 0) $$bindings.transition(transition); if ($$props.transitionConfig === void 0 && $$bindings.transitionConfig && transitionConfig !== void 0) $$bindings.transitionConfig(transitionConfig); if ($$props.inTransition === void 0 && $$bindings.inTransition && inTransition !== void 0) $$bindings.inTransition(inTransition); if ($$props.inTransitionConfig === void 0 && $$bindings.inTransitionConfig && inTransitionConfig !== void 0) $$bindings.inTransitionConfig(inTransitionConfig); if ($$props.outTransition === void 0 && $$bindings.outTransition && outTransition !== void 0) $$bindings.outTransition(outTransition); if ($$props.outTransitionConfig === void 0 && $$bindings.outTransitionConfig && outTransitionConfig !== void 0) $$bindings.outTransitionConfig(outTransitionConfig); if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0) $$bindings.asChild(asChild); if ($$props.id === void 0 && $$bindings.id && id !== void 0) $$bindings.id(id); if ($$props.side === void 0 && $$bindings.side && side !== void 0) $$bindings.side(side); if ($$props.align === void 0 && $$bindings.align && align !== void 0) $$bindings.align(align); if ($$props.sideOffset === void 0 && $$bindings.sideOffset && sideOffset !== void 0) $$bindings.sideOffset(sideOffset); if ($$props.alignOffset === void 0 && $$bindings.alignOffset && alignOffset !== void 0) $$bindings.alignOffset(alignOffset); if ($$props.collisionPadding === void 0 && $$bindings.collisionPadding && collisionPadding !== void 0) $$bindings.collisionPadding(collisionPadding); if ($$props.avoidCollisions === void 0 && $$bindings.avoidCollisions && avoidCollisions !== void 0) $$bindings.avoidCollisions(avoidCollisions); if ($$props.collisionBoundary === void 0 && $$bindings.collisionBoundary && collisionBoundary !== void 0) $$bindings.collisionBoundary(collisionBoundary); if ($$props.sameWidth === void 0 && $$bindings.sameWidth && sameWidth !== void 0) $$bindings.sameWidth(sameWidth); if ($$props.fitViewport === void 0 && $$bindings.fitViewport && fitViewport !== void 0) $$bindings.fitViewport(fitViewport); if ($$props.strategy === void 0 && $$bindings.strategy && strategy !== void 0) $$bindings.strategy(strategy); if ($$props.overlap === void 0 && $$bindings.overlap && overlap !== void 0) $$bindings.overlap(overlap); if ($$props.el === void 0 && $$bindings.el && el !== void 0) $$bindings.el(el); { if (id) { ids.menu.set(id); } } builder = $menu; { Object.assign(builder, attrs); } { if ($open) { updatePositioning({ side, align, sideOffset, alignOffset, collisionPadding, avoidCollisions, collisionBoundary, sameWidth, fitViewport, strategy, overlap }); } } $$unsubscribe_open(); $$unsubscribe_menu(); return `${asChild && $open ? `${slots.default ? slots.default({ builder }) : ``}` : `${transition && $open ? `${slots.default ? slots.default({ builder }) : ``}` : `${inTransition && outTransition && $open ? `${slots.default ? slots.default({ builder }) : ``}` : `${inTransition && $open ? `${slots.default ? slots.default({ builder }) : ``}` : `${outTransition && $open ? `${slots.default ? slots.default({ builder }) : ``}` : `${$open ? `${slots.default ? slots.default({ builder }) : ``}` : ``}`}`}`}`}`}`; }); const Menu_trigger = create_ssr_component(($$result, $$props, $$bindings, slots) => { let builder; let $$restProps = compute_rest_props($$props, ["asChild", "id", "el"]); let $trigger, $$unsubscribe_trigger; let { asChild = false } = $$props; let { id = void 0 } = $$props; let { el = void 0 } = $$props; const { elements: { trigger }, ids, getAttrs } = getCtx(); $$unsubscribe_trigger = subscribe(trigger, (value) => $trigger = value); createDispatcher(); const attrs = getAttrs("trigger"); if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0) $$bindings.asChild(asChild); if ($$props.id === void 0 && $$bindings.id && id !== void 0) $$bindings.id(id); if ($$props.el === void 0 && $$bindings.el && el !== void 0) $$bindings.el(el); { if (id) { ids.trigger.set(id); } } builder = $trigger; { Object.assign(builder, attrs); } $$unsubscribe_trigger(); return `${asChild ? `${slots.default ? slots.default({ builder }) : ``}` : `${slots.default ? slots.default({ builder }) : ``}`}`; }); const Dropdown_menu_item = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, ["class", "inset"]); let { class: className = void 0 } = $$props; let { inset = void 0 } = $$props; if ($$props.class === void 0 && $$bindings.class && className !== void 0) $$bindings.class(className); if ($$props.inset === void 0 && $$bindings.inset && inset !== void 0) $$bindings.inset(inset); return `${validate_component(Menu_item, "DropdownMenuPrimitive.Item").$$render( $$result, Object.assign( {}, { class: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50", inset && "pl-8", className) }, $$restProps ), {}, { default: () => { return `${slots.default ? slots.default({}) : ``}`; } } )}`; }); const Dropdown_menu_label = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, ["class", "inset"]); let { class: className = void 0 } = $$props; let { inset = void 0 } = $$props; if ($$props.class === void 0 && $$bindings.class && className !== void 0) $$bindings.class(className); if ($$props.inset === void 0 && $$bindings.inset && inset !== void 0) $$bindings.inset(inset); return `${validate_component(Menu_label, "DropdownMenuPrimitive.Label").$$render( $$result, Object.assign( {}, { class: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className) }, $$restProps ), {}, { default: () => { return `${slots.default ? slots.default({}) : ``}`; } } )}`; }); const Dropdown_menu_content = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, ["class", "sideOffset", "transition", "transitionConfig"]); let { class: className = void 0 } = $$props; let { sideOffset = 4 } = $$props; let { transition = flyAndScale } = $$props; let { transitionConfig = void 0 } = $$props; if ($$props.class === void 0 && $$bindings.class && className !== void 0) $$bindings.class(className); if ($$props.sideOffset === void 0 && $$bindings.sideOffset && sideOffset !== void 0) $$bindings.sideOffset(sideOffset); if ($$props.transition === void 0 && $$bindings.transition && transition !== void 0) $$bindings.transition(transition); if ($$props.transitionConfig === void 0 && $$bindings.transitionConfig && transitionConfig !== void 0) $$bindings.transitionConfig(transitionConfig); return `${validate_component(Menu_content, "DropdownMenuPrimitive.Content").$$render( $$result, Object.assign( {}, { transition }, { transitionConfig }, { sideOffset }, { class: cn("z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none", className) }, $$restProps ), {}, { default: () => { return `${slots.default ? slots.default({}) : ``}`; } } )}`; }); const Dropdown_menu_separator = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, ["class"]); let { class: className = void 0 } = $$props; if ($$props.class === void 0 && $$bindings.class && className !== void 0) $$bindings.class(className); return `${validate_component(Menu_separator, "DropdownMenuPrimitive.Separator").$$render( $$result, Object.assign( {}, { class: cn("-mx-1 my-1 h-px bg-muted", className) }, $$restProps ), {}, {} )}`; }); const Root$1 = Menu; const Trigger$1 = Menu_trigger; const Sheet_portal = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, ["class"]); let { class: className = void 0 } = $$props; if ($$props.class === void 0 && $$bindings.class && className !== void 0) $$bindings.class(className); return `${validate_component(Dialog_portal, "SheetPrimitive.Portal").$$render($$result, Object.assign({}, { class: cn(className) }, $$restProps), {}, { default: () => { return `${slots.default ? slots.default({}) : ``}`; } })}`; }); const Sheet_overlay = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, ["class", "transition", "transitionConfig"]); let { class: className = void 0 } = $$props; let { transition = fade } = $$props; let { transitionConfig = { duration: 150 } } = $$props; if ($$props.class === void 0 && $$bindings.class && className !== void 0) $$bindings.class(className); if ($$props.transition === void 0 && $$bindings.transition && transition !== void 0) $$bindings.transition(transition); if ($$props.transitionConfig === void 0 && $$bindings.transitionConfig && transitionConfig !== void 0) $$bindings.transitionConfig(transitionConfig); return `${validate_component(Dialog_overlay, "SheetPrimitive.Overlay").$$render( $$result, Object.assign( {}, { transition }, { transitionConfig }, { class: cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className) }, $$restProps ), {}, {} )}`; }); const Sheet_content = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $$restProps = compute_rest_props($$props, [ "class", "side", "inTransition", "inTransitionConfig", "outTransition", "outTransitionConfig" ]); let { class: className = void 0 } = $$props; let { side = "right" } = $$props; let { inTransition = fly } = $$props; let { inTransitionConfig = sheetTransitions[side ?? "right"].in } = $$props; let { outTransition = fly } = $$props; let { outTransitionConfig = sheetTransitions[side ?? "right"].out } = $$props; if ($$props.class === void 0 && $$bindings.class && className !== void 0) $$bindings.class(className); if ($$props.side === void 0 && $$bindings.side && side !== void 0) $$bindings.side(side); if ($$props.inTransition === void 0 && $$bindings.inTransition && inTransition !== void 0) $$bindings.inTransition(inTransition); if ($$props.inTransitionConfig === void 0 && $$bindings.inTransitionConfig && inTransitionConfig !== void 0) $$bindings.inTransitionConfig(inTransitionConfig); if ($$props.outTransition === void 0 && $$bindings.outTransition && outTransition !== void 0) $$bindings.outTransition(outTransition); if ($$props.outTransitionConfig === void 0 && $$bindings.outTransitionConfig && outTransitionConfig !== void 0) $$bindings.outTransitionConfig(outTransitionConfig); return `${validate_component(Sheet_portal, "SheetPortal").$$render($$result, {}, {}, { default: () => { return `${validate_component(Sheet_overlay, "SheetOverlay").$$render($$result, {}, {}, {})} ${validate_component(Dialog_content, "SheetPrimitive.Content").$$render( $$result, Object.assign( {}, { inTransition }, { inTransitionConfig }, { outTransition }, { outTransitionConfig }, { class: cn(sheetVariants({ side }), className) }, $$restProps ), {}, { default: () => { return `${slots.default ? slots.default({}) : ``} ${validate_component(Dialog_close, "SheetPrimitive.Close").$$render( $$result, { class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" }, {}, { default: () => { return `${validate_component(X$1, "X").$$render($$result, { class: "h-4 w-4" }, {}, {})} Close`; } } )}`; } } )}`; } })}`; }); const Root = Dialog; const Trigger = Dialog_trigger; const sheetVariants = tv({ base: "fixed z-50 gap-4 bg-background p-6 shadow-lg", variants: { side: { top: "inset-x-0 top-0 border-b", bottom: "inset-x-0 bottom-0 border-t", left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm" } }, defaultVariants: { side: "right" } }); const sheetTransitions = { top: { in: { y: "-100%", duration: 500, opacity: 1 }, out: { y: "-100%", duration: 300, opacity: 1 } }, bottom: { in: { y: "100%", duration: 500, opacity: 1 }, out: { y: "100%", duration: 300, opacity: 1 } }, left: { in: { x: "-100%", duration: 500, opacity: 1 }, out: { x: "-100%", duration: 300, opacity: 1 } }, right: { in: { x: "100%", duration: 500, opacity: 1 }, out: { x: "100%", duration: 300, opacity: 1 } } }; const TOAST_LIFETIME = 4e3; const GAP$1 = 14; const TIME_BEFORE_UNMOUNT = 200; const Toast = create_ssr_component(($$result, $$props, $$bindings, slots) => { let isFront; let isVisible; let toastType; let toastClass; let toastDescriptionClass; let heightIndex; let coords; let toastsHeightBefore; let disabled; let isPromiseLoadingOrInfiniteDuration; let $$unsubscribe_effect = noop, $$subscribe_effect = () => ($$unsubscribe_effect(), $$unsubscribe_effect = subscribe(effect2, ($$value) => $$value), effect2); let $heights, $$unsubscribe_heights; let $toasts, $$unsubscribe_toasts; const defaultClasses = { toast: "", title: "", description: "", loader: "", closeButton: "", cancelButton: "", actionButton: "", action: "", warning: "", error: "", success: "", default: "", info: "", loading: "" }; const { toasts, heights, removeHeight, setHeight, dismiss } = toastState; $$unsubscribe_toasts = subscribe(toasts, (value) => $toasts = value); $$unsubscribe_heights = subscribe(heights, (value) => $heights = value); let { toast } = $$props; let { index } = $$props; let { expanded } = $$props; let { invert } = $$props; let { position } = $$props; let { visibleToasts } = $$props; let { expandByDefault } = $$props; let { closeButton } = $$props; let { interacting } = $$props; let { cancelButtonStyle = "" } = $$props; let { actionButtonStyle = "" } = $$props; let { duration = 4e3 } = $$props; let { descriptionClass = "" } = $$props; let { classes = {} } = $$props; let { unstyled = false } = $$props; let mounted = false; let removed = false; let swiping = false; let swipeOut = false; let offsetBeforeRemove = 0; let initialHeight = 0; let toastRef; let offset = 0; let closeTimerStartTimeRef = 0; let lastCloseTimerStartTimeRef = 0; async function updateHeights() { { return; } } function deleteToast() { removed = true; offsetBeforeRemove = offset; removeHeight(toast.id); setTimeout( () => { dismiss(toast.id); }, TIME_BEFORE_UNMOUNT ); } let timeoutId; let remainingTime = toast.duration || duration || TOAST_LIFETIME; function pauseTimer() { if (lastCloseTimerStartTimeRef < closeTimerStartTimeRef) { const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef; remainingTime = remainingTime - elapsedTime; } lastCloseTimerStartTimeRef = (/* @__PURE__ */ new Date()).getTime(); } function startTimer() { closeTimerStartTimeRef = (/* @__PURE__ */ new Date()).getTime(); timeoutId = setTimeout( () => { toast.onAutoClose?.(toast); deleteToast(); }, remainingTime ); } let effect2; if ($$props.toast === void 0 && $$bindings.toast && toast !== void 0) $$bindings.toast(toast); if ($$props.index === void 0 && $$bindings.index && index !== void 0) $$bindings.index(index); if ($$props.expanded === void 0 && $$bindings.expanded && expanded !== void 0) $$bindings.expanded(expanded); if ($$props.invert === void 0 && $$bindings.invert && invert !== void 0) $$bindings.invert(invert); if ($$props.position === void 0 && $$bindings.position && position !== void 0) $$bindings.position(position); if ($$props.visibleToasts === void 0 && $$bindings.visibleToasts && visibleToasts !== void 0) $$bindings.visibleToasts(visibleToasts); if ($$props.expandByDefault === void 0 && $$bindings.expandByDefault && expandByDefault !== void 0) $$bindings.expandByDefault(expandByDefault); if ($$props.closeButton === void 0 && $$bindings.closeButton && closeButton !== void 0) $$bindings.closeButton(closeButton); if ($$props.interacting === void 0 && $$bindings.interacting && interacting !== void 0) $$bindings.interacting(interacting); if ($$props.cancelButtonStyle === void 0 && $$bindings.cancelButtonStyle && cancelButtonStyle !== void 0) $$bindings.cancelButtonStyle(cancelButtonStyle); if ($$props.actionButtonStyle === void 0 && $$bindings.actionButtonStyle && actionButtonStyle !== void 0) $$bindings.actionButtonStyle(actionButtonStyle); if ($$props.duration === void 0 && $$bindings.duration && duration !== void 0) $$bindings.duration(duration); if ($$props.descriptionClass === void 0 && $$bindings.descriptionClass && descriptionClass !== void 0) $$bindings.descriptionClass(descriptionClass); if ($$props.classes === void 0 && $$bindings.classes && classes !== void 0) $$bindings.classes(classes); if ($$props.unstyled === void 0 && $$bindings.unstyled && unstyled !== void 0) $$bindings.unstyled(unstyled); classes = { ...defaultClasses, ...classes }; isFront = index === 0; isVisible = index + 1 <= visibleToasts; toast.title; toast.description; toastType = toast.type; toastClass = toast.class || ""; toastDescriptionClass = toast.descriptionClass || ""; heightIndex = $heights.findIndex((height) => height.toastId === toast.id) || 0; coords = position.split("-"); toastsHeightBefore = $heights.reduce( (prev, curr, reducerIndex) => { if (reducerIndex >= heightIndex) return prev; return prev + curr.height; }, 0 ); invert = toast.invert || invert; disabled = toastType === "loading"; offset = Math.round(heightIndex * GAP$1 + toastsHeightBefore); { updateHeights(); } { if (toast.updated) { clearTimeout(timeoutId); remainingTime = toast.duration || duration || TOAST_LIFETIME; startTimer(); } } isPromiseLoadingOrInfiniteDuration = toast.promise && toastType === "loading" || toast.duration === Number.POSITIVE_INFINITY; $$subscribe_effect(effect2 = useEffect(() => { if (!isPromiseLoadingOrInfiniteDuration) { if (expanded || interacting) { pauseTimer(); } else { startTimer(); } } return () => clearTimeout(timeoutId); })); { if (toast.delete) { deleteToast(); } } $$unsubscribe_effect(); $$unsubscribe_heights(); $$unsubscribe_toasts(); return ` ${closeButton && !toast.component ? `` : ``} ${toast.component ? `${validate_component(toast.component || missing_component, "svelte:component").$$render($$result, Object.assign({}, toast.componentProps), {}, {})}` : `${toastType !== "default" || toast.icon || toast.promise ? `
${(toast.promise || toastType === "loading") && !toast.icon ? `${slots["loading-icon"] ? slots["loading-icon"]({}) : ``}` : ``} ${toast.icon ? `${validate_component(toast.icon || missing_component, "svelte:component").$$render($$result, {}, {}, {})}` : `${toastType === "success" ? `${slots["success-icon"] ? slots["success-icon"]({}) : ``}` : `${toastType === "error" ? `${slots["error-icon"] ? slots["error-icon"]({}) : ``}` : `${toastType === "warning" ? `${slots["warning-icon"] ? slots["warning-icon"]({}) : ``}` : `${toastType === "info" ? `${slots["info-icon"] ? slots["info-icon"]({}) : ``}` : ``}`}`}`}`}
` : ``}
${toast.title ? `
${typeof toast.title !== "string" ? `${validate_component(toast.title || missing_component, "svelte:component").$$render($$result, Object.assign({}, toast.componentProps), {}, {})}` : `${escape(toast.title)}`}
` : ``} ${toast.description ? `
${typeof toast.description !== "string" ? `${validate_component(toast.description || missing_component, "svelte:component").$$render($$result, Object.assign({}, toast.componentProps), {}, {})}` : `${escape(toast.description)}`}
` : ``}
${toast.cancel ? `` : ``} ${toast.action ? `` : ``}`}`; }); const Loader = create_ssr_component(($$result, $$props, $$bindings, slots) => { let { visible } = $$props; const bars = Array(12).fill(0); if ($$props.visible === void 0 && $$bindings.visible && visible !== void 0) $$bindings.visible(visible); return `
`; }); const Icon = create_ssr_component(($$result, $$props, $$bindings, slots) => { let { type = "success" } = $$props; if ($$props.type === void 0 && $$bindings.type && type !== void 0) $$bindings.type(type); return `${type === "success" ? `` : `${type === "error" ? `` : `${type === "info" ? `` : `${type === "warning" ? `` : ``}`}`}`}`; }); const css = { code: ":where(html[dir='ltr']),:where([data-sonner-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-sonner-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-sonner-toaster]){position:fixed;width:var(--width);font-family:ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n Noto Sans,\n sans-serif,\n Apple Color Emoji,\n Segoe UI Emoji,\n Segoe UI Symbol,\n 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}:where([data-sonner-toaster][data-x-position='right']){right:max(var(--offset), env(safe-area-inset-right))}:where([data-sonner-toaster][data-x-position='left']){left:max(var(--offset), env(safe-area-inset-left))}:where([data-sonner-toaster][data-x-position='center']){left:50%;transform:translateX(-50%)}:where([data-sonner-toaster][data-y-position='top']){top:max(var(--offset), env(safe-area-inset-top))}:where([data-sonner-toaster][data-y-position='bottom']){bottom:max(var(--offset), env(safe-area-inset-bottom))}:where([data-sonner-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);touch-action:none;transition:transform 400ms,\n opacity 400ms,\n height 400ms,\n box-shadow 200ms;box-sizing:border-box;outline:none;overflow-wrap:anywhere}:where([data-sonner-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-sonner-toast]:focus-visible){box-shadow:0px 4px 12px rgba(0, 0, 0, 0.1),\n 0 0 0 2px rgba(0, 0, 0, 0.2)}:where([data-sonner-toast][data-y-position='top']){top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}:where([data-sonner-toast][data-y-position='bottom']){bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}:where([data-sonner-toast]) :where([data-description]){font-weight:400;line-height:1.4;color:inherit}:where([data-sonner-toast]) :where([data-title]){font-weight:500;line-height:1.5;color:inherit}:where([data-sonner-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-sonner-toast][data-promise='true']) :where([data-icon])>svg{opacity:0;transform:scale(0.8);transform-origin:center;animation:sonner-fade-in 300ms ease forwards}:where([data-sonner-toast]) :where([data-icon])>*{flex-shrink:0}:where([data-sonner-toast]) :where([data-icon]) svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}:where([data-sonner-toast]) :where([data-content]){display:flex;flex-direction:column;gap:2px}[data-sonner-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,\n box-shadow 200ms}:where([data-sonner-toast]) :where([data-button]):focus-visible{box-shadow:0 0 0 2px rgba(0, 0, 0, 0.4)}:where([data-sonner-toast]) :where([data-button]):first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}:where([data-sonner-toast]) :where([data-cancel]){color:var(--normal-text);background:rgba(0, 0, 0, 0.08)}:where([data-sonner-toast][data-theme='dark']) :where([data-cancel]){background:rgba(255, 255, 255, 0.3)}:where([data-sonner-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;background:var(--gray1);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,\n background 200ms,\n border-color 200ms}:where([data-sonner-toast]) :where([data-close-button]):focus-visible{box-shadow:0px 4px 12px rgba(0, 0, 0, 0.1),\n 0 0 0 2px rgba(0, 0, 0, 0.2)}:where([data-sonner-toast]) :where([data-disabled='true']){cursor:not-allowed}:where([data-sonner-toast]):hover :where([data-close-button]):hover{background:var(--gray2);border-color:var(--gray5)}:where([data-sonner-toast][data-swiping='true'])::before{content:'';position:absolute;left:0;right:0;height:100%;z-index:-1}:where(\n [data-sonner-toast][data-y-position='top'][data-swiping='true']\n )::before{bottom:50%;transform:scaleY(3) translateY(50%)}:where(\n [data-sonner-toast][data-y-position='bottom'][data-swiping='true']\n )::before{top:50%;transform:scaleY(3) translateY(-50%)}:where(\n [data-sonner-toast][data-swiping='false'][data-removed='true']\n )::before{content:'';position:absolute;inset:0;transform:scaleY(2)}:where([data-sonner-toast])::after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}:where([data-sonner-toast][data-mounted='true']){--y:translateY(0);opacity:1}:where([data-sonner-toast][data-expanded='false'][data-front='false']){--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before)))\n scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}:where([data-sonner-toast])>*{transition:opacity 400ms}:where(\n [data-sonner-toast][data-expanded='false'][data-front='false'][data-styled='true']\n )\n >*{opacity:0}:where([data-sonner-toast][data-visible='false']){opacity:0;pointer-events:none}:where([data-sonner-toast][data-mounted='true'][data-expanded='true']){--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}:where(\n [data-sonner-toast][data-removed='true'][data-front='true'][data-swipe-out='false']\n ){--y:translateY(calc(var(--lift) * -100%));opacity:0}:where(\n [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true']\n ){--y:translateY(\n calc(var(--lift) * var(--offset) + var(--lift) * -100%)\n );opacity:0}:where(\n [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false']\n ){--y:translateY(40%);opacity:0;transition:transform 500ms,\n opacity 200ms}:where(\n [data-sonner-toast][data-removed='true'][data-front='false']\n )::before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping='true']{transform:var(--y) translateY(var(--swipe-amount, 0px));transition:none}[data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],[data-sonner-toast][data-swipe-out='true'][data-y-position='top']{animation:swipe-out 200ms ease-out forwards}@keyframes swipe-out{from{transform:translateY(\n calc(var(--lift) * var(--offset) + var(--swipe-amount))\n );opacity:1}to{transform:translateY(\n calc(\n var(--lift) * var(--offset) + var(--swipe-amount) +\n var(--lift) * -100%\n )\n );opacity:0}}@media(max-width: 600px){[data-sonner-toaster]{position:fixed;--mobile-offset:16px;right:var(--mobile-offset);left:var(--mobile-offset);width:100%}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset) * 2)}[data-sonner-toaster][data-x-position='left']{left:var(--mobile-offset)}[data-sonner-toaster][data-y-position='bottom']{bottom:20px}[data-sonner-toaster][data-y-position='top']{top:20px}[data-sonner-toaster][data-x-position='center']{left:var(--mobile-offset);right:var(--mobile-offset);transform:none}}[data-sonner-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-sonner-toaster][data-theme='light']\n [data-sonner-toast][data-invert='true']{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-theme='dark']\n [data-sonner-toast][data-invert='true']{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-theme='dark']{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--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-rich-colors='true'] [data-sonner-toast][data-type='success']{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors='true']\n [data-sonner-toast][data-type='success']\n [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors='true'] [data-sonner-toast][data-type='info']{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors='true']\n [data-sonner-toast][data-type='info']\n [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors='true'] [data-sonner-toast][data-type='warning']{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors='true']\n [data-sonner-toast][data-type='warning']\n [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors='true'] [data-sonner-toast][data-type='error']{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors='true']\n [data-sonner-toast][data-type='error']\n [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible='false']{transform-origin:center;animation:sonner-fade-out 0.2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:nth-child(1){animation-delay:-1.2s;transform:rotate(0.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-0.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-0.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-0.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-0.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-0.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-0.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-0.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-0.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-0.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:0.15}}@media(prefers-reduced-motion){[data-sonner-toast],[data-sonner-toast]>*,.sonner-loading-bar{transition:none !important;animation:none !important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);transform-origin:center;transition:opacity 200ms,\n transform 200ms}.sonner-loader[data-visible='false']{opacity:0;transform:scale(0.8) translate(-50%, -50%)}", map: `{"version":3,"file":"Toaster.svelte","sources":["Toaster.svelte"],"sourcesContent":["