@telia-ace/widget-components-area 1.1.1-rc.1 → 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-4b400ca5.js");require("react/jsx-runtime");require("react");require("react-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,7 +1,5 @@
-import { z as i } from "./index-aa7b061f.mjs";
-import "react/jsx-runtime";
-import "react";
-import "react-dom";
+import { a as t } from "./index-3084db92.mjs";
+import "@telia-ace/widget-ui";
 export {
-  i as default
+  t as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-components-area",
-  "version": "1.1.1-rc.1",
+  "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.1",
-    "@telia-ace/widget-types-grid": "^1.1.1-rc.1",
-    "@telia-ace/widget-ui": "^1.1.1-rc.1",
-    "@telia-ace/widget-utilities": "^1.1.1-rc.1",
+    "@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-f4ab636a.js

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