@telia-ace/widget-components-grid 1.1.1-rc.0 → 1.1.1-rc.2

package/detached-component-4dd7e2c3.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime");require("@emotion/react");const c=require("./index-2542500f.js"),n=require("react");require("react-dom");require("react-transition-group");const d=require("./grid-3ce6ef77.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;

package/detached-component-ccd8259a.mjs

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import "@emotion/react";
+import { e as d } from "./index-fe430b79.mjs";
+import { useState as p, useEffect as r } from "react";
+import "react-dom";
+import "react-transition-group";
+import { C as a } from "./grid-f0087a03.mjs";
+import "@emotion/styled";
+import "react-router-dom";
+import "react-router";
+const b = ({ builder: i }) => {
+  const n = d(), [t, m] = p(null);
+  return r(() => {
+    n.getAsync("components").then((e) => i(e).then((o) => {
+      m(o);
+    }));
+  }, []), r(() => () => {
+    t && n.getAsync("components").then((e) => {
+      e.nodes.detached = e.nodes.detached.filter(
+        (o) => o.id !== t.id
+      );
+    });
+  }, [t]), t ? /* @__PURE__ */ s(a, { id: t.id, node: t, branch: "default" }) : null;
+};
+export {
+  b as default
+};

package/grid-3ce6ef77.js

