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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,14 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("@telia-ace/widget-ui"),s=require("@emotion/react"),g=require("@emotion/styled"),m=require("@telia-ace/widget-types-grid"),l=require("@telia-ace/widget-utilities"),u=require("react"),p=require("./index-fd0bf089.js");require("@telia-ace/widget-core");const x=e=>{const r=e.map(t=>"min-content").join(" "),a=e[0].split(" ").map(t=>"1fr").join(" "),n=e.map(t=>`'${t}'`).join(" ");return s.css`
2
+ grid-template-columns: ${a};
3
+ grid-template-rows: ${r};
4
+ grid-template-areas: ${n};
5
+ `},f=e=>{const r=o.useChildren(),a=u.useMemo(()=>Object.entries(e.areas).map(([n,t])=>{const c=r.find(d=>d.name===n);return p.isNestedGrid(t)?{name:n,componentDef:c,context:t.context,areaSettings:t.areaSettings,template:t.template,areas:t.areas,gap:t.gap}:{name:n,componentDef:c,areaSettings:t.areaSettings,child:t.child,context:t.context}}),[e,r]);return i.jsx($,{"data-grid-area":e.gridArea,gridArea:e.gridArea,gap:e.gap,template:e.template,className:l.appendClassNames(e.className,"humany-grid"),children:a.map(n=>n.componentDef?i.jsx(m.Component,{id:n.componentDef.id,branch:"default",context:{}},n.componentDef.id):null)})},$=g.div`
6
+ display: grid;
7
+ ${e=>e.gridArea&&s.css`
8
+ grid-area: ${e.gridArea};
9
+ `}
10
+ ${e=>x(e.template)}
11
+ ${e=>e.gap&&s.css`
12
+ grid-gap: ${e.gap}rem;
13
+ `}
14
+ `,j=({className:e})=>{const r=o.useProperties();return i.jsx(f,{template:r.template,areas:r.areas,gap:r.gap,areaSettings:r.areaSettings,context:r.context})};exports.default=j;
@@ -0,0 +1,79 @@
1
+ import { jsx as i } from "react/jsx-runtime";
2
+ import { useChildren as c, useProperties as d } from "@telia-ace/widget-ui";
3
+ import { css as o } from "@emotion/react";
4
+ import p from "@emotion/styled";
5
+ import { Component as g } from "@telia-ace/widget-types-grid";
6
+ import { appendClassNames as l } from "@telia-ace/widget-utilities";
7
+ import { useMemo as f } from "react";
8
+ import { i as u } from "./index-580deb6d.mjs";
9
+ import "@telia-ace/widget-core";
10
+ const x = (e) => {
11
+ const r = e.map((t) => "min-content").join(" "), n = e[0].split(" ").map((t) => "1fr").join(" "), a = e.map((t) => `'${t}'`).join(" ");
12
+ return o`
13
+ grid-template-columns: ${n};
14
+ grid-template-rows: ${r};
15
+ grid-template-areas: ${a};
16
+ `;
17
+ }, $ = (e) => {
18
+ const r = c(), n = f(() => Object.entries(e.areas).map(([a, t]) => {
19
+ const s = r.find((m) => m.name === a);
20
+ return u(t) ? {
21
+ name: a,
22
+ componentDef: s,
23
+ context: t.context,
24
+ areaSettings: t.areaSettings,
25
+ template: t.template,
26
+ areas: t.areas,
27
+ gap: t.gap
28
+ } : {
29
+ name: a,
30
+ componentDef: s,
31
+ areaSettings: t.areaSettings,
32
+ child: t.child,
33
+ context: t.context
34
+ };
35
+ }), [e, r]);
36
+ return /* @__PURE__ */ i(
37
+ h,
38
+ {
39
+ "data-grid-area": e.gridArea,
40
+ gridArea: e.gridArea,
41
+ gap: e.gap,
42
+ template: e.template,
43
+ className: l(e.className, "humany-grid"),
44
+ children: n.map((a) => a.componentDef ? /* @__PURE__ */ i(
45
+ g,
46
+ {
47
+ id: a.componentDef.id,
48
+ branch: "default",
49
+ context: {}
50
+ },
51
+ a.componentDef.id
52
+ ) : null)
53
+ }
54
+ );
55
+ }, h = p.div`
56
+ display: grid;
57
+ ${(e) => e.gridArea && o`
58
+ grid-area: ${e.gridArea};
59
+ `}
60
+ ${(e) => x(e.template)}
61
+ ${(e) => e.gap && o`
62
+ grid-gap: ${e.gap}rem;
63
+ `}
64
+ `, _ = ({ className: e }) => {
65
+ const r = d();
66
+ return /* @__PURE__ */ i(
67
+ $,
68
+ {
69
+ template: r.template,
70
+ areas: r.areas,
71
+ gap: r.gap,
72
+ areaSettings: r.areaSettings,
73
+ context: r.context
74
+ }
75
+ );
76
+ };
77
+ export {
78
+ _ as default
79
+ };
@@ -0,0 +1,63 @@
1
+ import { createReactComponent as N } from "@telia-ace/widget-ui";
2
+ import { createChildren as h } from "@telia-ace/widget-core";
3
+ import { Logger as O } from "@telia-ace/widget-utilities";
4
+ const I = (i) => !!i.template, L = (i) => N(i, "grid", import("./grid-29fcfd00.mjs"), (d) => {
5
+ }), P = (i, d) => {
6
+ var m, g, x, l;
7
+ const { platform: s, node: u, references: j, definitions: p, views: f, branch: b } = d, e = p[i.definitionId];
8
+ if (process.env.NODE_ENV !== "production" && !e) {
9
+ O.error(`No definition found for component type '${i.definitionId}'.`);
10
+ return;
11
+ }
12
+ const t = s.createNode(e.type);
13
+ if (t.name = i.definitionId, t.tags = e.tags || [], e.properties && t.writeProperties(e.properties), e.context && t.writeContext(e.context), e.layout && t.writeLayout(e.layout), u.appendChild(t, b), i.overrides.forEach((r) => {
14
+ const n = { breakpoints: r.breakpoints };
15
+ r.properties && t.writeProperties(r.properties, n), r.context && t.writeContext(r.context, n), r.layout && t.writeLayout(r.layout, n);
16
+ }), (m = e.properties) != null && m.areas && ((g = e.properties) != null && g.areas)) {
17
+ const r = Object.entries(e.properties.areas).reduce(
18
+ (n, [a, o]) => {
19
+ if (o.child) {
20
+ const c = Object.entries(o.areaSettings || {}).reduce((y, [w, C]) => (y[`css-${w}`] = C, y), {});
21
+ n[a] = {
22
+ type: "area",
23
+ context: o.context || {},
24
+ children: [o.child],
25
+ properties: {
26
+ "css-grid-area": a,
27
+ ...c
28
+ }
29
+ };
30
+ } else {
31
+ const c = {
32
+ type: "grid",
33
+ context: {},
34
+ properties: {
35
+ areaSettings: {},
36
+ areas: o.areas,
37
+ context: o.context,
38
+ gap: o.gap,
39
+ gridArea: o.gridArea,
40
+ template: o.template
41
+ }
42
+ };
43
+ n[a] = c;
44
+ }
45
+ return n;
46
+ },
47
+ p
48
+ );
49
+ h(
50
+ s,
51
+ t,
52
+ Object.keys(e.properties.areas),
53
+ r,
54
+ f
55
+ );
56
+ } else
57
+ (x = e.properties) != null && x.child && h(s, t, [(l = e.properties) == null ? void 0 : l.child], p, f);
58
+ };
59
+ export {
60
+ L as G,
61
+ P as g,
62
+ I as i
63
+ };
@@ -0,0 +1 @@
1
+ "use strict";const N=require("@telia-ace/widget-ui"),C=require("@telia-ace/widget-core"),q=require("@telia-ace/widget-utilities"),G=o=>!!o.template,O=o=>N.createReactComponent(o,"grid",Promise.resolve().then(()=>require("./grid-0e98e1b2.js")),d=>{}),P=(o,d)=>{var g,m,l,u;const{platform:s,node:h,references:j,definitions:p,views:f,branch:w}=d,e=p[o.definitionId];if(process.env.NODE_ENV!=="production"&&!e){q.Logger.error(`No definition found for component type '${o.definitionId}'.`);return}const t=s.createNode(e.type);if(t.name=o.definitionId,t.tags=e.tags||[],e.properties&&t.writeProperties(e.properties),e.context&&t.writeContext(e.context),e.layout&&t.writeLayout(e.layout),h.appendChild(t,w),o.overrides.forEach(r=>{const n={breakpoints:r.breakpoints};r.properties&&t.writeProperties(r.properties,n),r.context&&t.writeContext(r.context,n),r.layout&&t.writeLayout(r.layout,n)}),(g=e.properties)!=null&&g.areas&&((m=e.properties)!=null&&m.areas)){const r=Object.entries(e.properties.areas).reduce((n,[c,i])=>{if(i.child){const a=Object.entries(i.areaSettings||{}).reduce((x,[y,b])=>(x[`css-${y}`]=b,x),{});n[c]={type:"area",context:i.context||{},children:[i.child],properties:{"css-grid-area":c,...a}}}else{const a={type:"grid",context:{},properties:{areaSettings:{},areas:i.areas,context:i.context,gap:i.gap,gridArea:i.gridArea,template:i.template}};n[c]=a}return n},p);C.createChildren(s,t,Object.keys(e.properties.areas),r,f)}else(l=e.properties)!=null&&l.child&&C.createChildren(s,t,[(u=e.properties)==null?void 0:u.child],p,f)};exports.GridComponent=O;exports.gridComponentHandler=P;exports.isNestedGrid=G;
package/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index-2542500f.js");require("@emotion/react");require("react/jsx-runtime");require("react");require("@emotion/styled");require("react-transition-group");require("react-dom");require("react-router-dom");exports.default=e.GridComponent;exports.gridComponentHandler=e.gridComponentHandler;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index-fd0bf089.js");require("@telia-ace/widget-ui");require("@telia-ace/widget-core");require("@telia-ace/widget-utilities");exports.default=e.GridComponent;exports.gridComponentHandler=e.gridComponentHandler;
package/index.mjs CHANGED
@@ -1,12 +1,8 @@
1
- import { n as d, o as f } from "./index-fe430b79.mjs";
2
- import "@emotion/react";
3
- import "react/jsx-runtime";
4
- import "react";
5
- import "@emotion/styled";
6
- import "react-transition-group";
7
- import "react-dom";
8
- import "react-router-dom";
1
+ import { G as a, g as e } from "./index-580deb6d.mjs";
2
+ import "@telia-ace/widget-ui";
3
+ import "@telia-ace/widget-core";
4
+ import "@telia-ace/widget-utilities";
9
5
  export {
10
- d as default,
11
- f as gridComponentHandler
6
+ a as default,
7
+ e as gridComponentHandler
12
8
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telia-ace/widget-components-grid",
3
- "version": "1.1.1-rc.2",
3
+ "version": "1.1.1-rc.3",
4
4
  "main": "./index.js",
5
5
  "types": "./index.d.ts",
6
6
  "exports": {
@@ -10,10 +10,10 @@
10
10
  }
11
11
  },
