@telia-ace/knowledge-widget-ui 1.0.19 → 1.0.20

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.
Files changed (4) hide show
  1. package/dist/index.js +737 -888
  2. package/dist/index.js.map +1 -1
  3. package/dist/utils/guide-render-instructions.d.ts +1 -1
  4. package/package.json +10 -7
package/dist/index.js CHANGED
@@ -1,122 +1,106 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
1
+ var Oe = Object.defineProperty, Ye = Object.defineProperties;
2
+ var _e = Object.getOwnPropertyDescriptors;
3
+ var R = Object.getOwnPropertySymbols;
4
+ var oe = Object.prototype.hasOwnProperty, ie = Object.prototype.propertyIsEnumerable;
5
+ var se = (t, e, a) => e in t ? Oe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, $ = (t, e) => {
6
+ for (var a in e || (e = {}))
7
+ oe.call(e, a) && se(t, a, e[a]);
8
+ if (R)
9
+ for (var a of R(e))
10
+ ie.call(e, a) && se(t, a, e[a]);
11
+ return t;
12
+ }, E = (t, e) => Ye(t, _e(e));
13
+ var w = (t, e) => {
14
+ var a = {};
15
+ for (var r in t)
16
+ oe.call(t, r) && e.indexOf(r) < 0 && (a[r] = t[r]);
17
+ if (t != null && R)
18
+ for (var r of R(t))
19
+ e.indexOf(r) < 0 && ie.call(t, r) && (a[r] = t[r]);
17
20
  return a;
18
21
  };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
- import { useRouteData, Link, Icon, List, list, invertedHoverButton, ItemList, itemList, Drawer, Dropdown, headingElement, Text, Button, paddedBorderTabStyle, Confirm, SymbolBadge, StyledText as StyledText$1, convertToStringAttributes, useKeyPress, useContainer, useEventListener, Timestamp, DateFormats, TextLink, usePrevious, borderTabStyle, Paragraph, genericHtml, AnchorLink, WidgetLink } from "@telia-ace/widget-ui";
22
+ import { useRouteData as he, Link as Ve, Icon as H, List as Z, list as ge, invertedHoverButton as pe, ItemList as Y, itemList as _, Drawer as Ke, Dropdown as ye, headingElement as ee, Text as $e, Button as te, paddedBorderTabStyle as le, Confirm as qe, SymbolBadge as N, StyledText as J, convertToStringAttributes as ve, useKeyPress as W, useContainer as Ge, useEventListener as ce, Timestamp as be, DateFormats as xe, TextLink as Q, usePrevious as Ue, borderTabStyle as X, Paragraph as Je, genericHtml as Qe, AnchorLink as Xe, WidgetLink as Ze } from "@telia-ace/widget-ui";
33
23
  export * from "@telia-ace/widget-ui";
