@telia-ace/widget-components-area 1.0.33 → 1.1.1-rc.1

package/area-fd989693.mjs

@@ -0,0 +1,896 @@
+import { jsx as u, jsxs as $e } from "react/jsx-runtime";
+import { c as N, E as Ce, _ as we, a as Ee, b as Se, T as le, P as z, C as de, u as X, d as k, e as L, f as Te, g as Z, h as A, i as me, W as R, j as pe, k as fe, S as Pe, R as Q, n as b, G as q, l as J, m as ne, o as j, p as he, q as ge, r as De, s as Re, t as be, A as G, D as Me, v as Oe, w as Ve, L as Ne, B as je, x as Ae, y as _e } from "./index-aa7b061f.mjs";
+import F, { Children as ze, isValidElement as Y, cloneElement as H, useContext as re, useState as S, useCallback as ye, useEffect as $, forwardRef as oe, useMemo as Fe, Suspense as Le } from "react";
+import "react-dom";
+const Be = (e) => e === "entering" || e === "entered", Ke = (e) => e === "exiting" || e === "exited", O = {
+  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);"
+  }
+}, We = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"], I = {
+  compose: (e = "exited", t) => {
+    const { enter: r, exit: s } = t, n = r.transitionKeys.split(" "), i = We.indexOf(n[0]) > -1 ? "transform" : "opacity";
+    if (Be(e))
+      return n && n.length > 0 ? N`
+                    ${n && n.length > 0 && n.map((a) => O[a] ? O[a].in : "")}
+                    transition: ${i} ${r.duration}ms ${r.easing};
+                ` : "";
+    const o = n && n.length > 0 && N`
+                ${n.map((a) => O[a] ? O[a].out : "")}
+            `;
+    if (Ke(e)) {
+      const a = s.transitionKeys.split(" ");
+      return a && a.length > 0 && e === "exiting" ? N`
+                    ${o};
+                    ${a.map((c) => O[c] ? O[c].out : "")}
+                    transition: ${i} ${s.duration}ms ${s.easing};
+                ` : o;
+    }
+  },
+  composeViewTransition: (e, t, r) => {
+    if (t === "slide")
+      return I.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 I.compose(e, {
+        enter: {
+          transitionKeys: "fade",
+          duration: 500
+        },
+        exit: {
+          transitionKeys: "fade",
+          duration: 500
+        }
+      });
+  },
+  get: (e) => O[e]
+}, ue = (e = {}) => (Object.keys(e).forEach((t) => {
+  (e[t] === null || typeof e[t] > "u") && delete e[t];
+}), e), Ge = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ u(Ce, { ...t }) : null;
+function Xe(e) {
+  if (e === void 0)
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function ie(e, t) {
+  var r = function(i) {
+    return t && Y(i) ? t(i) : i;
+  }, s = /* @__PURE__ */ Object.create(null);
+  return e && ze.map(e, function(n) {
+    return n;
+  }).forEach(function(n) {
+    s[n.key] = r(n);
+  }), s;
+}
+function Ye(e, t) {
+  e = e || {}, t = t || {};
+  function r(d) {
+    return d in t ? t[d] : e[d];
+  }
+  var s = /* @__PURE__ */ Object.create(null), n = [];
+  for (var i in e)
+    i in t ? n.length && (s[i] = n, n = []) : n.push(i);
+  var o, a = {};
+  for (var c in t) {
+    if (s[c])
+      for (o = 0; o < s[c].length; o++) {
+        var l = s[c][o];
+        a[s[c][o]] = r(l);
+      }
+    a[c] = r(c);
+  }
+  for (o = 0; o < n.length; o++)
+    a[n[o]] = r(n[o]);
+  return a;
+}
+function V(e, t, r) {
+  return r[t] != null ? r[t] : e.props[t];
+}
+function He(e, t) {
+  return ie(e.children, function(r) {
+    return H(r, {
+      onExited: t.bind(null, r),
+      in: !0,
+      appear: V(r, "appear", e),
+      enter: V(r, "enter", e),
+      exit: V(r, "exit", e)
+    });
+  });
+}
+function Ie(e, t, r) {
+  var s = ie(e.children), n = Ye(t, s);
+  return Object.keys(n).forEach(function(i) {
+    var o = n[i];
+    if (Y(o)) {
+      var a = i in t, c = i in s, l = t[i], d = Y(l) && !l.props.in;
+      c && (!a || d) ? n[i] = H(o, {
+        onExited: r.bind(null, o),
+        in: !0,
+        exit: V(o, "exit", e),
+        enter: V(o, "enter", e)
+      }) : !c && a && !d ? n[i] = H(o, {
+        in: !1
+      }) : c && a && Y(l) && (n[i] = H(o, {
+        onExited: r.bind(null, o),
+        in: l.props.in,
+        exit: V(o, "exit", e),
+        enter: V(o, "enter", e)
+      }));
+    }
+  }), n;
+}
+var Ue = Object.values || function(e) {
+  return Object.keys(e).map(function(t) {
+    return e[t];
+  });
+}, ke = {
+  component: "div",
+  childFactory: function(t) {
+    return t;
+  }
+}, se = /* @__PURE__ */ function(e) {
+  we(t, e);
+  function t(s, n) {
+    var i;
+    i = e.call(this, s, n) || this;
+    var o = i.handleExited.bind(Xe(i));
+    return i.state = {
+      contextValue: {
+        isMounting: !0
+      },
+      handleExited: o,
+      firstRender: !0
+    }, i;
+  }
+  var r = t.prototype;
+  return r.componentDidMount = function() {
+    this.mounted = !0, this.setState({
+      contextValue: {
+        isMounting: !1
+      }
+    });
+  }, r.componentWillUnmount = function() {
+    this.mounted = !1;
+  }, t.getDerivedStateFromProps = function(n, i) {
+    var o = i.children, a = i.handleExited, c = i.firstRender;
+    return {
+      children: c ? He(n, a) : Ie(n, o, a),
+      firstRender: !1
+    };
+  }, r.handleExited = function(n, i) {
+    var o = ie(this.props.children);
+    n.key in o || (n.props.onExited && n.props.onExited(i), this.mounted && this.setState(function(a) {
+      var c = Ee({}, a.children);
+      return delete c[n.key], {
+        children: c
+      };
+    }));
+  }, r.render = function() {
+    var n = this.props, i = n.component, o = n.childFactory, a = Se(n, ["component", "childFactory"]), c = this.state.contextValue, l = Ue(this.state.children).map(o);
+    return delete a.appear, delete a.enter, delete a.exit, i === null ? /* @__PURE__ */ F.createElement(le.Provider, {
+      value: c
+    }, l) : /* @__PURE__ */ F.createElement(le.Provider, {
+      value: c
+    }, /* @__PURE__ */ F.createElement(i, a, l));
+  }, t;
+}(F.Component);
+se.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * `<TransitionGroup>` renders a `<div>` by default. You can change this
+   * behavior by providing a `component` prop.
+   * If you use React v16+ and would like to avoid a wrapping `<div>` element
+   * you can pass in `component={null}`. This is useful if the wrapping div
+   * borks your css styles.
+   */
+  component: z.any,
+  /**
+   * A set of `<Transition>` components, that are toggled `in` and out as they
+   * leave. the `<TransitionGroup>` will inject specific transition props, so
+   * remember to spread them through if you are wrapping the `<Transition>` as
+   * with our `<Fade>` example.
+   *
+   * While this component is meant for multiple `Transition` or `CSSTransition`
+   * children, sometimes you may want to have a single transition child with
+   * content that you want to be transitioned out and in when you change it
+   * (e.g. routes, images etc.) In that case you can change the `key` prop of
+   * the transition child as you change its content, this will cause
+   * `TransitionGroup` to transition the child out and back in.
+   */
+  children: z.node,
+  /**
+   * A convenience prop that enables or disables appear animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  appear: z.bool,
+  /**
+   * A convenience prop that enables or disables enter animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  enter: z.bool,
+  /**
+   * A convenience prop that enables or disables exit animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  exit: z.bool,
+  /**
+   * You may need to apply reactive updates to a child as it is exiting.
+   * This is generally done by using `cloneElement` however in the case of an exiting
+   * child the element has already been removed and not accessible to the consumer.
+   *
+   * If you do need to update a child as it leaves you can provide a `childFactory`
+   * to wrap every child, even the ones that are leaving.
+   *
+   * @type Function(child: ReactElement) -> ReactElement
+   */
+  childFactory: z.func
+} : {};
+se.defaultProps = ke;
+const qe = se, ae = () => re(de), ee = (e, t) => ({
+  id: e.id,
+  type: e.type,
+  name: e.name,
+  branch: t || "default"
+}), Je = () => {
+  const e = X(), t = k(), [r, s] = S([]), n = L(), i = ye(
+    (o) => {
+      if (t && n.current && o) {
+        const a = t.getBranch(o), c = o.getChildren(a).map((l) => ee(l));
+        s(c);
+      }
+    },
+    [n, t, s, e]
+  );
+  return $(() => {
+    e && i(e);
+  }, [e, t]), $(() => {
+    if (t) {
+      const [o, a] = Te(t.events);
+      return o("components:set-layout", (c, l) => {
+        (e === l.node.parent || l.node.parent === t.nodes.root) && i(l.node.parent);
+      }), o("components:node-appended", (c, l) => {
+        (e === l.node.parent || l.node.parent === t.nodes.root) && i(l.node.parent);
+      }), o("components:node-removed", (c, { parentNode: l }) => {
+        (l === e || l === t.nodes.root) && i(l);
+      }), () => {
+        a();
+      };
+    }
+  }, [e, t, i]), r;
+}, Qe = () => re(Z), Ze = (e, t) => {
+  const r = ae(), s = A(), [n, i] = S(void 0), o = L(), a = e || r.type || "";
+  return $(() => {
+    if (a) {
+      let c;
+      return (t || s).getAsync("componentResolver").then((l) => {
+        if (o.current) {
+          const d = l.getComponent(a);
+          i(d);
+        }
+        c = l.registerResolver(a, (d) => {
+          o.current && i(d);
+        });
+      }), () => {
+        c && c();
+      };
+    }
+  }, [o, a, t, s]), n;
+}, et = (e) => {
+  const t = X(e), r = k(), [s, n] = S({}), i = L();
+  return $(() => {
+    t && i.current && n(t.attributes.layout);
+  }, [t, i]), $(() => {
+    if (r) {
+      const o = r.events.subscribe(
+        "components:layout-changed",
+        (a, c) => {
+          t === c.node && i.current && n(c.node.attributes.layout);
+        }
+      );
+      return () => {
+        o();
+      };
+    }
+  }, [r, i, t]), s;
+}, ce = () => re(me), tt = (e) => {
+  const [t, r] = S(), s = A(), n = L();
+  return $(() => {
+    let i;
+    const o = (e || s).get("$widget");
+    if (!o)
+      return;
+    const { name: a, invoke: c } = o;
+    return c("renderState").then((l) => {
+      n.current && r(l);
+    }), (e || s).getAsync("actionResolver").then((l) => {
+      i = l.subscribe(a, (d, m) => {
+        switch (m) {
+          case "close":
+          case "open":
+            n.current && r(
+              m === "open" ? R.open : R.closed
+            );
+            break;
+          case "hide":
+            n.current && r(R.hidden);
+        }
+      });
+    }), () => {
+      i && i();
+    };
+  }, [n]), t;
+}, nt = (e) => {
+  const t = A(), r = pe(), [s, n] = S({ name: "", params: {} }), i = L();
+  return $(() => {
+    const o = (e || t).get("$widget");
+    if (!o)
+      return;
+    const { events: a } = o;
+    return a.subscribe("router:change", (l, { next: { routeData: d } }) => {
+      if (i.current) {
+        const { name: m, params: p } = d;
+        ue(p), n({ name: m, params: p });
+      }
+    });
+  }, [i, e, t]), $(() => {
+    if (r && r.history && i.current) {
+      const o = r.getRouteData(), { name: a, params: c } = o;
+      ue(c), n({ name: a, params: c });
+    }
+  }, [r, i]), s;
+}, rt = (e) => {
+  const {
+    in: t,
+    mountOnEnter: r = !0,
+    unmountOnExit: s = !0,
+    timeout: n,
+    children: i,
+    transitions: o
+  } = e, c = (() => {
+    var l, d;
+    if (!(!o || o === "none")) {
+      if (typeof o == "string")
+        return {
+          enter: {
+            transitionKeys: o,
+            duration: n ? typeof n == "number" ? n : n.enter : 200,
+            easing: "ease-in"
+          },
+          exit: {
+            transitionKeys: o,
+            duration: n ? typeof n == "number" ? n : n.exit : 200,
+            easing: "ease-out"
+          }
+        };
+      if (typeof o == "object") {
+        const { enter: m, exit: p } = o;
+        return {
+          enter: {
+            transitionKeys: (l = o.enter) == null ? void 0 : l.type,
+            duration: n ? typeof n == "number" ? n : n.enter : 200,
+            easing: m.easing ? m.easing : "ease-in"
+          },
+          exit: {
+            transitionKeys: (d = o.enter) == null ? void 0 : d.type,
+            duration: n ? typeof n == "number" ? n : n.enter : 200,
+            easing: p.easing ? p.easing : "ease-out"
+          }
+        };
+      }
+    }
+  })();
+  return /* @__PURE__ */ u(
+    fe,
+    {
+      timeout: {
+        enter: c && c.enter.duration || 0,
+        exit: c && c.exit.duration || 0
+      },
+      in: t,
+      appear: !0,
+      mountOnEnter: r,
+      unmountOnExit: s,
+      onEnter: (l) => l.clientHeight,
+      children: (l) => i && i(l, c && I.compose(l, c))
+    }
+  );
+};
+var te = /* @__PURE__ */ ((e) => (e.back = "back", e.forth = "forth", e))(te || {});
+const ot = (e, t, r) => typeof r[e] == "number" && typeof r[t] == "number" && r[e] > r[t] ? "back" : "forth", ve = ({ views: e, location: t, render: r }) => /* @__PURE__ */ u(
+  Pe,
+  {
+    location: t && {
+      ...t,
+      pathname: t.pathname.split("?")[0]
+    },
+    children: [
+      ...Object.keys(e).filter((s) => !!e[s].path),
+      ...Object.keys(e).filter((s) => !e[s].path)
+    ].map((s) => {
+      const { path: n } = e[s];
+      return n ? Array.isArray(n) ? n.map((i) => /* @__PURE__ */ u(Q, { exact: !0, path: i, render: () => r(s) }, s)) : /* @__PURE__ */ u(Q, { exact: !0, path: n, render: () => r(s) }, s) : /* @__PURE__ */ u(Q, { render: () => r(s) }, s);
+    })
+  }
+), it = b.div`
+  position: relative;
+  width: 100%;
+  flex: 1;
+`, st = b(q)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  ${(e) => !!e.animationCss && e.animationCss}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, at = {
+  index: 1,
+  search: 2,
+  browse: 3,
+  guide: 4,
+  contact: 5,
+  "contact-method": 6,
+  conversation: 7
+}, ct = ({ className: e = "", ...t }) => {
+  const [r, s] = S("index"), [n, i] = S(
+    te.forth
+  ), o = nt(), a = pe(), c = ce(), l = J(), d = A(), m = X(), { gap: p = "0" } = l, {
+    columns: T = 1,
+    animation: C = "none",
+    scrollable: g = !1,
+    ...M
+  } = c, [K, P] = ne(g);
+  if (!m || !a)
+    return null;
+  const { location: _ } = a;
+  o.name !== r && o.name !== "" && C && (i(
+    ot(r, o.name, at)
+  ), s(o.name));
+  const { views: y } = d.get("$settings");
+  if (!Object.keys(y).length)
+    return null;
+  const v = (f, w, E) => {
+    const h = W(w, E), D = m.getChildren(f)[0];
+    return /* @__PURE__ */ u(
+      st,
+      {
+        ...t,
+        ...M,
+        scrollableCss: K,
+        ref: P,
+        columns: T,
+        gap: p,
+        ...h,
+        className: j(e, "humany-view"),
+        children: /* @__PURE__ */ u(U, { id: D.id, branch: "default" })
+      }
+    );
+  }, W = (f, w) => {
+    if (C === "slide" || C === "fade")
+      return {
+        animationCss: I.composeViewTransition(
+          f,
+          C,
+          w
+        ),
+        "data-state": f
+      };
+  };
+  return /* @__PURE__ */ u(it, { className: "humany-animated-view", children: /* @__PURE__ */ u(
+    qe,
+    {
+      component: null,
+      childFactory: (f) => F.cloneElement(f, { direction: n }),
+      children: /* @__PURE__ */ u(
+        fe,
+        {
+          timeout: { enter: 500, exit: 500 },
+          onEnter: (f) => f == null ? void 0 : f.clientHeight,
+          unmountOnExit: !0,
+          direction: te.forth,
+          children: (f, { direction: w }) => /* @__PURE__ */ u(
+            ve,
+            {
+              views: y,
+              location: _,
+              render: (E) => v(E, f, w)
+            }
+          )
+        },
+        r
+      )
+    }
+  ) });
+}, lt = b(q)`
+    ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, ut = ({ className: e = "", ...t }) => {
+  const r = ce(), s = J(), n = A(), i = X(), { views: o } = n.get("$settings"), { gap: a = "0" } = s, { columns: c = 1, animation: l = "none", scrollable: d = !1, ...m } = r, [p, T] = ne(d);
+  return i ? /* @__PURE__ */ u(
+    lt,
+    {
+      ...t,
+      ...m,
+      scrollableCss: p,
+      ref: T,
+      columns: c,
+      gap: a,
+      className: j(e, "humany-view"),
+      children: /* @__PURE__ */ u(
+        ve,
+        {
+          views: o,
+          render: (C) => {
+            const g = i.getChildren(C)[0];
+            return /* @__PURE__ */ u(U, { id: g.id, node: g, branch: "default" });
+          }
+        }
+      )
+    }
+  ) : null;
+}, B = (e) => {
+  var t, r;
+  return N`
+    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 {
+        ${he(e)};
+    }
+`;
+}, dt = b(ut)`
+    ${(e) => B(e)}
+`, mt = b(ct)`
+    ${(e) => B(e)}
+`, pt = b.div`
+    text-align: center;
+    ${(e) => {
+  var t, r, s;
+  return typeof ((t = e.theme.colors) == null ? void 0 : t.warning) < "u" && N`
+            color: ${(r = e.theme.colors) == null ? void 0 : r.warning};
+            border: 2px dashed ${(s = e.theme.colors) == null ? void 0 : s.warning};
+        `;
+}}
+    ${(e) => typeof e.theme.borderRadius < "u" && `border-radius: ${e.theme.borderRadius};`}
+  ${(e) => B(e)}
+`, ft = oe(
+  ({ className: e = "", children: t, ...r }, s) => {
+    const n = Ze(), { name: i, type: o, id: a } = ae(), c = Fe(() => n ? b(n)`
+                    ${B}
+                    ${ge}
+                ` : null, [n]);
+    return typeof n > "u" ? null : n === null || c === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ u(
+      pt,
+      {
+        ...r,
+        title: `type: ${o}, definition-id: ${i}, instance-id: ${a}`,
+        className: j(e, "humany-non-resolved-component"),
+        children: /* @__PURE__ */ u(De, { variant: "h5", children: "Non Resolved Component Type" })
+      }
+    ) : null : /* @__PURE__ */ u(Le, { fallback: null, children: /* @__PURE__ */ u(
+      c,
+      {
+        ref: s,
+        ...r,
+        className: j(
+          e,
+          "humany-component",
+          `humany-component-${i}`
+        ),
+        children: t
+      }
+    ) });
+  }
+), ht = (e) => {
+  const t = X(e), r = k(), [s, n] = S({}), i = L();
+  return $(() => {
+    t && i.current && n(t.attributes.properties);
+  }, [t, e, i]), $(() => {
+    if (r) {
+      const o = r.events.subscribe(
+        "components:properties-changed",
+        (a, c) => {
+          t === c.node && i.current && n(c.node.attributes.properties);
+        }
+      );
+      return () => {
+        o();
+      };
+    }
+  }, [r, i, e, t]), s;
+}, gt = (e, t) => t ? !0 : typeof e == "string" ? e === "full" : e > 0, U = oe(
+  ({
+    className: e = "",
+    id: t,
+    branch: r,
+    node: s,
+    ariaLabel: n,
+    tabIndex: i,
+    context: o,
+    ...a
+  }, c) => {
+    const l = k(), d = A(), [m, p] = S(), T = Qe(), C = J(t), g = ht(t), { size: M = "none", indent: K = 0 } = et(t), P = gt(M, s);
+    if ($(() => {
+      if (l) {
+        if (t && !s) {
+          const h = l.nodes.get(t);
+          if (h && (p(ee(h, r)), P)) {
+            const D = h.mount(d);
+            return () => {
+              D();
+            };
+          }
+        } else if (s) {
+          p(ee(s, r));
+          const h = s.mount(d);
+          return () => {
+            h();
+          };
+        }
+      }
+    }, [l, t, s, P]), !m || !P)
+      return null;
+    const _ = { ...C, ...o || {} }, {
+      cardinal: y,
+      fonts: v = {},
+      accessibility: W = {},
+      ...f
+    } = _, w = {
+      type: v.type,
+      base: v.base || "16px",
+      small: v.small || "0.8em",
+      normal: v.normal || "1em",
+      medium: v.medium || "1.2em",
+      large: v.large || "1.6em",
+      huge: v.huge || "2.5em"
+    }, E = {
+      ...f,
+      fonts: w,
+      accessibility: {
+        ...W
+      }
+    };
+    return typeof y == "number" && (E.sizes = {
+      cardinal: y,
+      small: `${y}px`,
+      normal: `${y * 3}px`,
+      medium: `${y * 5}px`,
+      large: `${y * 8}px`
+    }), /* @__PURE__ */ u(Re, { theme: E, children: /* @__PURE__ */ u(de.Provider, { value: m, children: /* @__PURE__ */ u(me.Provider, { value: g, children: (() => {
+      const h = {
+        "data-width": M === "full" ? T : Math.min(M, T),
+        "data-indent": K,
+        "data-name": m.name,
+        "data-node-id": m.id,
+        "data-component-type": m.type,
+        "aria-label": n,
+        tabIndex: i,
+        id: m.id,
+        role: g && g.role,
+        ...a
+      };
+      switch (m.type) {
+        case "view":
+          return typeof g.animation == "string" && g.animation !== "none" ? /* @__PURE__ */ u(mt, { ...h, className: e }) : /* @__PURE__ */ u(dt, { ...h, className: e });
+        default: {
+          const D = be(g);
+          return /* @__PURE__ */ u(
+            ft,
+            {
+              ref: c,
+              ...h,
+              ...D,
+              className: e
+            }
+          );
+        }
+      }
+    })() }) }) });
+  }
+);
+F.lazy(() => import("./detached-component-c0baa00b.mjs"));
+const bt = oe(
+  ({ children: e, className: t, renderState: r, animation: s, ...n }, i) => r ? /* @__PURE__ */ u(
+    rt,
+    {
+      mountOnEnter: r !== R.hidden,
+      timeout: 200,
+      in: r === R.open,
+      transitions: s,
+      unmountOnExit: r === R.closed,
+      children: (o, a) => /* @__PURE__ */ u(
+        yt,
+        {
+          ...n,
+          animationCss: a,
+          "data-state": o,
+          ref: i,
+          className: j("humany-animated-area", t),
+          children: e
+        }
+      )
+    }
+  ) : null
+), yt = b(q)`
+    ${B}
+    ${(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" && N`
+            visibility: collapse;
+            pointer-events: none;
+        `};
+`, vt = ({ className: e, ...t }) => {
+  const { name: r } = ae(), s = tt(), n = J(), i = ce(), o = Je(), a = A(), { gap: c = "0" } = n, {
+    columns: l = 1,
+    animation: d = "none",
+    scrollable: m = !1,
+    mode: p = G.Static,
+    trigger: T = {},
+    fullScreen: C,
+    header: g,
+    ...M
+  } = i, { size: K = 24, symbol: P, label: _, ariaLabel: y, ...v } = T, [W, f] = ne(m), w = ye(
+    (x) => {
+      const { events: xe } = a.get("$widget");
+      return xe.dispatch("widget:area-rendered", {
+        name: r,
+        properties: i,
+        element: x
+      }), f.current = x, x;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [i, s]
+  );
+  if (!o.length)
+    return Ge(a, {
+      ...t,
+      className: j(e, "humany-area")
+    });
+  const E = {
+    ...t,
+    className: j(
+      e,
+      "humany-area",
+      `humany-area-${r}`
+    ),
+    scrollableCss: W,
+    ...M,
+    columns: l,
+    gap: c,
+    renderState: s,
+    animation: d,
+    hidden: s === R.hidden,
+    ref: w
+  }, h = (() => d !== "none" ? /* @__PURE__ */ u(Z.Provider, { value: l, children: /* @__PURE__ */ u(bt, { ...E, children: o.map((x) => /* @__PURE__ */ u(U, { id: x.id, branch: "default" }, x.id)) }) }) : s === R.closed ? null : /* @__PURE__ */ u(Z.Provider, { value: l, children: /* @__PURE__ */ u(wt, { ...E, children: o.map((x) => /* @__PURE__ */ u(U, { id: x.id, branch: "default" }, x.id)) }) }))();
+  if (p === G.Static)
+    return h;
+  const D = /* @__PURE__ */ $e(
+    xt,
+    {
+      className: "humany-area-trigger",
+      title: y,
+      ...be(v),
+      children: [
+        _ && /* @__PURE__ */ u($t, { children: _ }),
+        P && /* @__PURE__ */ u(Ct, { symbol: P, size: K })
+      ]
+    }
+  );
+  if (p === G.Dropdown)
+    return /* @__PURE__ */ u(Me, { trigger: D, children: h });
+  if (p === G.Drawer) {
+    const x = Object.values(Oe).includes(d) && {
+      type: d
+    } || void 0;
+    return /* @__PURE__ */ u(
+      Ve,
+      {
+        header: g,
+        animation: x,
+        fullScreen: C,
+        trigger: D,
+        children: h
+      }
+    );
+  }
+  return p === G.Modal && Ne.warn("modal area not implemented"), null;
+}, xt = b(je)`
+  display: flex;
+  align-items: inherit;
+  align-self: center;
+  width: fit-content;
+  height: fit-content;
+  ${ge}
+
+  ${(e) => e.theme.fonts && `
+    font-family: ${e.theme.fonts.type};
+    font-size: ${e.theme.fonts.normal};
+  `}
+
+  &:focus-visible {
+    ${he};
+  }
+`, $t = b(Ae)`
+  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;
+}};
+`, Ct = b(_e)`
+  path {
+    fill: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  }
+`, wt = b(q)`
+  ${B}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  ${(e) => e.hidden && N`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`, Dt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: vt
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  U as C,
+  Dt as a
+};