12
12
  "dependencies": {
13
- "@telia-ace/widget-core": "^1.1.1-rc.2",
14
- "@telia-ace/widget-types-grid": "^1.1.1-rc.2",
15
- "@telia-ace/widget-ui": "^1.1.1-rc.2",
16
- "@telia-ace/widget-utilities": "^1.1.1-rc.2",
13
+ "@telia-ace/widget-core": "^1.1.1-rc.3",
14
+ "@telia-ace/widget-types-grid": "^1.1.1-rc.3",
15
+ "@telia-ace/widget-ui": "^1.1.1-rc.3",
16
+ "@telia-ace/widget-utilities": "^1.1.1-rc.3",
17
17
  "@webprovisions/platform": "^1.1.4"
18
18
  },
19
19
  "peerDependencies": {
@@ -1 +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;
@@ -1,27 +0,0 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import "@emotion/react";
3
- import { e as d } from "./index-fe430b79.mjs";
4
- import { useState as p, useEffect as r } from "react";
5
- import "react-dom";
6
- import "react-transition-group";
7
- import { C as a } from "./grid-f0087a03.mjs";
8
- import "@emotion/styled";
9
- import "react-router-dom";
10
- import "react-router";
11
- const b = ({ builder: i }) => {
12
- const n = d(), [t, m] = p(null);
13
- return r(() => {
14
- n.getAsync("components").then((e) => i(e).then((o) => {
15
- m(o);
16
- }));
17
- }, []), r(() => () => {
18
- t && n.getAsync("components").then((e) => {
19
- e.nodes.detached = e.nodes.detached.filter(
20
- (o) => o.id !== t.id
21
- );
22
- });
23
- }, [t]), t ? /* @__PURE__ */ s(a, { id: t.id, node: t, branch: "default" }) : null;
24
- };
25
- export {
26
- b as default
27
- };
package/grid-3ce6ef77.js DELETED
@@ -1,75 +0,0 @@
1
- "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`
2
- ${s&&s.length>0&&s.map(c=>w[c]?w[c].in:"")}
3
- transition: ${i} ${n.duration}ms ${n.easing};
4
- `:"";const a=s&&s.length>0&&$.css`
5
- ${s.map(c=>w[c]?w[c].out:"")}
6
- `;if(H(e)){const c=o.transitionKeys.split(" ");return c&&c.length>0&&e==="exiting"?$.css`
7
- ${a};
8
- ${c.map(u=>w[u]?w[u].out:"")}
9
- transition: ${i} ${o.duration}ms ${o.easing};
10
- `: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`
11
- position: relative;
12
- width: 100%;
13
- flex: 1;
14
- `,te=j(r.Grid)`
15
- position: absolute;
16
- left: 0;
17
- right: 0;
18
- ${e=>!!e.animationCss&&e.animationCss}
19
- ${e=>!!e.scrollableCss&&e.scrollableCss}
20
- `,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)`
21
- ${e=>!!e.scrollableCss&&e.scrollableCss}
22
- `,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`
23
- outline: none;
24
- box-sizing: border-box;
25
- * {
26
- box-sizing: border-box;
27
- outline: none;
28
- }
29
-
30
- grid-column: ${e["data-indent"]?`${e["data-indent"]+1} / ${e["data-indent"]+(e["data-width"]||0)+1}`:`span ${e["data-width"]}`};
31
-
32
- ${((t=e.theme.fonts)==null?void 0:t.type)&&`
33
- font-family: ${e.theme.fonts.type};
34
-
35
- input, textarea {
36
- font-family: ${e.theme.fonts.type};
37
- }
38
- `}
39
-
40
- ${((n=e.theme.fonts)==null?void 0:n.base)&&`
41
- font-size: ${e.theme.fonts.base};
42
- `}
43
-
44
- &:focus-visible {
45
- ${r.paddedBorderTabStyle(e)};
46
- }
47
- `},ie=j(re)`
48
- ${e=>M(e)}
49
- `,ae=j(se)`
50
- ${e=>M(e)}
51
- `,ce=j.div`
52
- text-align: center;
53
- ${e=>{var t,n,o;return typeof((t=e.theme.colors)==null?void 0:t.warning)<"u"&&$.css`
54
- color: ${(n=e.theme.colors)==null?void 0:n.warning};
55
- border: 2px dashed ${(o=e.theme.colors)==null?void 0:o.warning};
56
- `}}
57
- ${e=>typeof e.theme.borderRadius<"u"&&`border-radius: ${e.theme.borderRadius};`}
58
- ${e=>M(e)}
59
- `,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)`
60
- ${M}
61
- ${r.filterCssPropsStyle}
62
- `: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`
63
- grid-template-columns: ${n};
64
- grid-template-rows: ${t};
65
- grid-template-areas: ${o};
66
- `},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`
67
- display: grid;
68
- ${e=>e.gridArea&&$.css`
69
- grid-area: ${e.gridArea};
70
- `}
71
- ${e=>me(e.template)}
72
- ${e=>e.gap&&$.css`
73
- grid-gap: ${e.gap}rem;
74
- `}
75
- `,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;