@telia-ace/widget-components-area 1.1.1-rc.2 → 1.1.1-rc.4

package/area-f1877ce1.mjs

@@ -1,718 +0,0 @@
-import { jsx as u, jsxs as fe } from "react/jsx-runtime";
-import { css as O, ThemeProvider as he } from "@emotion/react";
-import y from "@emotion/styled";
-import { E as ge, C as re, u as _, a as Y, b as z, c as ye, d as I, e as K, f as oe, W as R, g as se, G, h as H, i as J, j as V, p as ie, k as ae, T as be, l as ce, A as W, D as $e, m as xe, n as Ce, L as ve, B as we, o as Se, S as Te } from "./index-23726922.mjs";
-import le, { useContext as Q, useState as T, useCallback as ue, useEffect as C, forwardRef as Z, useMemo as De, Suspense as Pe } from "react";
-import "react-dom";
-import { Transition as de, TransitionGroup as Ee } from "react-transition-group";
-import { Switch as Re, Route as F } from "react-router";
-const Ne = (e) => e === "entering" || e === "entered", Ae = (e) => e === "exiting" || e === "exited", A = {
-  fade: {
-    in: "opacity: 1;",
-    out: "opacity: 0;"
-  },
-  "slide-left": {
-    in: "transform: translateX(0);",
-    out: "transform: translateX(-100%);"
-  },
-  "slide-right": {
-    in: "transform: translateX(0);",
-    out: "transform: translateX(100%);"
-  },
-  "slide-up": {
-    in: "transform: translateY(0);",
-    out: "transform: translateY(100%);"
-  },
-  "slide-down": {
-    in: "transform: translateY(0);",
-    out: "transform: translateY(-100%);"
-  },
-  scale: {
-    in: "transform: scale(1);",
-    out: "transform: scale(0);"
-  }
-}, Oe = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"], k = {
-  compose: (e = "exited", t) => {
-    const { enter: r, exit: o } = t, n = r.transitionKeys.split(" "), i = Oe.indexOf(n[0]) > -1 ? "transform" : "opacity";
-    if (Ne(e))
-      return n && n.length > 0 ? O`
-                    ${n && n.length > 0 && n.map((a) => A[a] ? A[a].in : "")}
-                    transition: ${i} ${r.duration}ms ${r.easing};
-                ` : "";
-    const s = n && n.length > 0 && O`
-                ${n.map((a) => A[a] ? A[a].out : "")}
-            `;
-    if (Ae(e)) {
-      const a = o.transitionKeys.split(" ");
-      return a && a.length > 0 && e === "exiting" ? O`
-                    ${s};
-                    ${a.map((c) => A[c] ? A[c].out : "")}
-                    transition: ${i} ${o.duration}ms ${o.easing};
-                ` : s;
-    }
-  },
-  composeViewTransition: (e, t, r) => {
-    if (t === "slide")
-      return k.compose(e, {
-        enter: {
-          transitionKeys: r === "forth" ? "slide-right" : "slide-left",
-          duration: 500
-        },
-        exit: {
-          transitionKeys: r === "forth" ? "slide-left" : "slide-right",
-          duration: 500
-        }
-      });
-    if (t === "fade")
-      return k.compose(e, {
-        enter: {
-          transitionKeys: "fade",
-          duration: 500
-        },
-        exit: {
-          transitionKeys: "fade",
-          duration: 500
-        }
-      });
-  },
-  get: (e) => A[e]
-}, ne = (e = {}) => (Object.keys(e).forEach((t) => {
-  (e[t] === null || typeof e[t] > "u") && delete e[t];
-}), e), Ve = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ u(ge, { ...t }) : null, ee = () => Q(re), U = (e, t) => ({
-  id: e.id,
-  type: e.type,
-  name: e.name,
-  branch: t || "default"
-}), Ke = () => {
-  const e = _(), t = Y(), [r, o] = T([]), n = z(), i = ue(
-    (s) => {
-      if (t && n.current && s) {
-        const a = t.getBranch(s), c = s.getChildren(a).map((l) => U(l));
-        o(c);
-      }
-    },
-    [n, t, o, e]
-  );
-  return C(() => {
-    e && i(e);
-  }, [e, t]), C(() => {
-    if (t) {
-      const [s, a] = ye(t.events);
-      return s("components:set-layout", (c, l) => {
-        (e === l.node.parent || l.node.parent === t.nodes.root) && i(l.node.parent);
-      }), s("components:node-appended", (c, l) => {
-        (e === l.node.parent || l.node.parent === t.nodes.root) && i(l.node.parent);
-      }), s("components:node-removed", (c, { parentNode: l }) => {
-        (l === e || l === t.nodes.root) && i(l);
-      }), () => {
-        a();
-      };
-    }
-  }, [e, t, i]), r;
-}, Me = () => Q(I), ze = (e, t) => {
-  const r = ee(), o = K(), [n, i] = T(void 0), s = z(), a = e || r.type || "";
-  return C(() => {
-    if (a) {
-      let c;
-      return (t || o).getAsync("componentResolver").then((l) => {
-        if (s.current) {
-          const m = l.getComponent(a);
-          i(m);
-        }
-        c = l.registerResolver(a, (m) => {
-          s.current && i(m);
-        });
-      }), () => {
-        c && c();
-      };
-    }
-  }, [s, a, t, o]), n;
-}, je = (e) => {
-  const t = _(e), r = Y(), [o, n] = T({}), i = z();
-  return C(() => {
-    t && i.current && n(t.attributes.layout);
-  }, [t, i]), C(() => {
-    if (r) {
-      const s = r.events.subscribe(
-        "components:layout-changed",
-        (a, c) => {
-          t === c.node && i.current && n(c.node.attributes.layout);
-        }
-      );
-      return () => {
-        s();
-      };
-    }
-  }, [r, i, t]), o;
-}, te = () => Q(oe), Be = (e) => {
-  const [t, r] = T(), o = K(), n = z();
-  return C(() => {
-    let i;
-    const s = (e || o).get("$widget");
-    if (!s)
-      return;
-    const { name: a, invoke: c } = s;
-    return c("renderState").then((l) => {
-      n.current && r(l);
-    }), (e || o).getAsync("actionResolver").then((l) => {
-      i = l.subscribe(a, (m, d) => {
-        switch (d) {
-          case "close":
-          case "open":
-            n.current && r(
-              d === "open" ? R.open : R.closed
-            );
-            break;
-          case "hide":
-            n.current && r(R.hidden);
-        }
-      });
-    }), () => {
-      i && i();
-    };
-  }, [n]), t;
-}, Le = (e) => {
-  const t = K(), r = se(), [o, n] = T({ name: "", params: {} }), i = z();
-  return C(() => {
-    const s = (e || t).get("$widget");
-    if (!s)
-      return;
-    const { events: a } = s;
-    return a.subscribe("router:change", (l, { next: { routeData: m } }) => {
-      if (i.current) {
-        const { name: d, params: p } = m;
-        ne(p), n({ name: d, params: p });
-      }
-    });
-  }, [i, e, t]), C(() => {
-    if (r && r.history && i.current) {
-      const s = r.getRouteData(), { name: a, params: c } = s;
-      ne(c), n({ name: a, params: c });
-    }
-  }, [r, i]), o;
-}, We = (e) => {
-  const {
-    in: t,
-    mountOnEnter: r = !0,
-    unmountOnExit: o = !0,
-    timeout: n,
-    children: i,
-    transitions: s
-  } = e, c = (() => {
-    var l, m;
-    if (!(!s || s === "none")) {
-      if (typeof s == "string")
-        return {
-          enter: {
-            transitionKeys: s,
-            duration: n ? typeof n == "number" ? n : n.enter : 200,
-            easing: "ease-in"
-          },
-          exit: {
-            transitionKeys: s,
-            duration: n ? typeof n == "number" ? n : n.exit : 200,
-            easing: "ease-out"
-          }
-        };
-      if (typeof s == "object") {
-        const { enter: d, exit: p } = s;
-        return {
-          enter: {
-            transitionKeys: (l = s.enter) == null ? void 0 : l.type,
-            duration: n ? typeof n == "number" ? n : n.enter : 200,
-            easing: d.easing ? d.easing : "ease-in"
-          },
-          exit: {
-            transitionKeys: (m = s.enter) == null ? void 0 : m.type,
-            duration: n ? typeof n == "number" ? n : n.enter : 200,
-            easing: p.easing ? p.easing : "ease-out"
-          }
-        };
-      }
-    }
-  })();
-  return /* @__PURE__ */ u(
-    de,
-    {
-      timeout: {
-        enter: c && c.enter.duration || 0,
-        exit: c && c.exit.duration || 0
-      },
-      in: t,
-      appear: !0,
-      mountOnEnter: r,
-      unmountOnExit: o,
-      onEnter: (l) => l.clientHeight,
-      children: (l) => i && i(l, c && k.compose(l, c))
-    }
-  );
-};
-var q = /* @__PURE__ */ ((e) => (e.back = "back", e.forth = "forth", e))(q || {});
-const _e = (e, t, r) => typeof r[e] == "number" && typeof r[t] == "number" && r[e] > r[t] ? "back" : "forth", me = ({ views: e, location: t, render: r }) => /* @__PURE__ */ u(
-  Re,
-  {
-    location: t && {
-      ...t,
-      pathname: t.pathname.split("?")[0]
-    },
-    children: [
-      ...Object.keys(e).filter((o) => !!e[o].path),
-      ...Object.keys(e).filter((o) => !e[o].path)
-    ].map((o) => {
-      const { path: n } = e[o];
-      return n ? Array.isArray(n) ? n.map((i) => /* @__PURE__ */ u(F, { exact: !0, path: i, render: () => r(o) }, o)) : /* @__PURE__ */ u(F, { exact: !0, path: n, render: () => r(o) }, o) : /* @__PURE__ */ u(F, { render: () => r(o) }, o);
-    })
-  }
-), ke = y.div`
-  position: relative;
-  width: 100%;
-  flex: 1;
-`, Xe = y(G)`
-  position: absolute;
-  left: 0;
-  right: 0;
-  ${(e) => !!e.animationCss && e.animationCss}
-  ${(e) => !!e.scrollableCss && e.scrollableCss}
-`, Ye = {
-  index: 1,
-  search: 2,
-  browse: 3,
-  guide: 4,
-  contact: 5,
-  "contact-method": 6,
-  conversation: 7
-}, Ge = ({ className: e = "", ...t }) => {
-  const [r, o] = T("index"), [n, i] = T(
-    q.forth
-  ), s = Le(), a = se(), c = te(), l = H(), m = K(), d = _(), { gap: p = "0" } = l, {
-    columns: D = 1,
-    animation: v = "none",
-    scrollable: g = !1,
-    ...N
-  } = c, [B, P] = J(g);
-  if (!d || !a)
-    return null;
-  const { location: M } = a;
-  s.name !== r && s.name !== "" && v && (i(
-    _e(r, s.name, Ye)
-  ), o(s.name));
-  const { views: b } = m.get("$settings");
-  if (!Object.keys(b).length)
-    return null;
-  const $ = (f, w, S) => {
-    const h = L(w, S), E = d.getChildren(f)[0];
-    return /* @__PURE__ */ u(
-      Xe,
-      {
-        ...t,
-        ...N,
-        scrollableCss: B,
-        ref: P,
-        columns: D,
-        gap: p,
-        ...h,
-        className: V(e, "humany-view"),
-        children: /* @__PURE__ */ u(X, { id: E.id, branch: "default" })
-      }
-    );
-  }, L = (f, w) => {
-    if (v === "slide" || v === "fade")
-      return {
-        animationCss: k.composeViewTransition(
-          f,
-          v,
-          w
-        ),
-        "data-state": f
-      };
-  };
-  return /* @__PURE__ */ u(ke, { className: "humany-animated-view", children: /* @__PURE__ */ u(
-    Ee,
-    {
-      component: null,
-      childFactory: (f) => le.cloneElement(f, { direction: n }),
-      children: /* @__PURE__ */ u(
-        de,
-        {
-          timeout: { enter: 500, exit: 500 },
-          onEnter: (f) => f == null ? void 0 : f.clientHeight,
-          unmountOnExit: !0,
-          direction: q.forth,
-          children: (f, { direction: w }) => /* @__PURE__ */ u(
-            me,
-            {
-              views: b,
-              location: M,
-              render: (S) => $(S, f, w)
-            }
-          )
-        },
-        r
-      )
-    }
-  ) });
-}, He = y(G)`
-    ${(e) => !!e.scrollableCss && e.scrollableCss}
-`, Fe = ({ className: e = "", ...t }) => {
-  const r = te(), o = H(), n = K(), i = _(), { views: s } = n.get("$settings"), { gap: a = "0" } = o, { columns: c = 1, animation: l = "none", scrollable: m = !1, ...d } = r, [p, D] = J(m);
-  return i ? /* @__PURE__ */ u(
-    He,
-    {
-      ...t,
-      ...d,
-      scrollableCss: p,
-      ref: D,
-      columns: c,
-      gap: a,
-      className: V(e, "humany-view"),
-      children: /* @__PURE__ */ u(
-        me,
-        {
-          views: s,
-          render: (v) => {
-            const g = i.getChildren(v)[0];
-            return /* @__PURE__ */ u(X, { id: g.id, node: g, branch: "default" });
-          }
-        }
-      )
-    }
-  ) : null;
-}, j = (e) => {
-  var t, r;
-  return O`
-    outline: none;
-    box-sizing: border-box;
-    * {
-        box-sizing: border-box;
-        outline: none;
-    }
-
-    grid-column: ${e["data-indent"] ? `${e["data-indent"] + 1} / ${e["data-indent"] + (e["data-width"] || 0) + 1}` : `span ${e["data-width"]}`};
-
-    ${((t = e.theme.fonts) == null ? void 0 : t.type) && `
-    font-family: ${e.theme.fonts.type};
-
-    input, textarea {
-      font-family: ${e.theme.fonts.type};
-    }
-  `}
-
-    ${((r = e.theme.fonts) == null ? void 0 : r.base) && `
-    font-size: ${e.theme.fonts.base};
-  `}
-
-  &:focus-visible {
-        ${ie(e)};
-    }
-`;
-}, Ie = y(Fe)`
-    ${(e) => j(e)}
-`, Ue = y(Ge)`
-    ${(e) => j(e)}
-`, qe = y.div`
-    text-align: center;
-    ${(e) => {
-  var t, r, o;
-  return typeof ((t = e.theme.colors) == null ? void 0 : t.warning) < "u" && O`
-            color: ${(r = e.theme.colors) == null ? void 0 : r.warning};
-            border: 2px dashed ${(o = e.theme.colors) == null ? void 0 : o.warning};
-        `;
-}}
-    ${(e) => typeof e.theme.borderRadius < "u" && `border-radius: ${e.theme.borderRadius};`}
-  ${(e) => j(e)}
-`, Je = Z(
-  ({ className: e = "", children: t, ...r }, o) => {
-    const n = ze(), { name: i, type: s, id: a } = ee(), c = De(() => n ? y(n)`
-                    ${j}
-                    ${ae}
-                ` : null, [n]);
-    return typeof n > "u" ? null : n === null || c === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ u(
-      qe,
-      {
-        ...r,
-        title: `type: ${s}, definition-id: ${i}, instance-id: ${a}`,
-        className: V(e, "humany-non-resolved-component"),
-        children: /* @__PURE__ */ u(be, { variant: "h5", children: "Non Resolved Component Type" })
-      }
-    ) : null : /* @__PURE__ */ u(Pe, { fallback: null, children: /* @__PURE__ */ u(
-      c,
-      {
-        ref: o,
-        ...r,
-        className: V(
-          e,
-          "humany-component",
-          `humany-component-${i}`
-        ),
-        children: t
-      }
-    ) });
-  }
-), Qe = (e) => {
-  const t = _(e), r = Y(), [o, n] = T({}), i = z();
-  return C(() => {
-    t && i.current && n(t.attributes.properties);
-  }, [t, e, i]), C(() => {
-    if (r) {
-      const s = r.events.subscribe(
-        "components:properties-changed",
-        (a, c) => {
-          t === c.node && i.current && n(c.node.attributes.properties);
-        }
-      );
-      return () => {
-        s();
-      };
-    }
-  }, [r, i, e, t]), o;
-}, Ze = (e, t) => t ? !0 : typeof e == "string" ? e === "full" : e > 0, X = Z(
-  ({
-    className: e = "",
-    id: t,
-    branch: r,
-    node: o,
-    ariaLabel: n,
-    tabIndex: i,
-    context: s,
-    ...a
-  }, c) => {
-    const l = Y(), m = K(), [d, p] = T(), D = Me(), v = H(t), g = Qe(t), { size: N = "none", indent: B = 0 } = je(t), P = Ze(N, o);
-    if (C(() => {
-      if (l) {
-        if (t && !o) {
-          const h = l.nodes.get(t);
-          if (h && (p(U(h, r)), P)) {
-            const E = h.mount(m);
-            return () => {
-              E();
-            };
-          }
-        } else if (o) {
-          p(U(o, r));
-          const h = o.mount(m);
-          return () => {
-            h();
-          };
-        }
-      }
-    }, [l, t, o, P]), !d || !P)
-      return null;
-    const M = { ...v, ...s || {} }, {
-      cardinal: b,
-      fonts: $ = {},
-      accessibility: L = {},
-      ...f
-    } = M, w = {
-      type: $.type,
-      base: $.base || "16px",
-      small: $.small || "0.8em",
-      normal: $.normal || "1em",
-      medium: $.medium || "1.2em",
-      large: $.large || "1.6em",
-      huge: $.huge || "2.5em"
-    }, S = {
-      ...f,
-      fonts: w,
-      accessibility: {
-        ...L
-      }
-    };
-    return typeof b == "number" && (S.sizes = {
-      cardinal: b,
-      small: `${b}px`,
-      normal: `${b * 3}px`,
-      medium: `${b * 5}px`,
-      large: `${b * 8}px`
-    }), /* @__PURE__ */ u(he, { theme: S, children: /* @__PURE__ */ u(re.Provider, { value: d, children: /* @__PURE__ */ u(oe.Provider, { value: g, children: (() => {
-      const h = {
-        "data-width": N === "full" ? D : Math.min(N, D),
-        "data-indent": B,
-        "data-name": d.name,
-        "data-node-id": d.id,
-        "data-component-type": d.type,
-        "aria-label": n,
-        tabIndex: i,
-        id: d.id,
-        role: g && g.role,
-        ...a
-      };
-      switch (d.type) {
-        case "view":
-          return typeof g.animation == "string" && g.animation !== "none" ? /* @__PURE__ */ u(Ue, { ...h, className: e }) : /* @__PURE__ */ u(Ie, { ...h, className: e });
-        default: {
-          const E = ce(g);
-          return /* @__PURE__ */ u(
-            Je,
-            {
-              ref: c,
-              ...h,
-              ...E,
-              className: e
-            }
-          );
-        }
-      }
-    })() }) }) });
-  }
-);
-le.lazy(() => import("./detached-component-cc07075e.mjs"));
-const et = Z(
-  ({ children: e, className: t, renderState: r, animation: o, ...n }, i) => r ? /* @__PURE__ */ u(
-    We,
-    {
-      mountOnEnter: r !== R.hidden,
-      timeout: 200,
-      in: r === R.open,
-      transitions: o,
-      unmountOnExit: r === R.closed,
-      children: (s, a) => /* @__PURE__ */ u(
-        tt,
-        {
-          ...n,
-          animationCss: a,
-          "data-state": s,
-          ref: i,
-          className: V("humany-animated-area", t),
-          children: e
-        }
-      )
-    }
-  ) : null
-), tt = y(G)`
-    ${j}
-    ${(e) => !!e.animationCss && e.animationCss}
-  ${(e) => !!e.scrollableCss && e.scrollableCss}
-  text-size-adjust: 100%;
-    input::-ms-clear {
-        display: none;
-    }
-    ${(e) => e.hidden && e["data-state"] === "exited" && O`
-            visibility: collapse;
-            pointer-events: none;
-        `};
-`, nt = ({ className: e, ...t }) => {
-  const { name: r } = ee(), o = Be(), n = H(), i = te(), s = Ke(), a = K(), { gap: c = "0" } = n, {
-    columns: l = 1,
-    animation: m = "none",
-    scrollable: d = !1,
-    mode: p = W.Static,
-    trigger: D = {},
-    fullScreen: v,
-    header: g,
-    ...N
-  } = i, { size: B = 24, symbol: P, label: M, ariaLabel: b, ...$ } = D, [L, f] = J(d), w = ue(
-    (x) => {
-      const { events: pe } = a.get("$widget");
-      return pe.dispatch("widget:area-rendered", {
-        name: r,
-        properties: i,
-        element: x
-      }), f.current = x, x;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [i, o]
-  );
-  if (!s.length)
-    return Ve(a, {
-      ...t,
-      className: V(e, "humany-area")
-    });
-  const S = {
-    ...t,
-    className: V(
-      e,
-      "humany-area",
-      `humany-area-${r}`
-    ),
-    scrollableCss: L,
-    ...N,
-    columns: l,
-    gap: c,
-    renderState: o,
-    animation: m,
-    hidden: o === R.hidden,
-    ref: w
-  }, h = (() => m !== "none" ? /* @__PURE__ */ u(I.Provider, { value: l, children: /* @__PURE__ */ u(et, { ...S, children: s.map((x) => /* @__PURE__ */ u(X, { id: x.id, branch: "default" }, x.id)) }) }) : o === R.closed ? null : /* @__PURE__ */ u(I.Provider, { value: l, children: /* @__PURE__ */ u(it, { ...S, children: s.map((x) => /* @__PURE__ */ u(X, { id: x.id, branch: "default" }, x.id)) }) }))();
-  if (p === W.Static)
-    return h;
-  const E = /* @__PURE__ */ fe(
-    rt,
-    {
-      className: "humany-area-trigger",
-      title: b,
-      ...ce($),
-      children: [
-        M && /* @__PURE__ */ u(ot, { children: M }),
-        P && /* @__PURE__ */ u(st, { symbol: P, size: B })
-      ]
-    }
-  );
-  if (p === W.Dropdown)
-    return /* @__PURE__ */ u($e, { trigger: E, children: h });
-  if (p === W.Drawer) {
-    const x = Object.values(xe).includes(m) && {
-      type: m
-    } || void 0;
-    return /* @__PURE__ */ u(
-      Ce,
-      {
-        header: g,
-        animation: x,
-        fullScreen: v,
-        trigger: E,
-        children: h
-      }
-    );
-  }
-  return p === W.Modal && ve.warn("modal area not implemented"), null;
-}, rt = y(we)`
-  display: flex;
-  align-items: inherit;
-  align-self: center;
-  width: fit-content;
-  height: fit-content;
-  ${ae}
-
-  ${(e) => e.theme.fonts && `
-    font-family: ${e.theme.fonts.type};
-    font-size: ${e.theme.fonts.normal};
-  `}
-
-  &:focus-visible {
-    ${ie};
-  }
-`, ot = y(Se)`
-  margin: 0 ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.small;
-}} 0 0;
-  color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-`, st = y(Te)`
-  path {
-    fill: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-  }
-`, it = y(G)`
-  ${j}
-  ${(e) => !!e.scrollableCss && e.scrollableCss}
-  text-size-adjust: 100%;
-  input::-ms-clear {
-    display: none;
-  }
-  ${(e) => e.hidden && O`
-      visibility: collapse;
-      pointer-events: none;
-    `};
-`, ht = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: nt
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  X as C,
-  ht as a
-};

package/detached-component-c01ac861.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime");require("@emotion/react");const c=require("./index-ca09668e.js"),n=require("react");require("react-dom");require("react-transition-group");const d=require("./area-c682aa47.js");require("@emotion/styled");require("react-router-dom");require("react-router");const a=({builder:i})=>{const u=c.useContainer(),[e,o]=n.useState(null);return n.useEffect(()=>{u.getAsync("components").then(t=>i(t).then(r=>{o(r)}))},[]),n.useEffect(()=>()=>{e&&u.getAsync("components").then(t=>{t.nodes.detached=t.nodes.detached.filter(r=>r.id!==e.id)})},[e]),e?s.jsx(d.Component,{id:e.id,node:e,branch:"default"}):null};exports.default=a;