@royaloperahouse/harmonic 0.1.1-b-test → 0.1.1-c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/atoms/Typography/Typography.d.ts +0 -1
  2. package/dist/harmonic.cjs.development.css +88 -209
  3. package/dist/harmonic.cjs.development.js +2 -3
  4. package/dist/harmonic.cjs.development.js.map +1 -1
  5. package/dist/harmonic.cjs.production.min.js +1 -1
  6. package/dist/harmonic.cjs.production.min.js.map +1 -1
  7. package/dist/harmonic.esm.js +3 -7
  8. package/dist/harmonic.esm.js.map +1 -1
  9. package/package.json +1 -1
  10. package/dist/components/Typography/AltHeaders/AltHeaders.d.ts +0 -4
package/dist/components/atoms/Typography/Typography.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import './Typography.css';
3
2
  import { IAltHeaderProps, IBodyTextProps, IHeaderProps, IOverlineProps, IStyledTag, ISubtitleProps } from '../../../types/typography';
4
3
  export declare const StyledTag: ({ tag, typography, children, level }: IStyledTag) => React.JSX.Element;
5
4
  export declare const AltHeader: ({ semanticLevel, level, children }: IAltHeaderProps) => React.JSX.Element;
package/dist/harmonic.cjs.development.css CHANGED
@@ -1,11 +1,15 @@
1
- /* TEMPORARY CSS FILE - will relocate when CSS module issue is fixed */
1
+ /* TEMPORARY SCSS FILE - will relocate when CSS module issue is fixed */
2
2
 
3
3
  :root {
4
- --font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;
5
- --font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;
6
- --harmonic-red: #F40B0B;
7
- --harmonic-black: #000000;
8
- --text-link-underline-offset: 4px;
4
+ --font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;
5
+ --font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;
6
+ --harmonic-red: #F40B0B;
7
+ --harmonic-black: #000000;
8
+ --text-link-underline-offset: 4px;
9
+ }
10
+
11
+ .styles_em__v4FoO {
12
+ font-style: italic;
9
13
  }
10
14
 
11
15
  /* ~~~~~ Color Classes ~~~~~ */
@@ -14,27 +18,26 @@
14
18
  }
15
19
 
16
20
  .styles_color-red__zwTZW {
17
- color: var(--harmonic-red)
21
+ color: var(--harmonic-red);
18
22
  }
19
23
 
