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

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 (8) hide show
  1. package/dist/components/index.d.ts +0 -1
  2. package/dist/index.d.ts +3 -3
  3. package/dist/index.js +723 -963
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.d.ts +1 -0
  6. package/dist/utils/guide-render-instructions.d.ts +3 -1
  7. package/package.json +7 -7
  8. package/dist/components/notification-list.d.ts +0 -19
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 Be = Object.defineProperty, He = Object.defineProperties;
2
+ var je = Object.getOwnPropertyDescriptors;
3
+ var I = Object.getOwnPropertySymbols;
4
+ var ee = Object.prototype.hasOwnProperty, te = Object.prototype.propertyIsEnumerable;
5
+ var Z = (t, e, a) => e in t ? Be(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, y = (t, e) => {
6
+ for (var a in e || (e = {}))
7
+ ee.call(e, a) && Z(t, a, e[a]);
8
+ if (I)
9
+ for (var a of I(e))
10
+ te.call(e, a) && Z(t, a, e[a]);
11
+ return t;
12
+ }, w = (t, e) => He(t, je(e));
13
+ var v = (t, e) => {
14
+ var a = {};
15
+ for (var r in t)
16
+ ee.call(t, r) && e.indexOf(r) < 0 && (a[r] = t[r]);
17
+ if (t != null && I)
18
+ for (var r of I(t))
19
+ e.indexOf(r) < 0 && te.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 ce, Link as Oe, Icon as P, List as q, list as me, invertedHoverButton as de, ItemList as G, itemList as U, Drawer as _e, Dropdown as fe, headingElement as he, linkTabStyle as Ve, Text as ue, Button as ge, paddedBorderTabStyle as ae, Confirm as Ye, SymbolBadge as N, StyledText as Y, convertToStringAttributes as pe, useKeyPress as M, useContainer as Ke, useEventListener as ne, Timestamp as qe, DateFormats as Ge, TextLink as K, usePrevious as Ue, borderTabStyle as re, AnchorLink as Je, WidgetLink as Qe, Lightbox as Xe } 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 R, formatUrl as se, appendClassNames as E, htmlParentContains as Ze } from "@telia-ace/widget-utilities";
25
+ import n, { forwardRef as W, useCallback as x, useState as B, useEffect as H, useMemo as et, useRef as ye, useContext as tt, useImperativeHandle as at } from "react";
26
+ import f, { css as g, keyframes as $e, ThemeContext as nt } from "styled-components";
27
+ const be = ({
28
+ title: t = "",
29
+ className: e,
30
+ id: a,
31
+ parent: r,
32
+ connection: s,
33
+ type: i,
34
+ target: o,
35
+ href: m,
36
+ children: c
47
37
  }) => {
48
- const props = {};
49
- const { name, params } = useRouteData();
50
- switch (type) {
38
+ const d = {}, { name: h, params: l } = ce();
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: p, title: S } = r;
43
+ d.routeName = h, d.params = R(w(y({}, l), {
44
+ guide: a,
45
+ connection: a === p ? s : void 0,
46
+ uriName: a === p ? se(S) : se(t)
59
47
  }));
60
48
  break;
61
49
  case "link":
62
- props.href = href;
63
- props.target = target;
50
+ d.href = m, d.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(Oe, y({
54
+ className: E(e, "humany-dialog-link")
55
+ }, d), c || /* @__PURE__ */ n.createElement(n.Fragment, null, i === "link" && /* @__PURE__ */ n.createElement(P, {
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
+ }, Mt = W((s, r) => {
59
+ var i = s, { className: t, dialog: e } = i, a = v(i, ["className", "dialog"]);
60
+ return e.length ? /* @__PURE__ */ n.createElement(rt, w(y({
61
+ className: E(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(be, y({}, o)))
67
+ }, a), {
68
+ ref: r
83
69
  })) : null;
84
- });
85
- const StyledList$1 = styled(List)`
86
- ${list}
70
+ }), rt = f(q)`
71
+ ${me}
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 de({
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
+ `, Pt = (h) => {
93
+ var l = h, {
94
+ trigger: t,
95
+ header: e,
96
+ className: a,
97
+ animation: r,
98
+ fullScreen: s,
99
+ onToggle: i,
100
+ children: o,
101
+ ref: m,
102
+ closeButtonAriaLabel: c
103
+ } = l, d = v(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(_e, {
115
+ className: E(a, "humany-drawer-list"),
116
+ trigger: t,
117
+ header: e,
118
+ animation: r,
119
+ fullScreen: s,
120
+ onToggle: i,
121
+ closeButtonAriaLabel: c
122
+ }, /* @__PURE__ */ n.createElement(st, y({}, d), o));
123
+ }, st = f(G)`
124
+ ${U}
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
+ `, Rt = ({ items: t, renderItem: e, trigger: a, header: r, children: s }) => /* @__PURE__ */ n.createElement(fe, {
142
+ className: "humany-dropdown-actions",
143
+ trigger: a
144
+ }, /* @__PURE__ */ n.createElement(ot, null, !!r && /* @__PURE__ */ n.createElement(it, null, r), t && e && /* @__PURE__ */ n.createElement(lt, {
145
+ items: t,
146
+ renderItem: e
147
+ }), s)), ot = f.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
+ `, it = f.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
+ `, lt = f(q)`
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
+ `, Wt = (i) => {
219
+ var o = i, {
220
+ trigger: t,
221
+ className: e,
222
+ children: a,
223
+ closeButtonAriaLabel: r
224
+ } = o, s = v(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(fe, {
231
+ className: E(e, "humany-dropdown-list"),
232
+ closeButtonAriaLabel: r,
233
+ trigger: t
234
+ }, /* @__PURE__ */ n.createElement(ct, y({}, s), a));
235
+ }, ct = f(G)`
236
+ ${U}
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
+ ${he("> h1", g`
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
+ `, mt = $e`
295
269
  100% {
296
270
  transform: rotate(360deg);
297
271
  }
298
- `;
299
- const dash = keyframes`
272
+ `, dt = $e`
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
+ `, ve = f.svg`
286
+ animation: ${mt} 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
+ `, xe = f.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
+ ${ve} {
313
+ opacity: ${(t) => t["data-loading"] ? "1" : "0"}
343
314
  }
344
- `;
345
- const Spinner = styled.div`
315
+ `, ft = f.div`
346
316
  position: relative;
347
317
  margin: 0 auto;
348
318
  width: 100px;
@@ -351,89 +321,154 @@ const Spinner = styled.div`
351
321
  display: block;
352
322
  padding-top: 100%;
353
323
  }
354
- `;
355
- const SpinnerCircle = styled.circle`
324
+ `, ht = f.circle`
356
325
  stroke-dasharray: 1, 200;
357
326
  stroke-dashoffset: 0;
358
- animation: ${dash} 1.5s ease-in-out infinite;
327
+ animation: ${dt} 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
+ `, Bt = ({ loading: t = !1 }) => /* @__PURE__ */ n.createElement(xe, {
335
+ className: "humany-loader",
336
+ "data-loading": t
337
+ }, /* @__PURE__ */ n.createElement(ft, {
338
+ className: "humany-spinner"
339
+ }, /* @__PURE__ */ n.createElement(ve, {
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
+ })))), Ht = g`
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"};
354
+ }
355
+ ${xe} {
356
+ opacity: ${(t) => t["data-loading"] ? "1" : "0"};
357
+ }
358
+ `, jt = g`
359
+ font-size: ${(t) => {
360
+ var e;
361
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
362
+ }};
363
+ font-weight: 300;
364
+ line-height: 1.5em;
365
+ color: ${(t) => {
366
+ var e;
367
+ return (e = t.theme.colors) == null ? void 0 : e.text;
368
+ }};
369
+
370
+ h1,
371
+ h2,
372
+ h3,
373
+ h4,
374
+ h5,
375
+ h6 {
376
+ word-break: break-word;
377
+ &:first-child {
378
+ margin-top: 0;
379
+ }
380
+ &:only-child {
381
+ margin: 0;
382
+ }
383
+ &:last-child {
384
+ margin-bottom: 0;
385
+ }
389
386
  }
390
- ${Wrapper$1} {
391
- opacity: ${(p) => p["data-loading"] ? "1" : "0"};
387
+
388
+ a {
389
+ color: ${(t) => {
390
+ var e;
391
+ return (e = t.theme.colors) == null ? void 0 : e.link;
392
+ }};
393
+ &:focus {
394
+ ${(t) => {
395
+ var e;
396
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && Ve;
397
+ }};
398
+ }
392
399
  }
393
- `;
394
- const SmallCaret = styled(Icon)`
400
+
401
+ img {
402
+ max-width: 100% !important;
403
+ height: auto !important;
404
+ }
405
+
406
+ p {
407
+ word-break: break-word;
408
+ margin: ${(t) => {
409
+ var e;
410
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
411
+ }} 0;
412
+ }
413
+
414
+ p:first-child {
415
+ margin: 0 0 ${(t) => {
416
+ var e;
417
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
418
+ }};
419
+ }
420
+
421
+ p:last-child {
422
+ margin: ${(t) => {
423
+ var e;
424
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
425
+ }} 0 0;
426
+ }
427
+
428
+ p:only-child {
429
+ margin: 0;
430
+ }
431
+ `, Ot = f(P)`
395
432
  && {
396
- font-size: ${(p) => {
397
- var _a;
398
- return (_a = p.theme.fonts) == null ? void 0 : _a.small;
433
+ font-size: ${(t) => {
434
+ var e;
435
+ return (e = t.theme.fonts) == null ? void 0 : e.small;
399
436
  }};
400
437
  }
401
438
  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;
439
+ `, _t = f(ue)`
440
+ font-size: ${(t) => {
441
+ var e;
442
+ return (e = t.theme.fonts) == null ? void 0 : e.medium;
407
443
  }};
408
444
  font-weight: normal;
409
445
  line-height: 1.2em;
410
- color: ${(p) => {
411
- var _a;
412
- return (_a = p.theme.colors) == null ? void 0 : _a.text;
446
+ color: ${(t) => {
447
+ var e;
448
+ return (e = t.theme.colors) == null ? void 0 : e.text;
413
449
  }};
414
- `;
415
- const StyledListButton = styled(Button)`
450
+ `, ut = f(ge)`
416
451
  display: flex;
417
452
  align-items: center;
418
453
 
419
- ${(p) => {
420
- var _a;
421
- return p["data-has-label"] === "true" && p["data-has-symbol"] === "true" && `
454
+ ${(t) => {
455
+ var e;
456
+ return t["data-has-label"] === "true" && t["data-has-symbol"] === "true" && `
422
457
  svg, i {
423
- margin: 0 ${(_a = p.theme.sizes) == null ? void 0 : _a.small} 0 0;
458
+ margin: 0 ${(e = t.theme.sizes) == null ? void 0 : e.small} 0 0;
424
459
  }
425
460
  `;
426
461
  }}
427
462
 
428
463
  &: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}
464
+ ${(t) => {
465
+ var e;
466
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && g`
467
+ ${(a) => a["data-has-label"] === "true" && ae}
433
468
 
434
469
  svg, i {
435
- ${(p2) => p2["data-has-label"] === "false" && p2["data-has-symbol"] === "true" && css`
436
- ${paddedBorderTabStyle}
470
+ ${(a) => a["data-has-label"] === "false" && a["data-has-symbol"] === "true" && g`
471
+ ${ae}
437
472
  box-sizing: content-box;
438
473
  `}
439
474
  }
@@ -445,78 +480,74 @@ const StyledListButton = styled(Button)`
445
480
  flex: 1;
446
481
  font-weight: 300;
447
482
  }
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 }
483
+ `, gt = ({
484
+ addFavoriteTooltip: t,
485
+ removeFavoriteCancelLabel: e,
486
+ removeFavoriteConfirmLabel: a,
487
+ removeFavoriteHeader: r,
488
+ removeFavoriteLabel: s,
489
+ removeFavoriteTooltip: i,
490
+ id: o,
491
+ isFavorite: m,
492
+ guideTitle: c,
493
+ buttonLabel: d = "",
494
+ actions: { addFavorite: h, removeFavorite: l }
461
495
  }) => {
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, {
496
+ const p = x(() => {
497
+ l(o);
498
+ }, [o, l]), S = x(() => {
499
+ h(o);
500
+ }, [o, h]), k = `${m ? i : t}${c ? `: "${c}"` : ""}`;
501
+ return /* @__PURE__ */ n.createElement(n.Fragment, null, m ? /* @__PURE__ */ n.createElement(Ye, {
502
+ trigger: /* @__PURE__ */ n.createElement(oe, {
471
503
  className: "humany-favorite-button",
472
- title: tooltip,
473
- "aria-label": tooltip,
504
+ title: k,
505
+ "aria-label": k,
474
506
  "data-favorite": "true",
475
- "data-has-label": buttonLabel ? "true" : "false",
507
+ "data-has-label": d ? "true" : "false",
476
508
  "data-has-symbol": "true"
477
- }, /* @__PURE__ */ React.createElement(SymbolBadge, {
509
+ }, /* @__PURE__ */ n.createElement(N, {
478
510
  size: 16,
479
511
  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, {
512
+ }), d && /* @__PURE__ */ n.createElement(Y, null, d)),
513
+ onConfirm: p,
514
+ cancelLabel: e,
515
+ confirmLabel: a,
516
+ header: r,
517
+ text: s
518
+ }) : /* @__PURE__ */ n.createElement(oe, {
487
519
  className: "humany-favorite-button",
488
- title: tooltip,
489
- "aria-label": tooltip,
490
- onClick: add,
520
+ title: k,
521
+ "aria-label": k,
522
+ onClick: S,
491
523
  "data-favorite": "false",
492
- "data-has-label": buttonLabel ? "true" : "false",
524
+ "data-has-label": d ? "true" : "false",
493
525
  "data-has-symbol": "true"
494
- }, /* @__PURE__ */ React.createElement(SymbolBadge, {
526
+ }, /* @__PURE__ */ n.createElement(N, {
495
527
  size: 16,
496
528
  symbol: { type: "Svg", content: "star-empty" }
497
- }), buttonLabel && /* @__PURE__ */ React.createElement(StyledText$1, null, buttonLabel)));
498
- };
499
- const StyledButton$1 = styled(StyledListButton)`
529
+ }), d && /* @__PURE__ */ n.createElement(Y, null, d)));
530
+ }, oe = f(ut)`
500
531
  grid-area: favorite;
501
532
 
502
533
  &:focus {
503
- ${(p) => {
504
- var _a;
505
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
534
+ ${(t) => {
535
+ var e;
536
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && g`
506
537
  svg {
507
- ${(p2) => {
508
- var _a2, _b;
509
- return p2["data-favorite"] === "true" ? `
538
+ ${(a) => {
539
+ var r, s;
540
+ return a["data-favorite"] === "true" ? `
510
541
  fill: transparent;
511
542
 
512
543
  path {
513
544
  fill: transparent;
514
545
  }
515
546
  ` : `
516
- fill: ${(_a2 = p2.theme.colors) == null ? void 0 : _a2.text};
547
+ fill: ${(r = a.theme.colors) == null ? void 0 : r.text};
517
548
 
518
549
  path {
519
- fill: ${(_b = p2.theme.colors) == null ? void 0 : _b.text};
550
+ fill: ${(s = a.theme.colors) == null ? void 0 : s.text};
520
551
  }
521
552
  `;
522
553
  }}
@@ -525,56 +556,55 @@ const StyledButton$1 = styled(StyledListButton)`
525
556
  }};
526
557
  }
527
558
 
528
- ${(p) => {
529
- var _a, _b, _c, _d, _e, _f, _g;
530
- return ((_a = p.theme.colors) == null ? void 0 : _a.text) && css`
559
+ ${(t) => {
560
+ var e, a, r, s, i, o, m;
561
+ return ((e = t.theme.colors) == null ? void 0 : e.text) && g`
531
562
  svg {
532
- stroke: ${(_b = p.theme.colors) == null ? void 0 : _b.text};
563
+ stroke: ${(a = t.theme.colors) == null ? void 0 : a.text};
533
564
 
534
565
  path {
535
- stroke: ${(_c = p.theme.colors) == null ? void 0 : _c.text};
566
+ stroke: ${(r = t.theme.colors) == null ? void 0 : r.text};
536
567
  }
537
568
 
538
- ${p["data-favorite"] === "true" && `
539
- fill: ${(_d = p.theme.colors) == null ? void 0 : _d.text};
569
+ ${t["data-favorite"] === "true" && `
570
+ fill: ${(s = t.theme.colors) == null ? void 0 : s.text};
540
571
 
541
572
  path {
542
- fill: ${(_e = p.theme.colors) == null ? void 0 : _e.text};
573
+ fill: ${(i = t.theme.colors) == null ? void 0 : i.text};
543
574
  }
544
575
  `}
545
576
  }
546
577
 
547
578
  &:hover {
548
579
  svg {
549
- ${p["data-favorite"] === "true" ? `
580
+ ${t["data-favorite"] === "true" ? `
550
581
  fill: transparent;
551
582
 
552
583
  path {
553
584
  fill: transparent;
554
585
  }
555
586
  ` : `
556
- fill: ${(_f = p.theme.colors) == null ? void 0 : _f.text};
587
+ fill: ${(o = t.theme.colors) == null ? void 0 : o.text};
557
588
 
558
589
  path {
559
- fill: ${(_g = p.theme.colors) == null ? void 0 : _g.text};
590
+ fill: ${(m = t.theme.colors) == null ? void 0 : m.text};
560
591
  }
561
592
  `}
562
593
  }
563
594
  }
564
595
  `;
565
596
  }}
566
- `;
567
- var feedback = forwardRef((_g, ref) => {
568
- var _h = _g, {
569
- onFeedback = () => {
597
+ `, Vt = W((d, c) => {
598
+ var h = d, {
599
+ onFeedback: t = () => {
570
600
  },
571
- direction = "horizontal",
572
- className,
573
- header,
574
- positive,
575
- negative,
576
- selected
577
- } = _h, other = __objRest(_h, [
601
+ direction: e = "horizontal",
602
+ className: a,
603
+ header: r,
604
+ positive: s,
605
+ negative: i,
606
+ selected: o
607
+ } = h, m = v(h, [
578
608
  "onFeedback",
579
609
  "direction",
580
610
  "className",
@@ -583,316 +613,241 @@ var feedback = forwardRef((_g, ref) => {
583
613
  "negative",
584
614
  "selected"
585
615
  ]);
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, {
616
+ return /* @__PURE__ */ n.createElement(yt, w(y({
617
+ className: E(a, "humany-feedback"),
618
+ "data-direction": e
619
+ }, pe(m)), {
620
+ ref: c
621
+ }), !!r && /* @__PURE__ */ n.createElement(pt, null, r), /* @__PURE__ */ n.createElement(ie, {
592
622
  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, {
623
+ disabled: !!o,
624
+ "aria-pressed": o === "positive",
625
+ "data-selected": o === "positive",
626
+ "data-direction": e,
627
+ onClick: () => t("positive")
628
+ }, /* @__PURE__ */ n.createElement(P, {
599
629
  faIcon: "smile-o"
600
- }), /* @__PURE__ */ React.createElement("span", null, positive)), /* @__PURE__ */ React.createElement(FeedbackButton, {
630
+ }), /* @__PURE__ */ n.createElement("span", null, s)), /* @__PURE__ */ n.createElement(ie, {
601
631
  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, {
632
+ disabled: !!o,
633
+ "aria-pressed": o === "negative",
634
+ "data-selected": o === "negative",
635
+ "data-direction": e,
636
+ onClick: () => t("negative")
637
+ }, /* @__PURE__ */ n.createElement(P, {
608
638
  faIcon: "frown-o"
609
- }), /* @__PURE__ */ React.createElement("span", null, negative)));
610
- });
611
- const Header = styled(StyledText$1)`
639
+ }), /* @__PURE__ */ n.createElement("span", null, i)));
640
+ }), pt = f(Y)`
612
641
  font-weight: normal;
613
- margin: 0 0 ${(p) => {
614
- var _a;
615
- return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
642
+ margin: 0 0 ${(t) => {
643
+ var e;
644
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
616
645
  }};
617
- font-size: ${(p) => {
618
- var _a;
619
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
646
+ font-size: ${(t) => {
647
+ var e;
648
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
620
649
  }};
621
650
  display: block;
622
- `;
623
- const FeedbackButton = styled(Button)`
651
+ `, ie = f(ge)`
624
652
  display: inline-block;
625
- font-size: ${(p) => {
626
- var _a;
627
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
653
+ font-size: ${(t) => {
654
+ var e;
655
+ return (e = t.theme.fonts) == null ? void 0 : e.normal;
628
656
  }};
629
657
  font-weight: 300;
630
658
  && {
631
- margin-right: ${(p) => {
632
- var _a;
633
- return (_a = p.theme.sizes) == null ? void 0 : _a.large;
659
+ margin-right: ${(t) => {
660
+ var e;
661
+ return (e = t.theme.sizes) == null ? void 0 : e.large;
634
662
  }};
635
663
  }
636
664
 
637
- ${(p) => {
638
- var _a, _b;
639
- return p["data-direction"] === "horizontal" && css`
665
+ ${(t) => {
666
+ var e, a;
667
+ return t["data-direction"] === "horizontal" && g`
640
668
  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});
669
+ max-width: calc(50% - ${(e = t.theme.sizes) == null ? void 0 : e.large} - ${(a = t.theme.sizes) == null ? void 0 : a.small});
642
670
  `;
643
671
  }}
644
672
 
645
- ${(p) => p["data-direction"] === "vertical" && css`
673
+ ${(t) => t["data-direction"] === "vertical" && g`
646
674
  min-width: 190px;
647
675
  `}
648
676
 
649
- ${(p) => {
650
- var _a;
651
- return invertedHoverButton({
652
- active: p["data-selected"],
653
- primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
677
+ ${(t) => {
678
+ var e;
679
+ return de({
680
+ active: t["data-selected"],
681
+ primaryColor: (e = t.theme.colors) == null ? void 0 : e.primary,
654
682
  secondaryColor: "#FFFFFF"
655
683
  });
656
684
  }}
657
685
 
658
686
  i {
659
- margin: 0 ${(p) => {
660
- var _a;
661
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
687
+ margin: 0 ${(t) => {
688
+ var e;
689
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
662
690
  }} 0 0;
663
691
  }
664
- `;
665
- const Wrapper = styled.div`
666
- ${(p) => p["data-direction"] === "vertical" && css`
692
+ `, yt = f.div`
693
+ ${(t) => t["data-direction"] === "vertical" && g`
667
694
  > button {
668
695
  width: 100%;
669
696
  &:not(:last-child) {
670
- margin-bottom: ${(p2) => {
671
- var _a;
672
- return (_a = p2.theme.sizes) == null ? void 0 : _a.normal;
697
+ margin-bottom: ${(e) => {
698
+ var a;
699
+ return (a = e.theme.sizes) == null ? void 0 : a.normal;
673
700
  }};
674
701
  }
675
702
  }
676
703
  `}
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();
704
+ `, Yt = () => {
705
+ const [t, e] = B(null), a = M("ArrowLeft"), r = M("ArrowRight"), s = M("ArrowUp"), i = M("ArrowDown");
706
+ return H(() => {
707
+ e(a ? "left" : r ? "right" : s ? "up" : i ? "down" : null);
708
+ }, [a, r, s, i]), t;
709
+ }, Kt = (t, e) => {
710
+ const [a, r] = B(t), s = x(() => setTimeout(() => {
711
+ r(t);
712
+ }, e), [e, r, t]);
713
+ return H(() => {
714
+ const i = s();
709
715
  return () => {
710
- clearTimeout(timeout);
716
+ clearTimeout(i);
711
717
  };
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]);
718
+ }, [s]), a;
719
+ }, $t = () => {
720
+ const t = Ke(), [e, a] = B([]), r = t.get("favorites");
721
+ H(() => {
722
+ if (r) {
723
+ a(r.get());
724
+ const { events: c } = t.get("$widget");
725
+ return c.subscribe("widget:favorites-updated", (h, { updated: l }) => {
726
+ a([...l]);
725
727
  });
726
- return unsubscribe;
727
728
  }
728
729
  }, []);
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]);
730
+ const s = (c) => r ? r.add(c) : Promise.resolve([]), i = (c) => r ? r.remove(c) : Promise.resolve([]), o = () => r ? r.clear() : Promise.resolve([]), m = x((c) => e.indexOf(c) > -1 ? i(c) : s(c), [e]);
754
731
  return [
755
- favorites,
756
- useMemo(() => ({
757
- addFavorite: add,
758
- removeFavorite: remove,
759
- clearFavorites: clear,
760
- toggleFavorite: toggle
761
- }), [favorites])
732
+ e,
733
+ et(() => ({
734
+ addFavorite: s,
735
+ removeFavorite: i,
736
+ clearFavorites: o,
737
+ toggleFavorite: m
738
+ }), [e])
762
739
  ];
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
740
+ }, qt = () => {
741
+ const [t, e] = B(!1), a = ye(), r = x(() => e(!0), [e]), s = x(() => e(!1), [e]);
742
+ return ne("mouseenter", r, a.current), ne("mouseleave", s, a.current), [t, a];
743
+ }, bt = ({
744
+ format: t = Ge.YYYY_MM_DD_HH_MM,
745
+ className: e = "",
746
+ byLabel: a = "",
747
+ modifiedLabel: r = "",
748
+ publishedLabel: s = "",
749
+ modifiedBy: i = "",
750
+ publishedBy: o = "",
751
+ showModified: m = !1,
752
+ showPublished: c = !1,
753
+ modified: d,
754
+ published: h
785
755
  }) => {
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
756
+ const l = c && h ? /* @__PURE__ */ n.createElement(le, {
757
+ format: t,
758
+ timestamp: h
759
+ }) : null, p = m && d ? /* @__PURE__ */ n.createElement(le, {
760
+ format: t,
761
+ timestamp: d
793
762
  }) : 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, {
763
+ return !l && !p ? null : /* @__PURE__ */ n.createElement(V, {
764
+ className: E(e, "humany-metadata")
765
+ }, l && /* @__PURE__ */ n.createElement(V, {
800
766
  className: "humany-published"
801
- }, publishedLabel, publishedTimestamp, byLabel && publishedBy && ` ${byLabel.replace("{{editor}}", publishedBy)}`), modifiedTimestamp && /* @__PURE__ */ React.createElement(StyledText, {
767
+ }, s, l, a && o && ` ${a.replace("{{editor}}", o)}`), p && /* @__PURE__ */ n.createElement(V, {
802
768
  className: "humany-modified"
803
- }, publishedTimestamp && ", ", modifiedLabel, modifiedTimestamp, byLabel && modifiedBy && ` ${byLabel.replace("{{editor}}", modifiedBy)}`));
804
- };
805
- const StyledTimestamp$1 = styled(Timestamp)`
769
+ }, l && ", ", r, p, a && i && ` ${a.replace("{{editor}}", i)}`));
770
+ }, le = f(qe)`
806
771
  &:not(:first-child) {
807
772
  margin-left: 4px;
808
773
  }
809
774
  &:not(:last-child) {
810
775
  margin-right: 4px;
811
776
  }
812
- `;
813
- const StyledText = styled(Text)`
777
+ `, V = f(ue)`
814
778
  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,
779
+ `, vt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ n.createElement(Et, {
780
+ className: "humany-guide-list-tags",
781
+ items: t,
782
+ renderItem: ({ id: e, symbol: a, title: r }) => a && /* @__PURE__ */ n.createElement("li", {
783
+ key: e,
784
+ "data-tag": e
785
+ }, /* @__PURE__ */ n.createElement(kt, {
786
+ size: 18,
787
+ symbol: a,
788
+ title: r
789
+ }))
790
+ }) : null, Gt = W(({ title: t, id: e, route: a, symbolSize: r, collapseUri: s, children: i }, o) => {
791
+ const { params: m } = ce();
792
+ return /* @__PURE__ */ n.createElement(xt, {
793
+ ref: o,
794
+ "data-guide": e
795
+ }, /* @__PURE__ */ n.createElement(K, {
796
+ title: t,
797
+ "aria-label": t,
798
+ routeName: a,
799
+ params: R(w(y({}, m), {
800
+ uriName: s || void 0,
844
801
  id: void 0,
845
802
  guide: void 0,
846
803
  accordion: void 0
847
804
  })),
848
- text: title
849
- }, /* @__PURE__ */ React.createElement(SymbolBadge, {
850
- size: symbolSize,
805
+ text: t
806
+ }, /* @__PURE__ */ n.createElement(N, {
807
+ size: r,
851
808
  symbol: { type: "Svg", content: "caret-up" }
852
- })), children);
853
- });
854
- const ActiveAccordionListItem = styled.li`
809
+ })), i);
810
+ }), xt = f.li`
855
811
  > a {
856
812
  grid-column: 1 / -1
857
813
  font-weight: bold;
858
- margin: 0 0 ${(p) => {
859
- var _a;
860
- return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
814
+ margin: 0 0 ${(t) => {
815
+ var e;
816
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
861
817
  }} 0;
862
818
  }
863
819
 
864
820
  > div {
865
821
  grid-column: 1 / -1
866
822
  }
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 = () => {
823
+ `, Ut = W((Lt, Le) => {
824
+ var J = Lt, {
825
+ expandable: t = !1,
826
+ routing: e = {},
827
+ paramMappers: a = {},
828
+ symbolSize: r = 11,
829
+ pageRole: s = "link",
830
+ pageCaret: i = "down",
831
+ showTags: o = !1,
832
+ showFavoriteToggle: m = !1,
833
+ localPaging: c = !1,
834
+ onItemClick: d = () => {
880
835
  },
881
- dispatch = () => {
836
+ dispatch: h = () => {
882
837
  },
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, [
838
+ metadata: l = {},
839
+ pageLabel: p,
840
+ className: S,
841
+ children: k,
842
+ items: T,
843
+ renderItem: j,
844
+ addFavoriteTooltip: we,
845
+ removeFavoriteCancelLabel: Ee,
846
+ removeFavoriteConfirmLabel: ke,
847
+ removeFavoriteHeader: ze,
848
+ removeFavoriteLabel: Ne,
849
+ removeFavoriteTooltip: Se
850
+ } = J, Te = v(J, [
896
851
  "expandable",
897
852
  "routing",
898
853
  "paramMappers",
@@ -918,131 +873,109 @@ var guideList = forwardRef((_i, ref) => {
918
873
  "removeFavoriteTooltip"
919
874
  ]);
920
875
  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, {
876
+ accessibility: { isTabbing: Q = !1 }
877
+ } = tt(nt), L = ye(), F = Ue(T), { guide: Fe = "guide", page: Ce = "index" } = e, {
878
+ guide: Ae = ({ id: u }) => R({ guide: u }),
879
+ page: X = () => R()
880
+ } = a, [De, Ie] = $t();
881
+ at(Le, () => L.current);
882
+ const O = (u) => {
883
+ const { id: b, title: $, tags: z, published: A, modified: C, publishedBy: D, modifiedBy: _ } = u;
884
+ return /* @__PURE__ */ n.createElement("li", {
885
+ key: b,
886
+ "data-guide": b,
887
+ "has-metadata": (!!(l != null && l.showPublished) && !!A || !!(l != null && l.showModified) && !!C).toString()
888
+ }, /* @__PURE__ */ n.createElement(K, {
939
889
  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,
890
+ title: $,
891
+ "aria-label": $,
892
+ routeName: Fe,
893
+ onClick: (We) => d(We, u),
894
+ params: Ae(u),
895
+ text: $
896
+ }, /* @__PURE__ */ n.createElement(N, {
897
+ size: r,
948
898
  symbol: {
949
899
  type: "Svg",
950
- content: expandable ? "caret-down" : "caret-right"
900
+ content: t ? "caret-down" : "caret-right"
951
901
  }
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
902
+ })), m && /* @__PURE__ */ n.createElement(gt, {
903
+ guideTitle: $,
904
+ addFavoriteTooltip: we,
905
+ removeFavoriteCancelLabel: Ee,
906
+ removeFavoriteConfirmLabel: ke,
907
+ removeFavoriteHeader: ze,
908
+ removeFavoriteLabel: Ne,
909
+ removeFavoriteTooltip: Se,
910
+ isFavorite: De.indexOf(b) > -1,
911
+ actions: Ie,
912
+ id: b
913
+ }), o && /* @__PURE__ */ n.createElement(vt, {
914
+ tags: z
915
+ }), /* @__PURE__ */ n.createElement(zt, w(y({}, l), {
916
+ indent: t ? void 0 : r,
917
+ modified: C,
918
+ published: A,
919
+ publishedBy: D,
920
+ modifiedBy: _
971
921
  })));
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();
922
+ }, Me = x((u, b, $) => j ? j(u, b, $, O) : O(u), [j, O]), Pe = x((u) => {
923
+ c && (u.preventDefault(), h("page", X()));
924
+ }, [h, c]);
925
+ H(() => {
926
+ if (Q && F && F.length < T.length && L.current) {
927
+ const u = L.current.querySelectorAll(".humany-guide-list > ul > li"), b = u[F.length];
928
+ if (u.length === T.length && F.length) {
929
+ const $ = u[F.length];
930
+ if ($) {
931
+ const z = $.querySelector(".humany-guide-link");
932
+ z && z.focus();
994
933
  }
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
- }
934
+ } else
935
+ b && new MutationObserver((z, A) => {
936
+ z.forEach((C) => {
937
+ if (C.addedNodes) {
938
+ const D = Array.from(C.addedNodes).find((_) => _.tagName === "A");
939
+ D && Ze(L.current, document.activeElement) && (Q && D.focus(), A.disconnect());
1004
940
  }
1005
941
  });
942
+ }).observe(b, {
943
+ attributes: !1,
944
+ characterData: !1,
945
+ childList: !0,
946
+ subtree: !0,
947
+ attributeOldValue: !1,
948
+ characterDataOldValue: !1
1006
949
  });
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
950
  }
1017
951
  });
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;
952
+ const Re = !!Object.keys(l).filter((u) => typeof l[u] != "undefined").length;
953
+ return /* @__PURE__ */ n.createElement(wt, w(y({
954
+ className: E(S, "humany-guide-list"),
955
+ "data-item-count": T.length,
956
+ items: T,
957
+ renderItem: Me,
958
+ expandable: t ? "true" : "false",
959
+ "grid-items": o || m || Re ? "true" : "false"
960
+ }, pe(Te)), {
961
+ ref: L
962
+ }), p ? /* @__PURE__ */ n.createElement(K, {
963
+ text: p,
964
+ title: p,
965
+ "aria-label": p,
966
+ routeName: Ce,
967
+ role: s,
968
+ params: X(),
969
+ onClick: Pe
970
+ }, /* @__PURE__ */ n.createElement(N, {
971
+ size: r,
972
+ symbol: { type: "Svg", content: `caret-${i}` }
973
+ })) : null, k);
974
+ }), wt = f(G)`
975
+ ${U}
976
+ padding: ${(t) => {
977
+ var e;
978
+ return (e = t.theme.sizes) == null ? void 0 : e.large;
1046
979
  }};
1047
980
  overflow: auto;
1048
981
  justify-content: flex-start;
@@ -1051,13 +984,13 @@ const StyledItemList$1 = styled(ItemList)`
1051
984
  text-decoration: none;
1052
985
 
1053
986
  > div {
1054
- ${headingElement("> h1", css`
987
+ ${he("> h1", g`
1055
988
  white-space: pre-wrap;
1056
989
  `)}
1057
990
  }
1058
991
 
1059
992
  > ul > li {
1060
- ${(p) => p["grid-items"] === "true" && css`
993
+ ${(t) => t["grid-items"] === "true" && g`
1061
994
  display: grid;
1062
995
  grid-template-columns: auto 1fr 1fr;
1063
996
  gap: 0px 0px;
@@ -1065,15 +998,15 @@ const StyledItemList$1 = styled(ItemList)`
1065
998
  align-items: center;
1066
999
 
1067
1000
  > button {
1068
- margin: 0 0 0 ${(p2) => {
1069
- var _a;
1070
- return (_a = p2.theme.sizes) == null ? void 0 : _a.small;
1001
+ margin: 0 0 0 ${(e) => {
1002
+ var a;
1003
+ return (a = e.theme.sizes) == null ? void 0 : a.small;
1071
1004
  }};
1072
1005
 
1073
1006
  &[data-favorite='false'] {
1074
- ${(p2) => {
1075
- var _a;
1076
- return ((_a = p2.theme.accessibility) == null ? void 0 : _a.isTabbing) ? "opacity: 0;" : "display: none;";
1007
+ ${(e) => {
1008
+ var a;
1009
+ return (a = e.theme.accessibility) != null && a.isTabbing ? "opacity: 0;" : "display: none;";
1077
1010
  }};
1078
1011
  &:focus {
1079
1012
  opacity: 1;
@@ -1082,9 +1015,9 @@ const StyledItemList$1 = styled(ItemList)`
1082
1015
  }
1083
1016
 
1084
1017
  > span {
1085
- font-size: ${(p2) => {
1086
- var _a;
1087
- return (_a = p2.theme.fonts) == null ? void 0 : _a.small;
1018
+ font-size: ${(e) => {
1019
+ var a;
1020
+ return (a = e.theme.fonts) == null ? void 0 : a.small;
1088
1021
  }};
1089
1022
  }
1090
1023
 
@@ -1103,9 +1036,9 @@ const StyledItemList$1 = styled(ItemList)`
1103
1036
  }
1104
1037
  `}
1105
1038
  > a {
1106
- color: ${(p) => {
1107
- var _a;
1108
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
1039
+ color: ${(t) => {
1040
+ var e;
1041
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
1109
1042
  }};
1110
1043
  overflow: hidden;
1111
1044
  text-overflow: ellipsis;
@@ -1113,19 +1046,19 @@ const StyledItemList$1 = styled(ItemList)`
1113
1046
  display: inline-block;
1114
1047
 
1115
1048
  svg {
1116
- margin: 0 calc(${(p) => {
1117
- var _a;
1118
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
1049
+ margin: 0 calc(${(t) => {
1050
+ var e;
1051
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1119
1052
  }}*2) 0 0;
1120
1053
  line {
1121
- stroke: ${(p) => {
1122
- var _a;
1123
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
1054
+ stroke: ${(t) => {
1055
+ var e;
1056
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
1124
1057
  }};
1125
1058
  }
1126
1059
  }
1127
1060
 
1128
- ${(p) => p.expandable === "true" && css`
1061
+ ${(t) => t.expandable === "true" && g`
1129
1062
  display: flex;
1130
1063
  flex-direction: row-reverse;
1131
1064
  justify-content: flex-end;
@@ -1137,18 +1070,18 @@ const StyledItemList$1 = styled(ItemList)`
1137
1070
  }
1138
1071
 
1139
1072
  svg {
1140
- margin: 0 0 0 ${(p2) => {
1141
- var _a;
1142
- return (_a = p2.theme.sizes) == null ? void 0 : _a.small;
1073
+ margin: 0 0 0 ${(e) => {
1074
+ var a;
1075
+ return (a = e.theme.sizes) == null ? void 0 : a.small;
1143
1076
  }};
1144
1077
  }
1145
1078
  `}
1146
1079
 
1147
1080
  &:focus {
1148
- ${(p) => {
1149
- var _a;
1150
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
1151
- ${borderTabStyle}
1081
+ ${(t) => {
1082
+ var e;
1083
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && g`
1084
+ ${re}
1152
1085
  text-decoration: underline;
1153
1086
  `;
1154
1087
  }};
@@ -1163,13 +1096,13 @@ const StyledItemList$1 = styled(ItemList)`
1163
1096
  }
1164
1097
 
1165
1098
  > a {
1166
- color: ${(p) => {
1167
- var _a;
1168
- return (_a = p.theme.colors) == null ? void 0 : _a.text;
1099
+ color: ${(t) => {
1100
+ var e;
1101
+ return (e = t.theme.colors) == null ? void 0 : e.text;
1169
1102
  }};
1170
- margin: ${(p) => {
1171
- var _a;
1172
- return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
1103
+ margin: ${(t) => {
1104
+ var e;
1105
+ return (e = t.theme.sizes) == null ? void 0 : e.normal;
1173
1106
  }} 0 0;
1174
1107
  align-self: flex-start;
1175
1108
  align-items: center;
@@ -1180,304 +1113,131 @@ const StyledItemList$1 = styled(ItemList)`
1180
1113
  }
1181
1114
 
1182
1115
  svg {
1183
- margin: 0 calc(${(p) => {
1184
- var _a;
1185
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
1116
+ margin: 0 calc(${(t) => {
1117
+ var e;
1118
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1186
1119
  }}*2) 0 0;
1187
1120
  line {
1188
- stroke: ${(p) => {
1189
- var _a;
1190
- return (_a = p.theme.colors) == null ? void 0 : _a.text;
1121
+ stroke: ${(t) => {
1122
+ var e;
1123
+ return (e = t.theme.colors) == null ? void 0 : e.text;
1191
1124
  }};
1192
1125
  }
1193
1126
  }
1194
1127
 
1195
1128
  &:focus {
1196
- ${(p) => {
1197
- var _a;
1198
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
1199
- ${borderTabStyle}
1129
+ ${(t) => {
1130
+ var e;
1131
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && g`
1132
+ ${re}
1200
1133
  text-decoration: underline;
1201
1134
  `;
1202
1135
  }};
1203
1136
  }
1204
1137
  }
1205
- `;
1206
- const StyledTagList = styled(List)`
1207
- ${list}
1138
+ `, Et = f(q)`
1139
+ ${me}
1208
1140
  display: flex;
1209
1141
  margin: 0 0 0 auto;
1210
1142
  grid-area: tags;
1211
1143
 
1212
1144
  li,
1213
1145
  li:last-child {
1214
- margin: 0 0 0 ${(p) => {
1215
- var _a;
1216
- return (_a = p.theme.sizes) == null ? void 0 : _a.small;
1146
+ margin: 0 0 0 ${(t) => {
1147
+ var e;
1148
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1217
1149
  }};
1218
1150
  display: flex;
1219
1151
  align-items: center;
1220
1152
  justify-content: space-between;
1221
1153
  }
1222
- `;
1223
- const StyledTagIcon = styled(SymbolBadge)`
1154
+ `, kt = f(N)`
1224
1155
  display: block;
1225
- color: ${(p) => {
1226
- var _a;
1227
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
1156
+ color: ${(t) => {
1157
+ var e;
1158
+ return (e = t.theme.colors) == null ? void 0 : e.primary;
1228
1159
  }};
1229
- ${(p) => {
1230
- if (p.symbol.type === "Uri") {
1160
+ ${(t) => {
1161
+ if (t.symbol.type === "Uri")
1231
1162
  return `
1232
- width: ${p.size}px;
1233
- height: ${p.size}px;
1163
+ width: ${t.size}px;
1164
+ height: ${t.size}px;
1234
1165
  `;
1235
- }
1236
- if (p.symbol.type === "FontAwesome") {
1166
+ if (t.symbol.type === "FontAwesome")
1237
1167
  return `
1238
- font-size: ${p.size}px;
1168
+ font-size: ${t.size}px;
1239
1169
  `;
1240
- }
1241
1170
  }}
1242
- `;
1243
- const StyledMetadata = styled(Metadata)`
1171
+ `, zt = f(bt)`
1244
1172
  grid-area: metadata;
1245
1173
  text-overflow: ellipsis;
1246
1174
  overflow: hidden;
1247
- font-size: ${(p) => {
1248
- var _a;
1249
- return (_a = p.theme.fonts) == null ? void 0 : _a.small;
1175
+ font-size: ${(t) => {
1176
+ var e;
1177
+ return (e = t.theme.fonts) == null ? void 0 : e.small;
1250
1178
  }};
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);`;
1179
+ ${(t) => {
1180
+ var e;
1181
+ return typeof t.indent == "number" && `text-indent: calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2 + ${t.indent}px);`;
1254
1182
  }}
1255
- `;
1256
- const NotificationList = (_k) => {
1257
- var _l = _k, {
1258
- className,
1259
- showHeader,
1260
- notificationList,
1261
- loading
1262
- } = _l, other = __objRest(_l, [
1263
- "className",
1264
- "showHeader",
1265
- "notificationList",
1266
- "loading"
1267
- ]);
1268
- const [expanded, setExpanded] = useState(null);
1183
+ `, Nt = (t) => new RegExp("^#", "i").test(t), St = (t) => (r) => {
1184
+ var s = r, { children: e } = s, a = v(s, ["children"]);
1269
1185
  const {
1270
- id,
1271
- title,
1272
- symbol,
1273
- notifications = [],
1274
- defaultHeaderOptions = { visible: true }
1275
- } = notificationList || {};
1276
- if (!notifications.length && !loading) {
1277
- return null;
1186
+ implementation: i,
1187
+ name: o
1188
+ } = t.get("$widget"), { href: m = "" } = a;
1189
+ if (Nt(m))
1190
+ return /* @__PURE__ */ n.createElement(Je, {
1191
+ smooth: !0,
1192
+ to: m
1193
+ }, e);
1194
+ const c = i.bindings.map((l) => l.replace(/\./g, "\\.")).join("|"), h = new RegExp(`^((http[s]?:)?//)?(${c})/([^\\s]+)`).exec(m);
1195
+ if (h && h.length >= 4) {
1196
+ const l = h[4];
1197
+ if (i.widgets.get(l) && !l.startsWith("blob?") && !l.startsWith(o))
1198
+ return /* @__PURE__ */ n.createElement(Qe, {
1199
+ widgetName: l
1200
+ }, e);
1278
1201
  }
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, {
1297
- size: 11,
1298
- symbol: {
1299
- type: "Svg",
1300
- content: `caret-${expanded === id2 ? "up" : "down"}`
1202
+ return /* @__PURE__ */ n.createElement("a", y({}, a), e);
1203
+ }, Tt = (t) => /* @__PURE__ */ n.createElement(Xe, {
1204
+ attrs: t
1205
+ }), Jt = (t, e = []) => ({
1206
+ transform: {
1207
+ img: Tt,
1208
+ a: (a) => {
1209
+ const m = a, { children: r } = m, i = v(m, ["children"])["data-target"];
1210
+ if (i && e.length) {
1211
+ const c = e.find(({ connection: d }) => d === i);
1212
+ if (c)
1213
+ return /* @__PURE__ */ n.createElement(be, y({}, c), r);
1301
1214
  }
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
1309
- }))
1310
- }), /* @__PURE__ */ React.createElement(Loader, {
1311
- loading
1312
- }));
1313
- };
1314
- const StyledButton = styled(Button)`
1315
- display: flex;
1316
- justify-content: space-between;
1317
- align-items: center;
1318
- width: 100%;
1319
- text-align: left;
1320
- svg,
1321
- i {
1322
- color: ${(p) => {
1323
- var _a;
1324
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
1325
- }};
1326
- }
1327
- span {
1328
- color: ${(p) => {
1329
- var _a;
1330
- return (_a = p.theme.colors) == null ? void 0 : _a.text;
1331
- }};
1332
- font-size: ${(p) => {
1333
- var _a;
1334
- return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
1335
- }};
1336
- overflow: hidden;
1337
- text-overflow: ellipsis;
1338
- flex: 1;
1339
- white-space: nowrap;
1340
- }
1341
- &:focus {
1342
- ${(p) => {
1343
- var _a, _b;
1344
- return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
1345
- ${borderTabStyle}
1346
- span {
1347
- color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
1348
- text-decoration: underline;
1349
- }
1350
- `;
1351
- }};
1215
+ return St(t)(a);
1352
1216
  }
1353
- `;
1354
- const StyledItemList = styled(ItemList)`
1355
- ${loadingOpacity}
1356
- ${itemList}
1357
- overflow: hidden;
1358
- justify-content: flex-start;
1359
- padding: ${(p) => {
1360
- var _a;
1361
- return (_a = p.theme.sizes) == null ? void 0 : _a.large;
1362
- }};
1363
- ${(p) => !p["data-show-header"] && css`
1364
- > div {
1365
- ${headingElement("h1", css`
1366
- display: none;
1367
- `)}
1368
- }
1369
- `}
1370
-
1371
- @media (hover: hover) {
1372
- button:hover {
1373
- text-decoration: underline;
1374
- }
1375
- }
1376
- `;
1377
- const StyledParagraph = styled(Paragraph)`
1378
- ${genericHtml}
1379
- font-weight: 300;
1380
-
1381
- p {
1382
- white-space: normal;
1383
- }
1384
- `;
1385
- const StyledItem = styled.li`
1386
- ${StyledParagraph} {
1387
- display: none;
1388
- &: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;
1393
- `;
1394
- }}
1395
- }
1396
- }
1397
-
1398
- ${(p) => p["data-expanded"] && css`
1399
- ${StyledParagraph} {
1400
- display: block;
1401
- }
1402
- `}
1403
-
1404
- > span {
1405
- display: block;
1406
- font-weight: 300;
1407
- color: ${(p) => {
1408
- var _a;
1409
- return (_a = p.theme.colors) == null ? void 0 : _a.accent;
1410
- }};
1411
- }
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;
1417
- }};
1418
- line {
1419
- stroke: ${(p) => {
1420
- var _a;
1421
- return (_a = p.theme.colors) == null ? void 0 : _a.primary;
1422
- }};
1423
- }
1424
- `;
1425
- const StyledTimestamp = styled(Timestamp)`
1426
- font-size: ${(p) => {
1427
- var _a;
1428
- return (_a = p.theme.fonts) == null ? void 0 : _a.small;
1429
- }};
1430
- 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"]);
1439
- 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
1217
  }
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
- }
1461
- }
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);
1478
- }
1479
- }
1480
- };
1218
+ });
1219
+ export {
1220
+ Gt as AccordionListItem,
1221
+ be as DialogLink,
1222
+ Mt as DialogList,
1223
+ Pt as DrawerList,
1224
+ Rt as DropdownActions,
1225
+ Wt as DropdownList,
1226
+ gt as FavoriteButton,
1227
+ Vt as Feedback,
1228
+ Ut as GuideList,
1229
+ Bt as Loader,
1230
+ xe as LoaderWrapper,
1231
+ bt as Metadata,
1232
+ Ot as SmallCaret,
1233
+ _t as StyledHeaderText,
1234
+ ut as StyledListButton,
1235
+ jt as genericHtml,
1236
+ Jt as guideRenderInstructions,
1237
+ Ht as loadingOpacity,
1238
+ Yt as useArrowKeys,
1239
+ Kt as useDebounce,
1240
+ $t as useFavorites,
1241
+ qt as useHover
1481
1242
  };
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
1243
  //# sourceMappingURL=index.js.map