@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/snackbar/index.mjs

@@ -1,534 +1,409 @@
-import { jsx as g, jsxs as et } from "react/jsx-runtime";
-import { useToastQueue as nt, ToastQueue as it } from "@react-stately/toast";
-import { createContext as at, useContext as ot, useState as st, useRef as w, useEffect as z, useCallback as S, Children as rt, isValidElement as ct, cloneElement as D, useSyncExternalStore as lt } from "react";
-import { createPortal as dt } from "react-dom";
-import { useToast as mt, useToastRegion as ut } from "@react-aria/toast";
-import { cva as B, cx as V } from "class-variance-authority";
-import { B as pt } from "../Button-1M9DcZl0.mjs";
-import { Close as gt } from "@spark-ui/icons/Close";
-import { I as F } from "../Icon-BO327oHU.mjs";
-import { I as ft } from "../IconButton-DdB3Pq13.mjs";
-const bt = [
-  {
-    design: "filled",
-    intent: "success",
-    class: ["bg-success text-on-success"]
-  },
-  {
-    design: "filled",
-    intent: "alert",
-    class: ["bg-alert text-on-alert"]
-  },
-  {
-    design: "filled",
-    intent: "error",
-    class: ["bg-error text-on-error"]
-  },
-  {
-    design: "filled",
-    intent: "info",
-    class: ["bg-info text-on-info"]
-  },
-  {
-    design: "filled",
-    intent: "neutral",
-    class: ["bg-neutral text-on-neutral"]
-  },
-  {
-    design: "filled",
-    intent: "main",
-    class: ["bg-main text-on-main"]
-  },
-  {
-    design: "filled",
-    intent: "support",
-    class: ["bg-support text-on-support"]
-  },
-  {
-    design: "filled",
-    intent: "accent",
-    class: ["bg-accent text-on-accent"]
-  },
-  {
-    design: "filled",
-    intent: "inverse",
-    class: ["bg-surface-inverse text-on-surface-inverse"]
-  }
-], xt = [
-  {
-    design: "tinted",
-    intent: "success",
-    class: ["bg-success-container text-on-success-container"]
-  },
-  {
-    design: "tinted",
-    intent: "alert",
-    class: ["bg-alert-container text-on-alert-container"]
-  },
-  {
-    design: "tinted",
-    intent: "error",
-    class: ["bg-error-container text-on-error-container"]
-  },
-  {
-    design: "tinted",
-    intent: "info",
-    class: ["bg-info-container text-on-info-container"]
-  },
-  {
-    design: "tinted",
-    intent: "neutral",
-    class: ["bg-neutral-container text-on-neutral-container"]
-  },
-  {
-    design: "tinted",
-    intent: "main",
-    class: ["bg-main-container text-on-main-container"]
-  },
-  {
-    design: "tinted",
-    intent: "support",
-    class: ["bg-support-container text-on-support-container"]
-  },
-  {
-    design: "tinted",
-    intent: "accent",
-    class: ["bg-accent-container text-on-accent-container"]
-  },
-  {
-    design: "tinted",
-    intent: "inverse",
-    class: ["bg-surface-inverse text-on-surface-inverse"]
-  }
-], yt = B(
-  [
-    "rounded-md shadow-sm",
-    "max-w-[600px]",
-    "cursor-default pointer-events-auto touch-none select-none",
-    "absolute",
-    /**
-     * Focus
-     */
-    "group-focus-visible:outline-hidden group-focus-visible:u-outline group-not-focus-visible:ring-inset",
-    /**
-     * Positionning
-     */
-    "group-data-[position=bottom]:bottom-0 group-data-[position=bottom-left]:bottom-0 group-data-[position=bottom-right]:bottom-0",
-    "group-data-[position=top]:top-0 group-data-[position=top-left]:top-0 group-data-[position=top-right]:top-0",
-    /**
-     * Animation and opacity
-     */
-    "animation-duration-400",
-    "[animation-fill-mode: forwards]!",
-    "data-[animation=queued]:animate-fade-in",
-    "data-[animation=entering]:animation-ease-decelerate-back",
-    "data-[animation=exiting]:animation-ease-accelerate",
-    // Parent position bottom|bottom-left|bottom-right
-    "data-[animation=entering]:group-data-[position=bottom]:[&:not([data-swipe])]:animate-slide-in-bottom",
-    "data-[animation=exiting]:opacity-0 data-[animation=exiting]:transition-opacity",
-    "data-[animation=exiting]:group-data-[position=bottom]:[&:not([data-swipe])]:animate-slide-out-bottom",
-    "data-[animation=entering]:group-data-[position=bottom-left]:[&:not([data-swipe])]:animate-slide-in-bottom",
-    "data-[animation=exiting]:group-data-[position=bottom-left]:[&:not([data-swipe])]:animate-slide-out-bottom",
-    "data-[animation=entering]:group-data-[position=bottom-right]:[&:not([data-swipe])]:animate-slide-in-bottom",
-    "data-[animation=exiting]:group-data-[position=bottom-right]:[&:not([data-swipe])]:animate-slide-out-bottom",
-    // Parent position top|top-left|top-right
-    "data-[animation=entering]:group-data-[position=top]:[&:not([data-swipe])]:animate-slide-in-top",
-    "data-[animation=exiting]:group-data-[position=top]:[&:not([data-swipe])]:animate-slide-out-top",
-    "data-[animation=entering]:group-data-[position=top-left]:[&:not([data-swipe])]:animate-slide-in-top",
-    "data-[animation=exiting]:group-data-[position=top-left]:[&:not([data-swipe])]:animate-slide-out-top",
-    "data-[animation=entering]:group-data-[position=top-right]:[&:not([data-swipe])]:animate-slide-in-top",
-    "data-[animation=exiting]:group-data-[position=top-right]:[&:not([data-swipe])]:animate-slide-out-top",
-    /**
-     * Swipe
-     */
-    "data-[swipe=move]:data-[swipe-direction=right]:translate-x-(--swipe-position-x)",
-    "data-[swipe=move]:data-[swipe-direction=left]:translate-x-(--swipe-position-x)",
-    "data-[swipe=cancel]:translate-x-0",
-    "data-[swipe=end]:data-[swipe-direction=right]:animate-standalone-swipe-out-right",
-    "data-[swipe=end]:data-[swipe-direction=left]:animate-standalone-swipe-out-left"
-  ],
-  {
-    variants: {
-      /**
-       * Set different look and feel
-       * @default 'filled'
-       */
-      design: {
-        filled: "",
-        tinted: ""
-      },
-      /**
-       * Set color intent
-       * @default 'neutral'
-       */
-      intent: {
-        success: "",
-        alert: "",
-        error: "",
-        info: "",
-        neutral: "",
-        main: "",
-        support: "",
-        accent: "",
-        inverse: ""
-      }
-    },
-    compoundVariants: [...bt, ...xt],
-    defaultVariants: {
-      design: "filled",
-      intent: "neutral"
-    }
-  }
-), wt = B(
-  [
-    "inline-grid items-center",
-    "col-start-1 row-start-1",
-    "pl-md pr-lg"
-    // applying padding on the parent prevents VoiceOver on Safari from reading snackbar content 🤷
-  ],
-  {
-    variants: {
-      /**
-       * Force action button displaying on a new line
-       * @default false
-       */
-      actionOnNewline: {
-        true: [
-          "grid-rows-[52px_1fr_52px]",
-          "grid-cols-[min-content_1fr_min-content]",
-          "[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']"
-        ],
-        false: [
-          "grid-cols-[min-content_1fr_min-content_min-content]",
-          "[grid-template-areas:'icon_message_action_close']"
-        ]
-      }
-    },
-    defaultVariants: {
-      actionOnNewline: !1
-    }
-  }
-), Q = at({}), O = () => ot(Q), h = ({
-  design: t = "filled",
-  intent: e = "neutral",
-  onClick: n,
-  children: r,
-  className: c,
-  ref: d,
-  ...m
-}) => {
-  const { toast: i, state: o } = O(), a = e ?? i.content.intent, f = t ?? i.content.design;
-  return /* @__PURE__ */ g(
-    pt,
-    {
-      "data-spark-component": "snackbar-item-action",
-      ref: d,
-      size: "md",
-      shape: "rounded",
-      ...a === "inverse" ? {
-        design: "ghost",
-        intent: "surface"
-      } : {
-        design: f,
-        intent: a === "error" ? "danger" : a
-      },
-      onClick: (x) => {
-        n?.(x), o.close(i.key);
-      },
-      style: { gridArea: "action", ...m.style },
-      className: V("ml-md justify-self-end", c),
-      ...m,
-      children: r
-    }
-  );
+import { t as e } from "../icon-D05Uqh8_.mjs";
+import { t } from "../button-_YZ_4J42.mjs";
+import { t as n } from "../icon-button-6p3O7NIm.mjs";
+import { cva as r, cx as i } from "class-variance-authority";
+import { Children as a, cloneElement as o, createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useRef as f, useState as p, useSyncExternalStore as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Close as _ } from "@spark-ui/icons/Close";
+import { ToastQueue as v, useToastQueue as y } from "@react-stately/toast";
+import { createPortal as b } from "react-dom";
+import { useToast as x, useToastRegion as S } from "@react-aria/toast";
+//#region src/snackbar/snackbarVariants.ts
+var C = [
+	{
+		design: "filled",
+		intent: "success",
+		class: ["bg-success text-on-success"]
+	},
+	{
+		design: "filled",
+		intent: "alert",
+		class: ["bg-alert text-on-alert"]
+	},
+	{
+		design: "filled",
+		intent: "error",
+		class: ["bg-error text-on-error"]
+	},
+	{
+		design: "filled",
+		intent: "info",
+		class: ["bg-info text-on-info"]
+	},
+	{
+		design: "filled",
+		intent: "neutral",
+		class: ["bg-neutral text-on-neutral"]
+	},
+	{
+		design: "filled",
+		intent: "main",
+		class: ["bg-main text-on-main"]
+	},
+	{
+		design: "filled",
+		intent: "support",
+		class: ["bg-support text-on-support"]
+	},
+	{
+		design: "filled",
+		intent: "accent",
+		class: ["bg-accent text-on-accent"]
+	},
+	{
+		design: "filled",
+		intent: "inverse",
+		class: ["bg-surface-inverse text-on-surface-inverse"]
+	}
+], w = [
+	{
+		design: "tinted",
+		intent: "success",
+		class: ["bg-success-container text-on-success-container"]
+	},
+	{
+		design: "tinted",
+		intent: "alert",
+		class: ["bg-alert-container text-on-alert-container"]
+	},
+	{
+		design: "tinted",
+		intent: "error",
+		class: ["bg-error-container text-on-error-container"]
+	},
+	{
+		design: "tinted",
+		intent: "info",
+		class: ["bg-info-container text-on-info-container"]
+	},
+	{
+		design: "tinted",
+		intent: "neutral",
+		class: ["bg-neutral-container text-on-neutral-container"]
+	},
+	{
+		design: "tinted",
+		intent: "main",
+		class: ["bg-main-container text-on-main-container"]
+	},
+	{
+		design: "tinted",
+		intent: "support",
+		class: ["bg-support-container text-on-support-container"]
+	},
+	{
+		design: "tinted",
+		intent: "accent",
+		class: ["bg-accent-container text-on-accent-container"]
+	},
+	{
+		design: "tinted",
+		intent: "inverse",
+		class: ["bg-surface-inverse text-on-surface-inverse"]
+	}
+], T = r(/* @__PURE__ */ "rounded-md shadow-sm.max-w-[600px].cursor-default pointer-events-auto touch-none select-none.absolute.group-focus-visible:outline-hidden group-focus-visible:u-outline group-not-focus-visible:ring-inset.group-data-[position=bottom]:bottom-0 group-data-[position=bottom-left]:bottom-0 group-data-[position=bottom-right]:bottom-0.group-data-[position=top]:top-0 group-data-[position=top-left]:top-0 group-data-[position=top-right]:top-0.animation-duration-400.[animation-fill-mode: forwards]!.data-[animation=queued]:animate-fade-in.data-[animation=entering]:animation-ease-decelerate-back.data-[animation=exiting]:animation-ease-accelerate.data-[animation=entering]:group-data-[position=bottom]:[&:not([data-swipe])]:animate-slide-in-bottom.data-[animation=exiting]:opacity-0 data-[animation=exiting]:transition-opacity.data-[animation=exiting]:group-data-[position=bottom]:[&:not([data-swipe])]:animate-slide-out-bottom.data-[animation=entering]:group-data-[position=bottom-left]:[&:not([data-swipe])]:animate-slide-in-bottom.data-[animation=exiting]:group-data-[position=bottom-left]:[&:not([data-swipe])]:animate-slide-out-bottom.data-[animation=entering]:group-data-[position=bottom-right]:[&:not([data-swipe])]:animate-slide-in-bottom.data-[animation=exiting]:group-data-[position=bottom-right]:[&:not([data-swipe])]:animate-slide-out-bottom.data-[animation=entering]:group-data-[position=top]:[&:not([data-swipe])]:animate-slide-in-top.data-[animation=exiting]:group-data-[position=top]:[&:not([data-swipe])]:animate-slide-out-top.data-[animation=entering]:group-data-[position=top-left]:[&:not([data-swipe])]:animate-slide-in-top.data-[animation=exiting]:group-data-[position=top-left]:[&:not([data-swipe])]:animate-slide-out-top.data-[animation=entering]:group-data-[position=top-right]:[&:not([data-swipe])]:animate-slide-in-top.data-[animation=exiting]:group-data-[position=top-right]:[&:not([data-swipe])]:animate-slide-out-top.data-[swipe=move]:data-[swipe-direction=right]:translate-x-(--swipe-position-x).data-[swipe=move]:data-[swipe-direction=left]:translate-x-(--swipe-position-x).data-[swipe=cancel]:translate-x-0.data-[swipe=end]:data-[swipe-direction=right]:animate-standalone-swipe-out-right.data-[swipe=end]:data-[swipe-direction=left]:animate-standalone-swipe-out-left".split("."), {
+	variants: {
+		design: {
+			filled: "",
+			tinted: ""
+		},
+		intent: {
+			success: "",
+			alert: "",
+			error: "",
+			info: "",
+			neutral: "",
+			main: "",
+			support: "",
+			accent: "",
+			inverse: ""
+		}
+	},
+	compoundVariants: [...C, ...w],
+	defaultVariants: {
+		design: "filled",
+		intent: "neutral"
+	}
+}), E = r([
+	"inline-grid items-center",
+	"col-start-1 row-start-1",
+	"pl-md pr-lg"
+], {
+	variants: { actionOnNewline: {
+		true: [
+			"grid-rows-[52px_1fr_52px]",
+			"grid-cols-[min-content_1fr_min-content]",
+			"[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']"
+		],
+		false: ["grid-cols-[min-content_1fr_min-content_min-content]", "[grid-template-areas:'icon_message_action_close']"]
+	} },
+	defaultVariants: { actionOnNewline: !1 }
+}), D = s({}), O = () => u(D), k = ({ design: e = "filled", intent: n = "neutral", onClick: r, children: a, className: o, ref: s, ...c }) => {
+	let { toast: l, state: u } = O(), d = n ?? l.content.intent, f = e ?? l.content.design;
+	return /* @__PURE__ */ h(t, {
+		"data-spark-component": "snackbar-item-action",
+		ref: s,
+		size: "md",
+		shape: "rounded",
+		...d === "inverse" ? {
+			design: "ghost",
+			intent: "surface"
+		} : {
+			design: f,
+			intent: d === "error" ? "danger" : d
+		},
+		onClick: (e) => {
+			r?.(e), u.close(l.key);
+		},
+		style: {
+			gridArea: "action",
+			...c.style
+		},
+		className: i("ml-md justify-self-end", o),
+		...c,
+		children: a
+	});
 };
-h.displayName = "Snackbar.ItemAction";
-const I = ({
-  design: t = "filled",
-  intent: e = "neutral",
-  "aria-label": n,
-  onClick: r,
-  className: c,
-  ref: d,
-  ...m
-}) => {
-  const { toast: i, state: o } = O(), a = e ?? i.content.intent, f = t ?? i.content.design;
-  return /* @__PURE__ */ g(
-    ft,
-    {
-      "data-spark-component": "snackbar-item-close",
-      ref: d,
-      size: "md",
-      shape: "rounded",
-      ...a === "inverse" ? {
-        design: "ghost",
-        intent: "surface"
-      } : {
-        design: f,
-        intent: a === "error" ? "danger" : a
-      },
-      "aria-label": n,
-      onClick: (x) => {
-        r?.(x), o.close(i.key);
-      },
-      style: { gridArea: "close", ...m.style },
-      className: V("ml-md justify-self-end", c),
-      ...m,
-      children: /* @__PURE__ */ g(F, { size: "sm", children: /* @__PURE__ */ g(gt, {}) })
-    }
-  );
+k.displayName = "Snackbar.ItemAction";
+//#endregion
+//#region src/snackbar/SnackbarItemClose.tsx
+var A = ({ design: t = "filled", intent: r = "neutral", "aria-label": a, onClick: o, className: s, ref: c, ...l }) => {
+	let { toast: u, state: d } = O(), f = r ?? u.content.intent, p = t ?? u.content.design;
+	return /* @__PURE__ */ h(n, {
+		"data-spark-component": "snackbar-item-close",
+		ref: c,
+		size: "md",
+		shape: "rounded",
+		...f === "inverse" ? {
+			design: "ghost",
+			intent: "surface"
+		} : {
+			design: p,
+			intent: f === "error" ? "danger" : f
+		},
+		"aria-label": a,
+		onClick: (e) => {
+			o?.(e), d.close(u.key);
+		},
+		style: {
+			gridArea: "close",
+			...l.style
+		},
+		className: i("ml-md justify-self-end", s),
+		...l,
+		children: /* @__PURE__ */ h(e, {
+			size: "sm",
+			children: /* @__PURE__ */ h(_, {})
+		})
+	});
 };
-I.displayName = "Snackbar.ItemClose";
-const N = ({
-  children: t,
-  className: e,
-  ...n
-}) => /* @__PURE__ */ g(
-  F,
-  {
-    size: "md",
-    className: V("mx-md", e),
-    style: { gridArea: "icon", ...n.style },
-    ...n,
-    children: t
-  }
-);
-N.displayName = "Snackbar.ItemIcon";
-const Y = 75, St = ({
-  swipeRef: t,
-  onSwipeStart: e,
-  onSwipeMove: n,
-  onSwipeCancel: r,
-  onSwipeEnd: c,
-  threshold: d = 10
-}) => {
-  const [m, i] = st(), o = w(null), a = w(null), f = w(null), x = (s) => {
-    a.current = { x: s.clientX, y: s.clientY }, document.addEventListener("selectstart", (u) => u.preventDefault());
-  }, y = (s) => {
-    if (!a.current) return;
-    const u = Math.abs(s.clientX - a.current.x), b = Math.abs(s.clientY - a.current.y);
-    let l;
-    u > b && u > d ? o.current = s.clientX > a.current.x ? "right" : "left" : b > d && (o.current = s.clientY > a.current.y ? "down" : "up"), o.current && (f.current ? (l = "move", f.current = { x: u, y: b }, t.current.style.setProperty(
-      "--swipe-position-x",
-      `${u > b ? s.clientX - a.current.x : 0}px`
-    ), t.current.style.setProperty(
-      "--swipe-position-y",
-      `${u > b ? 0 : s.clientY - a.current.y}px`
-    ), n?.({ state: l, direction: o.current })) : (l = "start", f.current = { x: u, y: b }, e?.({ state: l, direction: o.current })), i(l));
-  }, p = () => {
-    const s = f.current;
-    if (a.current = null, f.current = null, s) {
-      const { x: u, y: b } = s;
-      let l;
-      u > b ? u > Y ? (l = "end", c?.({ state: l, direction: o.current })) : (l = "cancel", r?.({ state: l, direction: o.current })) : b > Y ? (l = "end", c?.({ state: l, direction: o.current })) : (l = "cancel", r?.({ state: l, direction: o.current })), i(l), document.removeEventListener("selectstart", (v) => v.preventDefault());
-    }
-  };
-  return z(() => {
-    if (!t.current) return;
-    const s = t.current;
-    return s.addEventListener("pointerdown", x), document.addEventListener("pointermove", y), document.addEventListener("pointerup", p), () => {
-      s.removeEventListener("pointerdown", x), document.removeEventListener("pointermove", y), document.removeEventListener("pointerup", p);
-    };
-  }, []), {
-    state: m,
-    direction: o.current
-  };
-}, A = ({
-  "aria-label": t,
-  "aria-labelledby": e,
-  "aria-describedby": n,
-  "aria-details": r,
-  design: c,
-  intent: d,
-  actionOnNewline: m,
-  className: i,
-  children: o,
-  ref: a,
-  ...f
-}) => {
-  const x = w(null), y = typeof a != "function" && a || x, { toast: p, state: s } = O(), { state: u, direction: b } = St({
-    swipeRef: y,
-    onSwipeStart: s.pauseAll,
-    onSwipeCancel: s.resumeAll,
-    onSwipeEnd: ({ direction: P }) => {
-      ["left", "right"].includes(`${P}`) && s.close(p.key);
-    }
-  }), { message: l, icon: v, isClosable: G, onAction: T, actionLabel: X } = p.content, C = d ?? p.content.intent, _ = c ?? p.content.design, M = m ?? p.content.actionOnNewline, $ = {
-    ariaLabel: t,
-    ariaLabelledby: e,
-    ariaDescribedby: n,
-    ariaDetails: r
-  }, { toastProps: q, titleProps: H, closeButtonProps: K, contentProps: U } = mt(
-    { toast: p, ...$ },
-    s,
-    y
-  ), E = S(
-    (P) => rt.toArray(o).filter(ct).find(
-      (tt) => !!tt.type.displayName?.includes(
-        P
-      )
-    ),
-    [o]
-  ), W = E("Snackbar.ItemIcon"), J = E("Snackbar.ItemAction"), Z = E("Snackbar.ItemClose");
-  return /* @__PURE__ */ g(
-    "div",
-    {
-      "data-spark-component": "snackbar-item",
-      className: yt({ design: _, intent: C, className: i }),
-      "data-animation": p.animation,
-      ...!(u === "cancel" && p.animation === "exiting") && {
-        "data-swipe": u,
-        "data-swipe-direction": b
-      },
-      ...p.animation === "exiting" && {
-        // Remove snackbar when the exiting animation completes
-        onAnimationEnd: () => s.remove(p.key)
-      },
-      ref: y,
-      ...q,
-      ...f,
-      children: /* @__PURE__ */ et("div", { className: wt({ actionOnNewline: M }), ...U, children: [
-        L(W, v ? N : null, {
-          children: v
-        }),
-        /* @__PURE__ */ g(
-          "p",
-          {
-            className: "px-md py-lg text-body-2 row-span-3",
-            style: { gridArea: "message" },
-            ...H,
-            children: l
-          }
-        ),
-        L(
-          J,
-          X && T ? h : null,
-          { intent: C, design: _, onClick: T, children: X }
-        ),
-        L(Z, G ? I : null, {
-          intent: C,
-          design: _,
-          /**
-           * React Spectrum typing of aria-label is inaccurate, and aria-label value should never be undefined.
-           * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/i18n/src/useLocalizedStringFormatter.ts#L40
-           */
-          "aria-label": K["aria-label"]
-        })
-      ] })
-    }
-  );
-};
-A.displayName = "Snackbar.Item";
-const L = (t, e, n) => t ? D(t, { ...n, ...t.props }) : e ? /* @__PURE__ */ g(e, { ...n }) : null, vt = B(
-  [
-    "fixed inset-x-lg z-toast group",
-    "outline-hidden pointer-events-none",
-    "grid grid-rows-1 grid-cols-1 gap-lg"
-  ],
-  {
-    variants: {
-      /**
-       * Set snackbar item position
-       * @default 'bottom'
-       */
-      position: {
-        top: "top-lg justify-items-center",
-        "top-right": "top-lg justify-items-end",
-        "top-left": "top-lg justify-items-start",
-        bottom: "bottom-lg justify-items-center",
-        "bottom-right": "bottom-lg justify-items-end",
-        "bottom-left": "bottom-lg justify-items-start"
-      }
-    },
-    defaultVariants: {
-      position: "bottom"
-    }
-  }
-), kt = ({
-  children: t = /* @__PURE__ */ g(A, {}),
-  state: e,
-  position: n = "bottom",
-  className: r,
-  ref: c,
-  ...d
-}) => {
-  const m = w(null), i = c && typeof c != "function" ? c : m, { regionProps: o } = ut(d, e, i);
-  return /* @__PURE__ */ g(
-    "div",
-    {
-      ...o,
-      ref: i,
-      "data-position": n,
-      className: vt({ position: n, className: r }),
-      children: e.visibleToasts.map((a) => /* @__PURE__ */ g(Q.Provider, { value: { toast: a, state: e }, children: D(t, { key: a.key }) }, a.key))
-    }
-  );
-}, ht = ({
-  providers: t,
-  subscriptions: e
-}) => {
-  const n = S(
-    (i) => (e.add(i), () => e.delete(i)),
-    [e]
-  ), r = S(() => [...t].reverse()[0], [t]), c = S(
-    (i) => {
-      t.add(i);
-      for (const o of e)
-        o();
-    },
-    [t, e]
-  ), d = S(
-    (i) => {
-      t.delete(i);
-      for (const o of e)
-        o();
-    },
-    [t, e]
-  );
-  return {
-    provider: lt(n, r, r),
-    addProvider: c,
-    deleteProvider: d
-  };
+A.displayName = "Snackbar.ItemClose";
+//#endregion
+//#region src/snackbar/SnackbarItemIcon.tsx
+var j = ({ children: t, className: n, ...r }) => /* @__PURE__ */ h(e, {
+	size: "md",
+	className: i("mx-md", n),
+	style: {
+		gridArea: "icon",
+		...r.style
+	},
+	...r,
+	children: t
+});
+j.displayName = "Snackbar.ItemIcon";
+//#endregion
+//#region src/snackbar/useSwipe.ts
+var M = 75, N = ({ swipeRef: e, onSwipeStart: t, onSwipeMove: n, onSwipeCancel: r, onSwipeEnd: i, threshold: a = 10 }) => {
+	let [o, s] = p(), c = f(null), l = f(null), u = f(null), m = (e) => {
+		l.current = {
+			x: e.clientX,
+			y: e.clientY
+		}, document.addEventListener("selectstart", (e) => e.preventDefault());
+	}, h = (r) => {
+		if (!l.current) return;
+		let i = Math.abs(r.clientX - l.current.x), o = Math.abs(r.clientY - l.current.y), d;
+		i > o && i > a ? c.current = r.clientX > l.current.x ? "right" : "left" : o > a && (c.current = r.clientY > l.current.y ? "down" : "up"), c.current && (u.current ? (d = "move", u.current = {
+			x: i,
+			y: o
+		}, e.current.style.setProperty("--swipe-position-x", `${i > o ? r.clientX - l.current.x : 0}px`), e.current.style.setProperty("--swipe-position-y", `${i > o ? 0 : r.clientY - l.current.y}px`), n?.({
+			state: d,
+			direction: c.current
+		})) : (d = "start", u.current = {
+			x: i,
+			y: o
+		}, t?.({
+			state: d,
+			direction: c.current
+		})), s(d));
+	}, g = () => {
+		let e = u.current;
+		if (l.current = null, u.current = null, e) {
+			let { x: t, y: n } = e, a;
+			t > n ? t > M ? (a = "end", i?.({
+				state: a,
+				direction: c.current
+			})) : (a = "cancel", r?.({
+				state: a,
+				direction: c.current
+			})) : n > M ? (a = "end", i?.({
+				state: a,
+				direction: c.current
+			})) : (a = "cancel", r?.({
+				state: a,
+				direction: c.current
+			})), s(a), document.removeEventListener("selectstart", (e) => e.preventDefault());
+		}
+	};
+	return d(() => {
+		if (!e.current) return;
+		let t = e.current;
+		return t.addEventListener("pointerdown", m), document.addEventListener("pointermove", h), document.addEventListener("pointerup", g), () => {
+			t.removeEventListener("pointerdown", m), document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", g);
+		};
+	}, []), {
+		state: o,
+		direction: c.current
+	};
+}, P = ({ "aria-label": e, "aria-labelledby": t, "aria-describedby": n, "aria-details": r, design: i, intent: o, actionOnNewline: s, className: u, children: d, ref: p, ...m }) => {
+	let _ = f(null), v = typeof p == "function" ? _ : p || _, { toast: y, state: b } = O(), { state: S, direction: C } = N({
+		swipeRef: v,
+		onSwipeStart: b.pauseAll,
+		onSwipeCancel: b.resumeAll,
+		onSwipeEnd: ({ direction: e }) => {
+			["left", "right"].includes(`${e}`) && b.close(y.key);
+		}
+	}), { message: w, icon: D, isClosable: M, onAction: P, actionLabel: I } = y.content, L = o ?? y.content.intent, R = i ?? y.content.design, z = s ?? y.content.actionOnNewline, { toastProps: B, titleProps: V, closeButtonProps: H, contentProps: U } = x({
+		toast: y,
+		ariaLabel: e,
+		ariaLabelledby: t,
+		ariaDescribedby: n,
+		ariaDetails: r
+	}, b, v), W = l((e) => a.toArray(d).filter(c).find((t) => !!t.type.displayName?.includes(e)), [d]), G = W("Snackbar.ItemIcon"), K = W("Snackbar.ItemAction"), q = W("Snackbar.ItemClose");
+	return /* @__PURE__ */ h("div", {
+		"data-spark-component": "snackbar-item",
+		className: T({
+			design: R,
+			intent: L,
+			className: u
+		}),
+		"data-animation": y.animation,
+		...!(S === "cancel" && y.animation === "exiting") && {
+			"data-swipe": S,
+			"data-swipe-direction": C
+		},
+		...y.animation === "exiting" && { onAnimationEnd: () => b.remove(y.key) },
+		ref: v,
+		...B,
+		...m,
+		children: /* @__PURE__ */ g("div", {
+			className: E({ actionOnNewline: z }),
+			...U,
+			children: [
+				F(G, D ? j : null, { children: D }),
+				/* @__PURE__ */ h("p", {
+					className: "px-md py-lg text-body-2 row-span-3",
+					style: { gridArea: "message" },
+					...V,
+					children: w
+				}),
+				F(K, I && P ? k : null, {
+					intent: L,
+					design: R,
+					onClick: P,
+					children: I
+				}),
+				F(q, M ? A : null, {
+					intent: L,
+					design: R,
+					"aria-label": H["aria-label"]
+				})
+			]
+		})
+	});
 };
-let k = null;
-const j = () => (k || (k = new it({
-  maxVisibleToasts: 1,
-  hasExitAnimation: !0
-})), k), Yt = () => {
-  k = null;
-}, It = {
-  providers: /* @__PURE__ */ new Set(),
-  subscriptions: /* @__PURE__ */ new Set()
-}, R = ({ ref: t, ...e }) => {
-  const n = w(null), r = nt(j()), { provider: c, addProvider: d, deleteProvider: m } = ht(It);
-  return z(() => (d(n), () => {
-    for (const i of j().visibleToasts)
-      i.animation = void 0;
-    m(n);
-  }), []), n === c && r.visibleToasts.length > 0 ? dt(/* @__PURE__ */ g(kt, { ref: t, state: r, ...e }), document.body) : null;
+P.displayName = "Snackbar.Item";
+var F = (e, t, n) => e ? o(e, {
+	...n,
+	...e.props
+}) : t ? /* @__PURE__ */ h(t, { ...n }) : null, I = r([
+	"fixed inset-x-lg z-toast group",
+	"outline-hidden pointer-events-none",
+	"grid grid-rows-1 grid-cols-1 gap-lg"
+], {
+	variants: { position: {
+		top: "top-lg justify-items-center",
+		"top-right": "top-lg justify-items-end",
+		"top-left": "top-lg justify-items-start",
+		bottom: "bottom-lg justify-items-center",
+		"bottom-right": "bottom-lg justify-items-end",
+		"bottom-left": "bottom-lg justify-items-start"
+	} },
+	defaultVariants: { position: "bottom" }
+}), L = ({ children: e = /* @__PURE__ */ h(P, {}), state: t, position: n = "bottom", className: r, ref: i, ...a }) => {
+	let s = f(null), c = i && typeof i != "function" ? i : s, { regionProps: l } = S(a, t, c);
+	return /* @__PURE__ */ h("div", {
+		...l,
+		ref: c,
+		"data-position": n,
+		className: I({
+			position: n,
+			className: r
+		}),
+		children: t.visibleToasts.map((n) => /* @__PURE__ */ h(D.Provider, {
+			value: {
+				toast: n,
+				state: t
+			},
+			children: o(e, { key: n.key })
+		}, n.key))
+	});
+}, R = ({ providers: e, subscriptions: t }) => {
+	let n = l((e) => (t.add(e), () => t.delete(e)), [t]), r = l(() => [...e].reverse()[0], [e]), i = l((n) => {
+		e.add(n);
+		for (let e of t) e();
+	}, [e, t]), a = l((n) => {
+		e.delete(n);
+		for (let e of t) e();
+	}, [e, t]);
+	return {
+		provider: m(n, r, r),
+		addProvider: i,
+		deleteProvider: a
+	};
+}, z = null, B = () => (z ||= new v({
+	maxVisibleToasts: 1,
+	hasExitAnimation: !0
+}), z), V = () => {
+	z = null;
+}, H = {
+	providers: /* @__PURE__ */ new Set(),
+	subscriptions: /* @__PURE__ */ new Set()
+}, U = ({ ref: e, ...t }) => {
+	let n = f(null), r = y(B()), { provider: i, addProvider: a, deleteProvider: o } = R(H);
+	return d(() => (a(n), () => {
+		for (let e of B().visibleToasts) e.animation = void 0;
+		o(n);
+	}), []), n === i && r.visibleToasts.length > 0 ? b(/* @__PURE__ */ h(L, {
+		ref: e,
+		state: r,
+		...t
+	}), document.body) : null;
 };
-R.displayName = "Snackbar";
-const zt = ({ onClose: t, timeout: e = 5e3, priority: n, ...r }) => {
-  j().add(r, {
-    onClose: t,
-    timeout: e && !r.onAction ? Math.max(e, 5e3) : void 0,
-    priority: n
-  });
-}, Nt = Object.assign(R, {
-  Item: A,
-  ItemAction: h,
-  ItemClose: I,
-  ItemIcon: N
+U.displayName = "Snackbar";
+var W = ({ onClose: e, timeout: t = 5e3, priority: n, ...r }) => {
+	B().add(r, {
+		onClose: e,
+		timeout: t && !r.onAction ? Math.max(t, 5e3) : void 0,
+		priority: n
+	});
+}, G = Object.assign(U, {
+	Item: P,
+	ItemAction: k,
+	ItemClose: A,
+	ItemIcon: j
 });
-Nt.displayName = "Snackbar";
-A.displayName = "Snackbar.Item";
-h.displayName = "Snackbar.ItemAction";
-I.displayName = "Snackbar.ItemClose";
-N.displayName = "Snackbar.ItemIcon";
-export {
-  Nt as Snackbar,
-  zt as addSnackbar,
-  Yt as clearSnackbarQueue
-};
-//# sourceMappingURL=index.mjs.map
+G.displayName = "Snackbar", P.displayName = "Snackbar.Item", k.displayName = "Snackbar.ItemAction", A.displayName = "Snackbar.ItemClose", j.displayName = "Snackbar.ItemIcon";
+//#endregion
+export { G as Snackbar, W as addSnackbar, V as clearSnackbarQueue };
+
+//# sourceMappingURL=index.mjs.map