34
- import { createParams, formatUrl, appendClassNames, htmlParentContains } from "@telia-ace/widget-utilities";
35
- import React, { forwardRef, useCallback, useState, useEffect, useMemo, useRef, useContext, useImperativeHandle } from "react";
36
- import styled, { css, keyframes, ThemeContext } from "styled-components";
37
- const DialogLink = ({
38
- title = "",
39
- className,
40
- id,
41
- parent,
42
- connection,
43
- type,
44
- target,
45
- href,
46
- children
24
+ import { createParams as j, formatUrl as me, appendClassNames as z, htmlParentContains as et } from "@telia-ace/widget-utilities";
25
+ import n, { forwardRef as V, useCallback as k, useState as D, useEffect as K, useMemo as tt, useRef as we, useContext as at, useImperativeHandle as nt } from "react";
26
+ import d, { css as h, keyframes as Ee, ThemeContext as rt } from "styled-components";
27
+ const ke = ({
28
+ title: t = "",
29
+ className: e,
30
+ id: a,
31
+ parent: r,
32
+ connection: s,
33
+ type: i,
34
+ target: o,
35
+ href: c,
36
+ children: m
47
37
  }) => {
48
- const props = {};
49
- const { name, params } = useRouteData();
50
- switch (type) {
38
+ const f = {}, { name: u, params: l } = he();
39
+ switch (i) {
51
40
  case "default":
52
41
  case "guide":
53
- const { id: parentId, title: parentTitle } = parent;
54
- props.routeName = name;
55
- props.params = createParams(__spreadProps(__spreadValues({}, params), {
56
- guide: id,
57
- connection: id === parentId ? connection : void 0,
58
- uriName: id === parentId ? formatUrl(parentTitle) : formatUrl(title)
42
+ const { id: g, title: S } = r;
43
+ f.routeName = u, f.params = j(E($({}, l), {
44
+ guide: a,
45
+ connection: a === g ? s : void 0,
46
+ uriName: a === g ? me(S) : me(t)
59
47
  }));
60
48
  break;
61
49
  case "link":
62
- props.href = href;
63
- props.target = target;
50
+ f.href = c, f.target = o;
64
51
  break;
65
52
  }
66
- return /* @__PURE__ */ React.createElement(Link, __spreadValues({
67
- className: appendClassNames(className, "humany-dialog-link")
68
- }, props), children || /* @__PURE__ */ React.createElement(React.Fragment, null, type === "link" && /* @__PURE__ */ React.createElement(Icon, {
53
+ return /* @__PURE__ */ n.createElement(Ve, $({
54
+ className: z(e, "humany-dialog-link")
55
+ }, f), m || /* @__PURE__ */ n.createElement(n.Fragment, null, i === "link" && /* @__PURE__ */ n.createElement(H, {
69
56
  faIcon: "link"
70
- }), /* @__PURE__ */ React.createElement("span", null, title)));
71
- };
72
- var dialogList = forwardRef((_a, ref) => {
73
- var _b = _a, { className, dialog } = _b, other = __objRest(_b, ["className", "dialog"]);
74
- return !!dialog.length ? /* @__PURE__ */ React.createElement(StyledList$1, __spreadProps(__spreadValues({
75
- className: appendClassNames(className, "humany-dialog"),
76
- items: dialog,
77
- renderItem: (item) => /* @__PURE__ */ React.createElement("li", {
78
- key: item.connection,
79
- "data-dialog": item.connection
80
- }, /* @__PURE__ */ React.createElement(DialogLink, __spreadValues({}, item)))
81
- }, other), {
82
- ref
57
+ }), /* @__PURE__ */ n.createElement("span", null, t)));
58
+ }, Ot = V((s, r) => {
59
+ var i = s, { className: t, dialog: e } = i, a = w(i, ["className", "dialog"]);
60
+ return e.length ? /* @__PURE__ */ n.createElement(st, E($({
61
+ className: z(t, "humany-dialog"),
62
+ items: e,
63
+ renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
64
+ key: o.connection,
65
+ "data-dialog": o.connection
66
+ }, /* @__PURE__ */ n.createElement(ke, $({}, o)))
67
+ }, a), {
68
+ ref: r
83
69
  })) : null;
84
- });
85
- const StyledList$1 = styled(List)`
86
- ${list}
70
+ }), st = d(Z)`
71
+ ${ge}
87
72
  a {
88
73
  min-width: 150px;
89
74
  max-width: 400px;
90
75
  display: block;
91
76
  white-space: normal;
92
- ${(p) => {
93
- var _a;
94
- return invertedHoverButton({
95
- primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
77
+ ${(t) => {
78
+ var e;
79
+ return pe({
80
+ primaryColor: (e = t.theme.colors) == null ? void 0 : e.primary,
96
81
  secondaryColor: "#FFFFFF"
97
82
  });
98
83
  }}
99
84
  }
100
85
 
101
86
  i {
102
- margin: 0 ${(p) => {
103
- var _a;
104
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
87
+ margin: 0 ${(t) => {
88
+ var e;
89
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
105
90
  }} 0 0;
106
91
  }
107
- `;
108
- const DrawerList = (_c) => {
109
- var _d = _c, {
110
- trigger,
111
- header,
112
- className,
113
- animation,
114
- fullScreen,
115
- onToggle,
116
- children,
117
- ref,
118
- closeButtonAriaLabel
119
- } = _d, other = __objRest(_d, [
92
+ `, Yt = (u) => {
93
+ var l = u, {
94
+ trigger: t,
95
+ header: e,
96
+ className: a,
97
+ animation: r,
98
+ fullScreen: s,
99
+ onToggle: i,
100
+ children: o,
101
+ ref: c,
102
+ closeButtonAriaLabel: m
103
+ } = l, f = w(l, [
120
104
  "trigger",
121
105
  "header",
122
106
  "className",
@@ -127,63 +111,57 @@ const DrawerList = (_c) => {
127
111
  "ref",
128
112
  "closeButtonAriaLabel"
129
113
  ]);
130
- return /* @__PURE__ */ React.createElement(Drawer, {
131
- className: appendClassNames(className, "humany-drawer-list"),
132
- trigger,
133
- header,
134
- animation,
135
- fullScreen,
136
- onToggle,
137
- closeButtonAriaLabel
138
- }, /* @__PURE__ */ React.createElement(StyledItemList$3, __spreadValues({}, other), children));
139
- };
140
- const StyledItemList$3 = styled(ItemList)`
141
- ${itemList}
142
- font-family: ${(p) => {
143
- var _a;
144
- return (_a = p.theme.fonts) == null ? void 0 : _a.type;
114
+ return /* @__PURE__ */ n.createElement(Ke, {
115
+ className: z(a, "humany-drawer-list"),
116
+ trigger: t,
117
+ header: e,
118
+ animation: r,
119
+ fullScreen: s,
120
+ onToggle: i,
121
+ closeButtonAriaLabel: m
122
+ }, /* @__PURE__ */ n.createElement(ot, $({}, f), o));
123
+ }, ot = d(Y)`
124
+ ${_}
125
+ font-family: ${(t) => {
126
+ var e;
127
+ return (e = t.theme.fonts) == null ? void 0 : e.type;
145
128
  }};
146
- padding: ${(p) => {
147
- var _a;
148
- return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
129
+ padding: ${(t) => {
130
+ var e;
131
+ return (e = t.theme.sizes) == null ? void 0 : e.medium;
149
132
  }};
150
133
  > ul > li {
151
134
  overflow: visible;
152
135
  font-weight: 300;
153
- font-size: ${(p) => {
154
- var _a;
155
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
136
+ font-size: ${(t) => {
137
+ var e;
138
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
156
139
  }};
157
140
  }
158
- `;
159
- const DropdownActions = ({ items, renderItem, trigger, header, children }) => {
160
- return /* @__PURE__ */ React.createElement(Dropdown, {
161
- className: "humany-dropdown-actions",
162
- trigger
163
- }, /* @__PURE__ */ React.createElement(Wrapper$2, null, !!header && /* @__PURE__ */ React.createElement(Header$1, null, header), items && renderItem && /* @__PURE__ */ React.createElement(StyledList, {
164
- items,
165
- renderItem
166
- }), children));
167
- };
168
- const Wrapper$2 = styled.div`
141
+ `, _t = ({ items: t, renderItem: e, trigger: a, header: r, children: s }) => /* @__PURE__ */ n.createElement(ye, {
142
+ className: "humany-dropdown-actions",
143
+ trigger: a
144
+ }, /* @__PURE__ */ n.createElement(it, null, !!r && /* @__PURE__ */ n.createElement(lt, null, r), t && e && /* @__PURE__ */ n.createElement(ct, {
145
+ items: t,
146
+ renderItem: e
147
+ }), s)), it = d.div`
169
148
  background: #fff;
170
149
  border: #ccc 1px solid;
171
150
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
172
- font-family: ${(p) => {
173
- var _a;
174
- return (_a = p.theme.fonts) == null ? void 0 : _a.type;
151
+ font-family: ${(t) => {
152
+ var e;
153
+ return (e = t.theme.fonts) == null ? void 0 : e.type;
175
154
  }};
176
- font-size: ${(p) => {
177
- var _a;
178
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
155
+ font-size: ${(t) => {
156
+ var e;
157
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
179
158
  }};
180
- `;
181
- const Header$1 = styled.div`
182
- padding: ${(p) => p.theme.sizes.normal};
159
+ `, lt = d.div`
160
+ padding: ${(t) => t.theme.sizes.normal};
183
161
  padding-bottom: 0;
184
- font-size: ${(p) => {
185
- var _a;
186
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
162
+ font-size: ${(t) => {
163
+ var e;
164
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
187
165
  }};
188
166
  font-weight: normal;
189
167
  white-space: nowrap;
@@ -203,27 +181,26 @@ const Header$1 = styled.div`
203
181
 
204
182
  svg,
205
183
  i {
206
- margin-right: ${(p) => p.theme.sizes.small};
184
+ margin-right: ${(t) => t.theme.sizes.small};
207
185
  }
208
- `;
209
- const StyledList = styled(List)`
186
+ `, ct = d(Z)`
210
187
  list-style: none;
211
188
  padding: 0;
212
189
  margin: 0;
213
- padding: ${(p) => p.theme.sizes.small} 0;
190
+ padding: ${(t) => t.theme.sizes.small} 0;
214
191
 
215
192
  li {
216
193
  background: #fff;
217
194
 
218
195
  a {
219
196
  display: block;
220
- font-size: ${(p) => {
221
- var _a;
222
- return (_a = p.theme.fonts) == null ? void 0 : _a.small;
197
+ font-size: ${(t) => {
198
+ var e;
199
+ return (e = t.theme.fonts) == null ? void 0 : e.small;
223
200
  }};
224
- padding: ${(p) => {
225
- var _a, _b;
226
- return `${(_a = p.theme.sizes) == null ? void 0 : _a.small} ${(_b = p.theme.sizes) == null ? void 0 : _b.normal}`;
201
+ padding: ${(t) => {
202
+ var e, a;
203
+ return `${(e = t.theme.sizes) == null ? void 0 : e.small} ${(a = t.theme.sizes) == null ? void 0 : a.normal}`;
227
204
  }};
228
205
  cursor: pointer;
229
206
  color: #555;
@@ -231,43 +208,41 @@ const StyledList = styled(List)`
231
208
 
232
209
  &:hover {
233
210
  background: #f9f9f9;
234
- color: ${(p) => {
235
- var _a;
236
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
211
+ color: ${(t) => {
212
+ var e;
213
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
237
214
  }};
238
215
  }
239
216
  }
240
217
  }
241
- `;
242
- const DropdownList = (_e) => {
243
- var _f = _e, {
244
- trigger,
245
- className,
246
- children,
247
- closeButtonAriaLabel
248
- } = _f, other = __objRest(_f, [
218
+ `, Vt = (i) => {
219
+ var o = i, {
220
+ trigger: t,
221
+ className: e,
222
+ children: a,
223
+ closeButtonAriaLabel: r
224
+ } = o, s = w(o, [
249
225
  "trigger",
250
226
  "className",
251
227
  "children",
252
228
  "closeButtonAriaLabel"
253
229
  ]);
254
- return /* @__PURE__ */ React.createElement(Dropdown, {
255
- className: appendClassNames(className, "humany-dropdown-list"),
256
- closeButtonAriaLabel,
257
- trigger
258
- }, /* @__PURE__ */ React.createElement(StyledItemList$2, __spreadValues({}, other), children));
259
- };
260
- const StyledItemList$2 = styled(ItemList)`
261
- ${itemList}
262
- font-family: ${(p) => {
263
- var _a;
264
- return (_a = p.theme.fonts) == null ? void 0 : _a.type;
230
+ return /* @__PURE__ */ n.createElement(ye, {
231
+ className: z(e, "humany-dropdown-list"),
232
+ closeButtonAriaLabel: r,
233
+ trigger: t
234
+ }, /* @__PURE__ */ n.createElement(mt, $({}, s), a));
235
+ }, mt = d(Y)`
236
+ ${_}
237
+ font-family: ${(t) => {
238
+ var e;
239
+ return (e = t.theme.fonts) == null ? void 0 : e.type;
265
240
  }};
266
241
  > div {
267
- ${headingElement("> h1", css`
268
- font-size: ${(p) => {
269
- var _a;
270
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
242
+ ${ee("> h1", h`
243
+ font-size: ${(t) => {
244
+ var e;
245
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
271
246
  }};
272
247
  line-height: 1.2em;
273
248
  `)}
@@ -275,9 +250,9 @@ const StyledItemList$2 = styled(ItemList)`
275
250
  > ul > li {
276
251
  overflow: visible;
277
252
  font-weight: 300;
278
- font-size: ${(p) => {
279
- var _a;
280
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
253
+ font-size: ${(t) => {
254
+ var e;
255
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
281
256
  }};
282
257
 
283
258
  a {
@@ -290,13 +265,11 @@ const StyledItemList$2 = styled(ItemList)`
290
265
  }
291
266
  }
292
267
  }
293
- `;
294
- const spin = keyframes`
268
+ `, dt = Ee`
295
269
  100% {
296
270
  transform: rotate(360deg);
297
271
  }
298
- `;
299
- const dash = keyframes`
272
+ `, ft = Ee`
300
273
  0% {
301
274
  stroke-dasharray: 1, 200;
302
275
  stroke-dashoffset: 0;
@@ -309,9 +282,8 @@ const dash = keyframes`
309
282
  stroke-dasharray: 89, 200;
310
283
  stroke-dashoffset: -124px;
311
284
  }
312
- `;
313
- const SpinnerSvg = styled.svg`
314
- animation: ${spin} 2s linear infinite;
285
+ `, ze = d.svg`
286
+ animation: ${dt} 2s linear infinite;
315
287
  height: 100%;
316
288
  transform-origin: center center;
317
289
  width: 100%;
@@ -322,8 +294,7 @@ const SpinnerSvg = styled.svg`
322
294
  right: 0;
323
295
  margin: auto;
324
296
  transition: 200ms ease-out opacity;
325
- `;
326
- const Wrapper$1 = styled.div`
297
+ `, Se = d.div`
327
298
  position: absolute;
328
299
  top: 0;
329
300
  bottom: 0;
@@ -331,18 +302,17 @@ const Wrapper$1 = styled.div`
331
302
  right: 0;
332
303
  height: 100%;
333
304
  width: 100%;
334
- pointer-events: ${(p) => p["data-loading"] ? "all" : "none"}
305
+ pointer-events: ${(t) => t["data-loading"] ? "all" : "none"}
335
306
  display: flex;
336
307
  flex-direction: column;
337
308
  justify-content: center;
338
309
  transition: 200ms ease-out opacity;
339
310
  box-sizing: border-box;
340
311
  overflow: hidden;
341
- ${SpinnerSvg} {
342
- opacity: ${(p) => p["data-loading"] ? "1" : "0"}
312
+ ${ze} {
313
+ opacity: ${(t) => t["data-loading"] ? "1" : "0"}
343
314
  }
344
- `;
345
- const Spinner = styled.div`
315
+ `, ut = d.div`
346
316
  position: relative;
347
317
  margin: 0 auto;
348
318
  width: 100px;
@@ -351,89 +321,81 @@ const Spinner = styled.div`
351
321
  display: block;
352
322
  padding-top: 100%;
353
323
  }
354
- `;
355
- const SpinnerCircle = styled.circle`
324
+ `, ht = d.circle`
356
325
  stroke-dasharray: 1, 200;
357
326
  stroke-dashoffset: 0;
358
- animation: ${dash} 1.5s ease-in-out infinite;
327
+ animation: ${ft} 1.5s ease-in-out infinite;
359
328
  stroke-linecap: round;
360
- stroke: ${(p) => {
361
- var _a;
362
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
329
+ stroke: ${(t) => {
330
+ var e;
331
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
363
332
  }};
364
333
  stroke-width: 2px;
365
- `;
366
- const Loader = ({ loading = false }) => {
367
- return /* @__PURE__ */ React.createElement(Wrapper$1, {
368
- className: "humany-loader",
369
- "data-loading": loading
370
- }, /* @__PURE__ */ React.createElement(Spinner, {
371
- className: "humany-spinner"
372
- }, /* @__PURE__ */ React.createElement(SpinnerSvg, {
373
- viewBox: "25 25 50 50"
374
- }, /* @__PURE__ */ React.createElement(SpinnerCircle, {
375
- cx: "50",
376
- cy: "50",
377
- r: "20",
378
- fill: "none",
379
- "stroke-width": "2",
380
- "stroke-miterlimit": "10"
381
- }))));
382
- };
383
- const loadingOpacity = css`
384
- ${(p) => p["data-loading"] && "position: relative;"};
385
- ${(p) => p["data-loading"] && "min-height: 150px;"}
334
+ `, gt = ({ loading: t = !1 }) => /* @__PURE__ */ n.createElement(Se, {
335
+ className: "humany-loader",
336
+ "data-loading": t
337
+ }, /* @__PURE__ */ n.createElement(ut, {
338
+ className: "humany-spinner"
339
+ }, /* @__PURE__ */ n.createElement(ze, {
340
+ viewBox: "25 25 50 50"
341
+ }, /* @__PURE__ */ n.createElement(ht, {
342
+ cx: "50",
343
+ cy: "50",
344
+ r: "20",
345
+ fill: "none",
346
+ "stroke-width": "2",
347
+ "stroke-miterlimit": "10"
348
+ })))), pt = h`
349
+ ${(t) => t["data-loading"] && "position: relative;"};
350
+ ${(t) => t["data-loading"] && "min-height: 150px;"}
386
351
  > * {
387
352
  transition: 200ms ease-out opacity;
388
- opacity: ${(p) => p["data-loading"] ? "0.5" : "1"};
353
+ opacity: ${(t) => t["data-loading"] ? "0.5" : "1"};
389
354
  }
390
- ${Wrapper$1} {
391
- opacity: ${(p) => p["data-loading"] ? "1" : "0"};
355
+ ${Se} {
356
+ opacity: ${(t) => t["data-loading"] ? "1" : "0"};
392
357
  }
393
- `;
394
- const SmallCaret = styled(Icon)`
358
+ `, Kt = d(H)`
395
359
  && {
396
- font-size: ${(p) => {
397
- var _a;
398
- return (_a = p.theme.fonts) == null ? void 0 : _a.small;
360
+ font-size: ${(t) => {
361
+ var e;
362
+ return (e = t.theme.fonts) == null ? void 0 : e.small;
399
363
  }};
400
364
  }
401
365
  width: 1.2em;
402
- `;
403
- const StyledHeaderText = styled(Text)`
404
- font-size: ${(p) => {
405
- var _a;
406
- return (_a = p.theme.fonts) == null ? void 0 : _a.medium;
366
+ `, qt = d($e)`
367
+ font-size: ${(t) => {
368
+ var e;
369
+ return (e = t.theme.fonts) == null ? void 0 : e.medium;
407
370
  }};
408
371
  font-weight: normal;
409
372
  line-height: 1.2em;
410
- color: ${(p) => {
411
- var _a;
412
- return (_a = p.theme.colors) == null ? void 0 : _a.text;
373
+ color: ${(t) => {
374
+ var e;
375
+ return (e = t.theme.colors) == null ? void 0 : e.text;
413
376
  }};
414
- `;
415
- const StyledListButton = styled(Button)`
377
+ `, yt = d(te)`
416
378
  display: flex;
417
379
  align-items: center;
418
380
 
419
- ${(p) => {
420
- var _a;
421
- return p["data-has-label"] === "true" && p["data-has-symbol"] === "true" && `
381
+ ${(t) => {
382
+ var e;
383
+ return t["data-has-label"] === "true" && t["data-has-symbol"] === "true" && `
422
384
  svg, i {
423
- margin: 0 ${(_a = p.theme.sizes) == null ? void 0 : _a.small} 0 0;
385
+ margin: 0 ${(e = t.theme.sizes) == null ? void 0 : e.small} 0 0;
424
386
  }
425
387
  `;
426
388
  }}
427
389
 
428
390
  &:focus {
429
- ${(p) => {
430
- var _a;
431
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
432
- ${(p2) => p2["data-has-label"] === "true" && paddedBorderTabStyle}
391
+ ${(t) => {
392
+ var e;
393
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && h`
394
+ ${(a) => a["data-has-label"] === "true" && le}
433
395
 
434
396
  svg, i {
435
- ${(p2) => p2["data-has-label"] === "false" && p2["data-has-symbol"] === "true" && css`
436
- ${paddedBorderTabStyle}
397
+ ${(a) => a["data-has-label"] === "false" && a["data-has-symbol"] === "true" && h`
398
+ ${le}
437
399
  box-sizing: content-box;
438
400
  `}
439
401
  }
@@ -445,78 +407,74 @@ const StyledListButton = styled(Button)`
445
407
  flex: 1;
446
408
  font-weight: 300;
447
409
  }
448
- `;
449
- const FavoriteButton = ({
450
- addFavoriteTooltip,
451
- removeFavoriteCancelLabel,
452
- removeFavoriteConfirmLabel,
453
- removeFavoriteHeader,
454
- removeFavoriteLabel,
455
- removeFavoriteTooltip,
456
- id,
457
- isFavorite,
458
- guideTitle,
459
- buttonLabel = "",
460
- actions: { addFavorite, removeFavorite }
410
+ `, $t = ({
411
+ addFavoriteTooltip: t,
412
+ removeFavoriteCancelLabel: e,
413
+ removeFavoriteConfirmLabel: a,
414
+ removeFavoriteHeader: r,
415
+ removeFavoriteLabel: s,
416
+ removeFavoriteTooltip: i,
417
+ id: o,
418
+ isFavorite: c,
419
+ guideTitle: m,
420
+ buttonLabel: f = "",
421
+ actions: { addFavorite: u, removeFavorite: l }
461
422
  }) => {
462
- const remove = useCallback(() => {
463
- removeFavorite(id);
464
- }, [id, removeFavorite]);
465
- const add = useCallback(() => {
466
- addFavorite(id);
467
- }, [id, addFavorite]);
468
- const tooltip = `${isFavorite ? removeFavoriteTooltip : addFavoriteTooltip}${guideTitle ? `: "${guideTitle}"` : ""}`;
469
- return /* @__PURE__ */ React.createElement(React.Fragment, null, isFavorite ? /* @__PURE__ */ React.createElement(Confirm, {
470
- trigger: /* @__PURE__ */ React.createElement(StyledButton$1, {
423
+ const g = k(() => {
424
+ l(o);
425
+ }, [o, l]), S = k(() => {
426
+ u(o);
427
+ }, [o, u]), y = `${c ? i : t}${m ? `: "${m}"` : ""}`;
428
+ return /* @__PURE__ */ n.createElement(n.Fragment, null, c ? /* @__PURE__ */ n.createElement(qe, {
429
+ trigger: /* @__PURE__ */ n.createElement(de, {
471
430
  className: "humany-favorite-button",
472
- title: tooltip,
473
- "aria-label": tooltip,
431
+ title: y,
432
+ "aria-label": y,
474
433
  "data-favorite": "true",
475
- "data-has-label": buttonLabel ? "true" : "false",
434
+ "data-has-label": f ? "true" : "false",
476
435
  "data-has-symbol": "true"
477
- }, /* @__PURE__ */ React.createElement(SymbolBadge, {
436
+ }, /* @__PURE__ */ n.createElement(N, {
478
437
  size: 16,
479
438
  symbol: { type: "Svg", content: "star-empty" }
480
- }), buttonLabel && /* @__PURE__ */ React.createElement(StyledText$1, null, buttonLabel)),
481
- onConfirm: remove,
482
- cancelLabel: removeFavoriteCancelLabel,
483
- confirmLabel: removeFavoriteConfirmLabel,
484
- header: removeFavoriteHeader,
485
- text: removeFavoriteLabel
486
- }) : /* @__PURE__ */ React.createElement(StyledButton$1, {
439
+ }), f && /* @__PURE__ */ n.createElement(J, null, f)),
440
+ onConfirm: g,
441
+ cancelLabel: e,
442
+ confirmLabel: a,
443
+ header: r,
444
+ text: s
445
+ }) : /* @__PURE__ */ n.createElement(de, {
487
446
  className: "humany-favorite-button",
488
- title: tooltip,
489
- "aria-label": tooltip,
490
- onClick: add,
447
+ title: y,
448
+ "aria-label": y,
449
+ onClick: S,
491
450
  "data-favorite": "false",
492
- "data-has-label": buttonLabel ? "true" : "false",
451
+ "data-has-label": f ? "true" : "false",
493
452
  "data-has-symbol": "true"
494
- }, /* @__PURE__ */ React.createElement(SymbolBadge, {
453
+ }, /* @__PURE__ */ n.createElement(N, {
495
454
  size: 16,
496
455
  symbol: { type: "Svg", content: "star-empty" }
497
- }), buttonLabel && /* @__PURE__ */ React.createElement(StyledText$1, null, buttonLabel)));
498
- };
499
- const StyledButton$1 = styled(StyledListButton)`
456
+ }), f && /* @__PURE__ */ n.createElement(J, null, f)));
457
+ }, de = d(yt)`
500
458
  grid-area: favorite;
501
459
 
502
460
  &:focus {
503
- ${(p) => {
504
- var _a;
505
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
461
+ ${(t) => {
462
+ var e;
463
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && h`
506
464
  svg {
507
- ${(p2) => {
508
- var _a2, _b;
509
- return p2["data-favorite"] === "true" ? `
465
+ ${(a) => {
466
+ var r, s;
467
+ return a["data-favorite"] === "true" ? `
510
468
  fill: transparent;
511
469
 
512
470
  path {
513
471
  fill: transparent;
514
472
  }
515
473
  ` : `
516
- fill: ${(_a2 = p2.theme.colors) == null ? void 0 : _a2.text};
474
+ fill: ${(r = a.theme.colors) == null ? void 0 : r.text};
517
475
 
518
476
  path {
519
- fill: ${(_b = p2.theme.colors) == null ? void 0 : _b.text};
477
+ fill: ${(s = a.theme.colors) == null ? void 0 : s.text};
520
478
  }
521
479
  `;
522
480
  }}
@@ -525,56 +483,55 @@ const StyledButton$1 = styled(StyledListButton)`
525
483
  }};
526
484
  }
527
485
 
528
- ${(p) => {
529
- var _a, _b, _c, _d, _e, _f, _g;
530
- return ((_a = p.theme.colors) == null ? void 0 : _a.text) && css`
486
+ ${(t) => {
487
+ var e, a, r, s, i, o, c;
488
+ return ((e = t.theme.colors) == null ? void 0 : e.text) && h`
531
489
  svg {
532
- stroke: ${(_b = p.theme.colors) == null ? void 0 : _b.text};
490
+ stroke: ${(a = t.theme.colors) == null ? void 0 : a.text};
533
491
 
534
492
  path {
535
- stroke: ${(_c = p.theme.colors) == null ? void 0 : _c.text};
493
+ stroke: ${(r = t.theme.colors) == null ? void 0 : r.text};
536
494
  }
537
495
 
538
- ${p["data-favorite"] === "true" && `
539
- fill: ${(_d = p.theme.colors) == null ? void 0 : _d.text};
496
+ ${t["data-favorite"] === "true" && `
497
+ fill: ${(s = t.theme.colors) == null ? void 0 : s.text};
540
498
 
541
499
  path {
542
- fill: ${(_e = p.theme.colors) == null ? void 0 : _e.text};
500
+ fill: ${(i = t.theme.colors) == null ? void 0 : i.text};
543
501
  }
544
502
  `}
545
503
  }
546
504
 
547
505
  &:hover {
548
506
  svg {
549
- ${p["data-favorite"] === "true" ? `
507
+ ${t["data-favorite"] === "true" ? `
550
508
  fill: transparent;
551
509
 
552
510
  path {
553
511
  fill: transparent;
554
512
  }
555
513
  ` : `
556
- fill: ${(_f = p.theme.colors) == null ? void 0 : _f.text};
514
+ fill: ${(o = t.theme.colors) == null ? void 0 : o.text};
557
515
 
558
516
  path {
559
- fill: ${(_g = p.theme.colors) == null ? void 0 : _g.text};
517
+ fill: ${(c = t.theme.colors) == null ? void 0 : c.text};
560
518
  }
561
519
  `}
562
520
  }
563
521
  }
564
522
  `;
565
523
  }}
566
- `;
567
- var feedback = forwardRef((_g, ref) => {
568
- var _h = _g, {
569
- onFeedback = () => {
524
+ `, Gt = V((f, m) => {
525
+ var u = f, {
526
+ onFeedback: t = () => {
570
527
  },
571
- direction = "horizontal",
572
- className,
573
- header,
574
- positive,
575
- negative,
576
- selected
577
- } = _h, other = __objRest(_h, [
528
+ direction: e = "horizontal",
529
+ className: a,
530
+ header: r,
531
+ positive: s,
532
+ negative: i,
533
+ selected: o
534
+ } = u, c = w(u, [
578
535
  "onFeedback",
579
536
  "direction",
580
537
  "className",
@@ -583,316 +540,241 @@ var feedback = forwardRef((_g, ref) => {
583
540
  "negative",
584
541
  "selected"
585
542
  ]);
586
- return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({
587
- className: appendClassNames(className, "humany-feedback"),
588
- "data-direction": direction
589
- }, convertToStringAttributes(other)), {
590
- ref
591
- }), !!header && /* @__PURE__ */ React.createElement(Header, null, header), /* @__PURE__ */ React.createElement(FeedbackButton, {
543
+ return /* @__PURE__ */ n.createElement(bt, E($({
544
+ className: z(a, "humany-feedback"),
545
+ "data-direction": e
546
+ }, ve(c)), {
547
+ ref: m
548
+ }), !!r && /* @__PURE__ */ n.createElement(vt, null, r), /* @__PURE__ */ n.createElement(fe, {
592
549
  className: "humany-feedback-button",
593
- disabled: !!selected,
594
- "aria-pressed": selected === "positive",
595
- "data-selected": selected === "positive",
596
- "data-direction": direction,
597
- onClick: () => onFeedback("positive")
598
- }, /* @__PURE__ */ React.createElement(Icon, {
550
+ disabled: !!o,
551
+ "aria-pressed": o === "positive",
552
+ "data-selected": o === "positive",
553
+ "data-direction": e,
554
+ onClick: () => t("positive")
555
+ }, /* @__PURE__ */ n.createElement(H, {
599
556
  faIcon: "smile-o"
600
- }), /* @__PURE__ */ React.createElement("span", null, positive)), /* @__PURE__ */ React.createElement(FeedbackButton, {
557
+ }), /* @__PURE__ */ n.createElement("span", null, s)), /* @__PURE__ */ n.createElement(fe, {
601
558
  className: "humany-feedback-button",
602
- disabled: !!selected,
603
- "aria-pressed": selected === "negative",
604
- "data-selected": selected === "negative",
605
- "data-direction": direction,
606
- onClick: () => onFeedback("negative")
607
- }, /* @__PURE__ */ React.createElement(Icon, {
559
+ disabled: !!o,
560
+ "aria-pressed": o === "negative",
561
+ "data-selected": o === "negative",
562
+ "data-direction": e,
563
+ onClick: () => t("negative")
564
+ }, /* @__PURE__ */ n.createElement(H, {
608
565
  faIcon: "frown-o"
609
- }), /* @__PURE__ */ React.createElement("span", null, negative)));
610
- });
611
- const Header = styled(StyledText$1)`
566
+ }), /* @__PURE__ */ n.createElement("span", null, i)));
567
+ }), vt = d(J)`
612
568
  font-weight: normal;
613
- margin: 0 0 ${(p) => {
614
- var _a;
615
- return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
569
+ margin: 0 0 ${(t) => {
570
+ var e;
571
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
616
572
  }};
617
- font-size: ${(p) => {
618
- var _a;
619
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
573
+ font-size: ${(t) => {
574
+ var e;
575
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
620
576
  }};
621
577
  display: block;
622
- `;
623
- const FeedbackButton = styled(Button)`
578
+ `, fe = d(te)`
624
579
  display: inline-block;
625
- font-size: ${(p) => {
626
- var _a;
627
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
580
+ font-size: ${(t) => {
581
+ var e;
582
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
628
583
  }};
629
584
  font-weight: 300;
630
585
  && {
631
- margin-right: ${(p) => {
632
- var _a;
633
- return (_a = p.theme.sizes) == null ? void 0 : _a.large;
586
+ margin-right: ${(t) => {
587
+ var e;
588
+ return (e = t.theme.sizes) == null ? void 0 : e.large;
634
589
  }};
635
590
  }
636
591
 
637
- ${(p) => {
638
- var _a, _b;
639
- return p["data-direction"] === "horizontal" && css`
592
+ ${(t) => {
593
+ var e, a;
594
+ return t["data-direction"] === "horizontal" && h`
640
595
  width: 225px;
641
- max-width: calc(50% - ${(_a = p.theme.sizes) == null ? void 0 : _a.large} - ${(_b = p.theme.sizes) == null ? void 0 : _b.small});
596
+ max-width: calc(50% - ${(e = t.theme.sizes) == null ? void 0 : e.large} - ${(a = t.theme.sizes) == null ? void 0 : a.small});
642
597
  `;
643
598
  }}
644
599
 
645
- ${(p) => p["data-direction"] === "vertical" && css`
600
+ ${(t) => t["data-direction"] === "vertical" && h`
646
601
  min-width: 190px;
647
602
  `}
648
603
 
649
- ${(p) => {
650
- var _a;
651
- return invertedHoverButton({
652
- active: p["data-selected"],
653
- primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
604
+ ${(t) => {
605
+ var e;
606
+ return pe({
607
+ active: t["data-selected"],
608
+ primaryColor: (e = t.theme.colors) == null ? void 0 : e.primary,
654
609
  secondaryColor: "#FFFFFF"
655
610
  });
656
611
  }}
657
612
 
658
613
  i {
659
- margin: 0 ${(p) => {
660
- var _a;
661
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
614
+ margin: 0 ${(t) => {
615
+ var e;
616
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
662
617
  }} 0 0;
663
618
  }
664
- `;
665
- const Wrapper = styled.div`
666
- ${(p) => p["data-direction"] === "vertical" && css`
619
+ `, bt = d.div`
620
+ ${(t) => t["data-direction"] === "vertical" && h`
667
621
  > button {
668
622
  width: 100%;
669
623
  &:not(:last-child) {
670
- margin-bottom: ${(p2) => {
671
- var _a;
672
- return (_a = p2.theme.sizes) == null ? void 0 : _a.normal;
624
+ margin-bottom: ${(e) => {
625
+ var a;
626
+ return (a = e.theme.sizes) == null ? void 0 : a.normal;
673
627
  }};
674
628
  }
675
629
  }
676
630
  `}
677
- `;
678
- const useArrowKeys = () => {
679
- const [keyPressed, setKeyPressed] = useState(null);
680
- const left = useKeyPress("ArrowLeft");
681
- const right = useKeyPress("ArrowRight");
682
- const up = useKeyPress("ArrowUp");
683
- const down = useKeyPress("ArrowDown");
684
- const effect = () => {
685
- if (left) {
686
- setKeyPressed("left");
687
- } else if (right) {
688
- setKeyPressed("right");
689
- } else if (up) {
690
- setKeyPressed("up");
691
- } else if (down) {
692
- setKeyPressed("down");
693
- } else {
694
- setKeyPressed(null);
695
- }
696
- };
697
- useEffect(effect, [left, right, up, down]);
698
- return keyPressed;
699
- };
700
- const useDebounce = (value, delay) => {
701
- const [debouncedValue, setDebouncedValue] = useState(value);
702
- const handler = useCallback(() => {
703
- return setTimeout(() => {
704
- setDebouncedValue(value);
705
- }, delay);
706
- }, [delay, setDebouncedValue, value]);
707
- useEffect(() => {
708
- const timeout = handler();
631
+ `, Ut = () => {
632
+ const [t, e] = D(null), a = W("ArrowLeft"), r = W("ArrowRight"), s = W("ArrowUp"), i = W("ArrowDown");
633
+ return K(() => {
634
+ e(a ? "left" : r ? "right" : s ? "up" : i ? "down" : null);
635
+ }, [a, r, s, i]), t;
636
+ }, Jt = (t, e) => {
637
+ const [a, r] = D(t), s = k(() => setTimeout(() => {
638
+ r(t);
639
+ }, e), [e, r, t]);
640
+ return K(() => {
641
+ const i = s();
709
642
  return () => {
710
- clearTimeout(timeout);
643
+ clearTimeout(i);
711
644
  };
712
- }, [handler]);
713
- return debouncedValue;
714
- };
715
- const useFavorites = () => {
716
- const container = useContainer();
717
- const [favorites, setFavorites] = useState([]);
718
- const platform = container.get("favorites");
719
- useEffect(() => {
720
- if (platform) {
721
- setFavorites(platform.get());
722
- const { events } = container.get("$widget");
723
- const unsubscribe = events.subscribe("widget:favorites-updated", (_, { updated }) => {
724
- setFavorites([...updated]);
645
+ }, [s]), a;
646
+ }, xt = () => {
647
+ const t = Ge(), [e, a] = D([]), r = t.get("favorites");
648
+ K(() => {
649
+ if (r) {
650
+ a(r.get());
651
+ const { events: m } = t.get("$widget");
652
+ return m.subscribe("widget:favorites-updated", (u, { updated: l }) => {
653
+ a([...l]);
725
654
  });
726
- return unsubscribe;
727
655
  }
728
656
  }, []);
729
- const add = (guideId) => {
730
- if (!platform) {
731
- return Promise.resolve([]);
732
- }
733
- return platform.add(guideId);
734
- };
735
- const remove = (guideId) => {
736
- if (!platform) {
737
- return Promise.resolve([]);
738
- }
739
- return platform.remove(guideId);
740
- };
741
- const clear = () => {
742
- if (!platform) {
743
- return Promise.resolve([]);
744
- }
745
- return platform.clear();
746
- };
747
- const toggle = useCallback((guideId) => {
748
- if (favorites.indexOf(guideId) > -1) {
749
- return remove(guideId);
750
- } else {
751
- return add(guideId);
752
- }
753
- }, [favorites]);
657
+ const s = (m) => r ? r.add(m) : Promise.resolve([]), i = (m) => r ? r.remove(m) : Promise.resolve([]), o = () => r ? r.clear() : Promise.resolve([]), c = k((m) => e.indexOf(m) > -1 ? i(m) : s(m), [e]);
754
658
  return [
755
- favorites,
756
- useMemo(() => ({
757
- addFavorite: add,
758
- removeFavorite: remove,
759
- clearFavorites: clear,
760
- toggleFavorite: toggle
761
- }), [favorites])
659
+ e,
660
+ tt(() => ({
661
+ addFavorite: s,
662
+ removeFavorite: i,
663
+ clearFavorites: o,
664
+ toggleFavorite: c
665
+ }), [e])
762
666
  ];
763
- };
764
- var useHover = () => {
765
- const [hovering, setHovering] = useState(false);
766
- const elem = useRef();
767
- const onMouseEnter = useCallback(() => setHovering(true), [setHovering]);
768
- const onMouseLeave = useCallback(() => setHovering(false), [setHovering]);
769
- useEventListener("mouseenter", onMouseEnter, elem.current);
770
- useEventListener("mouseleave", onMouseLeave, elem.current);
771
- return [hovering, elem];
772
- };
773
- const Metadata = ({
774
- format = DateFormats.YYYY_MM_DD_HH_MM,
775
- className = "",
776
- byLabel = "",
777
- modifiedLabel = "",
778
- publishedLabel = "",
779
- modifiedBy = "",
780
- publishedBy = "",
781
- showModified = false,
782
- showPublished = false,
783
- modified,
784
- published
667
+ }, Qt = () => {
668
+ const [t, e] = D(!1), a = we(), r = k(() => e(!0), [e]), s = k(() => e(!1), [e]);
669
+ return ce("mouseenter", r, a.current), ce("mouseleave", s, a.current), [t, a];
670
+ }, wt = ({
671
+ format: t = xe.YYYY_MM_DD_HH_MM,
672
+ className: e = "",
673
+ byLabel: a = "",
674
+ modifiedLabel: r = "",
675
+ publishedLabel: s = "",
676
+ modifiedBy: i = "",
677
+ publishedBy: o = "",
678
+ showModified: c = !1,
679
+ showPublished: m = !1,
680
+ modified: f,
681
+ published: u
785
682
  }) => {
786
- const publishedTimestamp = showPublished && published ? /* @__PURE__ */ React.createElement(StyledTimestamp$1, {
787
- format,
788
- timestamp: published
789
- }) : null;
790
- const modifiedTimestamp = showModified && modified ? /* @__PURE__ */ React.createElement(StyledTimestamp$1, {
791
- format,
792
- timestamp: modified
683
+ const l = m && u ? /* @__PURE__ */ n.createElement(ue, {
684
+ format: t,
685
+ timestamp: u
686
+ }) : null, g = c && f ? /* @__PURE__ */ n.createElement(ue, {
687
+ format: t,
688
+ timestamp: f
793
689
  }) : null;
794
- if (!publishedTimestamp && !modifiedTimestamp) {
795
- return null;
796
- }
797
- return /* @__PURE__ */ React.createElement(StyledText, {
798
- className: appendClassNames(className, "humany-metadata")
799
- }, publishedTimestamp && /* @__PURE__ */ React.createElement(StyledText, {
690
+ return !l && !g ? null : /* @__PURE__ */ n.createElement(U, {
691
+ className: z(e, "humany-metadata")
692
+ }, l && /* @__PURE__ */ n.createElement(U, {
800
693
  className: "humany-published"
801
- }, publishedLabel, publishedTimestamp, byLabel && publishedBy && ` ${byLabel.replace("{{editor}}", publishedBy)}`), modifiedTimestamp && /* @__PURE__ */ React.createElement(StyledText, {
694
+ }, s, l, a && o && ` ${a.replace("{{editor}}", o)}`), g && /* @__PURE__ */ n.createElement(U, {
802
695
  className: "humany-modified"
803
- }, publishedTimestamp && ", ", modifiedLabel, modifiedTimestamp, byLabel && modifiedBy && ` ${byLabel.replace("{{editor}}", modifiedBy)}`));
804
- };
805
- const StyledTimestamp$1 = styled(Timestamp)`
696
+ }, l && ", ", r, g, a && i && ` ${a.replace("{{editor}}", i)}`));
697
+ }, ue = d(be)`
806
698
  &:not(:first-child) {
807
699
  margin-left: 4px;
808
700
  }
809
701
  &:not(:last-child) {
810
702
  margin-right: 4px;
811
703
  }
812
- `;
813
- const StyledText = styled(Text)`
704
+ `, U = d($e)`
814
705
  font-style: italic;
815
- `;
816
- const Tags = ({ tags }) => {
817
- if (!tags.filter((t) => t.symbol).length) {
818
- return null;
819
- }
820
- return /* @__PURE__ */ React.createElement(StyledTagList, {
821
- className: "humany-guide-list-tags",
822
- items: tags,
823
- renderItem: ({ id, symbol, title }) => symbol && /* @__PURE__ */ React.createElement("li", {
824
- key: id,
825
- "data-tag": id
826
- }, /* @__PURE__ */ React.createElement(StyledTagIcon, {
827
- size: 18,
828
- symbol,
829
- title
830
- }))
831
- });
832
- };
833
- const AccordionListItem = forwardRef(({ title, id, route, symbolSize, collapseUri, children }, ref) => {
834
- const { params } = useRouteData();
835
- return /* @__PURE__ */ React.createElement(ActiveAccordionListItem, {
836
- ref,
837
- "data-guide": id
838
- }, /* @__PURE__ */ React.createElement(TextLink, {
839
- title,
840
- "aria-label": title,
841
- routeName: route,
842
- params: createParams(__spreadProps(__spreadValues({}, params), {
843
- uriName: collapseUri ? collapseUri : void 0,
706
+ `, Et = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ n.createElement(St, {
707
+ className: "humany-guide-list-tags",
708
+ items: t,
709
+ renderItem: ({ id: e, symbol: a, title: r }) => a && /* @__PURE__ */ n.createElement("li", {
710
+ key: e,
711
+ "data-tag": e
712
+ }, /* @__PURE__ */ n.createElement(Nt, {
713
+ size: 18,
714
+ symbol: a,
715
+ title: r
716
+ }))
717
+ }) : null, Xt = V(({ title: t, id: e, route: a, symbolSize: r, collapseUri: s, children: i }, o) => {
718
+ const { params: c } = he();
719
+ return /* @__PURE__ */ n.createElement(kt, {
720
+ ref: o,
721
+ "data-guide": e
722
+ }, /* @__PURE__ */ n.createElement(Q, {
723
+ title: t,
724
+ "aria-label": t,
725
+ routeName: a,
726
+ params: j(E($({}, c), {
727
+ uriName: s || void 0,
844
728
  id: void 0,
845
729
  guide: void 0,
846
730
  accordion: void 0
847
731
  })),
848
- text: title
849
- }, /* @__PURE__ */ React.createElement(SymbolBadge, {
850
- size: symbolSize,
732
+ text: t
733
+ }, /* @__PURE__ */ n.createElement(N, {
734
+ size: r,
851
735
  symbol: { type: "Svg", content: "caret-up" }
852
- })), children);
853
- });
854
- const ActiveAccordionListItem = styled.li`
736
+ })), i);
737
+ }), kt = d.li`
855
738
  > a {
856
739
  grid-column: 1 / -1
857
740
  font-weight: bold;
858
- margin: 0 0 ${(p) => {
859
- var _a;
860
- return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
741
+ margin: 0 0 ${(t) => {
742
+ var e;
743
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
861
744
  }} 0;
862
745
  }
863
746
 
864
747
  > div {
865
748
  grid-column: 1 / -1
866
749
  }
867
- `;
868
- var guideList = forwardRef((_i, ref) => {
869
- var _j = _i, {
870
- expandable = false,
871
- routing = {},
872
- paramMappers = {},
873
- symbolSize = 11,
874
- pageRole = "link",
875
- pageCaret = "down",
876
- showTags = false,
877
- showFavoriteToggle = false,
878
- localPaging = false,
879
- onItemClick = () => {
750
+ `, Zt = V((Pt, Ie) => {
751
+ var ae = Pt, {
752
+ expandable: t = !1,
753
+ routing: e = {},
754
+ paramMappers: a = {},
755
+ symbolSize: r = 11,
756
+ pageRole: s = "link",
757
+ pageCaret: i = "down",
758
+ showTags: o = !1,
759
+ showFavoriteToggle: c = !1,
760
+ localPaging: m = !1,
761
+ onItemClick: f = () => {
880
762
  },
881
- dispatch = () => {
763
+ dispatch: u = () => {
882
764
  },
883
- metadata = {},
884
- pageLabel,
885
- className,
886
- children,
887
- items,
888
- renderItem,
889
- addFavoriteTooltip,
890
- removeFavoriteCancelLabel,
891
- removeFavoriteConfirmLabel,
892
- removeFavoriteHeader,
893
- removeFavoriteLabel,
894
- removeFavoriteTooltip
895
- } = _j, other = __objRest(_j, [
765
+ metadata: l = {},
766
+ pageLabel: g,
767
+ className: S,
768
+ children: y,
769
+ items: b,
770
+ renderItem: T,
771
+ addFavoriteTooltip: A,
772
+ removeFavoriteCancelLabel: M,
773
+ removeFavoriteConfirmLabel: Ne,
774
+ removeFavoriteHeader: Te,
775
+ removeFavoriteLabel: Le,
776
+ removeFavoriteTooltip: Fe
777
+ } = ae, Ce = w(ae, [
896
778
  "expandable",
897
779
  "routing",
898
780
  "paramMappers",
@@ -918,131 +800,109 @@ var guideList = forwardRef((_i, ref) => {
918
800
  "removeFavoriteTooltip"
919
801
  ]);
920
802
  const {
921
- accessibility: { isTabbing = false }
922
- } = useContext(ThemeContext);
923
- const innerRef = useRef();
924
- const prevItems = usePrevious(items);
925
- const { guide: guideRoute = "guide", page: pageRoute = "index" } = routing;
926
- const {
927
- guide: mapGuideParams = ({ id }) => createParams({ guide: id }),
928
- page: mapPageParams = () => createParams()
929
- } = paramMappers;
930
- const [favorites, actions] = useFavorites();
931
- useImperativeHandle(ref, () => innerRef.current);
932
- const defaultRenderer = (guide) => {
933
- const { id, title, tags, published, modified, publishedBy, modifiedBy } = guide;
934
- return /* @__PURE__ */ React.createElement("li", {
935
- key: id,
936
- "data-guide": id,
937
- "has-metadata": (!!(metadata == null ? void 0 : metadata.showPublished) && !!published || !!(metadata == null ? void 0 : metadata.showModified) && !!modified).toString()
938
- }, /* @__PURE__ */ React.createElement(TextLink, {
803
+ accessibility: { isTabbing: ne = !1 }
804
+ } = at(rt), F = we(), C = Ue(b), { guide: De = "guide", page: Ae = "index" } = e, {
805
+ guide: Me = ({ id: p }) => j({ guide: p }),
806
+ page: re = () => j()
807
+ } = a, [Pe, Be] = xt();
808
+ nt(Ie, () => F.current);
809
+ const q = (p) => {
810
+ const { id: x, title: v, tags: L, published: P, modified: I, publishedBy: B, modifiedBy: G } = p;
811
+ return /* @__PURE__ */ n.createElement("li", {
812
+ key: x,
813
+ "data-guide": x,
814
+ "has-metadata": (!!(l != null && l.showPublished) && !!P || !!(l != null && l.showModified) && !!I).toString()
815
+ }, /* @__PURE__ */ n.createElement(Q, {
939
816
  className: "humany-guide-link",
940
- title,
941
- "aria-label": title,
942
- routeName: guideRoute,
943
- onClick: (e) => onItemClick(e, guide),
944
- params: mapGuideParams(guide),
945
- text: title
946
- }, /* @__PURE__ */ React.createElement(SymbolBadge, {
947
- size: symbolSize,
817
+ title: v,
818
+ "aria-label": v,
819
+ routeName: De,
820
+ onClick: (je) => f(je, p),
821
+ params: Me(p),
822
+ text: v
823
+ }, /* @__PURE__ */ n.createElement(N, {
824
+ size: r,
948
825
  symbol: {
949
826
  type: "Svg",
950
- content: expandable ? "caret-down" : "caret-right"
827
+ content: t ? "caret-down" : "caret-right"
951
828
  }
952
- })), showFavoriteToggle && /* @__PURE__ */ React.createElement(FavoriteButton, {
953
- guideTitle: title,
954
- addFavoriteTooltip,
955
- removeFavoriteCancelLabel,
956
- removeFavoriteConfirmLabel,
957
- removeFavoriteHeader,
958
- removeFavoriteLabel,
959
- removeFavoriteTooltip,
960
- isFavorite: favorites.indexOf(id) > -1,
961
- actions,
962
- id
963
- }), showTags && /* @__PURE__ */ React.createElement(Tags, {
964
- tags
965
- }), /* @__PURE__ */ React.createElement(StyledMetadata, __spreadProps(__spreadValues({}, metadata), {
966
- indent: expandable ? void 0 : symbolSize,
967
- modified,
968
- published,
969
- publishedBy,
970
- modifiedBy
829
+ })), c && /* @__PURE__ */ n.createElement($t, {
830
+ guideTitle: v,
831
+ addFavoriteTooltip: A,
832
+ removeFavoriteCancelLabel: M,
833
+ removeFavoriteConfirmLabel: Ne,
834
+ removeFavoriteHeader: Te,
835
+ removeFavoriteLabel: Le,
836
+ removeFavoriteTooltip: Fe,
837
+ isFavorite: Pe.indexOf(x) > -1,
838
+ actions: Be,
839
+ id: x
840
+ }), o && /* @__PURE__ */ n.createElement(Et, {
841
+ tags: L
842
+ }), /* @__PURE__ */ n.createElement(Tt, E($({}, l), {
843
+ indent: t ? void 0 : r,
844
+ modified: I,
845
+ published: P,
846
+ publishedBy: B,
847
+ modifiedBy: G
971
848
  })));
972
- };
973
- const renderer = useCallback((guide, index, items2) => {
974
- if (renderItem) {
975
- return renderItem(guide, index, items2, defaultRenderer);
976
- }
977
- return defaultRenderer(guide);
978
- }, [renderItem, defaultRenderer]);
979
- const onPageClick = useCallback((e) => {
980
- if (localPaging) {
981
- e.preventDefault();
982
- dispatch("page", mapPageParams());
983
- }
984
- }, [dispatch, localPaging]);
985
- useEffect(() => {
986
- if (isTabbing && prevItems && prevItems.length < items.length && innerRef.current) {
987
- const elements = innerRef.current.querySelectorAll(".humany-guide-list > ul > li");
988
- const listItemElem = elements[prevItems.length];
989
- if (elements.length === items.length && prevItems.length) {
990
- const nextListItem = elements[prevItems.length];
991
- if (nextListItem) {
992
- const focusNext = nextListItem.querySelector(".humany-guide-link");
993
- focusNext && focusNext.focus();
849
+ }, Re = k((p, x, v) => T ? T(p, x, v, q) : q(p), [T, q]), We = k((p) => {
850
+ m && (p.preventDefault(), u("page", re()));
851
+ }, [u, m]);
852
+ K(() => {
853
+ if (ne && C && C.length < b.length && F.current) {
854
+ const p = F.current.querySelectorAll(".humany-guide-list > ul > li"), x = p[C.length];
855
+ if (p.length === b.length && C.length) {
856
+ const v = p[C.length];
857
+ if (v) {
858
+ const L = v.querySelector(".humany-guide-link");
859
+ L && L.focus();
994
860
  }
995
- } else if (listItemElem) {
996
- const observer = new MutationObserver((mutations, observer2) => {
997
- mutations.forEach((mutation) => {
998
- if (mutation.addedNodes) {
999
- const found = Array.from(mutation.addedNodes).find((node) => node.tagName === "A");
1000
- if (found && htmlParentContains(innerRef.current, document.activeElement)) {
1001
- isTabbing && found.focus();
1002
- observer2.disconnect();
1003
- }
861
+ } else
862
+ x && new MutationObserver((L, P) => {
863
+ L.forEach((I) => {
864
+ if (I.addedNodes) {
865
+ const B = Array.from(I.addedNodes).find((G) => G.tagName === "A");
866
+ B && et(F.current, document.activeElement) && (ne && B.focus(), P.disconnect());
1004
867
  }
1005
868
  });
869
+ }).observe(x, {
870
+ attributes: !1,
871
+ characterData: !1,
872
+ childList: !0,
873
+ subtree: !0,
874
+ attributeOldValue: !1,
875
+ characterDataOldValue: !1
1006
876
  });
1007
- observer.observe(listItemElem, {
1008
- attributes: false,
1009
- characterData: false,
1010
- childList: true,
1011
- subtree: true,
1012
- attributeOldValue: false,
1013
- characterDataOldValue: false
1014
- });
1015
- }
1016
877
  }
1017
878
  });
1018
- const hasMetaData = !!Object.keys(metadata).filter((k) => typeof metadata[k] !== "undefined").length;
1019
- return /* @__PURE__ */ React.createElement(StyledItemList$1, __spreadProps(__spreadValues({
1020
- className: appendClassNames(className, "humany-guide-list"),
1021
- "data-item-count": items.length,
1022
- items,
1023
- renderItem: renderer,
1024
- expandable: expandable ? "true" : "false",
1025
- "grid-items": showTags || showFavoriteToggle || hasMetaData ? "true" : "false"
1026
- }, convertToStringAttributes(other)), {
1027
- ref: innerRef
1028
- }), pageLabel ? /* @__PURE__ */ React.createElement(TextLink, {
1029
- text: pageLabel,
1030
- title: pageLabel,
1031
- "aria-label": pageLabel,
1032
- routeName: pageRoute,
1033
- role: pageRole,
1034
- params: mapPageParams(),
1035
- onClick: onPageClick
1036
- }, /* @__PURE__ */ React.createElement(SymbolBadge, {
1037
- size: symbolSize,
1038
- symbol: { type: "Svg", content: `caret-${pageCaret}` }
1039
- })) : null, children);
1040
- });
1041
- const StyledItemList$1 = styled(ItemList)`
1042
- ${itemList}
1043
- padding: ${(p) => {
1044
- var _a;
1045
- return (_a = p.theme.sizes) == null ? void 0 : _a.large;
879
+ const He = !!Object.keys(l).filter((p) => typeof l[p] != "undefined").length;
880
+ return /* @__PURE__ */ n.createElement(zt, E($({
881
+ className: z(S, "humany-guide-list"),
882
+ "data-item-count": b.length,
883
+ items: b,
884
+ renderItem: Re,
885
+ expandable: t ? "true" : "false",
886
+ "grid-items": o || c || He ? "true" : "false"
887
+ }, ve(Ce)), {
888
+ ref: F
889
+ }), g ? /* @__PURE__ */ n.createElement(Q, {
890
+ text: g,
891
+ title: g,
892
+ "aria-label": g,
893
+ routeName: Ae,
894
+ role: s,
895
+ params: re(),
896
+ onClick: We
897
+ }, /* @__PURE__ */ n.createElement(N, {
898
+ size: r,
899
+ symbol: { type: "Svg", content: `caret-${i}` }
900
+ })) : null, y);
901
+ }), zt = d(Y)`
902
+ ${_}
903
+ padding: ${(t) => {
904
+ var e;
905
+ return (e = t.theme.sizes) == null ? void 0 : e.large;
1046
906
  }};
1047
907
  overflow: auto;
1048
908
  justify-content: flex-start;
@@ -1051,13 +911,13 @@ const StyledItemList$1 = styled(ItemList)`
1051
911
  text-decoration: none;
1052
912
 
1053
913
  > div {
1054
- ${headingElement("> h1", css`
914
+ ${ee("> h1", h`
1055
915
  white-space: pre-wrap;
1056
916
  `)}
1057
917
  }
1058
918
 
1059
919
  > ul > li {
1060
- ${(p) => p["grid-items"] === "true" && css`
920
+ ${(t) => t["grid-items"] === "true" && h`
1061
921
  display: grid;
1062
922
  grid-template-columns: auto 1fr 1fr;
1063
923
  gap: 0px 0px;
@@ -1065,15 +925,15 @@ const StyledItemList$1 = styled(ItemList)`
1065
925
  align-items: center;
1066
926
 
1067
927
  > button {
1068
- margin: 0 0 0 ${(p2) => {
1069
- var _a;
1070
- return (_a = p2.theme.sizes) == null ? void 0 : _a.small;
928
+ margin: 0 0 0 ${(e) => {
929
+ var a;
930
+ return (a = e.theme.sizes) == null ? void 0 : a.small;
1071
931
  }};
1072
932
 
1073
933
  &[data-favorite='false'] {
1074
- ${(p2) => {
1075
- var _a;
1076
- return ((_a = p2.theme.accessibility) == null ? void 0 : _a.isTabbing) ? "opacity: 0;" : "display: none;";
934
+ ${(e) => {
935
+ var a;
936
+ return (a = e.theme.accessibility) != null && a.isTabbing ? "opacity: 0;" : "display: none;";
1077
937
  }};
1078
938
  &:focus {
1079
939
  opacity: 1;
@@ -1082,9 +942,9 @@ const StyledItemList$1 = styled(ItemList)`
1082
942
  }
1083
943
 
1084
944
  > span {
1085
- font-size: ${(p2) => {
1086
- var _a;
1087
- return (_a = p2.theme.fonts) == null ? void 0 : _a.small;
945
+ font-size: ${(e) => {
946
+ var a;
947
+ return (a = e.theme.fonts) == null ? void 0 : a.small;
1088
948
  }};
1089
949
  }
1090
950
 
@@ -1103,9 +963,9 @@ const StyledItemList$1 = styled(ItemList)`
1103
963
  }
1104
964
  `}
1105
965
  > a {
1106
- color: ${(p) => {
1107
- var _a;
1108
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
966
+ color: ${(t) => {
967
+ var e;
968
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
1109
969
  }};
1110
970
  overflow: hidden;
1111
971
  text-overflow: ellipsis;
@@ -1113,19 +973,19 @@ const StyledItemList$1 = styled(ItemList)`
1113
973
  display: inline-block;
1114
974
 
1115
975
  svg {
1116
- margin: 0 calc(${(p) => {
1117
- var _a;
1118
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
976
+ margin: 0 calc(${(t) => {
977
+ var e;
978
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1119
979
  }}*2) 0 0;
1120
980
  line {
1121
- stroke: ${(p) => {
1122
- var _a;
1123
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
981
+ stroke: ${(t) => {
982
+ var e;
983
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
1124
984
  }};
1125
985
  }
1126
986
  }
1127
987
 
1128
- ${(p) => p.expandable === "true" && css`
988
+ ${(t) => t.expandable === "true" && h`
1129
989
  display: flex;
1130
990
  flex-direction: row-reverse;
1131
991
  justify-content: flex-end;
@@ -1137,18 +997,18 @@ const StyledItemList$1 = styled(ItemList)`
1137
997
  }
1138
998
 
1139
999
  svg {
1140
- margin: 0 0 0 ${(p2) => {
1141
- var _a;
1142
- return (_a = p2.theme.sizes) == null ? void 0 : _a.small;
1000
+ margin: 0 0 0 ${(e) => {
1001
+ var a;
1002
+ return (a = e.theme.sizes) == null ? void 0 : a.small;
1143
1003
  }};
1144
1004
  }
1145
1005
  `}
1146
1006
 
1147
1007
  &:focus {
1148
- ${(p) => {
1149
- var _a;
1150
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
1151
- ${borderTabStyle}
1008
+ ${(t) => {
1009
+ var e;
1010
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && h`
1011
+ ${X}
1152
1012
  text-decoration: underline;
1153
1013
  `;
1154
1014
  }};
@@ -1163,13 +1023,13 @@ const StyledItemList$1 = styled(ItemList)`
1163
1023
  }
1164
1024
 
1165
1025
  > a {
1166
- color: ${(p) => {
1167
- var _a;
1168
- return (_a = p.theme.colors) == null ? void 0 : _a.text;
1026
+ color: ${(t) => {
1027
+ var e;
1028
+ return (e = t.theme.colors) == null ? void 0 : e.text;
1169
1029
  }};
1170
- margin: ${(p) => {
1171
- var _a;
1172
- return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
1030
+ margin: ${(t) => {
1031
+ var e;
1032
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
1173
1033
  }} 0 0;
1174
1034
  align-self: flex-start;
1175
1035
  align-items: center;
@@ -1180,138 +1040,127 @@ const StyledItemList$1 = styled(ItemList)`
1180
1040
  }
1181
1041
 
1182
1042
  svg {
1183
- margin: 0 calc(${(p) => {
1184
- var _a;
1185
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
1043
+ margin: 0 calc(${(t) => {
1044
+ var e;
1045
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1186
1046
  }}*2) 0 0;
1187
1047
  line {
1188
- stroke: ${(p) => {
1189
- var _a;
1190
- return (_a = p.theme.colors) == null ? void 0 : _a.text;
1048
+ stroke: ${(t) => {
1049
+ var e;
1050
+ return (e = t.theme.colors) == null ? void 0 : e.text;
1191
1051
  }};
1192
1052
  }
1193
1053
  }
1194
1054
 
1195
1055
  &:focus {
1196
- ${(p) => {
1197
- var _a;
1198
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
1199
- ${borderTabStyle}
1056
+ ${(t) => {
1057
+ var e;
1058
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && h`
1059
+ ${X}
1200
1060
  text-decoration: underline;
1201
1061
  `;
1202
1062
  }};
1203
1063
  }
1204
1064
  }
1205
- `;
1206
- const StyledTagList = styled(List)`
1207
- ${list}
1065
+ `, St = d(Z)`
1066
+ ${ge}
1208
1067
  display: flex;
1209
1068
  margin: 0 0 0 auto;
1210
1069
  grid-area: tags;
1211
1070
 
1212
1071
  li,
1213
1072
  li:last-child {
1214
- margin: 0 0 0 ${(p) => {
1215
- var _a;
1216
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
1073
+ margin: 0 0 0 ${(t) => {
1074
+ var e;
1075
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1217
1076
  }};
1218
1077
  display: flex;
1219
1078
  align-items: center;
1220
1079
  justify-content: space-between;
1221
1080
  }
1222
- `;
1223
- const StyledTagIcon = styled(SymbolBadge)`
1081
+ `, Nt = d(N)`
1224
1082
  display: block;
1225
- color: ${(p) => {
1226
- var _a;
1227
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
1083
+ color: ${(t) => {
1084
+ var e;
1085
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
1228
1086
  }};
1229
- ${(p) => {
1230
- if (p.symbol.type === "Uri") {
1087
+ ${(t) => {
1088
+ if (t.symbol.type === "Uri")
1231
1089
  return `
1232
- width: ${p.size}px;
1233
- height: ${p.size}px;
1090
+ width: ${t.size}px;
1091
+ height: ${t.size}px;
1234
1092
  `;
1235
- }
1236
- if (p.symbol.type === "FontAwesome") {
1093
+ if (t.symbol.type === "FontAwesome")
1237
1094
  return `
1238
- font-size: ${p.size}px;
1095
+ font-size: ${t.size}px;
1239
1096
  `;
1240
- }
1241
1097
  }}
1242
- `;
1243
- const StyledMetadata = styled(Metadata)`
1098
+ `, Tt = d(wt)`
1244
1099
  grid-area: metadata;
1245
1100
  text-overflow: ellipsis;
1246
1101
  overflow: hidden;
1247
- font-size: ${(p) => {
1248
- var _a;
1249
- return (_a = p.theme.fonts) == null ? void 0 : _a.small;
1102
+ font-size: ${(t) => {
1103
+ var e;
1104
+ return (e = t.theme.fonts) == null ? void 0 : e.small;
1250
1105
  }};
1251
- ${(p) => {
1252
- var _a;
1253
- return typeof p.indent === "number" && `text-indent: calc(${(_a = p.theme.sizes) == null ? void 0 : _a.small} * 2 + ${p.indent}px);`;
1106
+ ${(t) => {
1107
+ var e;
1108
+ return typeof t.indent == "number" && `text-indent: calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2 + ${t.indent}px);`;
1254
1109
  }}
1255
- `;
1256
- const NotificationList = (_k) => {
1257
- var _l = _k, {
1258
- className,
1259
- showHeader,
1260
- notificationList,
1261
- loading
1262
- } = _l, other = __objRest(_l, [
1110
+ `, ea = (i) => {
1111
+ var o = i, {
1112
+ className: t,
1113
+ showHeader: e,
1114
+ notificationList: a,
1115
+ loading: r
1116
+ } = o, s = w(o, [
1263
1117
  "className",
1264
1118
  "showHeader",
1265
1119
  "notificationList",
1266
1120
  "loading"
1267
1121
  ]);
1268
- const [expanded, setExpanded] = useState(null);
1269
- const {
1270
- id,
1271
- title,
1272
- symbol,
1273
- notifications = [],
1274
- defaultHeaderOptions = { visible: true }
1275
- } = notificationList || {};
1276
- if (!notifications.length && !loading) {
1277
- return null;
1278
- }
1279
- return /* @__PURE__ */ React.createElement(StyledItemList, __spreadProps(__spreadValues({}, other), {
1280
- "data-loading": loading,
1281
- "data-show-header": typeof showHeader === "boolean" ? showHeader : defaultHeaderOptions.visible,
1282
- className: appendClassNames(className, "humany-notification-list"),
1283
- "data-notification-category": id,
1284
- header: title,
1285
- symbol,
1286
- items: notifications,
1287
- renderItem: ({ id: id2, title: title2, body, modified, expandable }) => /* @__PURE__ */ React.createElement(StyledItem, {
1288
- key: id2,
1289
- "data-notification": id2,
1290
- "data-expanded": expandable ? expanded === id2 : true
1291
- }, expandable ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledButton, {
1292
- title: title2,
1293
- "aria-label": title2,
1294
- "aria-expanded": expanded === id2,
1295
- onClick: () => setExpanded(expanded === id2 ? null : id2)
1296
- }, /* @__PURE__ */ React.createElement("span", null, title2), /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
1122
+ const [c, m] = D(null), {
1123
+ id: f,
1124
+ title: u,
1125
+ symbol: l,
1126
+ notifications: g = [],
1127
+ defaultHeaderOptions: S = { visible: !0 }
1128
+ } = a || {};
1129
+ return !g.length && !r ? null : /* @__PURE__ */ n.createElement(Ft, E($({}, s), {
1130
+ "data-loading": r,
1131
+ "data-show-header": typeof e == "boolean" ? e : S.visible,
1132
+ className: z(t, "humany-notification-list"),
1133
+ "data-notification-category": f,
1134
+ header: u,
1135
+ symbol: l,
1136
+ items: g,
1137
+ renderItem: ({ id: y, title: b, body: T, modified: A, expandable: M }) => /* @__PURE__ */ n.createElement(Ct, {
1138
+ key: y,
1139
+ "data-notification": y,
1140
+ "data-expanded": M ? c === y : !0
1141
+ }, M ? /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Lt, {
1142
+ title: b,
1143
+ "aria-label": b,
1144
+ "aria-expanded": c === y,
1145
+ onClick: () => m(c === y ? null : y)
1146
+ }, /* @__PURE__ */ n.createElement("span", null, b), /* @__PURE__ */ n.createElement(It, {
1297
1147
  size: 11,
1298
1148
  symbol: {
1299
1149
  type: "Svg",
1300
- content: `caret-${expanded === id2 ? "up" : "down"}`
1150
+ content: `caret-${c === y ? "up" : "down"}`
1301
1151
  }
1302
- })), /* @__PURE__ */ React.createElement(StyledParagraph, {
1303
- html: body
1304
- }), modified && /* @__PURE__ */ React.createElement(StyledTimestamp, {
1305
- format: DateFormats.YYYY_MM_DD,
1306
- timestamp: modified
1307
- })) : /* @__PURE__ */ React.createElement(StyledParagraph, {
1308
- html: body
1152
+ })), /* @__PURE__ */ n.createElement(O, {
1153
+ html: T
1154
+ }), A && /* @__PURE__ */ n.createElement(Dt, {
1155
+ format: xe.YYYY_MM_DD,
1156
+ timestamp: A
1157
+ })) : /* @__PURE__ */ n.createElement(O, {
1158
+ html: T
1309
1159
  }))
1310
- }), /* @__PURE__ */ React.createElement(Loader, {
1311
- loading
1160
+ }), /* @__PURE__ */ n.createElement(gt, {
1161
+ loading: r
1312
1162
  }));
1313
- };
1314
- const StyledButton = styled(Button)`
1163
+ }, Lt = d(te)`
1315
1164
  display: flex;
1316
1165
  justify-content: space-between;
1317
1166
  align-items: center;
@@ -1319,19 +1168,19 @@ const StyledButton = styled(Button)`
1319
1168
  text-align: left;
1320
1169
  svg,
1321
1170
  i {
1322
- color: ${(p) => {
1323
- var _a;
1324
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
1171
+ color: ${(t) => {
1172
+ var e;
1173
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
1325
1174
  }};
1326
1175
  }
1327
1176
  span {
1328
- color: ${(p) => {
1329
- var _a;
1330
- return (_a = p.theme.colors) == null ? void 0 : _a.text;
1177
+ color: ${(t) => {
1178
+ var e;
1179
+ return (e = t.theme.colors) == null ? void 0 : e.text;
1331
1180
  }};
1332
- font-size: ${(p) => {
1333
- var _a;
1334
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
1181
+ font-size: ${(t) => {
1182
+ var e;
1183
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
1335
1184
  }};
1336
1185
  overflow: hidden;
1337
1186
  text-overflow: ellipsis;
@@ -1339,30 +1188,29 @@ const StyledButton = styled(Button)`
1339
1188
  white-space: nowrap;
1340
1189
  }
1341
1190
  &:focus {
1342
- ${(p) => {
1343
- var _a, _b;
1344
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
1345
- ${borderTabStyle}
1191
+ ${(t) => {
1192
+ var e, a;
1193
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && h`
1194
+ ${X}
1346
1195
  span {
1347
- color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
1196
+ color: ${(a = t.theme.colors) == null ? void 0 : a.primary};
1348
1197
  text-decoration: underline;
1349
1198
  }
1350
1199
  `;
1351
1200
  }};
1352
1201
  }
1353
- `;
1354
- const StyledItemList = styled(ItemList)`
1355
- ${loadingOpacity}
1356
- ${itemList}
1202
+ `, Ft = d(Y)`
1203
+ ${pt}
1204
+ ${_}
1357
1205
  overflow: hidden;
1358
1206
  justify-content: flex-start;
1359
- padding: ${(p) => {
1360
- var _a;
1361
- return (_a = p.theme.sizes) == null ? void 0 : _a.large;
1207
+ padding: ${(t) => {
1208
+ var e;
1209
+ return (e = t.theme.sizes) == null ? void 0 : e.large;
1362
1210
  }};
1363
- ${(p) => !p["data-show-header"] && css`
1211
+ ${(t) => !t["data-show-header"] && h`
1364
1212
  > div {
1365
- ${headingElement("h1", css`
1213
+ ${ee("h1", h`
1366
1214
  display: none;
1367
1215
  `)}
1368
1216
  }
@@ -1373,30 +1221,28 @@ const StyledItemList = styled(ItemList)`
1373
1221
  text-decoration: underline;
1374
1222
  }
1375
1223
  }
1376
- `;
1377
- const StyledParagraph = styled(Paragraph)`
1378
- ${genericHtml}
1224
+ `, O = d(Je)`
1225
+ ${Qe}
1379
1226
  font-weight: 300;
1380
1227
 
1381
1228
  p {
1382
1229
  white-space: normal;
1383
1230
  }
1384
- `;
1385
- const StyledItem = styled.li`
1386
- ${StyledParagraph} {
1231
+ `, Ct = d.li`
1232
+ ${O} {
1387
1233
  display: none;
1388
1234
  &:not(:only-child) {
1389
- ${(p) => {
1390
- var _a, _b, _c;
1391
- return ((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) && ((_b = p.theme.sizes) == null ? void 0 : _b.normal) && css`
1392
- margin: ${(_c = p.theme.sizes) == null ? void 0 : _c.normal} 0;
1235
+ ${(t) => {
1236
+ var e, a, r;
1237
+ return ((e = t.theme.sizes) == null ? void 0 : e.cardinal) && ((a = t.theme.sizes) == null ? void 0 : a.normal) && h`
1238
+ margin: ${(r = t.theme.sizes) == null ? void 0 : r.normal} 0;
1393
1239
  `;
1394
1240
  }}
1395
1241
  }
1396
1242
  }
1397
1243
 
1398
- ${(p) => p["data-expanded"] && css`
1399
- ${StyledParagraph} {
1244
+ ${(t) => t["data-expanded"] && h`
1245
+ ${O} {
1400
1246
  display: block;
1401
1247
  }
1402
1248
  `}
@@ -1404,80 +1250,83 @@ const StyledItem = styled.li`
1404
1250
  > span {
1405
1251
  display: block;
1406
1252
  font-weight: 300;
1407
- color: ${(p) => {
1408
- var _a;
1409
- return (_a = p.theme.colors) == null ? void 0 : _a.accent;
1253
+ color: ${(t) => {
1254
+ var e;
1255
+ return (e = t.theme.colors) == null ? void 0 : e.accent;
1410
1256
  }};
1411
1257
  }
1412
- `;
1413
- const StyledSymbolBadge = styled(SymbolBadge)`
1414
- margin: 0 0 0 ${(p) => {
1415
- var _a;
1416
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
1258
+ `, It = d(N)`
1259
+ margin: 0 0 0 ${(t) => {
1260
+ var e;
1261
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1417
1262
  }};
1418
1263
  line {
1419
- stroke: ${(p) => {
1420
- var _a;
1421
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
1264
+ stroke: ${(t) => {
1265
+ var e;
1266
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
1422
1267
  }};
1423
1268
  }
1424
- `;
1425
- const StyledTimestamp = styled(Timestamp)`
1426
- font-size: ${(p) => {
1427
- var _a;
1428
- return (_a = p.theme.fonts) == null ? void 0 : _a.small;
1269
+ `, Dt = d(be)`
1270
+ font-size: ${(t) => {
1271
+ var e;
1272
+ return (e = t.theme.fonts) == null ? void 0 : e.small;
1429
1273
  }};
1430
1274
  font-weight: 300;
1431
- `;
1432
- const isAnchorLink = (href) => {
1433
- const re = new RegExp("^#", "i");
1434
- const match = re.test(href);
1435
- return match;
1436
- };
1437
- const embeddedLinkMapper = (container) => (_a) => {
1438
- var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
1275
+ `, At = (t) => new RegExp("^#", "i").test(t), Mt = (t) => (r) => {
1276
+ var s = r, { children: e } = s, a = w(s, ["children"]);
1439
1277
  const {
1440
- implementation,
1441
- name: currentWidgetName
1442
- } = container.get("$widget");
1443
- const { href = "" } = props;
1444
- if (isAnchorLink(href)) {
1445
- return /* @__PURE__ */ React.createElement(AnchorLink, {
1446
- smooth: true,
1447
- to: href
1448
- }, children);
1449
- }
1450
- const escapedBindings = implementation.bindings.map((binding) => binding.replace(/\./g, "\\.")).join("|");
1451
- const regexp = new RegExp(`^((http[s]?:)?//)?(${escapedBindings})/([^\\s]+)`);
1452
- const expArray = regexp.exec(href);
1453
- if (expArray && expArray.length >= 4) {
1454
- const targetWidgetName = expArray[4];
1455
- const targetWidget = implementation.widgets.get(targetWidgetName);
1456
- if (targetWidget && !targetWidgetName.startsWith("blob?") && !targetWidgetName.startsWith(currentWidgetName)) {
1457
- return /* @__PURE__ */ React.createElement(WidgetLink, {
1458
- widgetName: targetWidgetName
1459
- }, children);
1460
- }
1278
+ implementation: i,
1279
+ name: o
1280
+ } = t.get("$widget"), { href: c = "" } = a;
1281
+ if (At(c))
1282
+ return /* @__PURE__ */ n.createElement(Xe, {
1283
+ smooth: !0,
1284
+ to: c
1285
+ }, e);
1286
+ const m = i.bindings.map((l) => l.replace(/\./g, "\\.")).join("|"), u = new RegExp(`^((http[s]?:)?//)?(${m})/([^\\s]+)`).exec(c);
1287
+ if (u && u.length >= 4) {
1288
+ const l = u[4];
1289
+ if (i.widgets.get(l) && !l.startsWith("blob?") && !l.startsWith(o))
1290
+ return /* @__PURE__ */ n.createElement(Ze, {
1291
+ widgetName: l
1292
+ }, e);
1461
1293
  }
1462
- return /* @__PURE__ */ React.createElement("a", __spreadValues({}, props), children);
1463
- };
1464
- const guideRenderInstructions = (container, dialog = [], guideBody) => {
1465
- return {
1466
- transform: {
1467
- a: (attr) => {
1468
- const _a = attr, { children } = _a, otherAttr = __objRest(_a, ["children"]);
1469
- const connectionId = otherAttr["data-target"];
1470
- if (connectionId && dialog.length) {
1471
- const item = dialog.find(({ connection }) => connection === connectionId);
1472
- if (item) {
1473
- return /* @__PURE__ */ React.createElement(DialogLink, __spreadValues({}, item), children);
1474
- }
1475
- }
1476
- const defaultInstructions = embeddedLinkMapper(container);
1477
- return defaultInstructions(attr);
1294
+ return /* @__PURE__ */ n.createElement("a", $({}, a), e);
1295
+ }, ta = (t, e = []) => ({
1296
+ transform: {
1297
+ a: (a) => {
1298
+ const c = a, { children: r } = c, i = w(c, ["children"])["data-target"];
1299
+ if (i && e.length) {
1300
+ const m = e.find(({ connection: f }) => f === i);
1301
+ if (m)
1302
+ return /* @__PURE__ */ n.createElement(ke, $({}, m), r);
1478
1303
  }
1304
+ return Mt(t)(a);
1479
1305
  }
1480
- };
1306
+ }
1307
+ });
1308
+ export {
1309
+ Xt as AccordionListItem,
1310
+ ke as DialogLink,
1311
+ Ot as DialogList,
1312
+ Yt as DrawerList,
1313
+ _t as DropdownActions,
1314
+ Vt as DropdownList,
1315
+ $t as FavoriteButton,
1316
+ Gt as Feedback,
1317
+ Zt as GuideList,
1318
+ gt as Loader,
1319
+ Se as LoaderWrapper,
1320
+ wt as Metadata,
1321
+ ea as NotificationList,
1322
+ Kt as SmallCaret,
1323
+ qt as StyledHeaderText,
1324
+ yt as StyledListButton,
1325
+ ta as guideRenderInstructions,
1326
+ pt as loadingOpacity,
1327
+ Ut as useArrowKeys,
1328
+ Jt as useDebounce,
1329
+ xt as useFavorites,
1330
+ Qt as useHover
1481
1331
  };
1482
- export { AccordionListItem, DialogLink, dialogList as DialogList, DrawerList, DropdownActions, DropdownList, FavoriteButton, feedback as Feedback, guideList as GuideList, Loader, Wrapper$1 as LoaderWrapper, Metadata, NotificationList, SmallCaret, StyledHeaderText, StyledListButton, guideRenderInstructions, loadingOpacity, useArrowKeys, useDebounce, useFavorites, useHover };
1483
1332
  //# sourceMappingURL=index.js.map