@dismissible/react-client 0.0.1-canary.3

package/dist/dismissible-client.es.js

@@ -0,0 +1,771 @@
+import ce, { useState as Q, useCallback as Z, useEffect as ue } from "react";
+var K = { exports: {} }, D = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ee;
+function fe() {
+  if (ee) return D;
+  ee = 1;
+  var r = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+  function t(i, o, s) {
+    var u = null;
+    if (s !== void 0 && (u = "" + s), o.key !== void 0 && (u = "" + o.key), "key" in o) {
+      s = {};
+      for (var f in o)
+        f !== "key" && (s[f] = o[f]);
+    } else s = o;
+    return o = s.ref, {
+      $$typeof: r,
+      type: i,
+      key: u,
+      ref: o !== void 0 ? o : null,
+      props: s
+    };
+  }
+  return D.Fragment = n, D.jsx = t, D.jsxs = t, D;
+}
+var F = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var re;
+function de() {
+  return re || (re = 1, process.env.NODE_ENV !== "production" && function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === J ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case Y:
+          return "Fragment";
+        case S:
+          return "Profiler";
+        case W:
+          return "StrictMode";
+        case H:
+          return "Suspense";
+        case $:
+          return "SuspenseList";
+        case q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case L:
+            return "Portal";
+          case O:
+            return (e.displayName || "Context") + ".Provider";
+          case I:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case M:
+            var l = e.render;
+            return e = e.displayName, e || (e = l.displayName || l.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case U:
+            return l = e.displayName || null, l !== null ? l : r(e.type) || "Memo";
+          case k:
+            l = e._payload, e = e._init;
+            try {
+              return r(e(l));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function n(e) {
+      return "" + e;
+    }
+    function t(e) {
+      try {
+        n(e);
+        var l = !1;
+      } catch {
+        l = !0;
+      }
+      if (l) {
+        l = console;
+        var d = l.error, h = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return d.call(
+          l,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          h
+        ), n(e);
+      }
+    }
+    function i(e) {
+      if (e === Y) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
+        return "<...>";
+      try {
+        var l = r(e);
+        return l ? "<" + l + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = z.A;
+      return e === null ? null : e.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function u(e) {
+      if (_.call(e, "key")) {
+        var l = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (l && l.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function f(e, l) {
+      function d() {
+        m || (m = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          l
+        ));
+      }
+      d.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: d,
+        configurable: !0
+      });
+    }
+    function j() {
+      var e = r(this.type);
+      return C[e] || (C[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function p(e, l, d, h, x, T, V, B) {
+      return d = T.ref, e = {
+        $$typeof: w,
+        type: e,
+        key: l,
+        props: T,
+        _owner: x
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: j
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: V
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: B
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function E(e, l, d, h, x, T, V, B) {
+      var R = l.children;
+      if (R !== void 0)
+        if (h)
+          if (P(R)) {
+            for (h = 0; h < R.length; h++)
+              a(R[h]);
+            Object.freeze && Object.freeze(R);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else a(R);
+      if (_.call(l, "key")) {
+        R = r(e);
+        var N = Object.keys(l).filter(function(le) {
+          return le !== "key";
+        });
+        h = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", g[R + h] || (N = 0 < N.length ? "{" + N.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          h,
+          R,
+          N,
+          R
+        ), g[R + h] = !0);
+      }
+      if (R = null, d !== void 0 && (t(d), R = "" + d), u(l) && (t(l.key), R = "" + l.key), "key" in l) {
+        d = {};
+        for (var X in l)
+          X !== "key" && (d[X] = l[X]);
+      } else d = l;
+      return R && f(
+        d,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), p(
+        e,
+        R,
+        T,
+        x,
+        o(),
+        d,
+        V,
+        B
+      );
+    }
+    function a(e) {
+      typeof e == "object" && e !== null && e.$$typeof === w && e._store && (e._store.validated = 1);
+    }
+    var c = ce, w = Symbol.for("react.transitional.element"), L = Symbol.for("react.portal"), Y = Symbol.for("react.fragment"), W = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), I = Symbol.for("react.consumer"), O = Symbol.for("react.context"), M = Symbol.for("react.forward_ref"), H = Symbol.for("react.suspense"), $ = Symbol.for("react.suspense_list"), U = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), J = Symbol.for("react.client.reference"), z = c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _ = Object.prototype.hasOwnProperty, P = Array.isArray, v = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    c = {
+      "react-stack-bottom-frame": function(e) {
+        return e();
+      }
+    };
+    var m, C = {}, y = c["react-stack-bottom-frame"].bind(
+      c,
+      s
+    )(), b = v(i(s)), g = {};
+    F.Fragment = Y, F.jsx = function(e, l, d, h, x) {
+      var T = 1e4 > z.recentlyCreatedOwnerStacks++;
+      return E(
+        e,
+        l,
+        d,
+        !1,
+        h,
+        x,
+        T ? Error("react-stack-top-frame") : y,
+        T ? v(i(e)) : b
+      );
+    }, F.jsxs = function(e, l, d, h, x) {
+      var T = 1e4 > z.recentlyCreatedOwnerStacks++;
+      return E(
+        e,
+        l,
+        d,
+        !0,
+        h,
+        x,
+        T ? Error("react-stack-top-frame") : y,
+        T ? v(i(e)) : b
+      );
+    };
+  }()), F;
+}
+process.env.NODE_ENV === "production" ? K.exports = fe() : K.exports = de();
+var A = K.exports;
+const me = /\{[^{}]+\}/g, be = () => {
+  var r, n;
+  return typeof process == "object" && Number.parseInt((n = (r = process == null ? void 0 : process.versions) == null ? void 0 : r.node) == null ? void 0 : n.substring(0, 2)) >= 18 && process.versions.undici;
+};
+function pe() {
+  return Math.random().toString(36).slice(2, 11);
+}
+function ye(r) {
+  let {
+    baseUrl: n = "",
+    Request: t = globalThis.Request,
+    fetch: i = globalThis.fetch,
+    querySerializer: o,
+    bodySerializer: s,
+    headers: u,
+    requestInitExt: f = void 0,
+    ...j
+  } = { ...r };
+  f = be() ? f : void 0, n = oe(n);
+  const p = [];
+  async function E(a, c) {
+    const {
+      baseUrl: w,
+      fetch: L = i,
+      Request: Y = t,
+      headers: W,
+      params: S = {},
+      parseAs: I = "json",
+      querySerializer: O,
+      bodySerializer: M = s ?? he,
+      body: H,
+      ...$
+    } = c || {};
+    let U = n;
+    w && (U = oe(w) ?? n);
+    let k = typeof o == "function" ? o : te(o);
+    O && (k = typeof O == "function" ? O : te({
+      ...typeof o == "object" ? o : {},
+      ...O
+    }));
+    const q = H === void 0 ? void 0 : M(
+      H,
+      // Note: we declare mergeHeaders() both here and below because it’s a bit of a chicken-or-egg situation:
+      // bodySerializer() needs all headers so we aren’t dropping ones set by the user, however,
+      // the result of this ALSO sets the lowest-priority content-type header. So we re-merge below,
+      // setting the content-type at the very beginning to be overwritten.
+      // Lastly, based on the way headers work, it’s not a simple “present-or-not” check becauase null intentionally un-sets headers.
+      ne(u, W, S.header)
+    ), J = ne(
+      // with no body, we should not to set Content-Type
+      q === void 0 || // if serialized body is FormData; browser will correctly set Content-Type & boundary expression
+      q instanceof FormData ? {} : {
+        "Content-Type": "application/json"
+      },
+      u,
+      W,
+      S.header
+    ), z = {
+      redirect: "follow",
+      ...j,
+      ...$,
+      body: q,
+      headers: J
+    };
+    let _, P, v = new t(
+      Re(a, { baseUrl: U, params: S, querySerializer: k }),
+      z
+    ), m;
+    for (const y in $)
+      y in v || (v[y] = $[y]);
+    if (p.length) {
+      _ = pe(), P = Object.freeze({
+        baseUrl: U,
+        fetch: L,
+        parseAs: I,
+        querySerializer: k,
+        bodySerializer: M
+      });
+      for (const y of p)
+        if (y && typeof y == "object" && typeof y.onRequest == "function") {
+          const b = await y.onRequest({
+            request: v,
+            schemaPath: a,
+            params: S,
+            options: P,
+            id: _
+          });
+          if (b)
+            if (b instanceof t)
+              v = b;
+            else if (b instanceof Response) {
+              m = b;
+              break;
+            } else
+              throw new Error("onRequest: must return new Request() or Response() when modifying the request");
+        }
+    }
+    if (!m) {
+      try {
+        m = await L(v, f);
+      } catch (y) {
+        let b = y;
+        if (p.length)
+          for (let g = p.length - 1; g >= 0; g--) {
+            const e = p[g];
+            if (e && typeof e == "object" && typeof e.onError == "function") {
+              const l = await e.onError({
+                request: v,
+                error: b,
+                schemaPath: a,
+                params: S,
+                options: P,
+                id: _
+              });
+              if (l) {
+                if (l instanceof Response) {
+                  b = void 0, m = l;
+                  break;
+                }
+                if (l instanceof Error) {
+                  b = l;
+                  continue;
+                }
+                throw new Error("onError: must return new Response() or instance of Error");
+              }
+            }
+          }
+        if (b)
+          throw b;
+      }
+      if (p.length)
+        for (let y = p.length - 1; y >= 0; y--) {
+          const b = p[y];
+          if (b && typeof b == "object" && typeof b.onResponse == "function") {
+            const g = await b.onResponse({
+              request: v,
+              response: m,
+              schemaPath: a,
+              params: S,
+              options: P,
+              id: _
+            });
+            if (g) {
+              if (!(g instanceof Response))
+                throw new Error("onResponse: must return new Response() when modifying the response");
+              m = g;
+            }
+          }
+        }
+    }
+    if (m.status === 204 || v.method === "HEAD" || m.headers.get("Content-Length") === "0")
+      return m.ok ? { data: void 0, response: m } : { error: void 0, response: m };
+    if (m.ok)
+      return I === "stream" ? { data: m.body, response: m } : { data: await m[I](), response: m };
+    let C = await m.text();
+    try {
+      C = JSON.parse(C);
+    } catch {
+    }
+    return { error: C, response: m };
+  }
+  return {
+    request(a, c, w) {
+      return E(c, { ...w, method: a.toUpperCase() });
+    },
+    /** Call a GET endpoint */
+    GET(a, c) {
+      return E(a, { ...c, method: "GET" });
+    },
+    /** Call a PUT endpoint */
+    PUT(a, c) {
+      return E(a, { ...c, method: "PUT" });
+    },
+    /** Call a POST endpoint */
+    POST(a, c) {
+      return E(a, { ...c, method: "POST" });
+    },
+    /** Call a DELETE endpoint */
+    DELETE(a, c) {
+      return E(a, { ...c, method: "DELETE" });
+    },
+    /** Call a OPTIONS endpoint */
+    OPTIONS(a, c) {
+      return E(a, { ...c, method: "OPTIONS" });
+    },
+    /** Call a HEAD endpoint */
+    HEAD(a, c) {
+      return E(a, { ...c, method: "HEAD" });
+    },
+    /** Call a PATCH endpoint */
+    PATCH(a, c) {
+      return E(a, { ...c, method: "PATCH" });
+    },
+    /** Call a TRACE endpoint */
+    TRACE(a, c) {
+      return E(a, { ...c, method: "TRACE" });
+    },
+    /** Register middleware */
+    use(...a) {
+      for (const c of a)
+        if (c) {
+          if (typeof c != "object" || !("onRequest" in c || "onResponse" in c || "onError" in c))
+            throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");
+          p.push(c);
+        }
+    },
+    /** Unregister middleware */
+    eject(...a) {
+      for (const c of a) {
+        const w = p.indexOf(c);
+        w !== -1 && p.splice(w, 1);
+      }
+    }
+  };
+}
+function G(r, n, t) {
+  if (n == null)
+    return "";
+  if (typeof n == "object")
+    throw new Error(
+      "Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these."
+    );
+  return `${r}=${(t == null ? void 0 : t.allowReserved) === !0 ? n : encodeURIComponent(n)}`;
+}
+function ae(r, n, t) {
+  if (!n || typeof n != "object")
+    return "";
+  const i = [], o = {
+    simple: ",",
+    label: ".",
+    matrix: ";"
+  }[t.style] || "&";
+  if (t.style !== "deepObject" && t.explode === !1) {
+    for (const f in n)
+      i.push(f, t.allowReserved === !0 ? n[f] : encodeURIComponent(n[f]));
+    const u = i.join(",");
+    switch (t.style) {
+      case "form":
+        return `${r}=${u}`;
+      case "label":
+        return `.${u}`;
+      case "matrix":
+        return `;${r}=${u}`;
+      default:
+        return u;
+    }
+  }
+  for (const u in n) {
+    const f = t.style === "deepObject" ? `${r}[${u}]` : u;
+    i.push(G(f, n[u], t));
+  }
+  const s = i.join(o);
+  return t.style === "label" || t.style === "matrix" ? `${o}${s}` : s;
+}
+function ie(r, n, t) {
+  if (!Array.isArray(n))
+    return "";
+  if (t.explode === !1) {
+    const s = { form: ",", spaceDelimited: "%20", pipeDelimited: "|" }[t.style] || ",", u = (t.allowReserved === !0 ? n : n.map((f) => encodeURIComponent(f))).join(s);
+    switch (t.style) {
+      case "simple":
+        return u;
+      case "label":
+        return `.${u}`;
+      case "matrix":
+        return `;${r}=${u}`;
+      default:
+        return `${r}=${u}`;
+    }
+  }
+  const i = { simple: ",", label: ".", matrix: ";" }[t.style] || "&", o = [];
+  for (const s of n)
+    t.style === "simple" || t.style === "label" ? o.push(t.allowReserved === !0 ? s : encodeURIComponent(s)) : o.push(G(r, s, t));
+  return t.style === "label" || t.style === "matrix" ? `${i}${o.join(i)}` : o.join(i);
+}
+function te(r) {
+  return function(t) {
+    const i = [];
+    if (t && typeof t == "object")
+      for (const o in t) {
+        const s = t[o];
+        if (s != null) {
+          if (Array.isArray(s)) {
+            if (s.length === 0)
+              continue;
+            i.push(
+              ie(o, s, {
+                style: "form",
+                explode: !0,
+                ...r == null ? void 0 : r.array,
+                allowReserved: (r == null ? void 0 : r.allowReserved) || !1
+              })
+            );
+            continue;
+          }
+          if (typeof s == "object") {
+            i.push(
+              ae(o, s, {
+                style: "deepObject",
+                explode: !0,
+                ...r == null ? void 0 : r.object,
+                allowReserved: (r == null ? void 0 : r.allowReserved) || !1
+              })
+            );
+            continue;
+          }
+          i.push(G(o, s, r));
+        }
+      }
+    return i.join("&");
+  };
+}
+function Ee(r, n) {
+  let t = r;
+  for (const i of r.match(me) ?? []) {
+    let o = i.substring(1, i.length - 1), s = !1, u = "simple";
+    if (o.endsWith("*") && (s = !0, o = o.substring(0, o.length - 1)), o.startsWith(".") ? (u = "label", o = o.substring(1)) : o.startsWith(";") && (u = "matrix", o = o.substring(1)), !n || n[o] === void 0 || n[o] === null)
+      continue;
+    const f = n[o];
+    if (Array.isArray(f)) {
+      t = t.replace(i, ie(o, f, { style: u, explode: s }));
+      continue;
+    }
+    if (typeof f == "object") {
+      t = t.replace(i, ae(o, f, { style: u, explode: s }));
+      continue;
+    }
+    if (u === "matrix") {
+      t = t.replace(i, `;${G(o, f)}`);
+      continue;
+    }
+    t = t.replace(i, u === "label" ? `.${encodeURIComponent(f)}` : encodeURIComponent(f));
+  }
+  return t;
+}
+function he(r, n) {
+  return r instanceof FormData ? r : n && (n.get instanceof Function ? n.get("Content-Type") ?? n.get("content-type") : n["Content-Type"] ?? n["content-type"]) === "application/x-www-form-urlencoded" ? new URLSearchParams(r).toString() : JSON.stringify(r);
+}
+function Re(r, n) {
+  var o;
+  let t = `${n.baseUrl}${r}`;
+  (o = n.params) != null && o.path && (t = Ee(t, n.params.path));
+  let i = n.querySerializer(n.params.query ?? {});
+  return i.startsWith("?") && (i = i.substring(1)), i && (t += `?${i}`), t;
+}
+function ne(...r) {
+  const n = new Headers();
+  for (const t of r) {
+    if (!t || typeof t != "object")
+      continue;
+    const i = t instanceof Headers ? t.entries() : Object.entries(t);
+    for (const [o, s] of i)
+      if (s === null)
+        n.delete(o);
+      else if (Array.isArray(s))
+        for (const u of s)
+          n.append(o, u);
+      else s !== void 0 && n.set(o, s);
+  }
+  return n;
+}
+function oe(r) {
+  return r.endsWith("/") ? r.substring(0, r.length - 1) : r;
+}
+const we = {
+  baseUrl: "http://localhost:3000"
+}, ve = {
+  development: {
+    baseUrl: "http://localhost:3000"
+  },
+  test: {
+    baseUrl: "https://xnkjmdy4v8.execute-api.ap-southeast-2.amazonaws.com/staging"
+  },
+  production: {
+    // Use Vite's import.meta.env instead of process.env
+    baseUrl: "https://xnkjmdy4v8.execute-api.ap-southeast-2.amazonaws.com/staging"
+  }
+}, ge = () => ve["production"] || we, Te = ge(), se = ye({
+  baseUrl: Te.baseUrl
+}), je = (r, n) => {
+  const [t, i] = Q(!n), [o, s] = Q(null), [u, f] = Q(n), j = Z(async () => {
+    i(!0), s(null);
+    try {
+      const { data: a, error: c } = await se.GET(
+        "/api/v1/dismissible/{itemId}",
+        {
+          params: {
+            path: {
+              itemId: r
+            }
+          }
+        }
+      );
+      if (c)
+        throw new Error(c.error.message || "Failed to fetch dismissible item");
+      f(a.data);
+    } catch (a) {
+      s(
+        a instanceof Error ? a : new Error("Unknown error occurred")
+      );
+    } finally {
+      i(!1);
+    }
+  }, [r]);
+  ue(() => {
+    n || j();
+  }, [r, n, j]);
+  const p = Z(async () => {
+    i(!0), s(null);
+    try {
+      const { data: a, error: c } = await se.DELETE(
+        "/api/v1/dismissible/{itemId}",
+        {
+          params: {
+            path: {
+              itemId: r
+            }
+          }
+        }
+      );
+      if (c)
+        throw new Error(c.error.message || "Failed to dismiss item");
+      f(a.data);
+    } catch (a) {
+      throw s(a instanceof Error ? a : new Error("Failed to dismiss item")), a;
+    } finally {
+      i(!1);
+    }
+  }, [r]), E = Z(async () => {
+    s(null), i(!0);
+    try {
+      throw console.warn(
+        "Restore functionality requires a backend API endpoint that does not exist yet."
+      ), new Error("Restore functionality not implemented in API");
+    } catch (a) {
+      throw s(a instanceof Error ? a : new Error("Failed to restore item")), a;
+    } finally {
+      i(!1);
+    }
+  }, []);
+  return {
+    dismissedOn: (u == null ? void 0 : u.dismissedAt) ?? null,
+    dismiss: p,
+    restore: E,
+    isLoading: t,
+    error: o
+  };
+}, Se = () => /* @__PURE__ */ A.jsx("div", { className: "dismissible-loading", "aria-live": "polite", children: "Loading..." }), xe = ({ error: r }) => /* @__PURE__ */ A.jsxs("div", { className: "dismissible-error", role: "alert", children: [
+  "Error loading dismissible item: ",
+  r.message
+] }), Ae = ({ id: r, onDismiss: n, ariaLabel: t }) => /* @__PURE__ */ A.jsx(
+  "button",
+  {
+    id: r,
+    className: "dismissible-button",
+    onClick: n,
+    "aria-label": t,
+    type: "button",
+    children: "×"
+  }
+), Oe = ({
+  id: r,
+  children: n,
+  onDismiss: t,
+  onRestore: i,
+  LoadingComponent: o = Se,
+  ErrorComponent: s = xe,
+  DismissButtonComponent: u = Ae
+}) => {
+  const { dismissedOn: f, isLoading: j, error: p, dismiss: E, restore: a } = je(r), c = async () => {
+    try {
+      await E(), t == null || t();
+    } catch (w) {
+      console.error("Failed to dismiss item:", w);
+    }
+  };
+  return j && o ? /* @__PURE__ */ A.jsx(o, { id: r }) : p && s ? /* @__PURE__ */ A.jsx(s, { id: r, error: p }) : f ? null : /* @__PURE__ */ A.jsxs("div", { className: "dismissible-container", children: [
+    /* @__PURE__ */ A.jsx("div", { className: "dismissible-content", children: n }),
+    u ? /* @__PURE__ */ A.jsx(
+      u,
+      {
+        id: r,
+        onDismiss: c,
+        ariaLabel: `Dismiss ${r}`
+      }
+    ) : null
+  ] });
+}, ke = "0.1.0";
+export {
+  Oe as Dismissible,
+  ke as VERSION,
+  je as useDismissibleItem
+};

package/dist/dismissible-client.umd.js

@@ -0,0 +1,22 @@
+(function(S,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],w):(S=typeof globalThis<"u"?globalThis:S||self,w(S.DismissibleClient={},S.React))})(this,function(S,w){"use strict";var B={exports:{}},D={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ee;function ce(){if(ee)return D;ee=1;var r=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function t(i,o,s){var u=null;if(s!==void 0&&(u=""+s),o.key!==void 0&&(u=""+o.key),"key"in o){s={};for(var f in o)f!=="key"&&(s[f]=o[f])}else s=o;return o=s.ref,{$$typeof:r,type:i,key:u,ref:o!==void 0?o:null,props:s}}return D.Fragment=n,D.jsx=t,D.jsxs=t,D}var z={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var re;function ue(){return re||(re=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===X?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case H:return"Fragment";case x:return"Profiler";case G:return"StrictMode";case J:return"Suspense";case L:return"SuspenseList";case q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case C:return(e.displayName||"Context")+".Provider";case F:return(e._context.displayName||"Context")+".Consumer";case V:var l=e.render;return e=e.displayName,e||(e=l.displayName||l.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case $:return l=e.displayName||null,l!==null?l:r(e.type)||"Memo";case P:l=e._payload,e=e._init;try{return r(e(l))}catch{}}return null}function n(e){return""+e}function t(e){try{n(e);var l=!1}catch{l=!0}if(l){l=console;var d=l.error,E=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return d.call(l,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",E),n(e)}}function i(e){if(e===H)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var l=r(e);return l?"<"+l+">":"<...>"}catch{return"<...>"}}function o(){var e=Y.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function u(e){if(k.call(e,"key")){var l=Object.getOwnPropertyDescriptor(e,"key").get;if(l&&l.isReactWarning)return!1}return e.key!==void 0}function f(e,l){function d(){m||(m=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",l))}d.isReactWarning=!0,Object.defineProperty(e,"key",{get:d,configurable:!0})}function _(){var e=r(this.type);return I[e]||(I[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function p(e,l,d,E,O,j,Q,Z){return d=j.ref,e={$$typeof:v,type:e,key:l,props:j,_owner:O},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:_}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,l,d,E,O,j,Q,Z){var R=l.children;if(R!==void 0)if(E)if(N(R)){for(E=0;E<R.length;E++)a(R[E]);Object.freeze&&Object.freeze(R)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else a(R);if(k.call(l,"key")){R=r(e);var U=Object.keys(l).filter(function(Ae){return Ae!=="key"});E=0<U.length?"{key: someKey, "+U.join(": ..., ")+": ...}":"{key: someKey}",T[R+E]||(U=0<U.length?"{"+U.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,E,R,U,R),T[R+E]=!0)}if(R=null,d!==void 0&&(t(d),R=""+d),u(l)&&(t(l.key),R=""+l.key),"key"in l){d={};for(var K in l)K!=="key"&&(d[K]=l[K])}else d=l;return R&&f(d,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,R,j,O,o(),d,Q,Z)}function a(e){typeof e=="object"&&e!==null&&e.$$typeof===v&&e._store&&(e._store.validated=1)}var c=w,v=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),H=Symbol.for("react.fragment"),G=Symbol.for("react.strict_mode"),x=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),C=Symbol.for("react.context"),V=Symbol.for("react.forward_ref"),J=Symbol.for("react.suspense"),L=Symbol.for("react.suspense_list"),$=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),X=Symbol.for("react.client.reference"),Y=c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,k=Object.prototype.hasOwnProperty,N=Array.isArray,g=console.createTask?console.createTask:function(){return null};c={"react-stack-bottom-frame":function(e){return e()}};var m,I={},y=c["react-stack-bottom-frame"].bind(c,s)(),b=g(i(s)),T={};z.Fragment=H,z.jsx=function(e,l,d,E,O){var j=1e4>Y.recentlyCreatedOwnerStacks++;return h(e,l,d,!1,E,O,j?Error("react-stack-top-frame"):y,j?g(i(e)):b)},z.jsxs=function(e,l,d,E,O){var j=1e4>Y.recentlyCreatedOwnerStacks++;return h(e,l,d,!0,E,O,j?Error("react-stack-top-frame"):y,j?g(i(e)):b)}}()),z}process.env.NODE_ENV==="production"?B.exports=ce():B.exports=ue();var A=B.exports;const fe=/\{[^{}]+\}/g,de=()=>{var r,n;return typeof process=="object"&&Number.parseInt((n=(r=process==null?void 0:process.versions)==null?void 0:r.node)==null?void 0:n.substring(0,2))>=18&&process.versions.undici};function me(){return Math.random().toString(36).slice(2,11)}function be(r){let{baseUrl:n="",Request:t=globalThis.Request,fetch:i=globalThis.fetch,querySerializer:o,bodySerializer:s,headers:u,requestInitExt:f=void 0,..._}={...r};f=de()?f:void 0,n=ae(n);const p=[];async function h(a,c){const{baseUrl:v,fetch:W=i,Request:H=t,headers:G,params:x={},parseAs:F="json",querySerializer:C,bodySerializer:V=s??ye,body:J,...L}=c||{};let $=n;v&&($=ae(v)??n);let P=typeof o=="function"?o:oe(o);C&&(P=typeof C=="function"?C:oe({...typeof o=="object"?o:{},...C}));const q=J===void 0?void 0:V(J,se(u,G,x.header)),X=se(q===void 0||q instanceof FormData?{}:{"Content-Type":"application/json"},u,G,x.header),Y={redirect:"follow",..._,...L,body:q,headers:X};let k,N,g=new t(he(a,{baseUrl:$,params:x,querySerializer:P}),Y),m;for(const y in L)y in g||(g[y]=L[y]);if(p.length){k=me(),N=Object.freeze({baseUrl:$,fetch:W,parseAs:F,querySerializer:P,bodySerializer:V});for(const y of p)if(y&&typeof y=="object"&&typeof y.onRequest=="function"){const b=await y.onRequest({request:g,schemaPath:a,params:x,options:N,id:k});if(b)if(b instanceof t)g=b;else if(b instanceof Response){m=b;break}else throw new Error("onRequest: must return new Request() or Response() when modifying the request")}}if(!m){try{m=await W(g,f)}catch(y){let b=y;if(p.length)for(let T=p.length-1;T>=0;T--){const e=p[T];if(e&&typeof e=="object"&&typeof e.onError=="function"){const l=await e.onError({request:g,error:b,schemaPath:a,params:x,options:N,id:k});if(l){if(l instanceof Response){b=void 0,m=l;break}if(l instanceof Error){b=l;continue}throw new Error("onError: must return new Response() or instance of Error")}}}if(b)throw b}if(p.length)for(let y=p.length-1;y>=0;y--){const b=p[y];if(b&&typeof b=="object"&&typeof b.onResponse=="function"){const T=await b.onResponse({request:g,response:m,schemaPath:a,params:x,options:N,id:k});if(T){if(!(T instanceof Response))throw new Error("onResponse: must return new Response() when modifying the response");m=T}}}}if(m.status===204||g.method==="HEAD"||m.headers.get("Content-Length")==="0")return m.ok?{data:void 0,response:m}:{error:void 0,response:m};if(m.ok)return F==="stream"?{data:m.body,response:m}:{data:await m[F](),response:m};let I=await m.text();try{I=JSON.parse(I)}catch{}return{error:I,response:m}}return{request(a,c,v){return h(c,{...v,method:a.toUpperCase()})},GET(a,c){return h(a,{...c,method:"GET"})},PUT(a,c){return h(a,{...c,method:"PUT"})},POST(a,c){return h(a,{...c,method:"POST"})},DELETE(a,c){return h(a,{...c,method:"DELETE"})},OPTIONS(a,c){return h(a,{...c,method:"OPTIONS"})},HEAD(a,c){return h(a,{...c,method:"HEAD"})},PATCH(a,c){return h(a,{...c,method:"PATCH"})},TRACE(a,c){return h(a,{...c,method:"TRACE"})},use(...a){for(const c of a)if(c){if(typeof c!="object"||!("onRequest"in c||"onResponse"in c||"onError"in c))throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");p.push(c)}},eject(...a){for(const c of a){const v=p.indexOf(c);v!==-1&&p.splice(v,1)}}}}function M(r,n,t){if(n==null)return"";if(typeof n=="object")throw new Error("Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.");return`${r}=${(t==null?void 0:t.allowReserved)===!0?n:encodeURIComponent(n)}`}function te(r,n,t){if(!n||typeof n!="object")return"";const i=[],o={simple:",",label:".",matrix:";"}[t.style]||"&";if(t.style!=="deepObject"&&t.explode===!1){for(const f in n)i.push(f,t.allowReserved===!0?n[f]:encodeURIComponent(n[f]));const u=i.join(",");switch(t.style){case"form":return`${r}=${u}`;case"label":return`.${u}`;case"matrix":return`;${r}=${u}`;default:return u}}for(const u in n){const f=t.style==="deepObject"?`${r}[${u}]`:u;i.push(M(f,n[u],t))}const s=i.join(o);return t.style==="label"||t.style==="matrix"?`${o}${s}`:s}function ne(r,n,t){if(!Array.isArray(n))return"";if(t.explode===!1){const s={form:",",spaceDelimited:"%20",pipeDelimited:"|"}[t.style]||",",u=(t.allowReserved===!0?n:n.map(f=>encodeURIComponent(f))).join(s);switch(t.style){case"simple":return u;case"label":return`.${u}`;case"matrix":return`;${r}=${u}`;default:return`${r}=${u}`}}const i={simple:",",label:".",matrix:";"}[t.style]||"&",o=[];for(const s of n)t.style==="simple"||t.style==="label"?o.push(t.allowReserved===!0?s:encodeURIComponent(s)):o.push(M(r,s,t));return t.style==="label"||t.style==="matrix"?`${i}${o.join(i)}`:o.join(i)}function oe(r){return function(t){const i=[];if(t&&typeof t=="object")for(const o in t){const s=t[o];if(s!=null){if(Array.isArray(s)){if(s.length===0)continue;i.push(ne(o,s,{style:"form",explode:!0,...r==null?void 0:r.array,allowReserved:(r==null?void 0:r.allowReserved)||!1}));continue}if(typeof s=="object"){i.push(te(o,s,{style:"deepObject",explode:!0,...r==null?void 0:r.object,allowReserved:(r==null?void 0:r.allowReserved)||!1}));continue}i.push(M(o,s,r))}}return i.join("&")}}function pe(r,n){let t=r;for(const i of r.match(fe)??[]){let o=i.substring(1,i.length-1),s=!1,u="simple";if(o.endsWith("*")&&(s=!0,o=o.substring(0,o.length-1)),o.startsWith(".")?(u="label",o=o.substring(1)):o.startsWith(";")&&(u="matrix",o=o.substring(1)),!n||n[o]===void 0||n[o]===null)continue;const f=n[o];if(Array.isArray(f)){t=t.replace(i,ne(o,f,{style:u,explode:s}));continue}if(typeof f=="object"){t=t.replace(i,te(o,f,{style:u,explode:s}));continue}if(u==="matrix"){t=t.replace(i,`;${M(o,f)}`);continue}t=t.replace(i,u==="label"?`.${encodeURIComponent(f)}`:encodeURIComponent(f))}return t}function ye(r,n){return r instanceof FormData?r:n&&(n.get instanceof Function?n.get("Content-Type")??n.get("content-type"):n["Content-Type"]??n["content-type"])==="application/x-www-form-urlencoded"?new URLSearchParams(r).toString():JSON.stringify(r)}function he(r,n){var o;let t=`${n.baseUrl}${r}`;(o=n.params)!=null&&o.path&&(t=pe(t,n.params.path));let i=n.querySerializer(n.params.query??{});return i.startsWith("?")&&(i=i.substring(1)),i&&(t+=`?${i}`),t}function se(...r){const n=new Headers;for(const t of r){if(!t||typeof t!="object")continue;const i=t instanceof Headers?t.entries():Object.entries(t);for(const[o,s]of i)if(s===null)n.delete(o);else if(Array.isArray(s))for(const u of s)n.append(o,u);else s!==void 0&&n.set(o,s)}return n}function ae(r){return r.endsWith("/")?r.substring(0,r.length-1):r}const Ee={baseUrl:"http://localhost:3000"},Re={development:{baseUrl:"http://localhost:3000"},test:{baseUrl:"https://xnkjmdy4v8.execute-api.ap-southeast-2.amazonaws.com/staging"},production:{baseUrl:"https://xnkjmdy4v8.execute-api.ap-southeast-2.amazonaws.com/staging"}},we=Re["production"]||Ee,ie=be({baseUrl:we.baseUrl}),le=(r,n)=>{const[t,i]=w.useState(!n),[o,s]=w.useState(null),[u,f]=w.useState(n),_=w.useCallback(async()=>{i(!0),s(null);try{const{data:a,error:c}=await ie.GET("/api/v1/dismissible/{itemId}",{params:{path:{itemId:r}}});if(c)throw new Error(c.error.message||"Failed to fetch dismissible item");f(a.data)}catch(a){s(a instanceof Error?a:new Error("Unknown error occurred"))}finally{i(!1)}},[r]);w.useEffect(()=>{n||_()},[r,n,_]);const p=w.useCallback(async()=>{i(!0),s(null);try{const{data:a,error:c}=await ie.DELETE("/api/v1/dismissible/{itemId}",{params:{path:{itemId:r}}});if(c)throw new Error(c.error.message||"Failed to dismiss item");f(a.data)}catch(a){throw s(a instanceof Error?a:new Error("Failed to dismiss item")),a}finally{i(!1)}},[r]),h=w.useCallback(async()=>{s(null),i(!0);try{throw console.warn("Restore functionality requires a backend API endpoint that does not exist yet."),new Error("Restore functionality not implemented in API")}catch(a){throw s(a instanceof Error?a:new Error("Failed to restore item")),a}finally{i(!1)}},[]);return{dismissedOn:(u==null?void 0:u.dismissedAt)??null,dismiss:p,restore:h,isLoading:t,error:o}},ve=()=>A.jsx("div",{className:"dismissible-loading","aria-live":"polite",children:"Loading..."}),ge=({error:r})=>A.jsxs("div",{className:"dismissible-error",role:"alert",children:["Error loading dismissible item: ",r.message]}),Te=({id:r,onDismiss:n,ariaLabel:t})=>A.jsx("button",{id:r,className:"dismissible-button",onClick:n,"aria-label":t,type:"button",children:"×"}),je=({id:r,children:n,onDismiss:t,onRestore:i,LoadingComponent:o=ve,ErrorComponent:s=ge,DismissButtonComponent:u=Te})=>{const{dismissedOn:f,isLoading:_,error:p,dismiss:h,restore:a}=le(r),c=async()=>{try{await h(),t==null||t()}catch(v){console.error("Failed to dismiss item:",v)}};return _&&o?A.jsx(o,{id:r}):p&&s?A.jsx(s,{id:r,error:p}):f?null:A.jsxs("div",{className:"dismissible-container",children:[A.jsx("div",{className:"dismissible-content",children:n}),u?A.jsx(u,{id:r,onDismiss:c,ariaLabel:`Dismiss ${r}`}):null]})},Se="0.1.0";S.Dismissible=je,S.VERSION=Se,S.useDismissibleItem=le,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});

package/dist/mockServiceWorker.js

@@ -0,0 +1,344 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+
+const PACKAGE_VERSION = '2.10.3'
+const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+addEventListener('fetch', function (event) {
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
+
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ */
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+
+  return response
+}
+
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}

package/dist/style.css

@@ -0,0 +1 @@
+.dismissible-container{position:relative;display:inline-block;width:100%}.dismissible-content{width:100%}.dismissible-button{position:absolute;top:8px;right:8px;background:#0000001a;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;line-height:1;color:#666;transition:all .2s ease}.dismissible-button:hover{background:#0003;color:#333}.dismissible-button:focus{outline:2px solid #007bff;outline-offset:2px}.dismissible-button:active{transform:scale(.95)}.dismissible-loading{padding:16px;text-align:center;color:#666;font-style:italic}.dismissible-error{padding:16px;background:#fee;border:1px solid #fcc;border-radius:4px;color:#c33;font-size:14px}@media (max-width: 768px){.dismissible-button{width:32px;height:32px;font-size:18px}}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@dismissible/react-client",
+  "version": "0.0.1-canary.3",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/dismissible-client.umd.js",
+  "module": "./dist/dismissible-client.es.js",
+  "types": "./dist/root.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/dismissible-client.es.js",
+      "require": "./dist/dismissible-client.umd.js",
+      "types": "./dist/root.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --project tsconfig.build.json && vite build",
+    "lint": "eslint \"{.storybook,src,test}/**/*.{ts,tsx}\" --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "script": "ts-node -r tsconfig-paths/register --project tsconfig.json",
+    "generate:clean": "rm -rf ./src/generated/contract/*",
+    "generate:api": "npm run generate:clean && npx openapi-typescript http://localhost:3000/docs-yaml -o ./src/generated/contract/index.d.ts"
+  },
+  "dependencies": {
+    "openapi-fetch": "^0.14.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^9.0.15",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/react-vite": "^9.0.15",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.0.10",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.36.0",
+    "@typescript-eslint/parser": "^8.36.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^9.0.15",
+    "happy-dom": "^18.0.1",
+    "msw": "^2.10.3",
+    "msw-storybook-addon": "^2.0.5",
+    "openapi-typescript": "^7.8.0",
+    "prettier": "^3.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^9.0.15",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "vite": "^5.0.10",
+    "vitest": "^3.2.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}