20
-
21
- /* ~~~~~ Mobile ~~~~~ */
22
-
24
+ /* ~~~~~ Mobile Styles ~~~~~ */
23
25
  @media (max-width: 600px) {
24
-
25
- /* ~~~ Letter Spacing - Mobile ~~~ */
26
- .styles_display__VgnTB.styles_large__vqVxY, .styles_display__VgnTB.styles_small__e7YDe {
27
- letter-spacing: -1.5px;
26
+ /* Letter Spacing - Mobile */
27
+ .styles_display__VgnTB {
28
+ &.styles_large__vqVxY, &.styles_small__e7YDe {
29
+ letter-spacing: -1.5px;
30
+ }
31
+ &.styles_large__vqVxY.styles_serif__b-ZjM, &.styles_large__vqVxY.styles_em__v4FoO,
32
+ &.styles_small__e7YDe.styles_serif__b-ZjM, &.styles_small__e7YDe.styles_em__v4FoO {
33
+ letter-spacing: -0.5px;
34
+ }
28
35
  }
29
36
 
30
37
  .styles_header-small__W-GSS {
31
38
  letter-spacing: -0.75px;
32
39
  }
33
40
 
34
- .styles_display__VgnTB.styles_large__vqVxY.styles_serif__b-ZjM, .styles_display__VgnTB.styles_large__vqVxY.styles_em__v4FoO, .styles_display__VgnTB.styles_small__e7YDe.styles_serif__b-ZjM, .styles_display__VgnTB.styles_small__e7YDe.styles_em__v4FoO, .styles_header__UDH-H.styles_small__e7YDe.styles_serif__b-ZjM, .styles_header__UDH-H.styles_small__e7YDe.styles_em__v4FoO, .styles_captiontext__-TA6x {
35
- letter-spacing: -0.5px;
36
- }
37
-
38
41
  .styles_subtitle__os3DH.styles_small__e7YDe, .styles_bodycopy__uEx9r.styles_medium__WQPZj, .styles_bodycopy__uEx9r.styles_small__e7YDe {
39
42
  letter-spacing: -0.2px;
40
43
  }
@@ -43,233 +46,118 @@
43
46
  letter-spacing: -0.3px;
44
47
  }
45
48
 
46
- /* Display */
47
- .styles_display__VgnTB.styles_large__vqVxY {
48
- font-size: 38px;
49
- }
50
-
51
- .styles_display__VgnTB.styles_small__e7YDe {
52
- font-size: 32px;
53
- }
54
-
55
- /* Header */
56
- .styles_header__UDH-H.styles_large__vqVxY {
57
- font-size: 28px;
58
- line-height: 34px;
59
- }
60
-
61
- .styles_header__UDH-H.styles_medium__WQPZj {
62
- font-size: 24px;
63
- line-height: 28px;
64
- }
65
-
66
- .styles_header__UDH-H.styles_small__e7YDe {
67
- font-size: 20px;
68
- line-height: 26px;
69
- }
70
-
71
- /* Subtitle */
72
- .styles_subtitle__os3DH.styles_large__vqVxY {
73
- font-size: 17px;
74
- line-height: 24px;
75
- }
76
-
77
- .styles_subtitle__os3DH.styles_small__e7YDe {
78
- font-size: 14px;
79
- line-height: 20px;
80
- }
81
-
82
- /* Body Copy */
83
- .styles_bodycopy__uEx9r.styles_large__vqVxY {
84
- font-size: 17px;
85
- line-height: 24px;
49
+ /* Typography Sizes - Mobile */
50
+ .styles_display__VgnTB {
51
+ &.styles_large__vqVxY { font-size: 38px; }
52
+ &.styles_small__e7YDe { font-size: 32px; }
86
53
  }
87
54
 
88
- .styles_bodycopy__uEx9r.styles_medium__WQPZj {
89
- font-size: 14px;
90
- line-height: 20px;
55
+ .styles_header__UDH-H {
56
+ &.styles_large__vqVxY { font-size: 28px; line-height: 34px; }
57
+ &.styles_medium__WQPZj { font-size: 24px; line-height: 28px; }
58
+ &.styles_small__e7YDe { font-size: 20px; line-height: 26px; }
91
59
  }
92
60
 
93
- .styles_bodycopy__uEx9r.styles_small__e7YDe {
94
- font-size: 11px;
95
- line-height: 16px;
61
+ .styles_subtitle__os3DH {
62
+ &.styles_large__vqVxY { font-size: 17px; line-height: 24px; }
63
+ &.styles_small__e7YDe { font-size: 14px; line-height: 20px; }
96
64
  }
97
65
 
98
- /* Overline */
99
- .styles_overline__5xGDa.styles_large__vqVxY {
100
- font-size: 14px;
101
- line-height: 17px;
102
- }
103
-
104
- .styles_overline__5xGDa.styles_small__e7YDe {
105
- font-size: 12px;
106
- line-height: 14px;
66
+ .styles_bodycopy__uEx9r {
67
+ &.styles_large__vqVxY { font-size: 17px; line-height: 24px; }
68
+ &.styles_medium__WQPZj { font-size: 14px; line-height: 20px; }
69
+ &.styles_small__e7YDe { font-size: 11px; line-height: 16px; }
107
70
  }
108
71
 
109
- /* Caption */
110
- .styles_captiontext__-TA6x {
111
- font-size: 14px;
112
- line-height: 17px;
72
+ .styles_overline__5xGDa {
73
+ &.styles_large__vqVxY { font-size: 14px; line-height: 17px; }
74
+ &.styles_small__e7YDe { font-size: 12px; line-height: 14px; }
113
75
  }
114
76
 
115
- /* Navigation Text */
116
- .styles_navigationtext__qnnIo {
77
+ .styles_captiontext__-TA6x, .styles_navigationtext__qnnIo, .styles_textlinkharmonic__S77lE {
117
78
  font-size: 14px;
118
79
  line-height: 17px;
119
80
  }
120
-
121
- /* Text Link */
122
- .styles_textlinkharmonic__S77lE {
123
- font-size: 14px;
124
- line-height: 14px;
125
- }
126
- }
127
-
128
-
129
- /* ~~~~~ Desktop ~~~~~~*/
130
-
131
- /* ~~~ Letter Spacing - Desktop ~~~ */
132
- .styles_display__VgnTB.styles_large__vqVxY {
133
- letter-spacing: -5px;
134
- }
135
-
136
- .styles_header__UDH-H.styles_large__vqVxY {
137
- letter-spacing: -1.5px;
138
- }
139
-
140
- .styles_header__UDH-H.styles_medium__WQPZj {
141
- letter-spacing: -1.5px;
142
- }
143
-
144
- .styles_display__VgnTB.styles_large__vqVxY.styles_serif__b-ZjM, .styles_display__VgnTB.styles_large__vqVxY.styles_em__v4FoO, .styles_display__VgnTB.styles_small__e7YDe {
145
- letter-spacing: -3px;
146
- }
147
-
148
- .styles_display__VgnTB.styles_small__e7YDe.styles_serif__b-ZjM, .styles_display__VgnTB.styles_small__e7YDe.styles_em__v4FoO {
149
- letter-spacing: -2px;
150
- }
151
-
152
- .styles_header__UDH-H.styles_large__vqVxY.styles_serif__b-ZjM, .styles_header__UDH-H.styles_large__vqVxY.styles_em__v4FoO, .styles_header__UDH-H.styles_medium__WQPZj.styles_serif__b-ZjM, .styles_header__UDH-H.styles_medium__WQPZj.styles_em__v4FoO, .styles_header__UDH-H.styles_small__e7YDe, .styles_header__UDH-H.styles_small__e7YDe.styles_serif__b-ZjM, .styles_header__UDH-H.styles_small__e7YDe.styles_em__v4FoO, .styles_subtitle__os3DH, .styles_bodycopy__uEx9r, .styles_buttontext__UPumF, .styles_captiontext__-TA6x, .styles_navigationtext__qnnIo, .styles_textlinkharmonic__S77lE {
153
- letter-spacing: -0.5px;
154
- }
155
-
156
- .styles_overline-large__nRJSl {
157
- letter-spacing: -0.3px;
158
81
  }
159
82
 
160
- .styles_overline-small__iF6Pd {
161
- letter-spacing: -0.2px;
162
- }
163
-
164
-
165
- /* ~~~ Display Headers - 1 (Large) , 2 (Small) ~~~ */
83
+ /* ~~~~~ Desktop Styles ~~~~~ */
166
84
  .styles_display__VgnTB {
167
85
  font-family: var(--font-family-sans);
168
- font-weight: 700;
169
- }
170
-
171
- .styles_display__VgnTB em,
172
- .styles_display__VgnTB.styles_serif__b-ZjM {
173
- font-family: var(--font-family-serif);
174
- font-weight: 500;
175
- }
86
+ &.styles_large__vqVxY {
87
+ font-size: 96px;
88
+ letter-spacing: -5px;
89
+ }
176
90
 
177
- .styles_display__VgnTB.styles_large__vqVxY {
178
- font-size: 96px;
179
- }
91
+ &.styles_small__e7YDe {
92
+ font-size: 68px;
93
+ letter-spacing: -3px;
94
+ font-weight: 500;
95
+ }
180
96
 
181
- .styles_display__VgnTB.styles_small__e7YDe {
182
- font-size: 68px;
183
- font-weight: 500;
97
+ &.styles_serif__b-ZjM, &.styles_em__v4FoO {
98
+ font-family: var(--font-family-serif);
99
+ font-weight: 500;
100
+ }
184
101
  }
185
102
 
186
-
187
- /* ~~~ Header - 1 (Large) , 2 (Medium) , 3 (Small) ~~~ */
188
103
  .styles_header__UDH-H {
189
104
  font-family: var(--font-family-sans);
190
105
  font-weight: 500;
191
- }
192
106
 
193
- .styles_header__UDH-H em,
194
- .styles_header__UDH-H.styles_serif__b-ZjM {
195
- font-family: var(--font-family-serif);
196
- font-weight: 500;
197
- }
107
+ &.styles_large__vqVxY {
108
+ font-size: 44px;
109
+ line-height: 48px;
110
+ letter-spacing: -1.5px;
111
+ }
198
112
 
199
- .styles_header__UDH-H.styles_large__vqVxY {
200
- font-size: 44px;
201
- line-height: 48px;
202
- }
113
+ &.styles_medium__WQPZj {
114
+ font-size: 34px;
115
+ line-height: 40px;
116
+ letter-spacing: -1.5px;
117
+ }
203
118
 
204
- .styles_header__UDH-H.styles_medium__WQPZj {
205
- font-size: 34px;
206
- line-height: 40px;
207
- }
119
+ &.styles_small__e7YDe {
120
+ font-size: 26px;
121
+ line-height: 32px;
122
+ letter-spacing: -0.5px;
123
+ }
208
124
 
209
- .styles_header__UDH-H.styles_small__e7YDe {
210
- font-size: 26px;
211
- line-height: 32px;
125
+ &.styles_serif__b-ZjM, &.styles_em__v4FoO {
126
+ font-family: var(--font-family-serif);
127
+ font-weight: 500;
128
+ }
212
129
  }
213
130
 
214
-
215
- /* ~~~ Subtitle ~~~ */
131
+ /* Subtitle */
216
132
  .styles_subtitle__os3DH {
217
133
  font-family: var(--font-family-sans);
218
134
  font-weight: 500;
219
- }
220
135
 
221
- .styles_subtitle__os3DH.styles_large__vqVxY {
222
- font-size: 19px;
223
- line-height: 26px;
136
+ &.styles_large__vqVxY { font-size: 19px; line-height: 26px; }
137
+ &.styles_small__e7YDe { font-size: 17px; line-height: 24px; }
224
138
  }
225
139
 
226
- .styles_subtitle__os3DH.styles_small__e7YDe {
227
- font-size: 17px;
228
- line-height: 24px;
229
- }
230
-
231
-
232
- /* ~~~ Body copy ~~~ */
140
+ /* Body Copy */
233
141
  .styles_bodycopy__uEx9r {
234
142
  font-family: var(--font-family-sans);
235
143
  font-weight: 400;
236
- }
237
-
238
- .styles_bodycopy__uEx9r.styles_large__vqVxY {
239
- font-size: 19px;
240
- line-height: 26px;
241
- }
242
144
 
243
- .styles_bodycopy__uEx9r.styles_medium__WQPZj {
244
- font-size: 17px;
245
- line-height: 24px;
145
+ &.styles_large__vqVxY { font-size: 19px; line-height: 26px; }
146
+ &.styles_medium__WQPZj { font-size: 17px; line-height: 24px; }
147
+ &.styles_small__e7YDe { font-size: 14px; line-height: 20px; }
246
148
  }
247
149
 
248
- .styles_bodycopy__uEx9r.styles_small__e7YDe {
249
- font-size: 14px;
250
- line-height: 20px;
251
- }
252
-
253
-
254
- /* ~~~ Overline ~~~ */
150
+ /* Overline */
255
151
  .styles_overline__5xGDa {
256
152
  font-family: var(--font-family-sans);
257
153
  font-weight: 500;
258
154
  text-transform: uppercase;
259
- }
260
-
261
- .styles_overline__5xGDa.styles_large__vqVxY {
262
- font-size: 14px;
263
- line-height: 18px;
264
- }
265
155
 
266
- .styles_overline__5xGDa.styles_small__e7YDe {
267
- font-size: 12px;
268
- line-height: 14px;
156
+ &.styles_large__vqVxY { font-size: 14px; line-height: 18px; letter-spacing: -0.3px; }
157
+ &.styles_small__e7YDe { font-size: 12px; line-height: 14px; letter-spacing: -0.2px; }
269
158
  }
270
159
 
271
-
272
- /* ~~~ Button text ~~~ */
160
+ /* Button Text */
273
161
  .styles_buttontext__UPumF {
274
162
  font-family: var(--font-family-sans);
275
163
  font-weight: 400;
@@ -277,8 +165,7 @@
277
165
  line-height: 20px;
278
166
  }
279
167
 
280
-
281
- /* ~~~ Caption text ~~~ */
168
+ /* Caption Text */
282
169
  .styles_captiontext__-TA6x {
283
170
  font-size: 17px;
284
171
  font-weight: 400;
@@ -286,8 +173,7 @@
286
173
  line-height: 24px;
287
174
  }
288
175
 
289
-
290
- /* ~~~ Navigation text ~~~ */
176
+ /* Navigation Text */
291
177
  .styles_navigationtext__qnnIo {
292
178
  font-family: var(--font-family-sans);
293
179
  font-size: 17px;
@@ -296,13 +182,13 @@
296
182
  line-height: 17px;
297
183
  }
298
184
 
299
-
300
- /* ~~~ Text link ~~~ */
185
+ /* Text Link */
301
186
  .styles_textlinkharmonic__S77lE {
302
187
  font-family: var(--font-family-sans);
303
188
  font-weight: 500;
304
189
  text-transform: uppercase;
305
190
  font-size: 17px;
191
+ line-height: 14px;
306
192
  border-bottom: solid 1px;
307
193
  width: -moz-fit-content;
308
194
  width: fit-content;
@@ -310,11 +196,4 @@
310
196
  align-items: center;
311
197
  cursor: pointer;
312
198
  text-decoration: none;
313
- line-height: 14px;
314
199
  }
315
-
316
- /* Typography.css */
317
- .Typography_test__1llmb {
318
- /* Add your styles here */
319
- color: red!important;
320
- }
package/dist/harmonic.cjs.development.js CHANGED
@@ -3404,7 +3404,6 @@ var StyledTag = function StyledTag(_ref) {
3404
3404
  children = _ref.children,
3405
3405
  level = _ref.level;
3406
3406
  return /*#__PURE__*/React__default.createElement(Wrapper$1, {
3407
- className: "test",
3408
3407
  typography: typography,
3409
3408
  as: tag,
3410
3409
  level: level
@@ -4441,7 +4440,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
4441
4440
  };
4442
4441
 
4443
4442
  var _templateObject$q, _templateObject2$f;
4444
- var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
4443
+ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--harmonic-font-family-sans);\n font-size: 17px;\n font-weight: 500;\n line-height: 14px;\n letter-spacing: var(--letter-spacing-overline-1);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media (max-width: 600px) {\n font-size: 14px;\n}\n"])), function (_ref) {
4445
4444
  var iconName = _ref.iconName;
4446
4445
  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
4447
4446
  }, function (_ref2) {
@@ -10408,7 +10407,7 @@ var ModalWindow = function ModalWindow(_ref) {
10408
10407
  };
10409
10408
 
10410
10409
  var _templateObject$1l;
10411
- var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
10410
+ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
10412
10411
  var theme = _ref.theme;
10413
10412
  return theme.colors.primary;
10414
10413
  }, function (_ref2) {