@@ -0,0 +1,75 @@
+"use strict";const d=require("react/jsx-runtime"),$=require("@emotion/react"),r=require("./index-2542500f.js"),l=require("react");require("react-dom");const I=require("react-transition-group"),j=require("@emotion/styled"),A=require("react-router"),F=e=>e==="entering"||e==="entered",H=e=>e==="exiting"||e==="exited",w={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);"}},L=["slide-up","slide-down","slide-left","slide-right","scale"],G={compose:(e="exited",t)=>{const{enter:n,exit:o}=t,s=n.transitionKeys.split(" "),i=L.indexOf(s[0])>-1?"transform":"opacity";if(F(e))return s&&s.length>0?$.css`
+                    ${s&&s.length>0&&s.map(c=>w[c]?w[c].in:"")}
+                    transition: ${i} ${n.duration}ms ${n.easing};
+                `:"";const a=s&&s.length>0&&$.css`
+                ${s.map(c=>w[c]?w[c].out:"")}
+            `;if(H(e)){const c=o.transitionKeys.split(" ");return c&&c.length>0&&e==="exiting"?$.css`
+                    ${a};
+                    ${c.map(u=>w[u]?w[u].out:"")}
+                    transition: ${i} ${o.duration}ms ${o.easing};
+                `:a}},composeViewTransition:(e,t,n)=>{if(t==="slide")return G.compose(e,{enter:{transitionKeys:n==="forth"?"slide-right":"slide-left",duration:500},exit:{transitionKeys:n==="forth"?"slide-left":"slide-right",duration:500}});if(t==="fade")return G.compose(e,{enter:{transitionKeys:"fade",duration:500},exit:{transitionKeys:"fade",duration:500}})},get:e=>w[e]},X=(e={})=>(Object.keys(e).forEach(t=>{(e[t]===null||typeof e[t]>"u")&&delete e[t]}),e),Y=()=>l.useContext(r.ComponentNodeContext),K=(e,t)=>({id:e.id,type:e.type,name:e.name,branch:t||"default"}),W=()=>{const e=r.useComponentNode(),t=r.useComponentPlatform(),[n,o]=l.useState([]),s=r.useIsMounted(),i=l.useCallback(a=>{if(t&&s.current&&a){const c=t.getBranch(a),u=a.getChildren(c).map(m=>K(m));o(u)}},[s,t,o,e]);return l.useEffect(()=>{e&&i(e)},[e,t]),l.useEffect(()=>{if(t){const[a,c]=r.createEventSubscriber(t.events);return a("components:set-layout",(u,m)=>{(e===m.node.parent||m.node.parent===t.nodes.root)&&i(m.node.parent)}),a("components:node-appended",(u,m)=>{(e===m.node.parent||m.node.parent===t.nodes.root)&&i(m.node.parent)}),a("components:node-removed",(u,{parentNode:m})=>{(m===e||m===t.nodes.root)&&i(m)}),()=>{c()}}},[e,t,i]),n},U=()=>l.useContext(r.ColumnContext),J=(e,t)=>{const n=Y(),o=r.useContainer(),[s,i]=l.useState(void 0),a=r.useIsMounted(),c=e||n.type||"";return l.useEffect(()=>{if(c){let u;return(t||o).getAsync("componentResolver").then(m=>{if(a.current){const h=m.getComponent(c);i(h)}u=m.registerResolver(c,h=>{a.current&&i(h)})}),()=>{u&&u()}}},[a,c,t,o]),s},Q=e=>{const t=r.useComponentNode(e),n=r.useComponentPlatform(),[o,s]=l.useState({}),i=r.useIsMounted();return l.useEffect(()=>{t&&i.current&&s(t.attributes.layout)},[t,i]),l.useEffect(()=>{if(n){const a=n.events.subscribe("components:layout-changed",(c,u)=>{t===u.node&&i.current&&s(u.node.attributes.layout)});return()=>{a()}}},[n,i,t]),o},z=()=>l.useContext(r.ComponentPropertyContext),Z=e=>{const t=r.useContainer(),n=r.useRouter(),[o,s]=l.useState({name:"",params:{}}),i=r.useIsMounted();return l.useEffect(()=>{const a=(e||t).get("$widget");if(!a)return;const{events:c}=a;return c.subscribe("router:change",(m,{next:{routeData:h}})=>{if(i.current){const{name:p,params:b}=h;X(b),s({name:p,params:b})}})},[i,e,t]),l.useEffect(()=>{if(n&&n.history&&i.current){const a=n.getRouteData(),{name:c,params:u}=a;X(u),s({name:c,params:u})}},[n,i]),o};var _=(e=>(e.back="back",e.forth="forth",e))(_||{});const k=(e,t,n)=>typeof n[e]=="number"&&typeof n[t]=="number"&&n[e]>n[t]?"back":"forth",B=({views:e,location:t,render:n})=>d.jsx(A.Switch,{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:s}=e[o];return s?Array.isArray(s)?s.map(i=>d.jsx(A.Route,{exact:!0,path:i,render:()=>n(o)},o)):d.jsx(A.Route,{exact:!0,path:s,render:()=>n(o)},o):d.jsx(A.Route,{render:()=>n(o)},o)})}),ee=j.div`
+  position: relative;
+  width: 100%;
+  flex: 1;
+`,te=j(r.Grid)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  ${e=>!!e.animationCss&&e.animationCss}
+  ${e=>!!e.scrollableCss&&e.scrollableCss}
+`,ne={index:1,search:2,browse:3,guide:4,contact:5,"contact-method":6,conversation:7},se=({className:e="",...t})=>{const[n,o]=l.useState("index"),[s,i]=l.useState(_.forth),a=Z(),c=r.useRouter(),u=z(),m=r.useContext(),h=r.useContainer(),p=r.useComponentNode(),{gap:b="0"}=m,{columns:N=1,animation:v="none",scrollable:g=!1,...E}=u,[T,R]=r.useScroll(g);if(!p||!c)return null;const{location:O}=c;a.name!==n&&a.name!==""&&v&&(i(k(n,a.name,ne)),o(a.name));const{views:y}=h.get("$settings");if(!Object.keys(y).length)return null;const C=(f,S,P)=>{const x=q(S,P),D=p.getChildren(f)[0];return d.jsx(te,{...t,...E,scrollableCss:T,ref:R,columns:N,gap:b,...x,className:r.appendClassNames(e,"humany-view"),children:d.jsx(V,{id:D.id,branch:"default"})})},q=(f,S)=>{if(v==="slide"||v==="fade")return{animationCss:G.composeViewTransition(f,v,S),"data-state":f}};return d.jsx(ee,{className:"humany-animated-view",children:d.jsx(I.TransitionGroup,{component:null,childFactory:f=>l.cloneElement(f,{direction:s}),children:d.jsx(I.Transition,{timeout:{enter:500,exit:500},onEnter:f=>f==null?void 0:f.clientHeight,unmountOnExit:!0,direction:_.forth,children:(f,{direction:S})=>d.jsx(B,{views:y,location:O,render:P=>C(P,f,S)})},n)})})},oe=j(r.Grid)`
+    ${e=>!!e.scrollableCss&&e.scrollableCss}
+`,re=({className:e="",...t})=>{const n=z(),o=r.useContext(),s=r.useContainer(),i=r.useComponentNode(),{views:a}=s.get("$settings"),{gap:c="0"}=o,{columns:u=1,animation:m="none",scrollable:h=!1,...p}=n,[b,N]=r.useScroll(h);return i?d.jsx(oe,{...t,...p,scrollableCss:b,ref:N,columns:u,gap:c,className:r.appendClassNames(e,"humany-view"),children:d.jsx(B,{views:a,render:v=>{const g=i.getChildren(v)[0];return d.jsx(V,{id:g.id,node:g,branch:"default"})}})}):null},M=e=>{var t,n;return $.css`
+    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};
+    }
+  `}
+
+    ${((n=e.theme.fonts)==null?void 0:n.base)&&`
+    font-size: ${e.theme.fonts.base};
+  `}
+
+  &:focus-visible {
+        ${r.paddedBorderTabStyle(e)};
+    }
+`},ie=j(re)`
+    ${e=>M(e)}
+`,ae=j(se)`
+    ${e=>M(e)}
+`,ce=j.div`
+    text-align: center;
+    ${e=>{var t,n,o;return typeof((t=e.theme.colors)==null?void 0:t.warning)<"u"&&$.css`
+            color: ${(n=e.theme.colors)==null?void 0:n.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=>M(e)}
+`,ue=l.forwardRef(({className:e="",children:t,...n},o)=>{const s=J(),{name:i,type:a,id:c}=Y(),u=l.useMemo(()=>s?j(s)`
+                    ${M}
+                    ${r.filterCssPropsStyle}
+                `:null,[s]);return typeof s>"u"?null:s===null||u===null?process.env.NODE_ENV!=="production"?d.jsx(ce,{...n,title:`type: ${a}, definition-id: ${i}, instance-id: ${c}`,className:r.appendClassNames(e,"humany-non-resolved-component"),children:d.jsx(r.Typography,{variant:"h5",children:"Non Resolved Component Type"})}):null:d.jsx(l.Suspense,{fallback:null,children:d.jsx(u,{ref:o,...n,className:r.appendClassNames(e,"humany-component",`humany-component-${i}`),children:t})})}),le=e=>{const t=r.useComponentNode(e),n=r.useComponentPlatform(),[o,s]=l.useState({}),i=r.useIsMounted();return l.useEffect(()=>{t&&i.current&&s(t.attributes.properties)},[t,e,i]),l.useEffect(()=>{if(n){const a=n.events.subscribe("components:properties-changed",(c,u)=>{t===u.node&&i.current&&s(u.node.attributes.properties)});return()=>{a()}}},[n,i,e,t]),o},de=(e,t)=>t?!0:typeof e=="string"?e==="full":e>0,V=l.forwardRef(({className:e="",id:t,branch:n,node:o,ariaLabel:s,tabIndex:i,context:a,...c},u)=>{const m=r.useComponentPlatform(),h=r.useContainer(),[p,b]=l.useState(),N=U(),v=r.useContext(t),g=le(t),{size:E="none",indent:T=0}=Q(t),R=de(E,o);if(l.useEffect(()=>{if(m){if(t&&!o){const x=m.nodes.get(t);if(x&&(b(K(x,n)),R)){const D=x.mount(h);return()=>{D()}}}else if(o){b(K(o,n));const x=o.mount(h);return()=>{x()}}}},[m,t,o,R]),!p||!R)return null;const O={...v,...a||{}},{cardinal:y,fonts:C={},accessibility:q={},...f}=O,S={type:C.type,base:C.base||"16px",small:C.small||"0.8em",normal:C.normal||"1em",medium:C.medium||"1.2em",large:C.large||"1.6em",huge:C.huge||"2.5em"},P={...f,fonts:S,accessibility:{...q}};return typeof y=="number"&&(P.sizes={cardinal:y,small:`${y}px`,normal:`${y*3}px`,medium:`${y*5}px`,large:`${y*8}px`}),d.jsx($.ThemeProvider,{theme:P,children:d.jsx(r.ComponentNodeContext.Provider,{value:p,children:d.jsx(r.ComponentPropertyContext.Provider,{value:g,children:(()=>{const x={"data-width":E==="full"?N:Math.min(E,N),"data-indent":T,"data-name":p.name,"data-node-id":p.id,"data-component-type":p.type,"aria-label":s,tabIndex:i,id:p.id,role:g&&g.role,...c};switch(p.type){case"view":return typeof g.animation=="string"&&g.animation!=="none"?d.jsx(ae,{...x,className:e}):d.jsx(ie,{...x,className:e});default:{const D=r.filterCssProps(g);return d.jsx(ue,{ref:u,...x,...D,className:e})}}})()})})})});l.lazy(()=>Promise.resolve().then(()=>require("./detached-component-4dd7e2c3.js")));const me=e=>{const t=e.map(s=>"min-content").join(" "),n=e[0].split(" ").map(s=>"1fr").join(" "),o=e.map(s=>`'${s}'`).join(" ");return $.css`
+        grid-template-columns: ${n};
+        grid-template-rows: ${t};
+        grid-template-areas: ${o};
+    `},pe=e=>{const t=W(),n=l.useMemo(()=>Object.entries(e.areas).map(([o,s])=>{const i=t.find(a=>a.name===o);return r.isNestedGrid(s)?{name:o,componentDef:i,context:s.context,areaSettings:s.areaSettings,template:s.template,areas:s.areas,gap:s.gap}:{name:o,componentDef:i,areaSettings:s.areaSettings,child:s.child,context:s.context}}),[e,t]);return d.jsx(fe,{"data-grid-area":e.gridArea,gridArea:e.gridArea,gap:e.gap,template:e.template,className:r.appendClassNames(e.className,"humany-grid"),children:n.map(o=>o.componentDef?d.jsx(V,{id:o.componentDef.id,branch:"default",context:{}},o.componentDef.id):null)})},fe=j.div`
+    display: grid;
+    ${e=>e.gridArea&&$.css`
+            grid-area: ${e.gridArea};
+        `}
+    ${e=>me(e.template)}
+  ${e=>e.gap&&$.css`
+            grid-gap: ${e.gap}rem;
+        `}
+`,he=({className:e})=>{const t=z();return d.jsx(pe,{template:t.template,areas:t.areas,gap:t.gap,areaSettings:t.areaSettings,context:t.context})},ge=Object.freeze(Object.defineProperty({__proto__:null,default:he},Symbol.toStringTag,{value:"Module"}));exports.Component=V;exports.grid=ge;

package/grid-f0087a03.mjs

@@ -0,0 +1,549 @@
+import { jsx as l } from "react/jsx-runtime";
+import { css as C, ThemeProvider as se } from "@emotion/react";
+import { C as k, u as E, a as j, b as O, c as ie, d as ae, e as M, f as q, g as J, G as Q, h as H, i as Z, j as T, p as ce, k as le, T as ue, l as de, m as me } from "./index-fe430b79.mjs";
+import ee, { useContext as L, useState as v, useCallback as pe, useEffect as g, forwardRef as te, useMemo as ne, Suspense as fe } from "react";
+import "react-dom";
+import { TransitionGroup as he, Transition as ge } from "react-transition-group";
+import w from "@emotion/styled";
+import { Switch as be, Route as X } from "react-router";
+const ye = (e) => e === "entering" || e === "entered", $e = (e) => e === "exiting" || e === "exited", N = {
+  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);"
+  }
+}, xe = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"], Y = {
+  compose: (e = "exited", t) => {
+    const { enter: n, exit: r } = t, o = n.transitionKeys.split(" "), s = xe.indexOf(o[0]) > -1 ? "transform" : "opacity";
+    if (ye(e))
+      return o && o.length > 0 ? C`
+                    ${o && o.length > 0 && o.map((a) => N[a] ? N[a].in : "")}
+                    transition: ${s} ${n.duration}ms ${n.easing};
+                ` : "";
+    const i = o && o.length > 0 && C`
+                ${o.map((a) => N[a] ? N[a].out : "")}
+            `;
+    if ($e(e)) {
+      const a = r.transitionKeys.split(" ");
+      return a && a.length > 0 && e === "exiting" ? C`
+                    ${i};
+                    ${a.map((c) => N[c] ? N[c].out : "")}
+                    transition: ${s} ${r.duration}ms ${r.easing};
+                ` : i;
+    }
+  },
+  composeViewTransition: (e, t, n) => {
+    if (t === "slide")
+      return Y.compose(e, {
+        enter: {
+          transitionKeys: n === "forth" ? "slide-right" : "slide-left",
+          duration: 500
+        },
+        exit: {
+          transitionKeys: n === "forth" ? "slide-left" : "slide-right",
+          duration: 500
+        }
+      });
+    if (t === "fade")
+      return Y.compose(e, {
+        enter: {
+          transitionKeys: "fade",
+          duration: 500
+        },
+        exit: {
+          transitionKeys: "fade",
+          duration: 500
+        }
+      });
+  },
+  get: (e) => N[e]
+}, U = (e = {}) => (Object.keys(e).forEach((t) => {
+  (e[t] === null || typeof e[t] > "u") && delete e[t];
+}), e), oe = () => L(k), B = (e, t) => ({
+  id: e.id,
+  type: e.type,
+  name: e.name,
+  branch: t || "default"
+}), Ce = () => {
+  const e = E(), t = j(), [n, r] = v([]), o = O(), s = pe(
+    (i) => {
+      if (t && o.current && i) {
+        const a = t.getBranch(i), c = i.getChildren(a).map((u) => B(u));
+        r(c);
+      }
+    },
+    [o, t, r, e]
+  );
+  return g(() => {
+    e && s(e);
+  }, [e, t]), g(() => {
+    if (t) {
+      const [i, a] = ie(t.events);
+      return i("components:set-layout", (c, u) => {
+        (e === u.node.parent || u.node.parent === t.nodes.root) && s(u.node.parent);
+      }), i("components:node-appended", (c, u) => {
+        (e === u.node.parent || u.node.parent === t.nodes.root) && s(u.node.parent);
+      }), i("components:node-removed", (c, { parentNode: u }) => {
+        (u === e || u === t.nodes.root) && s(u);
+      }), () => {
+        a();
+      };
+    }
+  }, [e, t, s]), n;
+}, ve = () => L(ae), we = (e, t) => {
+  const n = oe(), r = M(), [o, s] = v(void 0), i = O(), a = e || n.type || "";
+  return g(() => {
+    if (a) {
+      let c;
+      return (t || r).getAsync("componentResolver").then((u) => {
+        if (i.current) {
+          const p = u.getComponent(a);
+          s(p);
+        }
+        c = u.registerResolver(a, (p) => {
+          i.current && s(p);
+        });
+      }), () => {
+        c && c();
+      };
+    }
+  }, [i, a, t, r]), o;
+}, Se = (e) => {
+  const t = E(e), n = j(), [r, o] = v({}), s = O();
+  return g(() => {
+    t && s.current && o(t.attributes.layout);
+  }, [t, s]), g(() => {
+    if (n) {
+      const i = n.events.subscribe(
+        "components:layout-changed",
+        (a, c) => {
+          t === c.node && s.current && o(c.node.attributes.layout);
+        }
+      );
+      return () => {
+        i();
+      };
+    }
+  }, [n, s, t]), r;
+}, W = () => L(q), Ne = (e) => {
+  const t = M(), n = J(), [r, o] = v({ name: "", params: {} }), s = O();
+  return g(() => {
+    const i = (e || t).get("$widget");
+    if (!i)
+      return;
+    const { events: a } = i;
+    return a.subscribe("router:change", (u, { next: { routeData: p } }) => {
+      if (s.current) {
+        const { name: d, params: b } = p;
+        U(b), o({ name: d, params: b });
+      }
+    });
+  }, [s, e, t]), g(() => {
+    if (n && n.history && s.current) {
+      const i = n.getRouteData(), { name: a, params: c } = i;
+      U(c), o({ name: a, params: c });
+    }
+  }, [n, s]), r;
+};
+var F = /* @__PURE__ */ ((e) => (e.back = "back", e.forth = "forth", e))(F || {});
+const De = (e, t, n) => typeof n[e] == "number" && typeof n[t] == "number" && n[e] > n[t] ? "back" : "forth", re = ({ views: e, location: t, render: n }) => /* @__PURE__ */ l(
+  be,
+  {
+    location: t && {
+      ...t,
+      pathname: t.pathname.split("?")[0]
+    },
+    children: [
+      ...Object.keys(e).filter((r) => !!e[r].path),
+      ...Object.keys(e).filter((r) => !e[r].path)
+    ].map((r) => {
+      const { path: o } = e[r];
+      return o ? Array.isArray(o) ? o.map((s) => /* @__PURE__ */ l(X, { exact: !0, path: s, render: () => n(r) }, r)) : /* @__PURE__ */ l(X, { exact: !0, path: o, render: () => n(r) }, r) : /* @__PURE__ */ l(X, { render: () => n(r) }, r);
+    })
+  }
+), Pe = w.div`
+  position: relative;
+  width: 100%;
+  flex: 1;
+`, Ae = w(Q)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  ${(e) => !!e.animationCss && e.animationCss}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, Ve = {
+  index: 1,
+  search: 2,
+  browse: 3,
+  guide: 4,
+  contact: 5,
+  "contact-method": 6,
+  conversation: 7
+}, Re = ({ className: e = "", ...t }) => {
+  const [n, r] = v("index"), [o, s] = v(
+    F.forth
+  ), i = Ne(), a = J(), c = W(), u = H(), p = M(), d = E(), { gap: b = "0" } = u, {
+    columns: D = 1,
+    animation: x = "none",
+    scrollable: f = !1,
+    ...A
+  } = c, [G, V] = Z(f);
+  if (!d || !a)
+    return null;
+  const { location: _ } = a;
+  i.name !== n && i.name !== "" && x && (s(
+    De(n, i.name, Ve)
+  ), r(i.name));
+  const { views: y } = p.get("$settings");
+  if (!Object.keys(y).length)
+    return null;
+  const $ = (m, S, P) => {
+    const h = z(S, P), R = d.getChildren(m)[0];
+    return /* @__PURE__ */ l(
+      Ae,
+      {
+        ...t,
+        ...A,
+        scrollableCss: G,
+        ref: V,
+        columns: D,
+        gap: b,
+        ...h,
+        className: T(e, "humany-view"),
+        children: /* @__PURE__ */ l(I, { id: R.id, branch: "default" })
+      }
+    );
+  }, z = (m, S) => {
+    if (x === "slide" || x === "fade")
+      return {
+        animationCss: Y.composeViewTransition(
+          m,
+          x,
+          S
+        ),
+        "data-state": m
+      };
+  };
+  return /* @__PURE__ */ l(Pe, { className: "humany-animated-view", children: /* @__PURE__ */ l(
+    he,
+    {
+      component: null,
+      childFactory: (m) => ee.cloneElement(m, { direction: o }),
+      children: /* @__PURE__ */ l(
+        ge,
+        {
+          timeout: { enter: 500, exit: 500 },
+          onEnter: (m) => m == null ? void 0 : m.clientHeight,
+          unmountOnExit: !0,
+          direction: F.forth,
+          children: (m, { direction: S }) => /* @__PURE__ */ l(
+            re,
+            {
+              views: y,
+              location: _,
+              render: (P) => $(P, m, S)
+            }
+          )
+        },
+        n
+      )
+    }
+  ) });
+}, Te = w(Q)`
+    ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, Ee = ({ className: e = "", ...t }) => {
+  const n = W(), r = H(), o = M(), s = E(), { views: i } = o.get("$settings"), { gap: a = "0" } = r, { columns: c = 1, animation: u = "none", scrollable: p = !1, ...d } = n, [b, D] = Z(p);
+  return s ? /* @__PURE__ */ l(
+    Te,
+    {
+      ...t,
+      ...d,
+      scrollableCss: b,
+      ref: D,
+      columns: c,
+      gap: a,
+      className: T(e, "humany-view"),
+      children: /* @__PURE__ */ l(
+        re,
+        {
+          views: i,
+          render: (x) => {
+            const f = s.getChildren(x)[0];
+            return /* @__PURE__ */ l(I, { id: f.id, node: f, branch: "default" });
+          }
+        }
+      )
+    }
+  ) : null;
+}, K = (e) => {
+  var t, n;
+  return C`
+    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};
+    }
+  `}
+
+    ${((n = e.theme.fonts) == null ? void 0 : n.base) && `
+    font-size: ${e.theme.fonts.base};
+  `}
+
+  &:focus-visible {
+        ${ce(e)};
+    }
+`;
+}, Oe = w(Ee)`
+    ${(e) => K(e)}
+`, Me = w(Re)`
+    ${(e) => K(e)}
+`, je = w.div`
+    text-align: center;
+    ${(e) => {
+  var t, n, r;
+  return typeof ((t = e.theme.colors) == null ? void 0 : t.warning) < "u" && C`
+            color: ${(n = e.theme.colors) == null ? void 0 : n.warning};
+            border: 2px dashed ${(r = e.theme.colors) == null ? void 0 : r.warning};
+        `;
+}}
+    ${(e) => typeof e.theme.borderRadius < "u" && `border-radius: ${e.theme.borderRadius};`}
+  ${(e) => K(e)}
+`, Ke = te(
+  ({ className: e = "", children: t, ...n }, r) => {
+    const o = we(), { name: s, type: i, id: a } = oe(), c = ne(() => o ? w(o)`
+                    ${K}
+                    ${le}
+                ` : null, [o]);
+    return typeof o > "u" ? null : o === null || c === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ l(
+      je,
+      {
+        ...n,
+        title: `type: ${i}, definition-id: ${s}, instance-id: ${a}`,
+        className: T(e, "humany-non-resolved-component"),
+        children: /* @__PURE__ */ l(ue, { variant: "h5", children: "Non Resolved Component Type" })
+      }
+    ) : null : /* @__PURE__ */ l(fe, { fallback: null, children: /* @__PURE__ */ l(
+      c,
+      {
+        ref: r,
+        ...n,
+        className: T(
+          e,
+          "humany-component",
+          `humany-component-${s}`
+        ),
+        children: t
+      }
+    ) });
+  }
+), Ge = (e) => {
+  const t = E(e), n = j(), [r, o] = v({}), s = O();
+  return g(() => {
+    t && s.current && o(t.attributes.properties);
+  }, [t, e, s]), g(() => {
+    if (n) {
+      const i = n.events.subscribe(
+        "components:properties-changed",
+        (a, c) => {
+          t === c.node && s.current && o(c.node.attributes.properties);
+        }
+      );
+      return () => {
+        i();
+      };
+    }
+  }, [n, s, e, t]), r;
+}, _e = (e, t) => t ? !0 : typeof e == "string" ? e === "full" : e > 0, I = te(
+  ({
+    className: e = "",
+    id: t,
+    branch: n,
+    node: r,
+    ariaLabel: o,
+    tabIndex: s,
+    context: i,
+    ...a
+  }, c) => {
+    const u = j(), p = M(), [d, b] = v(), D = ve(), x = H(t), f = Ge(t), { size: A = "none", indent: G = 0 } = Se(t), V = _e(A, r);
+    if (g(() => {
+      if (u) {
+        if (t && !r) {
+          const h = u.nodes.get(t);
+          if (h && (b(B(h, n)), V)) {
+            const R = h.mount(p);
+            return () => {
+              R();
+            };
+          }
+        } else if (r) {
+          b(B(r, n));
+          const h = r.mount(p);
+          return () => {
+            h();
+          };
+        }
+      }
+    }, [u, t, r, V]), !d || !V)
+      return null;
+    const _ = { ...x, ...i || {} }, {
+      cardinal: y,
+      fonts: $ = {},
+      accessibility: z = {},
+      ...m
+    } = _, S = {
+      type: $.type,
+      base: $.base || "16px",
+      small: $.small || "0.8em",
+      normal: $.normal || "1em",
+      medium: $.medium || "1.2em",
+      large: $.large || "1.6em",
+      huge: $.huge || "2.5em"
+    }, P = {
+      ...m,
+      fonts: S,
+      accessibility: {
+        ...z
+      }
+    };
+    return typeof y == "number" && (P.sizes = {
+      cardinal: y,
+      small: `${y}px`,
+      normal: `${y * 3}px`,
+      medium: `${y * 5}px`,
+      large: `${y * 8}px`
+    }), /* @__PURE__ */ l(se, { theme: P, children: /* @__PURE__ */ l(k.Provider, { value: d, children: /* @__PURE__ */ l(q.Provider, { value: f, children: (() => {
+      const h = {
+        "data-width": A === "full" ? D : Math.min(A, D),
+        "data-indent": G,
+        "data-name": d.name,
+        "data-node-id": d.id,
+        "data-component-type": d.type,
+        "aria-label": o,
+        tabIndex: s,
+        id: d.id,
+        role: f && f.role,
+        ...a
+      };
+      switch (d.type) {
+        case "view":
+          return typeof f.animation == "string" && f.animation !== "none" ? /* @__PURE__ */ l(Me, { ...h, className: e }) : /* @__PURE__ */ l(Oe, { ...h, className: e });
+        default: {
+          const R = de(f);
+          return /* @__PURE__ */ l(
+            Ke,
+            {
+              ref: c,
+              ...h,
+              ...R,
+              className: e
+            }
+          );
+        }
+      }
+    })() }) }) });
+  }
+);
+ee.lazy(() => import("./detached-component-ccd8259a.mjs"));
+const ze = (e) => {
+  const t = e.map((o) => "min-content").join(" "), n = e[0].split(" ").map((o) => "1fr").join(" "), r = e.map((o) => `'${o}'`).join(" ");
+  return C`
+        grid-template-columns: ${n};
+        grid-template-rows: ${t};
+        grid-template-areas: ${r};
+    `;
+}, Xe = (e) => {
+  const t = Ce(), n = ne(() => Object.entries(e.areas).map(([r, o]) => {
+    const s = t.find((i) => i.name === r);
+    return me(o) ? {
+      name: r,
+      componentDef: s,
+      context: o.context,
+      areaSettings: o.areaSettings,
+      template: o.template,
+      areas: o.areas,
+      gap: o.gap
+    } : {
+      name: r,
+      componentDef: s,
+      areaSettings: o.areaSettings,
+      child: o.child,
+      context: o.context
+    };
+  }), [e, t]);
+  return /* @__PURE__ */ l(
+    Ye,
+    {
+      "data-grid-area": e.gridArea,
+      gridArea: e.gridArea,
+      gap: e.gap,
+      template: e.template,
+      className: T(e.className, "humany-grid"),
+      children: n.map((r) => r.componentDef ? /* @__PURE__ */ l(
+        I,
+        {
+          id: r.componentDef.id,
+          branch: "default",
+          context: {}
+        },
+        r.componentDef.id
+      ) : null)
+    }
+  );
+}, Ye = w.div`
+    display: grid;
+    ${(e) => e.gridArea && C`
+            grid-area: ${e.gridArea};
+        `}
+    ${(e) => ze(e.template)}
+  ${(e) => e.gap && C`
+            grid-gap: ${e.gap}rem;
+        `}
+`, Be = ({ className: e }) => {
+  const t = W();
+  return /* @__PURE__ */ l(
+    Xe,
+    {
+      template: t.template,
+      areas: t.areas,
+      gap: t.gap,
+      areaSettings: t.areaSettings,
+      context: t.context
+    }
+  );
+}, Je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Be
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  I as C,
+  Je as g
+};