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

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,727 @@
1
+ import { jsx as u } from "react/jsx-runtime";
2
+ import { c as $, _ as pe, a as me, b as fe, T as te, P as V, C as re, u as A, d as L, e as j, f as he, g as ge, h as F, i as oe, j as ie, S as be, R as B, n as w, G as se, k as q, l as ae, m as ye, o as _, p as ve, q as xe, r as $e, s as Ce, t as we, v as Ee } from "./index-e0485d7b.mjs";
3
+ import M, { Children as Se, isValidElement as G, cloneElement as z, useContext as J, useState as C, useCallback as Pe, useEffect as g, forwardRef as ce, useMemo as le, Suspense as De } from "react";
4
+ import "react-dom";
5
+ const Ne = (e) => e === "entering" || e === "entered", Ve = (e) => e === "exiting" || e === "exited", S = {
6
+ fade: {
7
+ in: "opacity: 1;",
8
+ out: "opacity: 0;"
9
+ },
10
+ "slide-left": {
11
+ in: "transform: translateX(0);",
12
+ out: "transform: translateX(-100%);"
13
+ },
14
+ "slide-right": {
15
+ in: "transform: translateX(0);",
16
+ out: "transform: translateX(100%);"
17
+ },
18
+ "slide-up": {
19
+ in: "transform: translateY(0);",
20
+ out: "transform: translateY(100%);"
21
+ },
22
+ "slide-down": {
23
+ in: "transform: translateY(0);",
24
+ out: "transform: translateY(-100%);"
25
+ },
26
+ scale: {
27
+ in: "transform: scale(1);",
28
+ out: "transform: scale(0);"
29
+ }
30
+ }, Me = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"], I = {
31
+ compose: (e = "exited", t) => {
32
+ const { enter: r, exit: o } = t, n = r.transitionKeys.split(" "), i = Me.indexOf(n[0]) > -1 ? "transform" : "opacity";
33
+ if (Ne(e))
34
+ return n && n.length > 0 ? $`
35
+ ${n && n.length > 0 && n.map((a) => S[a] ? S[a].in : "")}
36
+ transition: ${i} ${r.duration}ms ${r.easing};
37
+ ` : "";
38
+ const s = n && n.length > 0 && $`
39
+ ${n.map((a) => S[a] ? S[a].out : "")}
40
+ `;
41
+ if (Ve(e)) {
42
+ const a = o.transitionKeys.split(" ");
43
+ return a && a.length > 0 && e === "exiting" ? $`
44
+ ${s};
45
+ ${a.map((c) => S[c] ? S[c].out : "")}
46
+ transition: ${i} ${o.duration}ms ${o.easing};
47
+ ` : s;
48
+ }
49
+ },
50
+ composeViewTransition: (e, t, r) => {
51
+ if (t === "slide")
52
+ return I.compose(e, {
53
+ enter: {
54
+ transitionKeys: r === "forth" ? "slide-right" : "slide-left",
55
+ duration: 500
56
+ },
57
+ exit: {
58
+ transitionKeys: r === "forth" ? "slide-left" : "slide-right",
59
+ duration: 500
60
+ }
61
+ });
62
+ if (t === "fade")
63
+ return I.compose(e, {
64
+ enter: {
65
+ transitionKeys: "fade",
66
+ duration: 500
67
+ },
68
+ exit: {
69
+ transitionKeys: "fade",
70
+ duration: 500
71
+ }
72
+ });
73
+ },
74
+ get: (e) => S[e]
75
+ }, ne = (e = {}) => (Object.keys(e).forEach((t) => {
76
+ (e[t] === null || typeof e[t] > "u") && delete e[t];
77
+ }), e);
78
+ function Te(e) {
79
+ if (e === void 0)
80
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
81
+ return e;
82
+ }
83
+ function Q(e, t) {
84
+ var r = function(i) {
85
+ return t && G(i) ? t(i) : i;
86
+ }, o = /* @__PURE__ */ Object.create(null);
87
+ return e && Se.map(e, function(n) {
88
+ return n;
89
+ }).forEach(function(n) {
90
+ o[n.key] = r(n);
91
+ }), o;
92
+ }
93
+ function Re(e, t) {
94
+ e = e || {}, t = t || {};
95
+ function r(d) {
96
+ return d in t ? t[d] : e[d];
97
+ }
98
+ var o = /* @__PURE__ */ Object.create(null), n = [];
99
+ for (var i in e)
100
+ i in t ? n.length && (o[i] = n, n = []) : n.push(i);
101
+ var s, a = {};
102
+ for (var c in t) {
103
+ if (o[c])
104
+ for (s = 0; s < o[c].length; s++) {
105
+ var l = o[c][s];
106
+ a[o[c][s]] = r(l);
107
+ }
108
+ a[c] = r(c);
109
+ }
110
+ for (s = 0; s < n.length; s++)
111
+ a[n[s]] = r(n[s]);
112
+ return a;
113
+ }
114
+ function P(e, t, r) {
115
+ return r[t] != null ? r[t] : e.props[t];
116
+ }
117
+ function Oe(e, t) {
118
+ return Q(e.children, function(r) {
119
+ return z(r, {
120
+ onExited: t.bind(null, r),
121
+ in: !0,
122
+ appear: P(r, "appear", e),
123
+ enter: P(r, "enter", e),
124
+ exit: P(r, "exit", e)
125
+ });
126
+ });
127
+ }
128
+ function _e(e, t, r) {
129
+ var o = Q(e.children), n = Re(t, o);
130
+ return Object.keys(n).forEach(function(i) {
131
+ var s = n[i];
132
+ if (G(s)) {
133
+ var a = i in t, c = i in o, l = t[i], d = G(l) && !l.props.in;
134
+ c && (!a || d) ? n[i] = z(s, {
135
+ onExited: r.bind(null, s),
136
+ in: !0,
137
+ exit: P(s, "exit", e),
138
+ enter: P(s, "enter", e)
139
+ }) : !c && a && !d ? n[i] = z(s, {
140
+ in: !1
141
+ }) : c && a && G(l) && (n[i] = z(s, {
142
+ onExited: r.bind(null, s),
143
+ in: l.props.in,
144
+ exit: P(s, "exit", e),
145
+ enter: P(s, "enter", e)
146
+ }));
147
+ }
148
+ }), n;
149
+ }
150
+ var Ae = Object.values || function(e) {
151
+ return Object.keys(e).map(function(t) {
152
+ return e[t];
153
+ });
154
+ }, je = {
155
+ component: "div",
156
+ childFactory: function(t) {
157
+ return t;
158
+ }
159
+ }, Z = /* @__PURE__ */ function(e) {
160
+ pe(t, e);
161
+ function t(o, n) {
162
+ var i;
163
+ i = e.call(this, o, n) || this;
164
+ var s = i.handleExited.bind(Te(i));
165
+ return i.state = {
166
+ contextValue: {
167
+ isMounting: !0
168
+ },
169
+ handleExited: s,
170
+ firstRender: !0
171
+ }, i;
172
+ }
173
+ var r = t.prototype;
174
+ return r.componentDidMount = function() {
175
+ this.mounted = !0, this.setState({
176
+ contextValue: {
177
+ isMounting: !1
178
+ }
179
+ });
180
+ }, r.componentWillUnmount = function() {
181
+ this.mounted = !1;
182
+ }, t.getDerivedStateFromProps = function(n, i) {
183
+ var s = i.children, a = i.handleExited, c = i.firstRender;
184
+ return {
185
+ children: c ? Oe(n, a) : _e(n, s, a),
186
+ firstRender: !1
187
+ };
188
+ }, r.handleExited = function(n, i) {
189
+ var s = Q(this.props.children);
190
+ n.key in s || (n.props.onExited && n.props.onExited(i), this.mounted && this.setState(function(a) {
191
+ var c = me({}, a.children);
192
+ return delete c[n.key], {
193
+ children: c
194
+ };
195
+ }));
196
+ }, r.render = function() {
197
+ var n = this.props, i = n.component, s = n.childFactory, a = fe(n, ["component", "childFactory"]), c = this.state.contextValue, l = Ae(this.state.children).map(s);
198
+ return delete a.appear, delete a.enter, delete a.exit, i === null ? /* @__PURE__ */ M.createElement(te.Provider, {
199
+ value: c
200
+ }, l) : /* @__PURE__ */ M.createElement(te.Provider, {
201
+ value: c
202
+ }, /* @__PURE__ */ M.createElement(i, a, l));
203
+ }, t;
204
+ }(M.Component);
205
+ Z.propTypes = process.env.NODE_ENV !== "production" ? {
206
+ /**
207
+ * `<TransitionGroup>` renders a `<div>` by default. You can change this
208
+ * behavior by providing a `component` prop.
209
+ * If you use React v16+ and would like to avoid a wrapping `<div>` element
210
+ * you can pass in `component={null}`. This is useful if the wrapping div
211
+ * borks your css styles.
212
+ */
213
+ component: V.any,
214
+ /**
215
+ * A set of `<Transition>` components, that are toggled `in` and out as they
216
+ * leave. the `<TransitionGroup>` will inject specific transition props, so
217
+ * remember to spread them through if you are wrapping the `<Transition>` as
218
+ * with our `<Fade>` example.
219
+ *
220
+ * While this component is meant for multiple `Transition` or `CSSTransition`
221
+ * children, sometimes you may want to have a single transition child with
222
+ * content that you want to be transitioned out and in when you change it
223
+ * (e.g. routes, images etc.) In that case you can change the `key` prop of
224
+ * the transition child as you change its content, this will cause
225
+ * `TransitionGroup` to transition the child out and back in.
226
+ */
227
+ children: V.node,
228
+ /**
229
+ * A convenience prop that enables or disables appear animations
230
+ * for all children. Note that specifying this will override any defaults set
231
+ * on individual children Transitions.
232
+ */
233
+ appear: V.bool,
234
+ /**
235
+ * A convenience prop that enables or disables enter animations
236
+ * for all children. Note that specifying this will override any defaults set
237
+ * on individual children Transitions.
238
+ */
239
+ enter: V.bool,
240
+ /**
241
+ * A convenience prop that enables or disables exit animations
242
+ * for all children. Note that specifying this will override any defaults set
243
+ * on individual children Transitions.
244
+ */
245
+ exit: V.bool,
246
+ /**
247
+ * You may need to apply reactive updates to a child as it is exiting.
248
+ * This is generally done by using `cloneElement` however in the case of an exiting
249
+ * child the element has already been removed and not accessible to the consumer.
250
+ *
251
+ * If you do need to update a child as it leaves you can provide a `childFactory`
252
+ * to wrap every child, even the ones that are leaving.
253
+ *
254
+ * @type Function(child: ReactElement) -> ReactElement
255
+ */
256
+ childFactory: V.func
257
+ } : {};
258
+ Z.defaultProps = je;
259
+ const Fe = Z, ue = () => J(re), U = (e, t) => ({
260
+ id: e.id,
261
+ type: e.type,
262
+ name: e.name,
263
+ branch: t || "default"
264
+ }), Ge = () => {
265
+ const e = A(), t = L(), [r, o] = C([]), n = j(), i = Pe(
266
+ (s) => {
267
+ if (t && n.current && s) {
268
+ const a = t.getBranch(s), c = s.getChildren(a).map((l) => U(l));
269
+ o(c);
270
+ }
271
+ },
272
+ [n, t, o, e]
273
+ );
274
+ return g(() => {
275
+ e && i(e);
276
+ }, [e, t]), g(() => {
277
+ if (t) {
278
+ const [s, a] = he(t.events);
279
+ return s("components:set-layout", (c, l) => {
280
+ (e === l.node.parent || l.node.parent === t.nodes.root) && i(l.node.parent);
281
+ }), s("components:node-appended", (c, l) => {
282
+ (e === l.node.parent || l.node.parent === t.nodes.root) && i(l.node.parent);
283
+ }), s("components:node-removed", (c, { parentNode: l }) => {
284
+ (l === e || l === t.nodes.root) && i(l);
285
+ }), () => {
286
+ a();
287
+ };
288
+ }
289
+ }, [e, t, i]), r;
290
+ }, ze = () => J(ge), Le = (e, t) => {
291
+ const r = ue(), o = F(), [n, i] = C(void 0), s = j(), a = e || r.type || "";
292
+ return g(() => {
293
+ if (a) {
294
+ let c;
295
+ return (t || o).getAsync("componentResolver").then((l) => {
296
+ if (s.current) {
297
+ const d = l.getComponent(a);
298
+ i(d);
299
+ }
300
+ c = l.registerResolver(a, (d) => {
301
+ s.current && i(d);
302
+ });
303
+ }), () => {
304
+ c && c();
305
+ };
306
+ }
307
+ }, [s, a, t, o]), n;
308
+ }, We = (e) => {
309
+ const t = A(e), r = L(), [o, n] = C({}), i = j();
310
+ return g(() => {
311
+ t && i.current && n(t.attributes.layout);
312
+ }, [t, i]), g(() => {
313
+ if (r) {
314
+ const s = r.events.subscribe(
315
+ "components:layout-changed",
316
+ (a, c) => {
317
+ t === c.node && i.current && n(c.node.attributes.layout);
318
+ }
319
+ );
320
+ return () => {
321
+ s();
322
+ };
323
+ }
324
+ }, [r, i, t]), o;
325
+ }, k = () => J(oe), Ke = (e) => {
326
+ const t = F(), r = ie(), [o, n] = C({ name: "", params: {} }), i = j();
327
+ return g(() => {
328
+ const s = (e || t).get("$widget");
329
+ if (!s)
330
+ return;
331
+ const { events: a } = s;
332
+ return a.subscribe("router:change", (l, { next: { routeData: d } }) => {
333
+ if (i.current) {
334
+ const { name: p, params: b } = d;
335
+ ne(b), n({ name: p, params: b });
336
+ }
337
+ });
338
+ }, [i, e, t]), g(() => {
339
+ if (r && r.history && i.current) {
340
+ const s = r.getRouteData(), { name: a, params: c } = s;
341
+ ne(c), n({ name: a, params: c });
342
+ }
343
+ }, [r, i]), o;
344
+ };
345
+ var H = /* @__PURE__ */ ((e) => (e.back = "back", e.forth = "forth", e))(H || {});
346
+ const Xe = (e, t, r) => typeof r[e] == "number" && typeof r[t] == "number" && r[e] > r[t] ? "back" : "forth", de = ({ views: e, location: t, render: r }) => /* @__PURE__ */ u(
347
+ be,
348
+ {
349
+ location: t && {
350
+ ...t,
351
+ pathname: t.pathname.split("?")[0]
352
+ },
353
+ children: [
354
+ ...Object.keys(e).filter((o) => !!e[o].path),
355
+ ...Object.keys(e).filter((o) => !e[o].path)
356
+ ].map((o) => {
357
+ const { path: n } = e[o];
358
+ return n ? Array.isArray(n) ? n.map((i) => /* @__PURE__ */ u(B, { exact: !0, path: i, render: () => r(o) }, o)) : /* @__PURE__ */ u(B, { exact: !0, path: n, render: () => r(o) }, o) : /* @__PURE__ */ u(B, { render: () => r(o) }, o);
359
+ })
360
+ }
361
+ ), Ye = w.div`
362
+ position: relative;
363
+ width: 100%;
364
+ flex: 1;
365
+ `, Be = w(se)`
366
+ position: absolute;
367
+ left: 0;
368
+ right: 0;
369
+ ${(e) => !!e.animationCss && e.animationCss}
370
+ ${(e) => !!e.scrollableCss && e.scrollableCss}
371
+ `, Ie = {
372
+ index: 1,
373
+ search: 2,
374
+ browse: 3,
375
+ guide: 4,
376
+ contact: 5,
377
+ "contact-method": 6,
378
+ conversation: 7
379
+ }, Ue = ({ className: e = "", ...t }) => {
380
+ const [r, o] = C("index"), [n, i] = C(
381
+ H.forth
382
+ ), s = Ke(), a = ie(), c = k(), l = q(), d = F(), p = A(), { gap: b = "0" } = l, {
383
+ columns: D = 1,
384
+ animation: x = "none",
385
+ scrollable: f = !1,
386
+ ...T
387
+ } = c, [K, R] = ae(f);
388
+ if (!p || !a)
389
+ return null;
390
+ const { location: X } = a;
391
+ s.name !== r && s.name !== "" && x && (i(
392
+ Xe(r, s.name, Ie)
393
+ ), o(s.name));
394
+ const { views: y } = d.get("$settings");
395
+ if (!Object.keys(y).length)
396
+ return null;
397
+ const v = (m, E, N) => {
398
+ const h = Y(E, N), O = p.getChildren(m)[0];
399
+ return /* @__PURE__ */ u(
400
+ Be,
401
+ {
402
+ ...t,
403
+ ...T,
404
+ scrollableCss: K,
405
+ ref: R,
406
+ columns: D,
407
+ gap: b,
408
+ ...h,
409
+ className: _(e, "humany-view"),
410
+ children: /* @__PURE__ */ u(ee, { id: O.id, branch: "default" })
411
+ }
412
+ );
413
+ }, Y = (m, E) => {
414
+ if (x === "slide" || x === "fade")
415
+ return {
416
+ animationCss: I.composeViewTransition(
417
+ m,
418
+ x,
419
+ E
420
+ ),
421
+ "data-state": m
422
+ };
423
+ };
424
+ return /* @__PURE__ */ u(Ye, { className: "humany-animated-view", children: /* @__PURE__ */ u(
425
+ Fe,
426
+ {
427
+ component: null,
428
+ childFactory: (m) => M.cloneElement(m, { direction: n }),
429
+ children: /* @__PURE__ */ u(
430
+ ye,
431
+ {
432
+ timeout: { enter: 500, exit: 500 },
433
+ onEnter: (m) => m == null ? void 0 : m.clientHeight,
434
+ unmountOnExit: !0,
435
+ direction: H.forth,
436
+ children: (m, { direction: E }) => /* @__PURE__ */ u(
437
+ de,
438
+ {
439
+ views: y,
440
+ location: X,
441
+ render: (N) => v(N, m, E)
442
+ }
443
+ )
444
+ },
445
+ r
446
+ )
447
+ }
448
+ ) });
449
+ }, He = w(se)`
450
+ ${(e) => !!e.scrollableCss && e.scrollableCss}
451
+ `, qe = ({ className: e = "", ...t }) => {
452
+ const r = k(), o = q(), n = F(), i = A(), { views: s } = n.get("$settings"), { gap: a = "0" } = o, { columns: c = 1, animation: l = "none", scrollable: d = !1, ...p } = r, [b, D] = ae(d);
453
+ return i ? /* @__PURE__ */ u(
454
+ He,
455
+ {
456
+ ...t,
457
+ ...p,
458
+ scrollableCss: b,
459
+ ref: D,
460
+ columns: c,
461
+ gap: a,
462
+ className: _(e, "humany-view"),
463
+ children: /* @__PURE__ */ u(
464
+ de,
465
+ {
466
+ views: s,
467
+ render: (x) => {
468
+ const f = i.getChildren(x)[0];
469
+ return /* @__PURE__ */ u(ee, { id: f.id, node: f, branch: "default" });
470
+ }
471
+ }
472
+ )
473
+ }
474
+ ) : null;
475
+ }, W = (e) => {
476
+ var t, r;
477
+ return $`
478
+ outline: none;
479
+ box-sizing: border-box;
480
+ * {
481
+ box-sizing: border-box;
482
+ outline: none;
483
+ }
484
+
485
+ grid-column: ${e["data-indent"] ? `${e["data-indent"] + 1} / ${e["data-indent"] + (e["data-width"] || 0) + 1}` : `span ${e["data-width"]}`};
486
+
487
+ ${((t = e.theme.fonts) == null ? void 0 : t.type) && `
488
+ font-family: ${e.theme.fonts.type};
489
+
490
+ input, textarea {
491
+ font-family: ${e.theme.fonts.type};
492
+ }
493
+ `}
494
+
495
+ ${((r = e.theme.fonts) == null ? void 0 : r.base) && `
496
+ font-size: ${e.theme.fonts.base};
497
+ `}
498
+
499
+ &:focus-visible {
500
+ ${ve(e)};
501
+ }
502
+ `;
503
+ }, Je = w(qe)`
504
+ ${(e) => W(e)}
505
+ `, Qe = w(Ue)`
506
+ ${(e) => W(e)}
507
+ `, Ze = w.div`
508
+ text-align: center;
509
+ ${(e) => {
510
+ var t, r, o;
511
+ return typeof ((t = e.theme.colors) == null ? void 0 : t.warning) < "u" && $`
512
+ color: ${(r = e.theme.colors) == null ? void 0 : r.warning};
513
+ border: 2px dashed ${(o = e.theme.colors) == null ? void 0 : o.warning};
514
+ `;
515
+ }}
516
+ ${(e) => typeof e.theme.borderRadius < "u" && `border-radius: ${e.theme.borderRadius};`}
517
+ ${(e) => W(e)}
518
+ `, ke = ce(
519
+ ({ className: e = "", children: t, ...r }, o) => {
520
+ const n = Le(), { name: i, type: s, id: a } = ue(), c = le(() => n ? w(n)`
521
+ ${W}
522
+ ${xe}
523
+ ` : null, [n]);
524
+ return typeof n > "u" ? null : n === null || c === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ u(
525
+ Ze,
526
+ {
527
+ ...r,
528
+ title: `type: ${s}, definition-id: ${i}, instance-id: ${a}`,
529
+ className: _(e, "humany-non-resolved-component"),
530
+ children: /* @__PURE__ */ u($e, { variant: "h5", children: "Non Resolved Component Type" })
531
+ }
532
+ ) : null : /* @__PURE__ */ u(De, { fallback: null, children: /* @__PURE__ */ u(
533
+ c,
534
+ {
535
+ ref: o,
536
+ ...r,
537
+ className: _(
538
+ e,
539
+ "humany-component",
540
+ `humany-component-${i}`
541
+ ),
542
+ children: t
543
+ }
544
+ ) });
545
+ }
546
+ ), et = (e) => {
547
+ const t = A(e), r = L(), [o, n] = C({}), i = j();
548
+ return g(() => {
549
+ t && i.current && n(t.attributes.properties);
550
+ }, [t, e, i]), g(() => {
551
+ if (r) {
552
+ const s = r.events.subscribe(
553
+ "components:properties-changed",
554
+ (a, c) => {
555
+ t === c.node && i.current && n(c.node.attributes.properties);
556
+ }
557
+ );
558
+ return () => {
559
+ s();
560
+ };
561
+ }
562
+ }, [r, i, e, t]), o;
563
+ }, tt = (e, t) => t ? !0 : typeof e == "string" ? e === "full" : e > 0, ee = ce(
564
+ ({
565
+ className: e = "",
566
+ id: t,
567
+ branch: r,
568
+ node: o,
569
+ ariaLabel: n,
570
+ tabIndex: i,
571
+ context: s,
572
+ ...a
573
+ }, c) => {
574
+ const l = L(), d = F(), [p, b] = C(), D = ze(), x = q(t), f = et(t), { size: T = "none", indent: K = 0 } = We(t), R = tt(T, o);
575
+ if (g(() => {
576
+ if (l) {
577
+ if (t && !o) {
578
+ const h = l.nodes.get(t);
579
+ if (h && (b(U(h, r)), R)) {
580
+ const O = h.mount(d);
581
+ return () => {
582
+ O();
583
+ };
584
+ }
585
+ } else if (o) {
586
+ b(U(o, r));
587
+ const h = o.mount(d);
588
+ return () => {
589
+ h();
590
+ };
591
+ }
592
+ }
593
+ }, [l, t, o, R]), !p || !R)
594
+ return null;
595
+ const X = { ...x, ...s || {} }, {
596
+ cardinal: y,
597
+ fonts: v = {},
598
+ accessibility: Y = {},
599
+ ...m
600
+ } = X, E = {
601
+ type: v.type,
602
+ base: v.base || "16px",
603
+ small: v.small || "0.8em",
604
+ normal: v.normal || "1em",
605
+ medium: v.medium || "1.2em",
606
+ large: v.large || "1.6em",
607
+ huge: v.huge || "2.5em"
608
+ }, N = {
609
+ ...m,
610
+ fonts: E,
611
+ accessibility: {
612
+ ...Y
613
+ }
614
+ };
615
+ return typeof y == "number" && (N.sizes = {
616
+ cardinal: y,
617
+ small: `${y}px`,
618
+ normal: `${y * 3}px`,
619
+ medium: `${y * 5}px`,
620
+ large: `${y * 8}px`
621
+ }), /* @__PURE__ */ u(Ce, { theme: N, children: /* @__PURE__ */ u(re.Provider, { value: p, children: /* @__PURE__ */ u(oe.Provider, { value: f, children: (() => {
622
+ const h = {
623
+ "data-width": T === "full" ? D : Math.min(T, D),
624
+ "data-indent": K,
625
+ "data-name": p.name,
626
+ "data-node-id": p.id,
627
+ "data-component-type": p.type,
628
+ "aria-label": n,
629
+ tabIndex: i,
630
+ id: p.id,
631
+ role: f && f.role,
632
+ ...a
633
+ };
634
+ switch (p.type) {
635
+ case "view":
636
+ return typeof f.animation == "string" && f.animation !== "none" ? /* @__PURE__ */ u(Qe, { ...h, className: e }) : /* @__PURE__ */ u(Je, { ...h, className: e });
637
+ default: {
638
+ const O = we(f);
639
+ return /* @__PURE__ */ u(
640
+ ke,
641
+ {
642
+ ref: c,
643
+ ...h,
644
+ ...O,
645
+ className: e
646
+ }
647
+ );
648
+ }
649
+ }
650
+ })() }) }) });
651
+ }
652
+ );
653
+ M.lazy(() => import("./detached-component-dc527d32.mjs"));
654
+ const nt = (e) => {
655
+ const t = e.map((n) => "min-content").join(" "), r = e[0].split(" ").map((n) => "1fr").join(" "), o = e.map((n) => `'${n}'`).join(" ");
656
+ return $`
657
+ grid-template-columns: ${r};
658
+ grid-template-rows: ${t};
659
+ grid-template-areas: ${o};
660
+ `;
661
+ }, rt = (e) => {
662
+ const t = Ge(), r = le(() => Object.entries(e.areas).map(([o, n]) => {
663
+ const i = t.find((s) => s.name === o);
664
+ return Ee(n) ? {
665
+ name: o,
666
+ componentDef: i,
667
+ context: n.context,
668
+ areaSettings: n.areaSettings,
669
+ template: n.template,
670
+ areas: n.areas,
671
+ gap: n.gap
672
+ } : {
673
+ name: o,
674
+ componentDef: i,
675
+ areaSettings: n.areaSettings,
676
+ child: n.child,
677
+ context: n.context
678
+ };
679
+ }), [e, t]);
680
+ return /* @__PURE__ */ u(
681
+ ot,
682
+ {
683
+ "data-grid-area": e.gridArea,
684
+ gridArea: e.gridArea,
685
+ gap: e.gap,
686
+ template: e.template,
687
+ className: _(e.className, "humany-grid"),
688
+ children: r.map((o) => o.componentDef ? /* @__PURE__ */ u(
689
+ ee,
690
+ {
691
+ id: o.componentDef.id,
692
+ branch: "default",
693
+ context: {}
694
+ },
695
+ o.componentDef.id
696
+ ) : null)
697
+ }
698
+ );
699
+ }, ot = w.div`
700
+ display: grid;
701
+ ${(e) => e.gridArea && $`
702
+ grid-area: ${e.gridArea};
703
+ `}
704
+ ${(e) => nt(e.template)}
705
+ ${(e) => e.gap && $`
706
+ grid-gap: ${e.gap}rem;
707
+ `}
708
+ `, it = ({ className: e }) => {
709
+ const t = k();
710
+ return /* @__PURE__ */ u(
711
+ rt,
712
+ {
713
+ template: t.template,
714
+ areas: t.areas,
715
+ gap: t.gap,
716
+ areaSettings: t.areaSettings,
717
+ context: t.context
718
+ }
719
+ );
720
+ }, ut = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
721
+ __proto__: null,
722
+ default: it
723
+ }, Symbol.toStringTag, { value: "Module" }));
724
+ export {
725
+ ee as C,
726
+ ut as g
727
+ };