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

package/area-b06f88a6.mjs

@@ -0,0 +1,165 @@
+import { jsx as n, jsxs as G } from "react/jsx-runtime";
+import { css as S } from "@emotion/react";
+import m from "@emotion/styled";
+import { WidgetRenderState as c } from "@telia-ace/widget-core";
+import { genericComponentStyling as T, Component as v } from "@telia-ace/widget-types-grid";
+import { TransitionComponent as q, Grid as P, useComponentDescriptor as F, useRenderState as H, useContext as I, useProperties as J, useChildren as K, useContainer as Q, useScroll as U, createEmptyComponent as V, ColumnContext as w, filterCssProps as X, Dropdown as Y, DrawerAnimationType as Z, Drawer as _, Button as ee, filterCssPropsStyle as te, paddedBorderTabStyle as ne, Text as re, SymbolBadge as oe } from "@telia-ace/widget-ui";
+import { appendClassNames as y, Logger as ie } from "@telia-ace/widget-utilities";
+import { forwardRef as se, useCallback as ae } from "react";
+import { A as l } from "./index-3084db92.mjs";
+const le = se(
+  ({ children: e, className: t, renderState: o, animation: i, ...f }, s) => o ? /* @__PURE__ */ n(
+    q,
+    {
+      mountOnEnter: o !== c.hidden,
+      timeout: 200,
+      in: o === c.open,
+      transitions: i,
+      unmountOnExit: o === c.closed,
+      children: (a, d) => /* @__PURE__ */ n(
+        ce,
+        {
+          ...f,
+          animationCss: d,
+          "data-state": a,
+          ref: s,
+          className: y("humany-animated-area", t),
+          children: e
+        }
+      )
+    }
+  ) : null
+), ce = m(P)`
+    ${T}
+    ${(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" && S`
+            visibility: collapse;
+            pointer-events: none;
+        `};
+`, we = ({ className: e, ...t }) => {
+  const { name: o } = F(), i = H(), f = I(), s = J(), a = K(), d = Q(), { gap: A = "0" } = f, {
+    columns: h = 1,
+    animation: u = "none",
+    scrollable: D = !1,
+    mode: p = l.Static,
+    trigger: j = {},
+    fullScreen: z,
+    header: B,
+    ...N
+  } = s, { size: R = 24, symbol: C, label: b, ariaLabel: E, ...L } = j, [O, W] = U(D), M = ae(
+    (r) => {
+      const { events: k } = d.get("$widget");
+      return k.dispatch("widget:area-rendered", {
+        name: o,
+        properties: s,
+        element: r
+      }), W.current = r, r;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [s, i]
+  );
+  if (!a.length)
+    return V(d, {
+      ...t,
+      className: y(e, "humany-area")
+    });
+  const $ = {
+    ...t,
+    className: y(
+      e,
+      "humany-area",
+      `humany-area-${o}`
+    ),
+    scrollableCss: O,
+    ...N,
+    columns: h,
+    gap: A,
+    renderState: i,
+    animation: u,
+    hidden: i === c.hidden,
+    ref: M
+  }, g = (() => u !== "none" ? /* @__PURE__ */ n(w.Provider, { value: h, children: /* @__PURE__ */ n(le, { ...$, children: a.map((r) => /* @__PURE__ */ n(v, { id: r.id, branch: "default" }, r.id)) }) }) : i === c.closed ? null : /* @__PURE__ */ n(w.Provider, { value: h, children: /* @__PURE__ */ n(pe, { ...$, children: a.map((r) => /* @__PURE__ */ n(v, { id: r.id, branch: "default" }, r.id)) }) }))();
+  if (p === l.Static)
+    return g;
+  const x = /* @__PURE__ */ G(
+    me,
+    {
+      className: "humany-area-trigger",
+      title: E,
+      ...X(L),
+      children: [
+        b && /* @__PURE__ */ n(de, { children: b }),
+        C && /* @__PURE__ */ n(ue, { symbol: C, size: R })
+      ]
+    }
+  );
+  if (p === l.Dropdown)
+    return /* @__PURE__ */ n(Y, { trigger: x, children: g });
+  if (p === l.Drawer) {
+    const r = Object.values(Z).includes(u) && {
+      type: u
+    } || void 0;
+    return /* @__PURE__ */ n(
+      _,
+      {
+        header: B,
+        animation: r,
+        fullScreen: z,
+        trigger: x,
+        children: g
+      }
+    );
+  }
+  return p === l.Modal && ie.warn("modal area not implemented"), null;
+}, me = m(ee)`
+  display: flex;
+  align-items: inherit;
+  align-self: center;
+  width: fit-content;
+  height: fit-content;
+  ${te}
+
+  ${(e) => e.theme.fonts && `
+    font-family: ${e.theme.fonts.type};
+    font-size: ${e.theme.fonts.normal};
+  `}
+
+  &:focus-visible {
+    ${ne};
+  }
+`, de = m(re)`
+  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;
+}};
+`, ue = m(oe)`
+  path {
+    fill: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  }
+`, pe = m(P)`
+  ${T}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  ${(e) => e.hidden && S`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`;
+export {
+  we as default
+};

package/area-f44ede7c.js

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),w=require("@emotion/react"),u=require("@emotion/styled"),c=require("@telia-ace/widget-core"),f=require("@telia-ace/widget-types-grid"),t=require("@telia-ace/widget-ui"),h=require("@telia-ace/widget-utilities"),v=require("react"),d=require("./index-e0918d07.js"),G=v.forwardRef(({children:e,className:n,renderState:i,animation:o,...C},a)=>i?r.jsx(t.TransitionComponent,{mountOnEnter:i!==c.WidgetRenderState.hidden,timeout:200,in:i===c.WidgetRenderState.open,transitions:o,unmountOnExit:i===c.WidgetRenderState.closed,children:(l,m)=>r.jsx(L,{...C,animationCss:m,"data-state":l,ref:a,className:h.appendClassNames("humany-animated-area",n),children:e})}):null),L=u(t.Grid)`
+    ${f.genericComponentStyling}
+    ${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"&&w.css`
+            visibility: collapse;
+            pointer-events: none;
+        `};
+`,U=({className:e,...n})=>{const{name:i}=t.useComponentDescriptor(),o=t.useRenderState(),C=t.useContext(),a=t.useProperties(),l=t.useChildren(),m=t.useContainer(),{gap:T="0"}=C,{columns:x=1,animation:g="none",scrollable:q=!1,mode:p=d.AreaMode.Static,trigger:A={},fullScreen:R,header:P,...M}=a,{size:W=24,symbol:b,label:$,ariaLabel:D,...N}=A,[z,B]=t.useScroll(q),O=v.useCallback(s=>{const{events:E}=m.get("$widget");return E.dispatch("widget:area-rendered",{name:i,properties:a,element:s}),B.current=s,s},[a,o]);if(!l.length)return t.createEmptyComponent(m,{...n,className:h.appendClassNames(e,"humany-area")});const j={...n,className:h.appendClassNames(e,"humany-area",`humany-area-${i}`),scrollableCss:z,...M,columns:x,gap:T,renderState:o,animation:g,hidden:o===c.WidgetRenderState.hidden,ref:O},y=(()=>g!=="none"?r.jsx(t.ColumnContext.Provider,{value:x,children:r.jsx(G,{...j,children:l.map(s=>r.jsx(f.Component,{id:s.id,branch:"default"},s.id))})}):o===c.WidgetRenderState.closed?null:r.jsx(t.ColumnContext.Provider,{value:x,children:r.jsx(I,{...j,children:l.map(s=>r.jsx(f.Component,{id:s.id,branch:"default"},s.id))})}))();if(p===d.AreaMode.Static)return y;const S=r.jsxs(k,{className:"humany-area-trigger",title:D,...t.filterCssProps(N),children:[$&&r.jsx(F,{children:$}),b&&r.jsx(H,{symbol:b,size:W})]});if(p===d.AreaMode.Dropdown)return r.jsx(t.Dropdown,{trigger:S,children:y});if(p===d.AreaMode.Drawer){const s=Object.values(t.DrawerAnimationType).includes(g)&&{type:g}||void 0;return r.jsx(t.Drawer,{header:P,animation:s,fullScreen:R,trigger:S,children:y})}return p===d.AreaMode.Modal&&h.Logger.warn("modal area not implemented"),null},k=u(t.Button)`
+  display: flex;
+  align-items: inherit;
+  align-self: center;
+  width: fit-content;
+  height: fit-content;
+  ${t.filterCssPropsStyle}
+
+  ${e=>e.theme.fonts&&`
+    font-family: ${e.theme.fonts.type};
+    font-size: ${e.theme.fonts.normal};
+  `}
+
+  &:focus-visible {
+    ${t.paddedBorderTabStyle};
+  }
+`,F=u(t.Text)`
+  margin: 0 ${e=>{var n;return(n=e.theme.sizes)==null?void 0:n.small}} 0 0;
+  color: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
+`,H=u(t.SymbolBadge)`
+  path {
+    fill: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
+  }
+`,I=u(t.Grid)`
+  ${f.genericComponentStyling}
+  ${e=>!!e.scrollableCss&&e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  ${e=>e.hidden&&w.css`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`;exports.default=U;

package/index-3084db92.mjs

@@ -0,0 +1,8 @@
+import { createReactComponent as t } from "@telia-ace/widget-ui";
+var o = /* @__PURE__ */ ((r) => (r.Static = "static", r.Drawer = "drawer", r.Dropdown = "dropdown", r.Modal = "modal", r))(o || {});
+const p = (r) => t(r, "area", import("./area-b06f88a6.mjs"), (a) => {
+});
+export {
+  o as A,
+  p as a
+};

package/index-e0918d07.js

@@ -0,0 +1 @@
+"use strict";const t=require("@telia-ace/widget-ui");var r=(e=>(e.Static="static",e.Drawer="drawer",e.Dropdown="dropdown",e.Modal="modal",e))(r||{});const o=e=>t.createReactComponent(e,"area",Promise.resolve().then(()=>require("./area-f44ede7c.js")),n=>{});exports.AreaComponent=o;exports.AreaMode=r;

package/index.js

@@ -1 +1 @@
-"use strict";const e=require("./index-ca09668e.js");require("@emotion/react");require("react/jsx-runtime");require("react");require("@emotion/styled");require("react-transition-group");require("react-dom");require("react-router-dom");module.exports=e.AreaComponent;
+"use strict";const e=require("./index-e0918d07.js");require("@telia-ace/widget-ui");module.exports=e.AreaComponent;

package/index.mjs

@@ -1,11 +1,5 @@
-import { q as d } from "./index-23726922.mjs";
-import "@emotion/react";
-import "react/jsx-runtime";
-import "react";
-import "@emotion/styled";
-import "react-transition-group";
-import "react-dom";
-import "react-router-dom";
+import { a as t } from "./index-3084db92.mjs";
+import "@telia-ace/widget-ui";
 export {
-  d as default
+  t as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-components-area",
-  "version": "1.1.1-rc.2",
+  "version": "1.1.1-rc.3",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -10,10 +10,10 @@
     }
   },
   "dependencies": {
-    "@telia-ace/widget-core": "^1.1.1-rc.2",
-    "@telia-ace/widget-types-grid": "^1.1.1-rc.2",
-    "@telia-ace/widget-ui": "^1.1.1-rc.2",
-    "@telia-ace/widget-utilities": "^1.1.1-rc.2",
+    "@telia-ace/widget-core": "^1.1.1-rc.3",
+    "@telia-ace/widget-types-grid": "^1.1.1-rc.3",
+    "@telia-ace/widget-ui": "^1.1.1-rc.3",
+    "@telia-ace/widget-utilities": "^1.1.1-rc.3",
     "@webprovisions/platform": "^1.1.3"
   },
   "peerDependencies": {

package/area-c682aa47.js

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