@royaloperahouse/harmonic 0.11.0-n → 0.12.0
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.
- package/README.GIT +278 -0
- package/README.md +43 -252
- package/dist/components/Typography/Typography.d.ts +3 -3
- package/dist/components/atoms/Buttons/Secondary/utils.d.ts +4 -4
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/SectionSplitter/SectionSplitter.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/ContactCard/ContactCard.style.d.ts +4 -5
- package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts +1 -1
- package/dist/components/molecules/Information/Information.style.d.ts +1 -1
- package/dist/components/molecules/PageHeading/Promo/Promo.d.ts +2 -1
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +6 -3
- package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +1 -1
- package/dist/components/molecules/SectionTitle/SectionTitle.d.ts +1 -1
- package/dist/components/molecules/TextOnly/TextOnly.d.ts +4 -0
- package/dist/components/molecules/TextOnly/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/components/organisms/AnchorTabBar/AnchorTabBar.style.d.ts +3 -8
- package/dist/components/organisms/StickyBar/StickyBar.style.d.ts +1 -1
- package/dist/harmonic.cjs.development.css +16 -345
- package/dist/harmonic.cjs.development.js +674 -598
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +687 -613
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +3 -5
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -4
- package/dist/styles/HarmonicThemeProvider/index.d.ts +1 -2
- package/dist/types/buttonTypes.d.ts +2 -0
- package/dist/types/contactCard.d.ts +22 -8
- package/dist/types/impactHeader.d.ts +0 -2
- package/dist/types/information.d.ts +43 -23
- package/dist/types/navigation.d.ts +61 -33
- package/dist/types/promoWithTags.d.ts +1 -9
- package/dist/types/types.d.ts +40 -26
- package/dist/types/typography.d.ts +0 -4
- package/package.json +1 -1
- package/dist/components/molecules/BodyContent/BodyContent.d.ts +0 -4
- package/dist/components/molecules/BodyContent/index.d.ts +0 -2
- /package/dist/components/molecules/{BodyContent/BodyContent.style.d.ts → TextOnly/TextOnly.style.d.ts} +0 -0
|
@@ -59,113 +59,274 @@ function _objectWithoutPropertiesLoose(r, e) {
|
|
|
59
59
|
}
|
|
60
60
|
return t;
|
|
61
61
|
}
|
|
62
|
-
function
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
62
|
+
function _regeneratorRuntime() {
|
|
63
|
+
_regeneratorRuntime = function () {
|
|
64
|
+
return r;
|
|
65
|
+
};
|
|
66
|
+
var t,
|
|
67
|
+
r = {},
|
|
68
|
+
e = Object.prototype,
|
|
69
|
+
n = e.hasOwnProperty,
|
|
70
|
+
o = "function" == typeof Symbol ? Symbol : {},
|
|
71
|
+
i = o.iterator || "@@iterator",
|
|
72
|
+
a = o.asyncIterator || "@@asyncIterator",
|
|
73
|
+
u = o.toStringTag || "@@toStringTag";
|
|
74
|
+
function c(t, r, e, n) {
|
|
75
|
+
Object.defineProperty(t, r, {
|
|
76
|
+
value: e,
|
|
77
|
+
enumerable: !n,
|
|
78
|
+
configurable: !n,
|
|
79
|
+
writable: !n
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
try {
|
|
83
|
+
c({}, "");
|
|
84
|
+
} catch (t) {
|
|
85
|
+
c = function (t, r, e) {
|
|
86
|
+
return t[r] = e;
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
function h(r, e, n, o) {
|
|
90
|
+
var i = e && e.prototype instanceof Generator ? e : Generator,
|
|
91
|
+
a = Object.create(i.prototype);
|
|
92
|
+
return c(a, "_invoke", function (r, e, n) {
|
|
93
|
+
var o = 1;
|
|
94
|
+
return function (i, a) {
|
|
95
|
+
if (3 === o) throw Error("Generator is already running");
|
|
96
|
+
if (4 === o) {
|
|
97
|
+
if ("throw" === i) throw a;
|
|
98
|
+
return {
|
|
99
|
+
value: t,
|
|
100
|
+
done: !0
|
|
101
|
+
};
|
|
96
102
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
if (f = 2, i) {
|
|
106
|
-
if (c || (o = "next"), t = i[o]) {
|
|
107
|
-
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
|
|
108
|
-
if (!t.done) return t;
|
|
109
|
-
u = t.value, c < 2 && (c = 0);
|
|
110
|
-
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
|
|
111
|
-
i = e;
|
|
112
|
-
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
|
|
113
|
-
} catch (t) {
|
|
114
|
-
i = e, c = 1, u = t;
|
|
115
|
-
} finally {
|
|
116
|
-
f = 1;
|
|
103
|
+
for (n.method = i, n.arg = a;;) {
|
|
104
|
+
var u = n.delegate;
|
|
105
|
+
if (u) {
|
|
106
|
+
var c = d(u, n);
|
|
107
|
+
if (c) {
|
|
108
|
+
if (c === f) continue;
|
|
109
|
+
return c;
|
|
110
|
+
}
|
|
117
111
|
}
|
|
112
|
+
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
|
|
113
|
+
if (1 === o) throw o = 4, n.arg;
|
|
114
|
+
n.dispatchException(n.arg);
|
|
115
|
+
} else "return" === n.method && n.abrupt("return", n.arg);
|
|
116
|
+
o = 3;
|
|
117
|
+
var h = s(r, e, n);
|
|
118
|
+
if ("normal" === h.type) {
|
|
119
|
+
if (o = n.done ? 4 : 2, h.arg === f) continue;
|
|
120
|
+
return {
|
|
121
|
+
value: h.arg,
|
|
122
|
+
done: n.done
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
"throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg);
|
|
118
126
|
}
|
|
119
|
-
return {
|
|
120
|
-
value: t,
|
|
121
|
-
done: y
|
|
122
|
-
};
|
|
123
127
|
};
|
|
124
|
-
}(r,
|
|
128
|
+
}(r, n, new Context(o || [])), !0), a;
|
|
125
129
|
}
|
|
126
|
-
|
|
130
|
+
function s(t, r, e) {
|
|
131
|
+
try {
|
|
132
|
+
return {
|
|
133
|
+
type: "normal",
|
|
134
|
+
arg: t.call(r, e)
|
|
135
|
+
};
|
|
136
|
+
} catch (t) {
|
|
137
|
+
return {
|
|
138
|
+
type: "throw",
|
|
139
|
+
arg: t
|
|
140
|
+
};
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
r.wrap = h;
|
|
144
|
+
var f = {};
|
|
127
145
|
function Generator() {}
|
|
128
146
|
function GeneratorFunction() {}
|
|
129
147
|
function GeneratorFunctionPrototype() {}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
148
|
+
var l = {};
|
|
149
|
+
c(l, i, function () {
|
|
150
|
+
return this;
|
|
151
|
+
});
|
|
152
|
+
var p = Object.getPrototypeOf,
|
|
153
|
+
y = p && p(p(x([])));
|
|
154
|
+
y && y !== e && n.call(y, i) && (l = y);
|
|
155
|
+
var v = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(l);
|
|
156
|
+
function g(t) {
|
|
157
|
+
["next", "throw", "return"].forEach(function (r) {
|
|
158
|
+
c(t, r, function (t) {
|
|
159
|
+
return this._invoke(r, t);
|
|
160
|
+
});
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
function AsyncIterator(t, r) {
|
|
164
|
+
function e(o, i, a, u) {
|
|
165
|
+
var c = s(t[o], t, i);
|
|
166
|
+
if ("throw" !== c.type) {
|
|
167
|
+
var h = c.arg,
|
|
168
|
+
f = h.value;
|
|
169
|
+
return f && "object" == typeof f && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) {
|
|
170
|
+
e("next", t, a, u);
|
|
171
|
+
}, function (t) {
|
|
172
|
+
e("throw", t, a, u);
|
|
173
|
+
}) : r.resolve(f).then(function (t) {
|
|
174
|
+
h.value = t, a(h);
|
|
175
|
+
}, function (t) {
|
|
176
|
+
return e("throw", t, a, u);
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
u(c.arg);
|
|
180
|
+
}
|
|
181
|
+
var o;
|
|
182
|
+
c(this, "_invoke", function (t, n) {
|
|
183
|
+
function i() {
|
|
184
|
+
return new r(function (r, o) {
|
|
185
|
+
e(t, n, r, o);
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
return o = o ? o.then(i, i) : i();
|
|
189
|
+
}, !0);
|
|
190
|
+
}
|
|
191
|
+
function d(r, e) {
|
|
192
|
+
var n = e.method,
|
|
193
|
+
o = r.i[n];
|
|
194
|
+
if (o === t) return e.delegate = null, "throw" === n && r.i.return && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f;
|
|
195
|
+
var i = s(o, r.i, e.arg);
|
|
196
|
+
if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f;
|
|
197
|
+
var a = i.arg;
|
|
198
|
+
return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f);
|
|
199
|
+
}
|
|
200
|
+
function w(t) {
|
|
201
|
+
this.tryEntries.push(t);
|
|
202
|
+
}
|
|
203
|
+
function m(r) {
|
|
204
|
+
var e = r[4] || {};
|
|
205
|
+
e.type = "normal", e.arg = t, r[4] = e;
|
|
137
206
|
}
|
|
138
|
-
|
|
207
|
+
function Context(t) {
|
|
208
|
+
this.tryEntries = [[-1]], t.forEach(w, this), this.reset(!0);
|
|
209
|
+
}
|
|
210
|
+
function x(r) {
|
|
211
|
+
if (null != r) {
|
|
212
|
+
var e = r[i];
|
|
213
|
+
if (e) return e.call(r);
|
|
214
|
+
if ("function" == typeof r.next) return r;
|
|
215
|
+
if (!isNaN(r.length)) {
|
|
216
|
+
var o = -1,
|
|
217
|
+
a = function e() {
|
|
218
|
+
for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e;
|
|
219
|
+
return e.value = t, e.done = !0, e;
|
|
220
|
+
};
|
|
221
|
+
return a.next = a;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
throw new TypeError(typeof r + " is not iterable");
|
|
225
|
+
}
|
|
226
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), c(GeneratorFunctionPrototype, u, GeneratorFunction.displayName = "GeneratorFunction"), r.isGeneratorFunction = function (t) {
|
|
227
|
+
var r = "function" == typeof t && t.constructor;
|
|
228
|
+
return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name));
|
|
229
|
+
}, r.mark = function (t) {
|
|
230
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = Object.create(v), t;
|
|
231
|
+
}, r.awrap = function (t) {
|
|
232
|
+
return {
|
|
233
|
+
__await: t
|
|
234
|
+
};
|
|
235
|
+
}, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () {
|
|
236
|
+
return this;
|
|
237
|
+
}), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) {
|
|
238
|
+
void 0 === i && (i = Promise);
|
|
239
|
+
var a = new AsyncIterator(h(t, e, n, o), i);
|
|
240
|
+
return r.isGeneratorFunction(e) ? a : a.next().then(function (t) {
|
|
241
|
+
return t.done ? t.value : a.next();
|
|
242
|
+
});
|
|
243
|
+
}, g(v), c(v, u, "Generator"), c(v, i, function () {
|
|
139
244
|
return this;
|
|
140
|
-
}),
|
|
245
|
+
}), c(v, "toString", function () {
|
|
141
246
|
return "[object Generator]";
|
|
142
|
-
}),
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
247
|
+
}), r.keys = function (t) {
|
|
248
|
+
var r = Object(t),
|
|
249
|
+
e = [];
|
|
250
|
+
for (var n in r) e.unshift(n);
|
|
251
|
+
return function t() {
|
|
252
|
+
for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t;
|
|
253
|
+
return t.done = !0, t;
|
|
146
254
|
};
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
function
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
255
|
+
}, r.values = x, Context.prototype = {
|
|
256
|
+
constructor: Context,
|
|
257
|
+
reset: function (r) {
|
|
258
|
+
if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+e.slice(1)) && (this[e] = t);
|
|
259
|
+
},
|
|
260
|
+
stop: function () {
|
|
261
|
+
this.done = !0;
|
|
262
|
+
var t = this.tryEntries[0][4];
|
|
263
|
+
if ("throw" === t.type) throw t.arg;
|
|
264
|
+
return this.rval;
|
|
265
|
+
},
|
|
266
|
+
dispatchException: function (r) {
|
|
267
|
+
if (this.done) throw r;
|
|
268
|
+
var e = this;
|
|
269
|
+
function n(t) {
|
|
270
|
+
a.type = "throw", a.arg = r, e.next = t;
|
|
271
|
+
}
|
|
272
|
+
for (var o = e.tryEntries.length - 1; o >= 0; --o) {
|
|
273
|
+
var i = this.tryEntries[o],
|
|
274
|
+
a = i[4],
|
|
275
|
+
u = this.prev,
|
|
276
|
+
c = i[1],
|
|
277
|
+
h = i[2];
|
|
278
|
+
if (-1 === i[0]) return n("end"), !1;
|
|
279
|
+
if (!c && !h) throw Error("try statement without catch or finally");
|
|
280
|
+
if (null != i[0] && i[0] <= u) {
|
|
281
|
+
if (u < c) return this.method = "next", this.arg = t, n(c), !0;
|
|
282
|
+
if (u < h) return n(h), !1;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
abrupt: function (t, r) {
|
|
287
|
+
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
|
|
288
|
+
var n = this.tryEntries[e];
|
|
289
|
+
if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) {
|
|
290
|
+
var o = n;
|
|
291
|
+
break;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null);
|
|
295
|
+
var i = o ? o[4] : {};
|
|
296
|
+
return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i);
|
|
297
|
+
},
|
|
298
|
+
complete: function (t, r) {
|
|
299
|
+
if ("throw" === t.type) throw t.arg;
|
|
300
|
+
return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f;
|
|
301
|
+
},
|
|
302
|
+
finish: function (t) {
|
|
303
|
+
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
|
|
304
|
+
var e = this.tryEntries[r];
|
|
305
|
+
if (e[2] === t) return this.complete(e[4], e[3]), m(e), f;
|
|
306
|
+
}
|
|
307
|
+
},
|
|
308
|
+
catch: function (t) {
|
|
309
|
+
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
|
|
310
|
+
var e = this.tryEntries[r];
|
|
311
|
+
if (e[0] === t) {
|
|
312
|
+
var n = e[4];
|
|
313
|
+
if ("throw" === n.type) {
|
|
314
|
+
var o = n.arg;
|
|
315
|
+
m(e);
|
|
316
|
+
}
|
|
317
|
+
return o;
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
throw Error("illegal catch attempt");
|
|
321
|
+
},
|
|
322
|
+
delegateYield: function (r, e, n) {
|
|
323
|
+
return this.delegate = {
|
|
324
|
+
i: x(r),
|
|
325
|
+
r: e,
|
|
326
|
+
n: n
|
|
327
|
+
}, "next" === this.method && (this.arg = t), f;
|
|
328
|
+
}
|
|
329
|
+
}, r;
|
|
169
330
|
}
|
|
170
331
|
function _taggedTemplateLiteralLoose(e, t) {
|
|
171
332
|
return t || (t = e.slice(0)), e.raw = t, e;
|
|
@@ -203,9 +364,9 @@ var createClassNames = function createClassNames(baseClass, options, styles) {
|
|
|
203
364
|
return classes.filter(Boolean).join(' ');
|
|
204
365
|
};
|
|
205
366
|
|
|
206
|
-
var
|
|
367
|
+
var styles = {"display":"typography-module_display__ZHsz9","header":"typography-module_header__FVsLI","subtitle":"typography-module_subtitle__x3sSn","bodycopy":"typography-module_bodycopy__-BY2U","overline":"typography-module_overline__y1yCC","buttontext":"typography-module_buttontext__Gp0W-","captiontext":"typography-module_captiontext__zyA--","navigationtext":"typography-module_navigationtext__Qj6Zw","display--large":"typography-module_display--large__RwPQD","display--small":"typography-module_display--small__XWUSJ","header--large":"typography-module_header--large__2vP3p","header--medium":"typography-module_header--medium__OgzlB","header--small":"typography-module_header--small__zLuFf","subtitle--large":"typography-module_subtitle--large__1Ep9J","subtitle--small":"typography-module_subtitle--small__Vt9bZ","bodycopy--large":"typography-module_bodycopy--large__BNzf2","bodycopy--medium":"typography-module_bodycopy--medium__cwJEu","bodycopy--small":"typography-module_bodycopy--small__fTLSM","overline--large":"typography-module_overline--large__79WUM","overline--small":"typography-module_overline--small__MGEG6","display--primary":"typography-module_display--primary__9sTwU","header--primary":"typography-module_header--primary__KF0PJ","subtitle--primary":"typography-module_subtitle--primary__yL-hS","bodycopy--primary":"typography-module_bodycopy--primary__5Uo2D","overline--primary":"typography-module_overline--primary__a2NSa","buttontext--primary":"typography-module_buttontext--primary__HnmE3","captiontext--primary":"typography-module_captiontext--primary__mmafI","navigationtext--primary":"typography-module_navigationtext--primary__vIsUl","display--black":"typography-module_display--black__8hmsx","header--black":"typography-module_header--black__M3I14","subtitle--black":"typography-module_subtitle--black__IQRSo","bodycopy--black":"typography-module_bodycopy--black__J8BNP","overline--black":"typography-module_overline--black__RUDoj","buttontext--black":"typography-module_buttontext--black__irjmz","captiontext--black":"typography-module_captiontext--black__7axhP","navigationtext--black":"typography-module_navigationtext--black__wDz-G","display--white":"typography-module_display--white__3QA6W","header--white":"typography-module_header--white__mm-ex","subtitle--white":"typography-module_subtitle--white__VzQ3K","bodycopy--white":"typography-module_bodycopy--white__NJ8J8","overline--white":"typography-module_overline--white__cV5QV","buttontext--white":"typography-module_buttontext--white__rrr8U","captiontext--white":"typography-module_captiontext--white__OMFwW","navigationtext--white":"typography-module_navigationtext--white__5YDdY","display--red":"typography-module_display--red__khdLJ","header--red":"typography-module_header--red__hxuj9","subtitle--red":"typography-module_subtitle--red__gSK7d","bodycopy--red":"typography-module_bodycopy--red__P5Mau","overline--red":"typography-module_overline--red__OW5dE","buttontext--red":"typography-module_buttontext--red__mlRi2","captiontext--red":"typography-module_captiontext--red__jMQIK","navigationtext--red":"typography-module_navigationtext--red__-QADV","display--grey":"typography-module_display--grey__RsgTf","header--grey":"typography-module_header--grey__rC0vN","subtitle--grey":"typography-module_subtitle--grey__1nkEx","bodycopy--grey":"typography-module_bodycopy--grey__SNnaU","overline--grey":"typography-module_overline--grey__lGOsK","buttontext--grey":"typography-module_buttontext--grey__1Y4oX","captiontext--grey":"typography-module_captiontext--grey__V0MLc","navigationtext--grey":"typography-module_navigationtext--grey__xi3sz","display--inherit":"typography-module_display--inherit__ZNOHM","header--inherit":"typography-module_header--inherit__qmHQE","subtitle--inherit":"typography-module_subtitle--inherit__mly-X","bodycopy--inherit":"typography-module_bodycopy--inherit__CoC-f","overline--inherit":"typography-module_overline--inherit__Cq4ni","buttontext--inherit":"typography-module_buttontext--inherit__vguWx","captiontext--inherit":"typography-module_captiontext--inherit__ya6gm","navigationtext--inherit":"typography-module_navigationtext--inherit__cJLWf","display--serif":"typography-module_display--serif__C0-Ve","header--serif":"typography-module_header--serif__uTGCc","display--em":"typography-module_display--em__h2bPV","header--em":"typography-module_header--em__UFQIA","display--bold":"typography-module_display--bold__PG-8g","header--bold":"typography-module_header--bold__InvJk","subtitle--bold":"typography-module_subtitle--bold__Subov","bodycopy--bold":"typography-module_bodycopy--bold__nZX3C","overline--bold":"typography-module_overline--bold__3mUXy","buttontext--bold":"typography-module_buttontext--bold__rBKIJ","captiontext--bold":"typography-module_captiontext--bold__ebTyV","navigationtext--bold":"typography-module_navigationtext--bold__SRlV2"};
|
|
207
368
|
|
|
208
|
-
var _excluded = ["children", "size", "color", "className", "bold"
|
|
369
|
+
var _excluded = ["children", "size", "color", "className", "bold"],
|
|
209
370
|
_excluded2 = ["children", "size", "color", "className"];
|
|
210
371
|
/* ~~~ Headers - size and hierarchy set separately ~~~ */
|
|
211
372
|
var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
@@ -223,7 +384,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
223
384
|
serif: serif,
|
|
224
385
|
em: em,
|
|
225
386
|
className: className
|
|
226
|
-
},
|
|
387
|
+
}, styles);
|
|
227
388
|
return /*#__PURE__*/React__default.createElement(Tag, {
|
|
228
389
|
className: classNames
|
|
229
390
|
}, children);
|
|
@@ -239,7 +400,7 @@ var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
|
|
|
239
400
|
size: size,
|
|
240
401
|
color: color,
|
|
241
402
|
className: className
|
|
242
|
-
},
|
|
403
|
+
}, styles);
|
|
243
404
|
return /*#__PURE__*/React__default.createElement("p", {
|
|
244
405
|
className: classNames
|
|
245
406
|
}, children);
|
|
@@ -253,16 +414,14 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
|
|
|
253
414
|
color = _ref4$color === void 0 ? 'inherit' : _ref4$color,
|
|
254
415
|
className = _ref4.className,
|
|
255
416
|
bold = _ref4.bold,
|
|
256
|
-
_ref4$tag = _ref4.tag,
|
|
257
|
-
Tag = _ref4$tag === void 0 ? 'p' : _ref4$tag,
|
|
258
417
|
props = _objectWithoutPropertiesLoose(_ref4, _excluded);
|
|
259
418
|
var classNames = createClassNames('bodycopy', {
|
|
260
419
|
size: size,
|
|
261
420
|
color: color,
|
|
262
421
|
bold: bold,
|
|
263
422
|
className: className
|
|
264
|
-
},
|
|
265
|
-
return /*#__PURE__*/React__default.createElement(
|
|
423
|
+
}, styles);
|
|
424
|
+
return /*#__PURE__*/React__default.createElement("p", Object.assign({
|
|
266
425
|
className: classNames
|
|
267
426
|
}, props), children);
|
|
268
427
|
};
|
|
@@ -278,7 +437,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
|
278
437
|
size: size,
|
|
279
438
|
color: color,
|
|
280
439
|
className: className
|
|
281
|
-
},
|
|
440
|
+
}, styles);
|
|
282
441
|
return /*#__PURE__*/React__default.createElement("p", Object.assign({
|
|
283
442
|
className: classNames
|
|
284
443
|
}, props), children);
|
|
@@ -292,7 +451,7 @@ var ButtonText = function ButtonText(_ref6) {
|
|
|
292
451
|
var classNames = createClassNames('buttontext', {
|
|
293
452
|
color: color,
|
|
294
453
|
className: className
|
|
295
|
-
},
|
|
454
|
+
}, styles);
|
|
296
455
|
return /*#__PURE__*/React__default.createElement("span", {
|
|
297
456
|
className: classNames
|
|
298
457
|
}, children);
|
|
@@ -305,7 +464,7 @@ var Caption = function Caption(_ref7) {
|
|
|
305
464
|
var classNames = createClassNames('captiontext', {
|
|
306
465
|
color: color,
|
|
307
466
|
className: className
|
|
308
|
-
},
|
|
467
|
+
}, styles);
|
|
309
468
|
return /*#__PURE__*/React__default.createElement("p", {
|
|
310
469
|
className: classNames
|
|
311
470
|
}, children);
|
|
@@ -314,14 +473,12 @@ var NavigationText = function NavigationText(_ref8) {
|
|
|
314
473
|
var children = _ref8.children,
|
|
315
474
|
_ref8$color = _ref8.color,
|
|
316
475
|
color = _ref8$color === void 0 ? 'inherit' : _ref8$color,
|
|
317
|
-
_ref8$tag = _ref8.tag,
|
|
318
|
-
Tag = _ref8$tag === void 0 ? 'p' : _ref8$tag,
|
|
319
476
|
className = _ref8.className;
|
|
320
477
|
var classNames = createClassNames('navigationtext', {
|
|
321
478
|
color: color,
|
|
322
479
|
className: className
|
|
323
|
-
},
|
|
324
|
-
return /*#__PURE__*/React__default.createElement(
|
|
480
|
+
}, styles);
|
|
481
|
+
return /*#__PURE__*/React__default.createElement("p", {
|
|
325
482
|
className: classNames
|
|
326
483
|
}, children);
|
|
327
484
|
};
|
|
@@ -2672,48 +2829,70 @@ var COLORS$1 = {
|
|
|
2672
2829
|
hover: 'var(--button-secondary-hover-color)',
|
|
2673
2830
|
pressed: 'var(--button-secondary-pressed-color)'
|
|
2674
2831
|
};
|
|
2832
|
+
var isObjectWithKey = function isObjectWithKey(object, key) {
|
|
2833
|
+
return typeof object === 'object' && object !== null && key in object;
|
|
2834
|
+
};
|
|
2835
|
+
var hasSecondaryButtonColor = function hasSecondaryButtonColor(theme) {
|
|
2836
|
+
return isObjectWithKey(theme, 'colors') && isObjectWithKey(theme.colors, 'secondaryButton') && typeof theme.colors.secondaryButton === 'string';
|
|
2837
|
+
};
|
|
2675
2838
|
var getTextColor$1 = function getTextColor(_ref) {
|
|
2676
2839
|
var disabled = _ref.disabled,
|
|
2677
|
-
textColor = _ref.textColor
|
|
2840
|
+
textColor = _ref.textColor,
|
|
2841
|
+
theme = _ref.theme;
|
|
2678
2842
|
if (disabled) {
|
|
2679
2843
|
return COLORS$1.darkGrey;
|
|
2680
2844
|
}
|
|
2681
2845
|
if (textColor) {
|
|
2682
2846
|
return "var(--color-" + textColor + ")";
|
|
2683
2847
|
}
|
|
2848
|
+
if (hasSecondaryButtonColor(theme)) {
|
|
2849
|
+
return theme.colors.secondaryButton;
|
|
2850
|
+
}
|
|
2684
2851
|
return COLORS$1["default"];
|
|
2685
2852
|
};
|
|
2686
2853
|
var getBorderColor = function getBorderColor(_ref2) {
|
|
2687
2854
|
var disabled = _ref2.disabled,
|
|
2688
|
-
borderColor = _ref2.borderColor
|
|
2855
|
+
borderColor = _ref2.borderColor,
|
|
2856
|
+
theme = _ref2.theme;
|
|
2689
2857
|
if (disabled) {
|
|
2690
2858
|
return COLORS$1.disabled;
|
|
2691
2859
|
}
|
|
2692
2860
|
if (borderColor) {
|
|
2693
2861
|
return "var(--color-" + borderColor + ")";
|
|
2694
2862
|
}
|
|
2863
|
+
if (hasSecondaryButtonColor(theme)) {
|
|
2864
|
+
return theme.colors.secondaryButton;
|
|
2865
|
+
}
|
|
2695
2866
|
return COLORS$1.border;
|
|
2696
2867
|
};
|
|
2697
2868
|
var getHoveredColor$1 = function getHoveredColor(_ref3) {
|
|
2698
2869
|
var disabled = _ref3.disabled,
|
|
2699
|
-
hoveredColor = _ref3.hoveredColor
|
|
2870
|
+
hoveredColor = _ref3.hoveredColor,
|
|
2871
|
+
theme = _ref3.theme;
|
|
2700
2872
|
if (disabled) {
|
|
2701
2873
|
return COLORS$1.disabled;
|
|
2702
2874
|
}
|
|
2703
2875
|
if (hoveredColor) {
|
|
2704
2876
|
return "var(--color-" + hoveredColor + ")";
|
|
2705
2877
|
}
|
|
2878
|
+
if (hasSecondaryButtonColor(theme)) {
|
|
2879
|
+
return theme.colors.secondaryButton;
|
|
2880
|
+
}
|
|
2706
2881
|
return COLORS$1.hover;
|
|
2707
2882
|
};
|
|
2708
2883
|
var getPressedColor$1 = function getPressedColor(_ref4) {
|
|
2709
2884
|
var disabled = _ref4.disabled,
|
|
2710
|
-
pressedColor = _ref4.pressedColor
|
|
2885
|
+
pressedColor = _ref4.pressedColor,
|
|
2886
|
+
theme = _ref4.theme;
|
|
2711
2887
|
if (disabled) {
|
|
2712
2888
|
return COLORS$1.disabled;
|
|
2713
2889
|
}
|
|
2714
2890
|
if (pressedColor) {
|
|
2715
2891
|
return "var(--color-" + pressedColor + ")";
|
|
2716
2892
|
}
|
|
2893
|
+
if (hasSecondaryButtonColor(theme)) {
|
|
2894
|
+
return theme.colors.secondaryButton;
|
|
2895
|
+
}
|
|
2717
2896
|
return COLORS$1.pressed;
|
|
2718
2897
|
};
|
|
2719
2898
|
|
|
@@ -3521,15 +3700,12 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3521
3700
|
|
|
3522
3701
|
var _templateObject$h, _templateObject2$a;
|
|
3523
3702
|
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3524
|
-
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--color-
|
|
3703
|
+
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-light-grey);\n"])));
|
|
3525
3704
|
|
|
3526
3705
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
3527
3706
|
var _ref$fullWidth = _ref.fullWidth,
|
|
3528
|
-
fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth
|
|
3529
|
-
|
|
3530
|
-
return /*#__PURE__*/React__default.createElement(SectionSplitterContainer, {
|
|
3531
|
-
className: className
|
|
3532
|
-
}, fullWidth ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
3707
|
+
fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth;
|
|
3708
|
+
return /*#__PURE__*/React__default.createElement(SectionSplitterContainer, null, fullWidth ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
3533
3709
|
columnStartDesktop: 1,
|
|
3534
3710
|
columnSpanDesktop: 16,
|
|
3535
3711
|
columnStartDevice: 1,
|
|
@@ -3660,7 +3836,6 @@ var Tab = function Tab(_ref) {
|
|
|
3660
3836
|
className = _ref.className,
|
|
3661
3837
|
role = _ref.role,
|
|
3662
3838
|
ariaLabel = _ref.ariaLabel,
|
|
3663
|
-
tabLinkId = _ref.tabLinkId,
|
|
3664
3839
|
color = _ref.color;
|
|
3665
3840
|
var clickHandler = function clickHandler() {
|
|
3666
3841
|
if (onClick) {
|
|
@@ -3691,9 +3866,8 @@ var Tab = function Tab(_ref) {
|
|
|
3691
3866
|
tabIndex: 0,
|
|
3692
3867
|
className: className
|
|
3693
3868
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
3694
|
-
id: tabLinkId,
|
|
3695
|
-
trimText: trimText,
|
|
3696
3869
|
color: color,
|
|
3870
|
+
trimText: trimText,
|
|
3697
3871
|
withTextInMobile: withTextInMobile,
|
|
3698
3872
|
"aria-hidden": "true"
|
|
3699
3873
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -3704,7 +3878,7 @@ var Tab = function Tab(_ref) {
|
|
|
3704
3878
|
};
|
|
3705
3879
|
|
|
3706
3880
|
var _templateObject$l, _templateObject2$d;
|
|
3707
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n\n && svg path {\n fill: ", ";\n }\n\n @media ", ", ", " {\n &:hover {\n color: var(--color-", ");\n border-bottom: 1px solid var(--color-", ");\n\n && svg path {\n fill: var(--color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3881
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n\n && svg path {\n fill: ", ";\n }\n\n @media ", ", ", " {\n &:hover {\n color: var(--color-", ");\n border-bottom: 1px solid var(--color-", ");\n\n && svg path {\n fill: var(--color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3708
3882
|
var iconName = _ref.iconName;
|
|
3709
3883
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3710
3884
|
}, function (_ref2) {
|
|
@@ -3733,7 +3907,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
|
|
|
3733
3907
|
});
|
|
3734
3908
|
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
3735
3909
|
|
|
3736
|
-
var _excluded$8 = ["children", "iconName", "iconDirection", "color", "hoverColor"
|
|
3910
|
+
var _excluded$8 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
|
|
3737
3911
|
var TabLink = function TabLink(_ref) {
|
|
3738
3912
|
var children = _ref.children,
|
|
3739
3913
|
iconName = _ref.iconName,
|
|
@@ -3742,13 +3916,11 @@ var TabLink = function TabLink(_ref) {
|
|
|
3742
3916
|
color = _ref$color === void 0 ? ThemeColor['base-dark-grey'] : _ref$color,
|
|
3743
3917
|
_ref$hoverColor = _ref.hoverColor,
|
|
3744
3918
|
hoverColor = _ref$hoverColor === void 0 ? ThemeColor['primary-red'] : _ref$hoverColor,
|
|
3745
|
-
className = _ref.className,
|
|
3746
3919
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
3747
3920
|
return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
|
|
3748
3921
|
color: color,
|
|
3749
3922
|
iconName: iconName,
|
|
3750
|
-
hoverColor: hoverColor
|
|
3751
|
-
className: "" + typographyStyles.navigationtext + (className ? " " + className : '')
|
|
3923
|
+
hoverColor: hoverColor
|
|
3752
3924
|
}, rest), iconName ? (/*#__PURE__*/React__default.createElement(TabLinkIconWrapper, {
|
|
3753
3925
|
"data-testid": "tab-link-icon"
|
|
3754
3926
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -4472,15 +4644,15 @@ var Timer = function Timer(_ref) {
|
|
|
4472
4644
|
};
|
|
4473
4645
|
|
|
4474
4646
|
var _templateObject$t;
|
|
4475
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\
|
|
4647
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
|
|
4476
4648
|
|
|
4477
4649
|
var TypeTags = function TypeTags(_ref) {
|
|
4478
4650
|
var list = _ref.list;
|
|
4479
4651
|
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
4480
4652
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
4481
4653
|
key: t
|
|
4482
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4483
|
-
size: "
|
|
4654
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4655
|
+
size: "large"
|
|
4484
4656
|
}, t));
|
|
4485
4657
|
}));
|
|
4486
4658
|
};
|
|
@@ -4559,43 +4731,45 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4559
4731
|
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
4560
4732
|
};
|
|
4561
4733
|
}, []);
|
|
4562
|
-
var handleFullscreen = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/
|
|
4734
|
+
var handleFullscreen = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
4563
4735
|
var videoContainer;
|
|
4564
|
-
return
|
|
4565
|
-
while (1) switch (_context.
|
|
4736
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
4737
|
+
while (1) switch (_context.prev = _context.next) {
|
|
4566
4738
|
case 0:
|
|
4567
4739
|
videoContainer = document.querySelector("#" + videoContainerId);
|
|
4568
4740
|
if (videoContainer != null && videoContainer.requestFullscreen) {
|
|
4569
|
-
_context.
|
|
4741
|
+
_context.next = 3;
|
|
4570
4742
|
break;
|
|
4571
4743
|
}
|
|
4572
|
-
return _context.
|
|
4573
|
-
case
|
|
4574
|
-
_context.
|
|
4744
|
+
return _context.abrupt("return");
|
|
4745
|
+
case 3:
|
|
4746
|
+
_context.next = 5;
|
|
4575
4747
|
return videoContainer.requestFullscreen();
|
|
4576
|
-
case
|
|
4748
|
+
case 5:
|
|
4577
4749
|
setIsFullscreen(true);
|
|
4578
|
-
case
|
|
4579
|
-
|
|
4750
|
+
case 6:
|
|
4751
|
+
case "end":
|
|
4752
|
+
return _context.stop();
|
|
4580
4753
|
}
|
|
4581
4754
|
}, _callee);
|
|
4582
4755
|
})), []);
|
|
4583
|
-
var handleMinimise = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/
|
|
4584
|
-
return
|
|
4585
|
-
while (1) switch (_context2.
|
|
4756
|
+
var handleMinimise = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
4757
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
4758
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
4586
4759
|
case 0:
|
|
4587
4760
|
if (document.fullscreenElement) {
|
|
4588
|
-
_context2.
|
|
4761
|
+
_context2.next = 2;
|
|
4589
4762
|
break;
|
|
4590
4763
|
}
|
|
4591
|
-
return _context2.
|
|
4592
|
-
case 1:
|
|
4593
|
-
_context2.n = 2;
|
|
4594
|
-
return document.exitFullscreen();
|
|
4764
|
+
return _context2.abrupt("return");
|
|
4595
4765
|
case 2:
|
|
4766
|
+
_context2.next = 4;
|
|
4767
|
+
return document.exitFullscreen();
|
|
4768
|
+
case 4:
|
|
4596
4769
|
setIsFullscreen(false);
|
|
4597
|
-
case
|
|
4598
|
-
|
|
4770
|
+
case 5:
|
|
4771
|
+
case "end":
|
|
4772
|
+
return _context2.stop();
|
|
4599
4773
|
}
|
|
4600
4774
|
}, _callee2);
|
|
4601
4775
|
})), []);
|
|
@@ -5251,7 +5425,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5251
5425
|
className = _ref.className,
|
|
5252
5426
|
role = _ref.role,
|
|
5253
5427
|
ariaLabel = _ref.ariaLabel,
|
|
5254
|
-
tabLinkId = _ref.tabLinkId,
|
|
5255
5428
|
trimTabText = _ref.trimTabText;
|
|
5256
5429
|
var node = React.useRef();
|
|
5257
5430
|
var _useState = React.useState(false),
|
|
@@ -5348,7 +5521,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5348
5521
|
};
|
|
5349
5522
|
var renderTab = function renderTab() {
|
|
5350
5523
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
5351
|
-
tabLinkId: tabLinkId,
|
|
5352
5524
|
trimText: trimTabText,
|
|
5353
5525
|
title: title,
|
|
5354
5526
|
titleLink: titleLink,
|
|
@@ -5428,8 +5600,7 @@ var Account = function Account(_ref) {
|
|
|
5428
5600
|
iconName: iconName,
|
|
5429
5601
|
withOptionsInMobile: false,
|
|
5430
5602
|
withIcon: "left",
|
|
5431
|
-
className: className
|
|
5432
|
-
tabLinkId: "account-link"
|
|
5603
|
+
className: className
|
|
5433
5604
|
});
|
|
5434
5605
|
};
|
|
5435
5606
|
|
|
@@ -5997,110 +6168,30 @@ var Footer = function Footer(_ref) {
|
|
|
5997
6168
|
}, additionalInfo))));
|
|
5998
6169
|
};
|
|
5999
6170
|
|
|
6000
|
-
var _templateObject$F, _templateObject2$u, _templateObject3$k, _templateObject4$g, _templateObject5$c,
|
|
6171
|
+
var _templateObject$F, _templateObject2$u, _templateObject3$k, _templateObject4$g, _templateObject5$c, _templateObject6$9;
|
|
6001
6172
|
var LIST_ITEM_GAP = 32;
|
|
6002
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-
|
|
6173
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6003
6174
|
var bottomBorder = _ref.bottomBorder;
|
|
6004
|
-
return bottomBorder ? '
|
|
6005
|
-
}, zIndexes.anchor
|
|
6006
|
-
|
|
6007
|
-
|
|
6008
|
-
})
|
|
6009
|
-
var
|
|
6010
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6011
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
6012
|
-
var tabsOverflow = _ref3.tabsOverflow;
|
|
6175
|
+
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6176
|
+
}, zIndexes.anchor);
|
|
6177
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6178
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6179
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.48) 85%,\n rgba(235, 235, 235, 0.4) 99%,\n rgba(255, 255, 255, 0.39) 100%\n );\n }\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref2) {
|
|
6180
|
+
var tabsOverflow = _ref2.tabsOverflow;
|
|
6013
6181
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6014
|
-
}, LIST_ITEM_GAP, function (
|
|
6015
|
-
var tabsOverflow =
|
|
6182
|
+
}, LIST_ITEM_GAP, function (_ref3) {
|
|
6183
|
+
var tabsOverflow = _ref3.tabsOverflow;
|
|
6016
6184
|
return tabsOverflow ? 'start' : 'center';
|
|
6017
|
-
}, devices.mobile, function (
|
|
6018
|
-
var tabsOverflow =
|
|
6019
|
-
hasTwoArrows =
|
|
6185
|
+
}, devices.mobileAndTablet, devices.mobile, function (_ref4) {
|
|
6186
|
+
var tabsOverflow = _ref4.tabsOverflow,
|
|
6187
|
+
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6020
6188
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6021
6189
|
});
|
|
6022
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(
|
|
6023
|
-
var
|
|
6024
|
-
return
|
|
6025
|
-
});
|
|
6026
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$2 || (_templateObject0$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
6027
|
-
var disabled = _ref8.disabled;
|
|
6028
|
-
return disabled ? 'not-allowed' : 'pointer';
|
|
6029
|
-
}, function (_ref9) {
|
|
6030
|
-
var disabled = _ref9.disabled;
|
|
6031
|
-
return disabled ? 'none' : 'auto';
|
|
6032
|
-
}, function (_ref0) {
|
|
6033
|
-
var disabled = _ref0.disabled;
|
|
6034
|
-
return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
|
|
6190
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: var(--anchor-tabs-height);\n background-color: var(--base-color-white);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n"])), function (_ref5) {
|
|
6191
|
+
var fullWidth = _ref5.fullWidth;
|
|
6192
|
+
return fullWidth ? '74px' : '46px';
|
|
6035
6193
|
});
|
|
6036
|
-
|
|
6037
|
-
/* eslint-disable no-shadow */
|
|
6038
|
-
(function (CarouselType) {
|
|
6039
|
-
CarouselType["Image"] = "image";
|
|
6040
|
-
CarouselType["SmallCard"] = "SmallCard";
|
|
6041
|
-
CarouselType["LargeCard"] = "LargeCard";
|
|
6042
|
-
})(exports.CarouselType || (exports.CarouselType = {}));
|
|
6043
|
-
|
|
6044
|
-
// eslint-disable-next-line no-shadow
|
|
6045
|
-
(function (ButtonType) {
|
|
6046
|
-
ButtonType["Primary"] = "Primary";
|
|
6047
|
-
ButtonType["Secondary"] = "Secondary";
|
|
6048
|
-
ButtonType["Tertiary"] = "Tertiary";
|
|
6049
|
-
})(exports.ButtonType || (exports.ButtonType = {}));
|
|
6050
|
-
|
|
6051
|
-
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
6052
|
-
|
|
6053
|
-
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
6054
|
-
|
|
6055
|
-
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
6056
|
-
|
|
6057
|
-
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
6058
|
-
|
|
6059
|
-
/* eslint-disable react/jsx-no-useless-fragment */
|
|
6060
|
-
var DEFAULT_THEME = exports.ThemeType.Core;
|
|
6061
|
-
var getThemeClass = function getThemeClass(theme) {
|
|
6062
|
-
// Always include the base (core) theme class
|
|
6063
|
-
var baseThemeClass = coreThemeStyles.coreTheme;
|
|
6064
|
-
var overrideClass = '';
|
|
6065
|
-
switch (theme) {
|
|
6066
|
-
case exports.ThemeType.Core:
|
|
6067
|
-
overrideClass = '';
|
|
6068
|
-
break;
|
|
6069
|
-
case exports.ThemeType.Stream:
|
|
6070
|
-
overrideClass = streamThemeStyles.streamTheme;
|
|
6071
|
-
break;
|
|
6072
|
-
case exports.ThemeType.Cinema:
|
|
6073
|
-
overrideClass = cinemaThemeStyles.cinemaTheme;
|
|
6074
|
-
break;
|
|
6075
|
-
case exports.ThemeType.Schools:
|
|
6076
|
-
overrideClass = schoolsThemeStyles.schoolsTheme;
|
|
6077
|
-
break;
|
|
6078
|
-
default:
|
|
6079
|
-
overrideClass = '';
|
|
6080
|
-
}
|
|
6081
|
-
// Return the combined classes
|
|
6082
|
-
return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
|
|
6083
|
-
};
|
|
6084
|
-
var HarmonicThemeContext = /*#__PURE__*/React__default.createContext(DEFAULT_THEME);
|
|
6085
|
-
var useHarmonicTheme = function useHarmonicTheme() {
|
|
6086
|
-
return React__default.useContext(HarmonicThemeContext);
|
|
6087
|
-
};
|
|
6088
|
-
var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
|
|
6089
|
-
var _ref$theme = _ref.theme,
|
|
6090
|
-
theme = _ref$theme === void 0 ? DEFAULT_THEME : _ref$theme,
|
|
6091
|
-
children = _ref.children;
|
|
6092
|
-
var themeClass = getThemeClass(theme);
|
|
6093
|
-
// Convert children to an array (assuming they accept a className prop)
|
|
6094
|
-
var childrenArray = React__default.Children.toArray(children);
|
|
6095
|
-
var themedChildren = childrenArray.map(function (child) {
|
|
6096
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
6097
|
-
className: ((child.props.className || '') + " " + themeClass).trim()
|
|
6098
|
-
});
|
|
6099
|
-
});
|
|
6100
|
-
return /*#__PURE__*/React__default.createElement(HarmonicThemeContext.Provider, {
|
|
6101
|
-
value: theme
|
|
6102
|
-
}, themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren));
|
|
6103
|
-
};
|
|
6194
|
+
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
|
|
6104
6195
|
|
|
6105
6196
|
var _excluded$e = ["id", "text"];
|
|
6106
6197
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
@@ -6109,12 +6200,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6109
6200
|
activeTab = _ref.activeTab,
|
|
6110
6201
|
absolutePositionParams = _ref.absolutePositionParams,
|
|
6111
6202
|
_ref$bottomBorder = _ref.bottomBorder,
|
|
6112
|
-
bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder
|
|
6113
|
-
_ref$withShadow = _ref.withShadow,
|
|
6114
|
-
withShadow = _ref$withShadow === void 0 ? false : _ref$withShadow,
|
|
6115
|
-
_ref$offsetHeight = _ref.offsetHeight,
|
|
6116
|
-
offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight,
|
|
6117
|
-
className = _ref.className;
|
|
6203
|
+
bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder;
|
|
6118
6204
|
var tabListRef = React.useRef(null);
|
|
6119
6205
|
var wrapperRef = React.useRef(null);
|
|
6120
6206
|
var _useState = React.useState(activeTab || ''),
|
|
@@ -6134,27 +6220,12 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6134
6220
|
var isSelectedItem = function isSelectedItem(id) {
|
|
6135
6221
|
return id === selectedItem;
|
|
6136
6222
|
};
|
|
6137
|
-
var
|
|
6138
|
-
e.preventDefault();
|
|
6223
|
+
var onClicktab = function onClicktab(e, id) {
|
|
6139
6224
|
if (onTabClick) {
|
|
6140
6225
|
onTabClick(e, id);
|
|
6141
6226
|
}
|
|
6142
6227
|
setSelectedItem(id);
|
|
6143
6228
|
};
|
|
6144
|
-
React.useEffect(function () {
|
|
6145
|
-
if (!selectedItem) return;
|
|
6146
|
-
var targetSectionElement = document.getElementById(selectedItem);
|
|
6147
|
-
if (targetSectionElement) {
|
|
6148
|
-
var sectionTop = targetSectionElement.getBoundingClientRect().top;
|
|
6149
|
-
var scrollPosition = window.scrollY + sectionTop - offsetHeight;
|
|
6150
|
-
// Instant scroll
|
|
6151
|
-
window.scrollTo(0, scrollPosition);
|
|
6152
|
-
}
|
|
6153
|
-
var clickedTab = document.getElementById("tablink-" + selectedItem);
|
|
6154
|
-
if (clickedTab) {
|
|
6155
|
-
clickedTab.focus();
|
|
6156
|
-
}
|
|
6157
|
-
}, [selectedItem, offsetHeight]);
|
|
6158
6229
|
var getScrollWidth = function getScrollWidth() {
|
|
6159
6230
|
var width = 0;
|
|
6160
6231
|
var selectedItemIndex = tabs.findIndex(function (el) {
|
|
@@ -6211,19 +6282,11 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6211
6282
|
}, 500);
|
|
6212
6283
|
}, []);
|
|
6213
6284
|
React.useEffect(function () {
|
|
6214
|
-
|
|
6215
|
-
var
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
|
|
6219
|
-
setCanScrollToRight(tabsIsOverflowed);
|
|
6220
|
-
};
|
|
6221
|
-
window.addEventListener('resize', handleResize);
|
|
6222
|
-
handleResize(); // Initial check
|
|
6223
|
-
return function () {
|
|
6224
|
-
window.removeEventListener('resize', handleResize);
|
|
6225
|
-
};
|
|
6226
|
-
}, []);
|
|
6285
|
+
var _tabListRef$current, _tabListRef$current2;
|
|
6286
|
+
var tabsIsOverflowed = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) > (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0);
|
|
6287
|
+
setTabsOverflow(tabsIsOverflowed);
|
|
6288
|
+
setCanScrollToRight(tabsIsOverflowed);
|
|
6289
|
+
}, [tabListRef]);
|
|
6227
6290
|
React.useEffect(function () {
|
|
6228
6291
|
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
6229
6292
|
var elementGap = 100;
|
|
@@ -6304,13 +6367,10 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6304
6367
|
setCanScrollToLeft(scrollLeft > LIST_ITEM_GAP);
|
|
6305
6368
|
setCanScrollToRight(scrollLeft + clientWidth + LIST_ITEM_GAP < scrollWidth);
|
|
6306
6369
|
};
|
|
6307
|
-
var theme = useHarmonicTheme();
|
|
6308
6370
|
return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
|
|
6309
6371
|
bottomBorder: bottomBorder,
|
|
6310
|
-
withShadow: withShadow,
|
|
6311
6372
|
ref: wrapperRef,
|
|
6312
|
-
id: "AnchorTabbarWrapper"
|
|
6313
|
-
className: className
|
|
6373
|
+
id: "AnchorTabbarWrapper"
|
|
6314
6374
|
}, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6315
6375
|
columnStartDesktop: tabsColumnStart,
|
|
6316
6376
|
columnSpanDesktop: tabsColumnSpan,
|
|
@@ -6334,32 +6394,25 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6334
6394
|
className: "anchor-tab-bar-tablink",
|
|
6335
6395
|
id: "tablink-" + id,
|
|
6336
6396
|
onClick: function onClick(e) {
|
|
6337
|
-
return
|
|
6397
|
+
return onClicktab(e, id);
|
|
6338
6398
|
},
|
|
6339
|
-
tabIndex: 0
|
|
6340
|
-
hoverColor: theme === exports.ThemeType.Core ? ThemeColor['primary-red'] : ThemeColor['primary-black']
|
|
6399
|
+
tabIndex: 0
|
|
6341
6400
|
}, rest), text));
|
|
6342
6401
|
})), tabsOverflow ? (/*#__PURE__*/React__default.createElement(ArrowsContainer, {
|
|
6343
|
-
|
|
6344
|
-
}, /*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
6345
|
-
onClick: scrollToLeft
|
|
6346
|
-
disabled: !canScrollToLeft,
|
|
6347
|
-
"aria-label": "Previous section",
|
|
6348
|
-
role: "button"
|
|
6402
|
+
fullWidth: hasTwoArrows
|
|
6403
|
+
}, canScrollToLeft ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
6404
|
+
onClick: scrollToLeft
|
|
6349
6405
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
6350
6406
|
iconName: "Arrow",
|
|
6351
6407
|
direction: "reverse"
|
|
6352
|
-
})), /*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
6353
|
-
onClick: scrollToRight
|
|
6354
|
-
disabled: !canScrollToRight,
|
|
6355
|
-
"aria-label": "Next section",
|
|
6356
|
-
role: "button"
|
|
6408
|
+
}))) : null, canScrollToRight ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
6409
|
+
onClick: scrollToRight
|
|
6357
6410
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
6358
6411
|
iconName: "Arrow"
|
|
6359
|
-
})))) : null))));
|
|
6412
|
+
}))) : null)) : null))));
|
|
6360
6413
|
};
|
|
6361
6414
|
|
|
6362
|
-
var _templateObject$G, _templateObject2$v, _templateObject3$l, _templateObject4$h, _templateObject6$
|
|
6415
|
+
var _templateObject$G, _templateObject2$v, _templateObject3$l, _templateObject4$h, _templateObject6$a, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject0$2;
|
|
6363
6416
|
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6364
6417
|
var sticky = _ref.sticky;
|
|
6365
6418
|
return sticky ? 'sticky' : 'initial';
|
|
@@ -6370,9 +6423,9 @@ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$l || (_
|
|
|
6370
6423
|
return title ? 'row' : 'row-reverse';
|
|
6371
6424
|
}, devices.tablet, devices.mobile);
|
|
6372
6425
|
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
6373
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6426
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
6374
6427
|
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6375
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$
|
|
6428
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
6376
6429
|
var theme = _ref3.theme;
|
|
6377
6430
|
return theme.colors.primaryButtonReverseBg;
|
|
6378
6431
|
}, function (_ref4) {
|
|
@@ -6385,8 +6438,8 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
6385
6438
|
var theme = _ref6.theme;
|
|
6386
6439
|
return theme.colors.primaryButtonReverse;
|
|
6387
6440
|
});
|
|
6388
|
-
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
6389
|
-
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
6441
|
+
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
6442
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$2 || (_templateObject0$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
6390
6443
|
|
|
6391
6444
|
var _excluded$f = ["text"],
|
|
6392
6445
|
_excluded2$1 = ["text"];
|
|
@@ -6988,12 +7041,12 @@ var Theme = function Theme(_ref) {
|
|
|
6988
7041
|
};
|
|
6989
7042
|
|
|
6990
7043
|
var _templateObject$I;
|
|
6991
|
-
var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
7044
|
+
var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 12px;\n margin-right: 8px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
7045
|
+
var theme = _ref.theme;
|
|
7046
|
+
return theme.colors.primary;
|
|
7047
|
+
});
|
|
6992
7048
|
|
|
6993
|
-
var
|
|
6994
|
-
return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
|
|
6995
|
-
};
|
|
6996
|
-
var BodyContent = function BodyContent(_ref) {
|
|
7049
|
+
var TextOnly = function TextOnly(_ref) {
|
|
6997
7050
|
var _ref$text = _ref.text,
|
|
6998
7051
|
text = _ref$text === void 0 ? '' : _ref$text,
|
|
6999
7052
|
_ref$columnStartDeskt = _ref.columnStartDesktop,
|
|
@@ -7003,25 +7056,34 @@ var BodyContent = function BodyContent(_ref) {
|
|
|
7003
7056
|
_ref$columnStartDevic = _ref.columnStartDevice,
|
|
7004
7057
|
columnStartDevice = _ref$columnStartDevic === void 0 ? 2 : _ref$columnStartDevic,
|
|
7005
7058
|
_ref$columnSpanDevice = _ref.columnSpanDevice,
|
|
7006
|
-
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 12 : _ref$columnSpanDevice
|
|
7007
|
-
|
|
7008
|
-
return /*#__PURE__*/React__default.createElement(Grid, {
|
|
7009
|
-
className: className
|
|
7010
|
-
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7059
|
+
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 12 : _ref$columnSpanDevice;
|
|
7060
|
+
return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7011
7061
|
columnStartDesktop: columnStartDesktop,
|
|
7012
7062
|
columnSpanDesktop: columnSpanDesktop,
|
|
7013
7063
|
columnStartDevice: columnStartDevice,
|
|
7014
7064
|
columnSpanDevice: columnSpanDevice
|
|
7015
7065
|
}, /*#__PURE__*/React__default.createElement(TextContainer$1, {
|
|
7016
|
-
"data-testid": "text-container",
|
|
7017
|
-
className: typographyStyles.bodycopy + " " + typographyStyles['bodycopy--large'],
|
|
7018
7066
|
dangerouslySetInnerHTML: {
|
|
7019
|
-
__html:
|
|
7067
|
+
__html: text
|
|
7020
7068
|
}
|
|
7021
7069
|
})));
|
|
7022
7070
|
};
|
|
7023
7071
|
|
|
7024
|
-
|
|
7072
|
+
/* eslint-disable no-shadow */
|
|
7073
|
+
(function (CarouselType) {
|
|
7074
|
+
CarouselType["Image"] = "image";
|
|
7075
|
+
CarouselType["SmallCard"] = "SmallCard";
|
|
7076
|
+
CarouselType["LargeCard"] = "LargeCard";
|
|
7077
|
+
})(exports.CarouselType || (exports.CarouselType = {}));
|
|
7078
|
+
|
|
7079
|
+
// eslint-disable-next-line no-shadow
|
|
7080
|
+
(function (ButtonType) {
|
|
7081
|
+
ButtonType["Primary"] = "Primary";
|
|
7082
|
+
ButtonType["Secondary"] = "Secondary";
|
|
7083
|
+
ButtonType["Tertiary"] = "Tertiary";
|
|
7084
|
+
})(exports.ButtonType || (exports.ButtonType = {}));
|
|
7085
|
+
|
|
7086
|
+
var _templateObject$J, _templateObject2$x, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$7, _templateObject8$4;
|
|
7025
7087
|
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-lightgrey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
7026
7088
|
var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
7027
7089
|
var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
|
|
@@ -7036,9 +7098,9 @@ var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_t
|
|
|
7036
7098
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
7037
7099
|
});
|
|
7038
7100
|
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
7039
|
-
var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7101
|
+
var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
7040
7102
|
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
7041
|
-
var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
7103
|
+
var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
7042
7104
|
|
|
7043
7105
|
// Set max. character length
|
|
7044
7106
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -7166,7 +7228,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
7166
7228
|
columnSpanSmallDevice: 14
|
|
7167
7229
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$1, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
7168
7230
|
level: 4
|
|
7169
|
-
}, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(
|
|
7231
|
+
}, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(TextOnly, {
|
|
7170
7232
|
text: richText != null ? richText : '',
|
|
7171
7233
|
columnStartDesktop: 1,
|
|
7172
7234
|
columnSpanDesktop: 14,
|
|
@@ -7180,10 +7242,10 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
7180
7242
|
};
|
|
7181
7243
|
|
|
7182
7244
|
var _templateObject$L, _templateObject2$y;
|
|
7183
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-
|
|
7245
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
7184
7246
|
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
7185
|
-
var
|
|
7186
|
-
return
|
|
7247
|
+
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7248
|
+
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-light-grey);';
|
|
7187
7249
|
}, devices.mobileAndTablet, devices.mobile);
|
|
7188
7250
|
|
|
7189
7251
|
var StickyBar = function StickyBar(_ref) {
|
|
@@ -7195,15 +7257,12 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
7195
7257
|
columnStartDevice = _ref$columnStartDevic === void 0 ? 2 : _ref$columnStartDevic,
|
|
7196
7258
|
_ref$columnSpanDevice = _ref.columnSpanDevice,
|
|
7197
7259
|
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 12 : _ref$columnSpanDevice,
|
|
7198
|
-
|
|
7199
|
-
|
|
7200
|
-
children = _ref.children,
|
|
7201
|
-
className = _ref.className;
|
|
7260
|
+
hideBottomBorder = _ref.hideBottomBorder,
|
|
7261
|
+
children = _ref.children;
|
|
7202
7262
|
return /*#__PURE__*/React__default.createElement(StickyBarWrapper, {
|
|
7203
|
-
"data-testid": "sticky-bar-block"
|
|
7204
|
-
className: className
|
|
7263
|
+
"data-testid": "sticky-bar-block"
|
|
7205
7264
|
}, /*#__PURE__*/React__default.createElement(StickyBarGrid, {
|
|
7206
|
-
|
|
7265
|
+
hideBottomBorder: hideBottomBorder != null ? hideBottomBorder : false
|
|
7207
7266
|
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7208
7267
|
columnStartDesktop: columnStartDesktop,
|
|
7209
7268
|
columnSpanDesktop: columnSpanDesktop,
|
|
@@ -7393,7 +7452,7 @@ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
|
|
|
7393
7452
|
return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
|
|
7394
7453
|
};
|
|
7395
7454
|
|
|
7396
|
-
var _templateObject$N, _templateObject2$A, _templateObject3$p, _templateObject4$k, _templateObject5$e, _templateObject6$
|
|
7455
|
+
var _templateObject$N, _templateObject2$A, _templateObject3$p, _templateObject4$k, _templateObject5$e, _templateObject6$c, _templateObject7$8, _templateObject8$5;
|
|
7397
7456
|
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n"])), function (_ref) {
|
|
7398
7457
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
7399
7458
|
return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n " + getImageSlideStyles(imagesHeightDesktop) + "\n }\n }\n }";
|
|
@@ -7412,9 +7471,9 @@ var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$e || (_te
|
|
|
7412
7471
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
7413
7472
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
7414
7473
|
});
|
|
7415
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7474
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7416
7475
|
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
7417
|
-
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject8$
|
|
7476
|
+
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
7418
7477
|
var active = _ref5.active;
|
|
7419
7478
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
7420
7479
|
}, devices.tablet, function (_ref6) {
|
|
@@ -7869,17 +7928,17 @@ var Carousel = function Carousel(_ref) {
|
|
|
7869
7928
|
}, children))));
|
|
7870
7929
|
};
|
|
7871
7930
|
|
|
7872
|
-
var _templateObject$P, _templateObject2$C, _templateObject3$q, _templateObject4$l, _templateObject5$f, _templateObject6$
|
|
7931
|
+
var _templateObject$P, _templateObject2$C, _templateObject3$q, _templateObject4$l, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$6, _templateObject9$3, _templateObject0$3, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15;
|
|
7873
7932
|
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
7874
7933
|
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7875
7934
|
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
7876
7935
|
var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7877
7936
|
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7878
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7937
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
7879
7938
|
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
7880
|
-
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
7881
|
-
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
7882
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
7939
|
+
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
7940
|
+
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7941
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
7883
7942
|
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject1$1 || (_templateObject1$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7884
7943
|
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
7885
7944
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
@@ -8051,7 +8110,7 @@ var InfoSection = function InfoSection(_ref) {
|
|
|
8051
8110
|
}, additionalInfo)))));
|
|
8052
8111
|
};
|
|
8053
8112
|
|
|
8054
|
-
var _templateObject$R, _templateObject2$D, _templateObject3$r, _templateObject4$m, _templateObject5$g, _templateObject6$
|
|
8113
|
+
var _templateObject$R, _templateObject2$D, _templateObject3$r, _templateObject4$m, _templateObject5$g, _templateObject6$e;
|
|
8055
8114
|
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
8056
8115
|
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-light-grey);\n width: 100%;\n"])));
|
|
8057
8116
|
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n visibility: ", ";\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref) {
|
|
@@ -8063,7 +8122,7 @@ var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$g || (_
|
|
|
8063
8122
|
var textHeight = _ref2.textHeight;
|
|
8064
8123
|
return textHeight;
|
|
8065
8124
|
}, devices.mobile);
|
|
8066
|
-
var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8125
|
+
var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
8067
8126
|
|
|
8068
8127
|
/* eslint-disable react/no-unstable-nested-components */
|
|
8069
8128
|
var Accordion = function Accordion(_ref) {
|
|
@@ -8273,7 +8332,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
8273
8332
|
}))))));
|
|
8274
8333
|
};
|
|
8275
8334
|
|
|
8276
|
-
var _templateObject$U, _templateObject2$F, _templateObject3$t, _templateObject4$o, _templateObject5$i, _templateObject6$
|
|
8335
|
+
var _templateObject$U, _templateObject2$F, _templateObject3$t, _templateObject4$o, _templateObject5$i, _templateObject6$f, _templateObject7$a, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$2, _templateObject10$2, _templateObject11$2, _templateObject12$2;
|
|
8277
8336
|
var LENGTH_LARGE_TEXT = 28;
|
|
8278
8337
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
8279
8338
|
var LENGTH_TEXT_TABLET = 10;
|
|
@@ -8297,11 +8356,11 @@ var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$o ||
|
|
|
8297
8356
|
return fullWidth ? '0' : '20px';
|
|
8298
8357
|
});
|
|
8299
8358
|
var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
8300
|
-
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8359
|
+
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
8301
8360
|
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
|
|
8302
|
-
var HighlightTextContainer = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
8303
|
-
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$
|
|
8304
|
-
var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
8361
|
+
var HighlightTextContainer = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n"])));
|
|
8362
|
+
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n overflow-wrap: break-word;\n"])));
|
|
8363
|
+
var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject0$4 || (_templateObject0$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 25px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
|
|
8305
8364
|
var isVisible = _ref6.isVisible;
|
|
8306
8365
|
return isVisible ? "visible" : 'hidden';
|
|
8307
8366
|
}, devices.mobile, function (_ref7) {
|
|
@@ -8556,44 +8615,54 @@ var Cards = function Cards(_ref) {
|
|
|
8556
8615
|
}));
|
|
8557
8616
|
};
|
|
8558
8617
|
|
|
8559
|
-
var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p, _templateObject5$j
|
|
8560
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
8561
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])),
|
|
8562
|
-
var
|
|
8563
|
-
|
|
8564
|
-
|
|
8565
|
-
var
|
|
8566
|
-
|
|
8618
|
+
var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p, _templateObject5$j;
|
|
8619
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
|
|
8620
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
|
|
8621
|
+
var hideBottomBorder = _ref.hideBottomBorder;
|
|
8622
|
+
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
|
|
8623
|
+
}, function (_ref2) {
|
|
8624
|
+
var hideTopBorder = _ref2.hideTopBorder;
|
|
8625
|
+
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
|
|
8626
|
+
}, devices.mobileAndTablet);
|
|
8627
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
8628
|
+
var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
8629
|
+
var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
8567
8630
|
|
|
8631
|
+
var divideAddressString = function divideAddressString(address) {
|
|
8632
|
+
return address.split(',').map(function (chunk, i) {
|
|
8633
|
+
return /*#__PURE__*/React__default.createElement(BodyText, {
|
|
8634
|
+
level: 1,
|
|
8635
|
+
key: i
|
|
8636
|
+
}, chunk.trim());
|
|
8637
|
+
});
|
|
8638
|
+
};
|
|
8568
8639
|
var ContactCard = function ContactCard(_ref) {
|
|
8569
|
-
var
|
|
8570
|
-
titleSuffix = _ref.titleSuffix,
|
|
8640
|
+
var name = _ref.name,
|
|
8571
8641
|
description = _ref.description,
|
|
8572
8642
|
email = _ref.email,
|
|
8573
8643
|
phone = _ref.phone,
|
|
8574
8644
|
website = _ref.website,
|
|
8575
8645
|
address = _ref.address,
|
|
8576
|
-
|
|
8646
|
+
_ref$hideBottomBorder = _ref.hideBottomBorder,
|
|
8647
|
+
hideBottomBorder = _ref$hideBottomBorder === void 0 ? false : _ref$hideBottomBorder,
|
|
8648
|
+
_ref$hideTopBorder = _ref.hideTopBorder,
|
|
8649
|
+
hideTopBorder = _ref$hideTopBorder === void 0 ? false : _ref$hideTopBorder;
|
|
8577
8650
|
var hasDetails = email || phone || website;
|
|
8578
8651
|
var addressString = address == null ? void 0 : address.substring(0, 110);
|
|
8579
8652
|
var descriptionText = description == null ? void 0 : description.substring(0, 110);
|
|
8580
|
-
return /*#__PURE__*/React__default.createElement(
|
|
8581
|
-
className: className
|
|
8582
|
-
}, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8653
|
+
return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8583
8654
|
columnStartDesktop: 3,
|
|
8584
|
-
columnSpanDesktop:
|
|
8655
|
+
columnSpanDesktop: 8,
|
|
8585
8656
|
columnStartDevice: 1,
|
|
8586
8657
|
columnSpanDevice: 14
|
|
8587
8658
|
}, /*#__PURE__*/React__default.createElement(Wrapper$4, {
|
|
8588
|
-
"data-testid": "contact-card-wrapper"
|
|
8589
|
-
|
|
8590
|
-
|
|
8591
|
-
},
|
|
8592
|
-
|
|
8593
|
-
},
|
|
8594
|
-
|
|
8595
|
-
}, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
8596
|
-
size: "large"
|
|
8659
|
+
"data-testid": "contact-card-wrapper",
|
|
8660
|
+
hideBottomBorder: hideBottomBorder,
|
|
8661
|
+
hideTopBorder: hideTopBorder
|
|
8662
|
+
}, /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
8663
|
+
level: 1
|
|
8664
|
+
}, name), descriptionText && /*#__PURE__*/React__default.createElement(Subtitle, {
|
|
8665
|
+
level: 2
|
|
8597
8666
|
}, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
8598
8667
|
"data-testid": "contact-card-details-block"
|
|
8599
8668
|
}, email && (/*#__PURE__*/React__default.createElement("a", {
|
|
@@ -8609,9 +8678,9 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
8609
8678
|
rel: "noreferrer"
|
|
8610
8679
|
}, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
|
|
8611
8680
|
"data-testid": "contact-card-address-block"
|
|
8612
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
8613
|
-
|
|
8614
|
-
}, addressString)))))))));
|
|
8681
|
+
}, /*#__PURE__*/React__default.createElement(AddressWrapperDesktop, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
8682
|
+
level: 1
|
|
8683
|
+
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
|
|
8615
8684
|
};
|
|
8616
8685
|
|
|
8617
8686
|
var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$k, _templateObject6$g;
|
|
@@ -8907,8 +8976,8 @@ var InfoCta = function InfoCta(_ref2) {
|
|
|
8907
8976
|
iconName = _ref2.iconName,
|
|
8908
8977
|
iconDirection = _ref2.iconDirection,
|
|
8909
8978
|
_ref2$target = _ref2.target,
|
|
8910
|
-
target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target
|
|
8911
|
-
|
|
8979
|
+
target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target,
|
|
8980
|
+
theme = _ref2.theme;
|
|
8912
8981
|
return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
|
|
8913
8982
|
variant: variant,
|
|
8914
8983
|
theme: theme
|
|
@@ -8922,7 +8991,6 @@ var InfoCta = function InfoCta(_ref2) {
|
|
|
8922
8991
|
}));
|
|
8923
8992
|
};
|
|
8924
8993
|
|
|
8925
|
-
/* eslint-disable react/no-danger */
|
|
8926
8994
|
var defaultColumnSpan = 6;
|
|
8927
8995
|
var smallColumnSpan = 4;
|
|
8928
8996
|
var largeColumnSpan = 9;
|
|
@@ -8937,7 +9005,8 @@ var Information = function Information(_ref) {
|
|
|
8937
9005
|
var body = _ref.body,
|
|
8938
9006
|
title = _ref.title,
|
|
8939
9007
|
cta = _ref.cta,
|
|
8940
|
-
className = _ref.className
|
|
9008
|
+
className = _ref.className,
|
|
9009
|
+
theme = _ref.theme;
|
|
8941
9010
|
var _useViewport = useViewport(),
|
|
8942
9011
|
hydrated = _useViewport.hydrated;
|
|
8943
9012
|
var safeTitle = title || {
|
|
@@ -8978,11 +9047,12 @@ var Information = function Information(_ref) {
|
|
|
8978
9047
|
text: cta.text,
|
|
8979
9048
|
iconName: cta.iconName,
|
|
8980
9049
|
iconDirection: cta.iconDirection,
|
|
8981
|
-
target: cta.target
|
|
9050
|
+
target: cta.target,
|
|
9051
|
+
theme: theme
|
|
8982
9052
|
})))));
|
|
8983
9053
|
};
|
|
8984
9054
|
|
|
8985
|
-
var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$
|
|
9055
|
+
var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$8;
|
|
8986
9056
|
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
8987
9057
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
8988
9058
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
@@ -8992,7 +9062,7 @@ var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$z || (_te
|
|
|
8992
9062
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
8993
9063
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
8994
9064
|
});
|
|
8995
|
-
var TitleWrapper$
|
|
9065
|
+
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
8996
9066
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
8997
9067
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
8998
9068
|
}, devices.mobile);
|
|
@@ -9001,14 +9071,14 @@ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_t
|
|
|
9001
9071
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
9002
9072
|
}, devices.mobile);
|
|
9003
9073
|
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
9004
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
9074
|
+
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
|
|
9005
9075
|
var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
|
|
9006
9076
|
return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
|
|
9007
9077
|
}, devices.mobile, function (_ref6) {
|
|
9008
9078
|
var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
|
|
9009
9079
|
return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
|
|
9010
9080
|
});
|
|
9011
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
9081
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
9012
9082
|
|
|
9013
9083
|
var PageHeading = function PageHeading(_ref) {
|
|
9014
9084
|
var title = _ref.title,
|
|
@@ -9058,7 +9128,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
9058
9128
|
className: className,
|
|
9059
9129
|
"data-testid": "page-heading-wrapper",
|
|
9060
9130
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
9061
|
-
}, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$
|
|
9131
|
+
}, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
|
|
9062
9132
|
"data-testid": "page-heading-title",
|
|
9063
9133
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
9064
9134
|
}, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
|
|
@@ -9083,15 +9153,15 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
9083
9153
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
9084
9154
|
};
|
|
9085
9155
|
|
|
9086
|
-
var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$n, _templateObject6$i, _templateObject7$
|
|
9156
|
+
var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9;
|
|
9087
9157
|
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
9088
9158
|
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
9089
9159
|
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
9090
9160
|
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
9091
9161
|
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
9092
9162
|
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9093
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
9094
|
-
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
9163
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
9164
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
9095
9165
|
|
|
9096
9166
|
var _excluded$m = ["text"];
|
|
9097
9167
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
@@ -9198,7 +9268,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
9198
9268
|
})))));
|
|
9199
9269
|
};
|
|
9200
9270
|
|
|
9201
|
-
var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$
|
|
9271
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
|
|
9202
9272
|
var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
9203
9273
|
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
9204
9274
|
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
@@ -9211,16 +9281,16 @@ var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$p || (_te
|
|
|
9211
9281
|
return showBlock ? 'block' : 'none';
|
|
9212
9282
|
}, devices.mobile);
|
|
9213
9283
|
var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
|
|
9214
|
-
var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
9284
|
+
var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
|
|
9215
9285
|
var isBadgePresent = _ref3.isBadgePresent;
|
|
9216
9286
|
return isBadgePresent ? '1' : '4';
|
|
9217
9287
|
});
|
|
9218
|
-
var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
9288
|
+
var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: end;\n width: 200px;\n\n @media ", " {\n margin-bottom: ", ";\n width: 100%;\n order: 3;\n }\n"])), devices.mobile, function (_ref4) {
|
|
9219
9289
|
var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
|
|
9220
9290
|
return isAdditionalButtonPresent ? '20px' : '0';
|
|
9221
9291
|
});
|
|
9222
|
-
var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
9223
|
-
var TitleWrapper$
|
|
9292
|
+
var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
9293
|
+
var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
|
|
9224
9294
|
var theme = _ref5.theme;
|
|
9225
9295
|
return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
|
|
9226
9296
|
}, devices.mobile, function (_ref6) {
|
|
@@ -9324,17 +9394,17 @@ var TITLE_MAX_LENGTH = 40;
|
|
|
9324
9394
|
var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
9325
9395
|
var _ref$sponsor = _ref.sponsor,
|
|
9326
9396
|
sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
|
|
9397
|
+
className = _ref.className,
|
|
9398
|
+
theme = _ref.theme,
|
|
9327
9399
|
badge = _ref.badge,
|
|
9328
9400
|
mainLink = _ref.mainLink,
|
|
9329
9401
|
title = _ref.title,
|
|
9330
9402
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
9331
9403
|
additionalLink = _ref.additionalLink,
|
|
9332
|
-
image = _ref.image
|
|
9333
|
-
className = _ref.className;
|
|
9404
|
+
image = _ref.image;
|
|
9334
9405
|
var _useViewport = useViewport(),
|
|
9335
9406
|
isMobile = _useViewport.isMobile,
|
|
9336
9407
|
hydrated = _useViewport.hydrated;
|
|
9337
|
-
var theme = useHarmonicTheme();
|
|
9338
9408
|
var showImageButton = !title && !badge && !additionalLink && !isMobile;
|
|
9339
9409
|
var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
|
|
9340
9410
|
var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
|
|
@@ -9374,7 +9444,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
9374
9444
|
}), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
|
|
9375
9445
|
theme: theme,
|
|
9376
9446
|
link: additionalLink
|
|
9377
|
-
}))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$
|
|
9447
|
+
}))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
|
|
9378
9448
|
theme: theme,
|
|
9379
9449
|
isButtonPresent: !!mainLink || !!additionalLink
|
|
9380
9450
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
@@ -9392,7 +9462,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
9392
9462
|
theme: theme,
|
|
9393
9463
|
badge: badge,
|
|
9394
9464
|
isMobile: isMobile
|
|
9395
|
-
}))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$
|
|
9465
|
+
}))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
|
|
9396
9466
|
theme: theme,
|
|
9397
9467
|
isButtonPresent: !!mainLink || !!additionalLink
|
|
9398
9468
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
@@ -9412,7 +9482,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
9412
9482
|
})))))))))));
|
|
9413
9483
|
};
|
|
9414
9484
|
|
|
9415
|
-
var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject5$q, _templateObject6$k, _templateObject7$
|
|
9485
|
+
var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject0$6;
|
|
9416
9486
|
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
9417
9487
|
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
9418
9488
|
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
@@ -9433,10 +9503,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
|
|
|
9433
9503
|
var theme = _ref4.theme;
|
|
9434
9504
|
return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
|
|
9435
9505
|
}, devices.tablet, devices.mobile);
|
|
9436
|
-
var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
9437
|
-
var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
9438
|
-
var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
9439
|
-
var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$
|
|
9506
|
+
var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
|
|
9507
|
+
var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
|
|
9508
|
+
var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
9509
|
+
var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$6 || (_templateObject0$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
|
|
9440
9510
|
var invert = _ref5.invert,
|
|
9441
9511
|
theme = _ref5.theme;
|
|
9442
9512
|
return invert ? theme.colors.primary : theme.colors.white;
|
|
@@ -9666,14 +9736,14 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
9666
9736
|
}), linkText))))));
|
|
9667
9737
|
};
|
|
9668
9738
|
|
|
9669
|
-
var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$l, _templateObject7$
|
|
9739
|
+
var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$l, _templateObject7$f, _templateObject8$c;
|
|
9670
9740
|
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
9671
9741
|
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
9672
9742
|
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
9673
9743
|
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
9674
9744
|
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
9675
|
-
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$
|
|
9676
|
-
var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$
|
|
9745
|
+
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
9746
|
+
var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
|
|
9677
9747
|
var active = _ref.active;
|
|
9678
9748
|
return active ? "var(--color-primary-red)" : 'inherit';
|
|
9679
9749
|
}, function (_ref2) {
|
|
@@ -9821,14 +9891,14 @@ var Pagination = function Pagination(_ref) {
|
|
|
9821
9891
|
}))))));
|
|
9822
9892
|
};
|
|
9823
9893
|
|
|
9824
|
-
var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$m, _templateObject7$
|
|
9894
|
+
var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$m, _templateObject7$g;
|
|
9825
9895
|
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
9826
9896
|
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
9827
9897
|
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
9828
9898
|
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
9829
9899
|
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
9830
9900
|
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
9831
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$
|
|
9901
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
|
|
9832
9902
|
|
|
9833
9903
|
var Person = function Person(_ref) {
|
|
9834
9904
|
var person = _ref.person,
|
|
@@ -10019,7 +10089,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
10019
10089
|
}, creditEntries);
|
|
10020
10090
|
};
|
|
10021
10091
|
|
|
10022
|
-
var _templateObject$17, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$n, _templateObject7$
|
|
10092
|
+
var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$n, _templateObject7$h, _templateObject8$d, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
10023
10093
|
var LENGTH_TEXT = 28;
|
|
10024
10094
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
10025
10095
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -10036,7 +10106,9 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$17 ||
|
|
|
10036
10106
|
var asCard = _ref3.asCard;
|
|
10037
10107
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
10038
10108
|
});
|
|
10039
|
-
var
|
|
10109
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
10110
|
+
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n"])));
|
|
10111
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
10040
10112
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
10041
10113
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
10042
10114
|
}, function (_ref5) {
|
|
@@ -10060,39 +10132,38 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$H ||
|
|
|
10060
10132
|
}
|
|
10061
10133
|
return '';
|
|
10062
10134
|
});
|
|
10063
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(
|
|
10135
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref7) {
|
|
10064
10136
|
var marginBottom = _ref7.marginBottom;
|
|
10065
10137
|
return marginBottom + "px";
|
|
10066
|
-
}
|
|
10067
|
-
|
|
10068
|
-
|
|
10069
|
-
});
|
|
10070
|
-
var
|
|
10071
|
-
var
|
|
10072
|
-
var
|
|
10073
|
-
var
|
|
10074
|
-
var
|
|
10075
|
-
var
|
|
10076
|
-
var
|
|
10077
|
-
var
|
|
10078
|
-
|
|
10138
|
+
});
|
|
10139
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
10140
|
+
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
10141
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
10142
|
+
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
10143
|
+
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
10144
|
+
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10145
|
+
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
10146
|
+
var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10147
|
+
var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject12$3 || (_templateObject12$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10148
|
+
var PromoWithTagsTextLink = /*#__PURE__*/styled__default(TextLink)(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10149
|
+
var asCardOverrides = /*#__PURE__*/styled.css(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n\n ", " {\n font-size: var(--font-size-overline-2);\n font-weight: var(--font-weight-overline-2);\n line-height: var(--line-height-overline-2);\n letter-spacing: var(--letter-spacing-overline-2);\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
|
|
10150
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref8) {
|
|
10151
|
+
var imageToLeft = _ref8.imageToLeft;
|
|
10079
10152
|
return imageToLeft ? 'left' : 'right';
|
|
10080
10153
|
}, devices.mobile);
|
|
10081
|
-
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(
|
|
10082
|
-
var imageToLeft =
|
|
10154
|
+
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n\n ", "\n"])), function (_ref9) {
|
|
10155
|
+
var imageToLeft = _ref9.imageToLeft;
|
|
10083
10156
|
return imageToLeft ? 'right' : 'left';
|
|
10084
|
-
}, devices.mobile, function (
|
|
10085
|
-
var hideSection =
|
|
10157
|
+
}, devices.mobile, function (_ref0) {
|
|
10158
|
+
var hideSection = _ref0.hideSection;
|
|
10086
10159
|
return hideSection ? 'none' : 'block';
|
|
10087
|
-
}, function (
|
|
10088
|
-
var asCard =
|
|
10160
|
+
}, function (_ref1) {
|
|
10161
|
+
var asCard = _ref1.asCard;
|
|
10089
10162
|
return asCard && asCardOverrides;
|
|
10090
10163
|
});
|
|
10091
|
-
var
|
|
10092
|
-
var
|
|
10093
|
-
var
|
|
10094
|
-
var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
10095
|
-
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
10164
|
+
var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
|
|
10165
|
+
var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
10166
|
+
var EndDateText = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
10096
10167
|
|
|
10097
10168
|
var _excluded$o = ["text"],
|
|
10098
10169
|
_excluded2$4 = ["text"],
|
|
@@ -10108,7 +10179,6 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10108
10179
|
title = _ref$title === void 0 ? '' : _ref$title,
|
|
10109
10180
|
_ref$titleSize = _ref.titleSize,
|
|
10110
10181
|
titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
|
|
10111
|
-
titleHierarchy = _ref.titleHierarchy,
|
|
10112
10182
|
subtitle = _ref.subtitle,
|
|
10113
10183
|
text = _ref.text,
|
|
10114
10184
|
textLinks = _ref.textLinks,
|
|
@@ -10135,12 +10205,15 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10135
10205
|
setIsTimerActive = _useState2[1];
|
|
10136
10206
|
var getTitleLevel = function getTitleLevel(size, isCard) {
|
|
10137
10207
|
if (isCard) {
|
|
10138
|
-
return
|
|
10208
|
+
return 5;
|
|
10139
10209
|
}
|
|
10140
|
-
|
|
10210
|
+
if (size === 'large') {
|
|
10211
|
+
return 2;
|
|
10212
|
+
}
|
|
10213
|
+
return 3;
|
|
10141
10214
|
};
|
|
10142
|
-
var titleLevel = getTitleLevel(titleSize, asCard);
|
|
10143
10215
|
var imageToLeft = imagePosition === 'left';
|
|
10216
|
+
var titleLevel = getTitleLevel(titleSize, asCard);
|
|
10144
10217
|
var isExtraContentPresent = !!children;
|
|
10145
10218
|
var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
|
|
10146
10219
|
var handleExtraContent = function handleExtraContent(e) {
|
|
@@ -10172,15 +10245,15 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10172
10245
|
restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
|
|
10173
10246
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$3, {
|
|
10174
10247
|
key: index
|
|
10175
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10248
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTextLink, Object.assign({}, restTextLink), textLinkText));
|
|
10176
10249
|
}) : null;
|
|
10177
10250
|
var renderTimerBlock = function renderTimerBlock() {
|
|
10178
10251
|
if (!timerParams) return null;
|
|
10179
10252
|
if (!isTimerActive && timerParams.endDateText) {
|
|
10180
10253
|
return /*#__PURE__*/React__default.createElement(EndDateText, {
|
|
10181
10254
|
"data-testid": "promo-with-tags-timer-end-date-text"
|
|
10182
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10183
|
-
|
|
10255
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10256
|
+
level: 5
|
|
10184
10257
|
}, timerParams.endDateText));
|
|
10185
10258
|
}
|
|
10186
10259
|
return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
|
|
@@ -10204,36 +10277,30 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10204
10277
|
imageToLeft: imageToLeft,
|
|
10205
10278
|
hideSection: showExtraContent,
|
|
10206
10279
|
asCard: asCard
|
|
10207
|
-
}, renderTimerBlock(), /*#__PURE__*/React__default.createElement(
|
|
10208
|
-
marginBottom:
|
|
10209
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10280
|
+
}, renderTimerBlock(), /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && (/*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
10281
|
+
marginBottom: 16
|
|
10282
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
10210
10283
|
list: aboveTitleTags
|
|
10211
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
10212
|
-
|
|
10213
|
-
|
|
10214
|
-
}, title)), !!(belowTitleTags != null && belowTitleTags.length) && (/*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
10215
|
-
marginBottom:
|
|
10216
|
-
|
|
10217
|
-
}, /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
10284
|
+
}))), /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
10285
|
+
semanticLevel: 2,
|
|
10286
|
+
level: titleLevel
|
|
10287
|
+
}, title)), subtitle && /*#__PURE__*/React__default.createElement(PromoWithTagsSubtitle, null, subtitle), !!(belowTitleTags != null && belowTitleTags.length) && (/*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
10288
|
+
marginBottom: 8
|
|
10289
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
10218
10290
|
list: belowTitleTags
|
|
10219
|
-
}))),
|
|
10220
|
-
size: "large"
|
|
10221
|
-
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$1, {
|
|
10222
|
-
size: "large",
|
|
10291
|
+
}))), /*#__PURE__*/React__default.createElement(PromoWithTagsText, {
|
|
10223
10292
|
dangerouslySetInnerHTML: {
|
|
10224
10293
|
__html: textTruncate
|
|
10225
10294
|
}
|
|
10226
|
-
}), middleText &&
|
|
10227
|
-
size: "large",
|
|
10295
|
+
}), middleText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
|
|
10228
10296
|
dangerouslySetInnerHTML: {
|
|
10229
10297
|
__html: middleText
|
|
10230
10298
|
}
|
|
10231
|
-
})
|
|
10232
|
-
size: "large",
|
|
10299
|
+
}), bottomText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
|
|
10233
10300
|
dangerouslySetInnerHTML: {
|
|
10234
10301
|
__html: bottomText
|
|
10235
10302
|
}
|
|
10236
|
-
})
|
|
10303
|
+
}), !!(textLinks != null && textLinks.length) && /*#__PURE__*/React__default.createElement(TextLinksContainer, null, textLinkItems), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$2, {
|
|
10237
10304
|
hasTextLinks: !!(textLinks != null && textLinks.length),
|
|
10238
10305
|
"data-testid": "buttons-wrapper",
|
|
10239
10306
|
primaryButtonTextLength: firstButtonText.length,
|
|
@@ -10248,9 +10315,9 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10248
10315
|
}, restFirstButton), primaryButtonTextTruncate)))), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonTextTruncate))))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
|
|
10249
10316
|
"data-testid": "extra-content-wrapper",
|
|
10250
10317
|
imageToLeft: imageToLeft
|
|
10251
|
-
}, showExtraContent && (/*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(
|
|
10252
|
-
|
|
10253
|
-
|
|
10318
|
+
}, showExtraContent && (/*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
10319
|
+
semanticLevel: 2,
|
|
10320
|
+
level: titleLevel
|
|
10254
10321
|
}, title))), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
10255
10322
|
aspectRatio: exports.AspectRatio['4:3']
|
|
10256
10323
|
}, isExtraContentPresent && showExtraContent ? (/*#__PURE__*/React__default.createElement(ExtraContentWrapper, null, children, /*#__PURE__*/React__default.createElement(IconWrapper$2, {
|
|
@@ -10274,7 +10341,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10274
10341
|
}))));
|
|
10275
10342
|
};
|
|
10276
10343
|
|
|
10277
|
-
var _templateObject$18, _templateObject2$
|
|
10344
|
+
var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$o, _templateObject7$i;
|
|
10278
10345
|
var LENGTH_TEXT$2 = 28;
|
|
10279
10346
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
10280
10347
|
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
@@ -10284,7 +10351,7 @@ var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 |
|
|
|
10284
10351
|
var imageToLeft = _ref2.imageToLeft;
|
|
10285
10352
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
10286
10353
|
}, devices.mobile);
|
|
10287
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10354
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
10288
10355
|
var imageToLeft = _ref3.imageToLeft;
|
|
10289
10356
|
return imageToLeft ? 'left' : 'right';
|
|
10290
10357
|
}, devices.mobile);
|
|
@@ -10292,10 +10359,10 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
|
|
|
10292
10359
|
var imageToLeft = _ref4.imageToLeft;
|
|
10293
10360
|
return imageToLeft ? 'right' : 'left';
|
|
10294
10361
|
}, devices.mobile);
|
|
10295
|
-
var HarmonicHeaderWithWrapper
|
|
10296
|
-
var HarmonicSubtitleWithWrapper
|
|
10297
|
-
var BodyCopyHarmonicWithWrapper$
|
|
10298
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10362
|
+
var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
10363
|
+
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
10364
|
+
var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
10365
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
10299
10366
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
10300
10367
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
10301
10368
|
_ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
|
|
@@ -10483,12 +10550,12 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10483
10550
|
}, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
|
|
10484
10551
|
"data-testid": "content-wrapper",
|
|
10485
10552
|
imageToLeft: imageToLeft
|
|
10486
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper
|
|
10553
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
|
|
10487
10554
|
size: titleSize,
|
|
10488
10555
|
hierarchy: titleHierarchy
|
|
10489
|
-
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper
|
|
10556
|
+
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
|
|
10490
10557
|
size: "medium"
|
|
10491
|
-
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$
|
|
10558
|
+
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$1, {
|
|
10492
10559
|
size: "large",
|
|
10493
10560
|
dangerouslySetInnerHTML: {
|
|
10494
10561
|
__html: text
|
|
@@ -10556,9 +10623,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
10556
10623
|
})));
|
|
10557
10624
|
};
|
|
10558
10625
|
|
|
10559
|
-
var _templateObject$1b, _templateObject2$
|
|
10626
|
+
var _templateObject$1b, _templateObject2$W, _templateObject3$J;
|
|
10560
10627
|
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10561
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10628
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
10562
10629
|
var horizontalMode = _ref.horizontalMode;
|
|
10563
10630
|
if (horizontalMode) return 'row';
|
|
10564
10631
|
return 'column';
|
|
@@ -10643,9 +10710,9 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
10643
10710
|
}, error))));
|
|
10644
10711
|
};
|
|
10645
10712
|
|
|
10646
|
-
var _templateObject$1c, _templateObject2$
|
|
10713
|
+
var _templateObject$1c, _templateObject2$X, _templateObject3$K;
|
|
10647
10714
|
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
10648
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10715
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
10649
10716
|
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
10650
10717
|
|
|
10651
10718
|
/* eslint-disable react/no-danger */
|
|
@@ -10703,49 +10770,35 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
10703
10770
|
};
|
|
10704
10771
|
|
|
10705
10772
|
var _templateObject$1d;
|
|
10706
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
10707
|
-
|
|
10708
|
-
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
10709
|
-
var HarmonicSize = {
|
|
10710
|
-
Small: 'small',
|
|
10711
|
-
Medium: 'medium',
|
|
10712
|
-
Large: 'large'
|
|
10713
|
-
};
|
|
10714
|
-
var HeaderHierarchy = {
|
|
10715
|
-
H1: 'h1',
|
|
10716
|
-
H2: 'h2',
|
|
10717
|
-
H3: 'h3'
|
|
10718
|
-
};
|
|
10773
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
10719
10774
|
|
|
10720
10775
|
var SectionTitle = function SectionTitle(_ref) {
|
|
10721
10776
|
var title = _ref.title,
|
|
10722
10777
|
_ref$size = _ref.size,
|
|
10723
10778
|
size = _ref$size === void 0 ? 'small' : _ref$size,
|
|
10724
10779
|
description = _ref.description,
|
|
10725
|
-
|
|
10726
|
-
var headingLevel = size === 'large' ?
|
|
10727
|
-
|
|
10728
|
-
return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, {
|
|
10729
|
-
className: className
|
|
10730
|
-
}, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
10780
|
+
semanticLevel = _ref.semanticLevel;
|
|
10781
|
+
var headingLevel = size === 'large' ? 1 : 2;
|
|
10782
|
+
return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
10731
10783
|
columnStartDesktop: 3,
|
|
10732
10784
|
columnSpanDesktop: 12,
|
|
10733
10785
|
columnStartDevice: 2,
|
|
10734
10786
|
columnSpanDevice: 12
|
|
10735
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10736
|
-
|
|
10737
|
-
|
|
10787
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
10788
|
+
level: headingLevel,
|
|
10789
|
+
semanticLevel: semanticLevel != null ? semanticLevel : headingLevel
|
|
10738
10790
|
}, title)), description && (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
10739
10791
|
columnStartDesktop: 3,
|
|
10740
10792
|
columnSpanDesktop: 8,
|
|
10741
10793
|
columnStartDevice: 2,
|
|
10742
10794
|
columnSpanDevice: 12
|
|
10743
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10744
|
-
|
|
10795
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10796
|
+
level: 1,
|
|
10797
|
+
tag: "div"
|
|
10745
10798
|
}, description)))));
|
|
10746
10799
|
};
|
|
10747
10800
|
|
|
10748
|
-
var _templateObject$1e, _templateObject2$
|
|
10801
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$B, _templateObject5$v, _templateObject6$p, _templateObject7$j, _templateObject8$e, _templateObject9$8, _templateObject0$8, _templateObject1$5;
|
|
10749
10802
|
var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
10750
10803
|
var theme = _ref.theme;
|
|
10751
10804
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
@@ -10756,7 +10809,7 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject
|
|
|
10756
10809
|
var theme = _ref3.theme;
|
|
10757
10810
|
return theme.colors.lightgrey;
|
|
10758
10811
|
});
|
|
10759
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
10812
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
10760
10813
|
var theme = _ref4.theme;
|
|
10761
10814
|
return theme.colors.darkgrey;
|
|
10762
10815
|
});
|
|
@@ -10771,9 +10824,9 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
10771
10824
|
};
|
|
10772
10825
|
})(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
10773
10826
|
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
10774
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10775
|
-
var Options = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
10776
|
-
var Option = /*#__PURE__*/styled__default.li(_templateObject9$
|
|
10827
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
10828
|
+
var Options = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
10829
|
+
var Option = /*#__PURE__*/styled__default.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
10777
10830
|
var theme = _ref6.theme,
|
|
10778
10831
|
hover = _ref6.hover;
|
|
10779
10832
|
var _theme$colors = theme.colors,
|
|
@@ -10783,7 +10836,7 @@ var Option = /*#__PURE__*/styled__default.li(_templateObject9$9 || (_templateObj
|
|
|
10783
10836
|
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
10784
10837
|
});
|
|
10785
10838
|
var selectStyles = function selectStyles(width, height) {
|
|
10786
|
-
return styled.css(_templateObject0$
|
|
10839
|
+
return styled.css(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
10787
10840
|
};
|
|
10788
10841
|
var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
10789
10842
|
var width = _ref7.width,
|
|
@@ -11126,9 +11179,9 @@ function Select(_ref3) {
|
|
|
11126
11179
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
11127
11180
|
}
|
|
11128
11181
|
|
|
11129
|
-
var _templateObject$1f, _templateObject2$
|
|
11182
|
+
var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$C;
|
|
11130
11183
|
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
11131
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11184
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
11132
11185
|
var width = _ref.width;
|
|
11133
11186
|
if (!width) return 'none';
|
|
11134
11187
|
return width + "px";
|
|
@@ -11264,7 +11317,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
11264
11317
|
})));
|
|
11265
11318
|
};
|
|
11266
11319
|
|
|
11267
|
-
var _templateObject$1g, _templateObject2$
|
|
11320
|
+
var _templateObject$1g, _templateObject2$_;
|
|
11268
11321
|
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
11269
11322
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
11270
11323
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
@@ -11275,7 +11328,7 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1g || (_temp
|
|
|
11275
11328
|
height = _ref2.height;
|
|
11276
11329
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
11277
11330
|
});
|
|
11278
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
11331
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
11279
11332
|
|
|
11280
11333
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
11281
11334
|
var caption = _ref.caption,
|
|
@@ -11309,9 +11362,9 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
11309
11362
|
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
11310
11363
|
};
|
|
11311
11364
|
|
|
11312
|
-
var _templateObject$1h, _templateObject2
|
|
11365
|
+
var _templateObject$1h, _templateObject2$$, _templateObject3$N;
|
|
11313
11366
|
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
11314
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2
|
|
11367
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
11315
11368
|
var displayAttribution = _ref.displayAttribution;
|
|
11316
11369
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
11317
11370
|
});
|
|
@@ -11340,13 +11393,13 @@ var Quote = function Quote(_ref) {
|
|
|
11340
11393
|
}, attribution))));
|
|
11341
11394
|
};
|
|
11342
11395
|
|
|
11343
|
-
var _templateObject$1i, _templateObject2
|
|
11396
|
+
var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$q;
|
|
11344
11397
|
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
11345
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2
|
|
11398
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
11346
11399
|
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
11347
11400
|
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
11348
11401
|
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11349
|
-
var TitleWrapper$
|
|
11402
|
+
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
11350
11403
|
|
|
11351
11404
|
var MiniCard = function MiniCard(_ref) {
|
|
11352
11405
|
var _ref$title = _ref.title,
|
|
@@ -11379,14 +11432,14 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
11379
11432
|
columnSpanDesktop: 4
|
|
11380
11433
|
}, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
11381
11434
|
level: 4
|
|
11382
|
-
}, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$
|
|
11435
|
+
}, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$4, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
11383
11436
|
level: 2
|
|
11384
11437
|
}, title)))));
|
|
11385
11438
|
};
|
|
11386
11439
|
|
|
11387
|
-
var _templateObject$1j, _templateObject2$
|
|
11440
|
+
var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$E, _templateObject5$x;
|
|
11388
11441
|
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
11389
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11442
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
11390
11443
|
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
11391
11444
|
var isVisible = _ref.isVisible;
|
|
11392
11445
|
return isVisible ? 'visible' : 'hidden';
|
|
@@ -11476,9 +11529,9 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
11476
11529
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
11477
11530
|
};
|
|
11478
11531
|
|
|
11479
|
-
var _templateObject$1k, _templateObject2$
|
|
11532
|
+
var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$F, _templateObject5$y;
|
|
11480
11533
|
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11481
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
11534
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
|
|
11482
11535
|
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
11483
11536
|
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
|
|
11484
11537
|
var isActive = _ref.isActive;
|
|
@@ -11640,9 +11693,9 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
11640
11693
|
});
|
|
11641
11694
|
};
|
|
11642
11695
|
|
|
11643
|
-
var _templateObject$1l, _templateObject2$
|
|
11696
|
+
var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$G, _templateObject5$z, _templateObject6$r;
|
|
11644
11697
|
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11645
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11698
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11646
11699
|
var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
11647
11700
|
var color = _ref.color;
|
|
11648
11701
|
return "var(--base-color-" + color + ")";
|
|
@@ -11734,19 +11787,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
11734
11787
|
}, strengthLabel))));
|
|
11735
11788
|
};
|
|
11736
11789
|
|
|
11737
|
-
var _templateObject$1m, _templateObject2$
|
|
11790
|
+
var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$H, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$f;
|
|
11738
11791
|
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11739
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11792
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11740
11793
|
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11741
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform:
|
|
11794
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: uppercase;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
11742
11795
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
11743
11796
|
}, devices.tablet, devices.mobile);
|
|
11744
11797
|
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
11745
11798
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
11746
11799
|
}, devices.mobile);
|
|
11747
11800
|
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
11748
|
-
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11749
|
-
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
11801
|
+
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
11802
|
+
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
11750
11803
|
|
|
11751
11804
|
/* eslint-disable react/no-danger */
|
|
11752
11805
|
var Content = function Content(_ref) {
|
|
@@ -11849,53 +11902,20 @@ var Table = function Table(_ref) {
|
|
|
11849
11902
|
var _useState2 = React.useState(false),
|
|
11850
11903
|
showScrollButtons = _useState2[0],
|
|
11851
11904
|
setShowScrollButtons = _useState2[1];
|
|
11852
|
-
var tableRef = React.useRef(null);
|
|
11853
|
-
var _useState3 = React.useState(true),
|
|
11854
|
-
atStart = _useState3[0],
|
|
11855
|
-
setAtStart = _useState3[1];
|
|
11856
|
-
var _useState4 = React.useState(false),
|
|
11857
|
-
atEnd = _useState4[0],
|
|
11858
|
-
setAtEnd = _useState4[1];
|
|
11859
|
-
var checkScrollPosition = function checkScrollPosition() {
|
|
11860
|
-
if (tableRef.current) {
|
|
11861
|
-
var _tableRef$current = tableRef.current,
|
|
11862
|
-
scrollLeft = _tableRef$current.scrollLeft,
|
|
11863
|
-
scrollWidth = _tableRef$current.scrollWidth,
|
|
11864
|
-
clientWidth = _tableRef$current.clientWidth;
|
|
11865
|
-
setAtStart(scrollLeft === 0);
|
|
11866
|
-
setAtEnd(scrollLeft + clientWidth >= scrollWidth);
|
|
11867
|
-
}
|
|
11868
|
-
};
|
|
11869
|
-
var handleNext = function handleNext() {
|
|
11870
|
-
scrollTable(tableRef, 'right');
|
|
11871
|
-
};
|
|
11872
|
-
var handlePrev = function handlePrev() {
|
|
11873
|
-
scrollTable(tableRef, 'left');
|
|
11874
|
-
};
|
|
11875
11905
|
var handlePageChange = function handlePageChange(page) {
|
|
11876
11906
|
setCurrentPage(page - 1);
|
|
11877
11907
|
};
|
|
11908
|
+
var tableRef = React.useRef(null);
|
|
11878
11909
|
React.useLayoutEffect(function () {
|
|
11879
11910
|
var horizontalScroll = function horizontalScroll() {
|
|
11880
11911
|
if (tableRef.current) {
|
|
11881
11912
|
setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
|
|
11882
|
-
checkScrollPosition();
|
|
11883
11913
|
}
|
|
11884
11914
|
};
|
|
11885
|
-
var handleScroll = function handleScroll() {
|
|
11886
|
-
checkScrollPosition();
|
|
11887
|
-
};
|
|
11888
11915
|
horizontalScroll();
|
|
11889
11916
|
window.addEventListener('resize', horizontalScroll);
|
|
11890
|
-
var table = tableRef.current;
|
|
11891
|
-
if (table) {
|
|
11892
|
-
table.addEventListener('scroll', handleScroll);
|
|
11893
|
-
}
|
|
11894
11917
|
return function () {
|
|
11895
|
-
window.removeEventListener('resize', horizontalScroll);
|
|
11896
|
-
if (table) {
|
|
11897
|
-
table.removeEventListener('scroll', handleScroll);
|
|
11898
|
-
}
|
|
11918
|
+
return window.removeEventListener('resize', horizontalScroll);
|
|
11899
11919
|
};
|
|
11900
11920
|
}, []);
|
|
11901
11921
|
var totalRows = Array.isArray(children) ? children.length : 1;
|
|
@@ -11922,10 +11942,12 @@ var Table = function Table(_ref) {
|
|
|
11922
11942
|
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
11923
11943
|
className: className
|
|
11924
11944
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
11925
|
-
onClickPrev:
|
|
11926
|
-
|
|
11927
|
-
|
|
11928
|
-
|
|
11945
|
+
onClickPrev: function onClickPrev() {
|
|
11946
|
+
return scrollTable(tableRef, 'left');
|
|
11947
|
+
},
|
|
11948
|
+
onClickNext: function onClickNext() {
|
|
11949
|
+
return scrollTable(tableRef, 'right');
|
|
11950
|
+
}
|
|
11929
11951
|
}))), /*#__PURE__*/React__default.createElement(Container$6, {
|
|
11930
11952
|
role: "table",
|
|
11931
11953
|
tabIndex: 0,
|
|
@@ -11949,7 +11971,7 @@ var Table = function Table(_ref) {
|
|
|
11949
11971
|
}))));
|
|
11950
11972
|
};
|
|
11951
11973
|
|
|
11952
|
-
var _templateObject$1n, _templateObject2$
|
|
11974
|
+
var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$I, _templateObject5$B, _templateObject6$t, _templateObject7$l, _templateObject8$g, _templateObject9$9, _templateObject0$9, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
|
|
11953
11975
|
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11954
11976
|
var theme = _ref.theme;
|
|
11955
11977
|
return "var(--color-" + theme + ")";
|
|
@@ -11957,15 +11979,15 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_temp
|
|
|
11957
11979
|
var theme = _ref2.theme;
|
|
11958
11980
|
return "var(--color-" + theme + ")";
|
|
11959
11981
|
});
|
|
11960
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11982
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11961
11983
|
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
11962
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11963
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
11984
|
+
var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11985
|
+
var Form = /*#__PURE__*/styled__default.form(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error$1);
|
|
11964
11986
|
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
11965
|
-
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11966
|
-
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$
|
|
11967
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
11968
|
-
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11987
|
+
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
11988
|
+
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
11989
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
11990
|
+
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
11969
11991
|
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11970
11992
|
var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
11971
11993
|
var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
|
|
@@ -12141,18 +12163,18 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
12141
12163
|
};
|
|
12142
12164
|
};
|
|
12143
12165
|
var handleFormSubmit = /*#__PURE__*/function () {
|
|
12144
|
-
var _ref2 = _asyncToGenerator(/*#__PURE__*/
|
|
12166
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
|
|
12145
12167
|
var formErrors, response;
|
|
12146
|
-
return
|
|
12147
|
-
while (1) switch (_context.
|
|
12168
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
12169
|
+
while (1) switch (_context.prev = _context.next) {
|
|
12148
12170
|
case 0:
|
|
12149
12171
|
e.preventDefault();
|
|
12150
12172
|
if (!isSuccess) {
|
|
12151
|
-
_context.
|
|
12173
|
+
_context.next = 3;
|
|
12152
12174
|
break;
|
|
12153
12175
|
}
|
|
12154
|
-
return _context.
|
|
12155
|
-
case
|
|
12176
|
+
return _context.abrupt("return");
|
|
12177
|
+
case 3:
|
|
12156
12178
|
formErrors = {};
|
|
12157
12179
|
if (!isLoggedIn) {
|
|
12158
12180
|
if (!formValues.firstName) {
|
|
@@ -12170,16 +12192,16 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
12170
12192
|
}
|
|
12171
12193
|
}
|
|
12172
12194
|
if (!(Object.keys(formErrors).length > 0)) {
|
|
12173
|
-
_context.
|
|
12195
|
+
_context.next = 8;
|
|
12174
12196
|
break;
|
|
12175
12197
|
}
|
|
12176
12198
|
setErrors(formErrors);
|
|
12177
|
-
return _context.
|
|
12178
|
-
case
|
|
12179
|
-
_context.
|
|
12199
|
+
return _context.abrupt("return");
|
|
12200
|
+
case 8:
|
|
12201
|
+
_context.next = 10;
|
|
12180
12202
|
return submitHandler(isLoggedIn ? {} : formValues);
|
|
12181
|
-
case
|
|
12182
|
-
response = _context.
|
|
12203
|
+
case 10:
|
|
12204
|
+
response = _context.sent;
|
|
12183
12205
|
if (response.success) {
|
|
12184
12206
|
setIsSuccess(true);
|
|
12185
12207
|
} else {
|
|
@@ -12189,8 +12211,9 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
12189
12211
|
});
|
|
12190
12212
|
});
|
|
12191
12213
|
}
|
|
12192
|
-
case
|
|
12193
|
-
|
|
12214
|
+
case 12:
|
|
12215
|
+
case "end":
|
|
12216
|
+
return _context.stop();
|
|
12194
12217
|
}
|
|
12195
12218
|
}, _callee);
|
|
12196
12219
|
}));
|
|
@@ -12372,10 +12395,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
12372
12395
|
}))))));
|
|
12373
12396
|
};
|
|
12374
12397
|
|
|
12375
|
-
var _templateObject$1o, _templateObject2$
|
|
12398
|
+
var _templateObject$1o, _templateObject2$16, _templateObject4$J, _templateObject5$C;
|
|
12376
12399
|
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
12377
12400
|
var withShadow = _ref.withShadow;
|
|
12378
|
-
return withShadow && styled.css(_templateObject2$
|
|
12401
|
+
return withShadow && styled.css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12379
12402
|
}, devices.mobile);
|
|
12380
12403
|
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
12381
12404
|
var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
@@ -12587,6 +12610,53 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12587
12610
|
})));
|
|
12588
12611
|
};
|
|
12589
12612
|
|
|
12613
|
+
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
12614
|
+
|
|
12615
|
+
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
12616
|
+
|
|
12617
|
+
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
12618
|
+
|
|
12619
|
+
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
12620
|
+
|
|
12621
|
+
/* eslint-disable react/jsx-no-useless-fragment */
|
|
12622
|
+
var getThemeClass = function getThemeClass(theme) {
|
|
12623
|
+
// Always include the base (core) theme class
|
|
12624
|
+
var baseThemeClass = coreThemeStyles.coreTheme;
|
|
12625
|
+
var overrideClass = '';
|
|
12626
|
+
switch (theme) {
|
|
12627
|
+
case exports.ThemeType.Core:
|
|
12628
|
+
overrideClass = '';
|
|
12629
|
+
break;
|
|
12630
|
+
case exports.ThemeType.Stream:
|
|
12631
|
+
overrideClass = streamThemeStyles.streamTheme;
|
|
12632
|
+
break;
|
|
12633
|
+
case exports.ThemeType.Cinema:
|
|
12634
|
+
overrideClass = cinemaThemeStyles.cinemaTheme;
|
|
12635
|
+
break;
|
|
12636
|
+
case exports.ThemeType.Schools:
|
|
12637
|
+
overrideClass = schoolsThemeStyles.schoolsTheme;
|
|
12638
|
+
break;
|
|
12639
|
+
default:
|
|
12640
|
+
overrideClass = '';
|
|
12641
|
+
}
|
|
12642
|
+
// Return the combined classes
|
|
12643
|
+
return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
|
|
12644
|
+
};
|
|
12645
|
+
var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
|
|
12646
|
+
var theme = _ref.theme,
|
|
12647
|
+
children = _ref.children;
|
|
12648
|
+
var themeClass = getThemeClass(theme);
|
|
12649
|
+
// Convert children to an array (assuming they accept a className prop)
|
|
12650
|
+
var childrenArray = React__default.Children.toArray(children);
|
|
12651
|
+
var themedChildren = childrenArray.map(function (child) {
|
|
12652
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
12653
|
+
className: ((child.props.className || '') + " " + themeClass).trim(),
|
|
12654
|
+
theme: theme
|
|
12655
|
+
});
|
|
12656
|
+
});
|
|
12657
|
+
return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
|
|
12658
|
+
};
|
|
12659
|
+
|
|
12590
12660
|
var _excluded$s = ["logo", "slides"];
|
|
12591
12661
|
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
12592
12662
|
var logo = _ref.logo,
|
|
@@ -13631,6 +13701,13 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1q || (
|
|
|
13631
13701
|
return theme.footer.tablet.paddingBottom;
|
|
13632
13702
|
}, devices.desktop, devices.largeDesktop);
|
|
13633
13703
|
|
|
13704
|
+
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
13705
|
+
var HarmonicSize = {
|
|
13706
|
+
Small: 'small',
|
|
13707
|
+
Medium: 'medium',
|
|
13708
|
+
Large: 'large'
|
|
13709
|
+
};
|
|
13710
|
+
|
|
13634
13711
|
exports.Accordion = Accordion;
|
|
13635
13712
|
exports.Accordions = Accordions;
|
|
13636
13713
|
exports.AltHeader = AltHeader;
|
|
@@ -13639,7 +13716,6 @@ exports.AnchorTabBar = AnchorTabBar;
|
|
|
13639
13716
|
exports.AnnouncementBanner = AnnouncementBanner;
|
|
13640
13717
|
exports.AuxiliaryButton = AuxiliaryButton;
|
|
13641
13718
|
exports.AuxiliaryNav = AuxiliaryNav;
|
|
13642
|
-
exports.BodyContent = BodyContent;
|
|
13643
13719
|
exports.BodyCopyHarmonic = BodyCopyHarmonic;
|
|
13644
13720
|
exports.BodyText = BodyText;
|
|
13645
13721
|
exports.ButtonText = ButtonText;
|
|
@@ -13721,6 +13797,7 @@ exports.TextArea = TextArea;
|
|
|
13721
13797
|
exports.TextField = TextField;
|
|
13722
13798
|
exports.TextFieldLegacy = TextFieldLegacy;
|
|
13723
13799
|
exports.TextLink = TextLink;
|
|
13800
|
+
exports.TextOnly = TextOnly;
|
|
13724
13801
|
exports.ThemeColor = ThemeColor;
|
|
13725
13802
|
exports.ThemeProvider = Theme;
|
|
13726
13803
|
exports.Tickbox = Tickbox;
|
|
@@ -13734,6 +13811,5 @@ exports.VideoControls = VideoControls;
|
|
|
13734
13811
|
exports.VideoWithControls = VideoWithControls$1;
|
|
13735
13812
|
exports.breakpoints = breakpoints;
|
|
13736
13813
|
exports.devices = devices;
|
|
13737
|
-
exports.useHarmonicTheme = useHarmonicTheme;
|
|
13738
13814
|
exports.zIndexes = zIndexes;
|
|
13739
13815
|
//# sourceMappingURL=harmonic.cjs.development.js.map
|