@royaloperahouse/harmonic 0.2.2 → 0.2.3-b

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 (18) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/README.md +252 -43
  3. package/dist/components/Typography/Typography.d.ts +0 -1
  4. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +3 -3
  5. package/dist/harmonic.cjs.development.css +105 -105
  6. package/dist/harmonic.cjs.development.js +15 -17
  7. package/dist/harmonic.cjs.development.js.map +1 -1
  8. package/dist/harmonic.cjs.production.min.js +1 -1
  9. package/dist/harmonic.cjs.production.min.js.map +1 -1
  10. package/dist/harmonic.esm.js +46 -48
  11. package/dist/harmonic.esm.js.map +1 -1
  12. package/dist/index.d.ts +1 -2
  13. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
  14. package/dist/types/editorial.d.ts +6 -4
  15. package/dist/types/information.d.ts +2 -2
  16. package/dist/types/typography.d.ts +8 -3
  17. package/package.json +1 -1
  18. package/README.GIT +0 -278
package/dist/harmonic.cjs.development.css CHANGED
@@ -1,192 +1,234 @@
1
+ @font-face {
2
+ font-family: 'GreyLLTT';
3
+ src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
4
+ font-weight: 400;
5
+ font-style: normal;
6
+ font-display: swap;
7
+ }
8
+
9
+ @font-face {
10
+ font-family: 'GreyLLTT';
11
+ src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
12
+ font-weight: 500;
13
+ font-style: normal;
14
+ font-display: swap;
15
+ }
16
+
17
+ @font-face {
18
+ font-family: 'GreyLLTT';
19
+ src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
20
+ font-weight: 700;
21
+ font-style: normal;
22
+ font-display: swap;
23
+ }
24
+
25
+ @font-face {
26
+ font-family: 'VictorSerif';
27
+ src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
28
+ format('woff2');
29
+ font-weight: 500;
30
+ font-style: normal;
31
+ font-display: swap;
32
+ }
33
+
34
+ @font-face {
35
+ font-family: 'VictorSerif';
36
+ src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
37
+ format('woff2');
38
+ font-weight: 500;
39
+ font-style: italic;
40
+ font-display: swap;
41
+ }
42
+
1
43
  /* ~~~~~ General Styling Classes ~~~~~ */
2
- .styles_color-primary__UYod1 {
44
+ .typography_color-primary__LOfDi {
3
45
  color: var(--color-primary);
4
46
  }
5
47
 
6
- .styles_color-black__a05Fo {
48
+ .typography_color-black__6MHRL {
7
49
  color: var(--color-base-black);
8
50
  }
9
51
 
10
- .styles_color-white__HiYDT {
52
+ .typography_color-white__PfW5s {
11
53
  color: var(--color-base-white);
12
54
  }
13
55
 
14
- .styles_color-red__zwTZW {
56
+ .typography_color-red__iPlbG {
15
57
  color: var(--color-primary-red);
16
58
  }
17
59
 
18
- .styles_color-grey__Gc0wv {
60
+ .typography_color-grey__GA1c2 {
19
61
  color: var(--color-base-dark-grey);
20
62
  }
21
63
 
22
- .styles_color-inherit__Y12df {
64
+ .typography_color-inherit__RDd0Y {
23
65
  color: inherit;
24
66
  }
25
67
 
26
- .styles_em__v4FoO {
68
+ .typography_em__E6tX- {
27
69
  font-style: italic;
28
70
  }
29
71
  /* ~~~ */
30
72
 
31
73
  /* Display Headers */
32
- .styles_display__VgnTB {
74
+ .typography_display__-F3p4 {
33
75
  margin: 0;
34
76
  font-family: var(--font-family-sans);
35
77
  line-height: 100%;
36
78
 
37
- &.styles_large__vqVxY {
79
+ &.typography_large__uq0zC {
38
80
  font-size: 96px;
39
81
  font-weight: 700;
40
82
  letter-spacing: -5px;
41
83
  }
42
84
 
43
- &.styles_small__e7YDe {
85
+ &.typography_small__wfQ0K {
44
86
  font-size: 68px;
45
87
  font-weight: 500;
46
88
  letter-spacing: -3px;
47
89
  }
48
90
 
49
91
  /* Serif and Italic styles */
50
- &.styles_serif__b-ZjM,
51
- &.styles_em__v4FoO {
92
+ &.typography_serif__VSO38,
93
+ &.typography_em__E6tX- {
52
94
  font-family: var(--font-family-serif);
53
95
  font-weight: 500;
54
96
  }
55
97
 
56
98
  /* Serif and Italic adjustments */
57
- &.styles_large__vqVxY.styles_serif__b-ZjM,
58
- &.styles_large__vqVxY.styles_em__v4FoO {
99
+ &.typography_large__uq0zC.typography_serif__VSO38,
100
+ &.typography_large__uq0zC.typography_em__E6tX- {
59
101
  letter-spacing: -3px;
60
102
  }
61
103
 
62
- &.styles_small__e7YDe.styles_serif__b-ZjM,
63
- &.styles_small__e7YDe.styles_em__v4FoO {
104
+ &.typography_small__wfQ0K.typography_serif__VSO38,
105
+ &.typography_small__wfQ0K.typography_em__E6tX- {
64
106
  letter-spacing: -2px;
65
107
  }
66
108
 
67
109
  @media (max-width: 699px) {
68
- &.styles_large__vqVxY {
110
+ &.typography_large__uq0zC {
69
111
  font-size: 38px;
70
112
  letter-spacing: -1.5px;
71
113
  }
72
114
 
73
- &.styles_small__e7YDe {
115
+ &.typography_small__wfQ0K {
74
116
  font-size: 32px;
75
117
  letter-spacing: -1.5px;
76
118
  }
77
119
 
78
- &.styles_large__vqVxY.styles_serif__b-ZjM,
79
- &.styles_large__vqVxY.styles_em__v4FoO,
80
- &.styles_small__e7YDe.styles_serif__b-ZjM,
81
- &.styles_small__e7YDe.styles_em__v4FoO {
120
+ &.typography_large__uq0zC.typography_serif__VSO38,
121
+ &.typography_large__uq0zC.typography_em__E6tX-,
122
+ &.typography_small__wfQ0K.typography_serif__VSO38,
123
+ &.typography_small__wfQ0K.typography_em__E6tX- {
82
124
  letter-spacing: -0.5px;
83
125
  }
84
126
  }
85
127
  }
86
128
 
87
129
  /* Headers */
88
- .styles_header__UDH-H {
130
+ .typography_header__BexiD {
89
131
  margin: 0;
90
132
  font-family: var(--font-family-sans);
91
133
  font-weight: 500;
92
134
 
93
- &.styles_large__vqVxY {
135
+ &.typography_large__uq0zC {
94
136
  font-size: 44px;
95
137
  line-height: 48px;
96
138
  letter-spacing: -1.5px;
97
139
  }
98
140
 
99
- &.styles_medium__WQPZj {
141
+ &.typography_medium__K0uZD {
100
142
  font-size: 34px;
101
143
  line-height: 40px;
102
144
  letter-spacing: -1px;
103
145
  }
104
146
 
105
- &.styles_small__e7YDe {
147
+ &.typography_small__wfQ0K {
106
148
  font-size: 26px;
107
149
  line-height: 32px;
108
150
  letter-spacing: -0.5px;
109
151
  }
110
152
 
111
153
  /* Serif and Italic styles */
112
- &.styles_serif__b-ZjM,
113
- &.styles_em__v4FoO {
154
+ &.typography_serif__VSO38,
155
+ &.typography_em__E6tX- {
114
156
  font-family: var(--font-family-serif);
115
157
  }
116
158
 
117
159
  /* Serif and Italic letter-spacing overrides */
118
- &.styles_large__vqVxY.styles_serif__b-ZjM,
119
- &.styles_large__vqVxY.styles_em__v4FoO {
160
+ &.typography_large__uq0zC.typography_serif__VSO38,
161
+ &.typography_large__uq0zC.typography_em__E6tX- {
120
162
  letter-spacing: -0.5px;
121
163
  }
122
164
 
123
- &.styles_medium__WQPZj.styles_serif__b-ZjM,
124
- &.styles_medium__WQPZj.styles_em__v4FoO {
165
+ &.typography_medium__K0uZD.typography_serif__VSO38,
166
+ &.typography_medium__K0uZD.typography_em__E6tX- {
125
167
  letter-spacing: -0.5px;
126
168
  }
127
169
 
128
- &.styles_small__e7YDe.styles_serif__b-ZjM,
129
- &.styles_small__e7YDe.styles_em__v4FoO {
170
+ &.typography_small__wfQ0K.typography_serif__VSO38,
171
+ &.typography_small__wfQ0K.typography_em__E6tX- {
130
172
  letter-spacing: -0.5px;
131
173
  }
132
174
 
133
175
  @media (max-width: 699px) {
134
- &.styles_large__vqVxY {
176
+ &.typography_large__uq0zC {
135
177
  font-size: 28px;
136
178
  line-height: 34px;
137
179
  letter-spacing: -1.5px;
138
180
  }
139
181
 
140
- &.styles_medium__WQPZj {
182
+ &.typography_medium__K0uZD {
141
183
  font-size: 24px;
142
184
  line-height: 28px;
143
185
  letter-spacing: -1px;
144
186
  }
145
187
 
146
- &.styles_small__e7YDe {
188
+ &.typography_small__wfQ0K {
147
189
  font-size: 20px;
148
190
  line-height: 26px;
149
191
  letter-spacing: -0.75px;
150
192
  }
151
193
 
152
194
  /* Mobile overrides for serif/italic letter-spacing */
153
- &.styles_large__vqVxY.styles_serif__b-ZjM,
154
- &.styles_large__vqVxY.styles_em__v4FoO,
155
- &.styles_medium__WQPZj.styles_serif__b-ZjM,
156
- &.styles_medium__WQPZj.styles_em__v4FoO,
157
- &.styles_small__e7YDe.styles_serif__b-ZjM,
158
- &.styles_small__e7YDe.styles_em__v4FoO {
195
+ &.typography_large__uq0zC.typography_serif__VSO38,
196
+ &.typography_large__uq0zC.typography_em__E6tX-,
197
+ &.typography_medium__K0uZD.typography_serif__VSO38,
198
+ &.typography_medium__K0uZD.typography_em__E6tX-,
199
+ &.typography_small__wfQ0K.typography_serif__VSO38,
200
+ &.typography_small__wfQ0K.typography_em__E6tX- {
159
201
  letter-spacing: -0.5px;
160
202
  }
161
203
  }
162
204
  }
163
205
 
164
206
  /* Subtitle */
165
- .styles_subtitle__os3DH {
207
+ .typography_subtitle__aoFTV {
166
208
  margin: 0;
167
209
  font-family: var(--font-family-sans);
168
210
  font-weight: 500;
169
211
 
170
- &.styles_large__vqVxY {
212
+ &.typography_large__uq0zC {
171
213
  font-size: 19px;
172
214
  line-height: 26px;
173
215
  letter-spacing: -0.5px;
174
216
  }
175
217
 
176
- &.styles_small__e7YDe {
218
+ &.typography_small__wfQ0K {
177
219
  font-size: 17px;
178
220
  line-height: 24px;
179
221
  letter-spacing: -0.5px;
180
222
  }
181
223
 
182
224
  @media (max-width: 699px) {
183
- &.styles_large__vqVxY {
225
+ &.typography_large__uq0zC {
184
226
  font-size: 17px;
185
227
  line-height: 24px;
186
228
  letter-spacing: -0.5px;
187
229
  }
188
230
 
189
- &.styles_small__e7YDe {
231
+ &.typography_small__wfQ0K {
190
232
  font-size: 14px;
191
233
  line-height: 20px;
192
234
  letter-spacing: -0.2px;
@@ -195,43 +237,43 @@
195
237
  }
196
238
 
197
239
  /* Body Copy */
198
- .styles_bodycopy__uEx9r {
240
+ .typography_bodycopy__vYtQ8 {
199
241
  margin: 0;
200
242
  font-family: var(--font-family-sans);
201
243
  font-weight: 400;
202
244
 
203
- &.styles_large__vqVxY {
245
+ &.typography_large__uq0zC {
204
246
  font-size: 19px;
205
247
  line-height: 26px;
206
248
  letter-spacing: -0.5px;
207
249
  }
208
250
 
209
- &.styles_medium__WQPZj {
251
+ &.typography_medium__K0uZD {
210
252
  font-size: 17px;
211
253
  line-height: 24px;
212
254
  letter-spacing: -0.5px;
213
255
  }
214
256
 
215
- &.styles_small__e7YDe {
257
+ &.typography_small__wfQ0K {
216
258
  font-size: 14px;
217
259
  line-height: 20px;
218
260
  letter-spacing: -0.5px;
219
261
  }
220
262
 
221
263
  @media (max-width: 699px) {
222
- &.styles_large__vqVxY {
264
+ &.typography_large__uq0zC {
223
265
  font-size: 17px;
224
266
  line-height: 24px;
225
267
  letter-spacing: -0.5px;
226
268
  }
227
269
 
228
- &.styles_medium__WQPZj {
270
+ &.typography_medium__K0uZD {
229
271
  font-size: 14px;
230
272
  line-height: 20px;
231
273
  letter-spacing: -0.2px;
232
274
  }
233
275
 
234
- &.styles_small__e7YDe {
276
+ &.typography_small__wfQ0K {
235
277
  font-size: 11px;
236
278
  line-height: 16px;
237
279
  letter-spacing: -0.2px;
@@ -240,31 +282,31 @@
240
282
  }
241
283
 
242
284
  /* Overline */
243
- .styles_overline__5xGDa {
285
+ .typography_overline__EnUK3 {
244
286
  margin: 0;
245
287
  font-family: var(--font-family-sans);
246
288
  font-weight: 500;
247
289
  text-transform: uppercase;
248
290
 
249
- &.styles_large__vqVxY {
291
+ &.typography_large__uq0zC {
250
292
  font-size: 14px;
251
293
  line-height: 18px;
252
294
  letter-spacing: 0.3px;
253
295
  }
254
296
 
255
- &.styles_small__e7YDe {
297
+ &.typography_small__wfQ0K {
256
298
  font-size: 12px;
257
299
  line-height: 14px;
258
300
  letter-spacing: 0.2px;
259
301
  }
260
302
 
261
303
  @media (max-width: 699px) {
262
- &.styles_large__vqVxY {
304
+ &.typography_large__uq0zC {
263
305
  line-height: 17px;
264
306
  letter-spacing: 0.3px; /* Added to ensure it stays */
265
307
  }
266
308
 
267
- &.styles_small__e7YDe {
309
+ &.typography_small__wfQ0K {
268
310
  line-height: 14px;
269
311
  letter-spacing: 0.3px;
270
312
  }
@@ -272,7 +314,7 @@
272
314
  }
273
315
 
274
316
  /* Button Text */
275
- .styles_buttontext__UPumF {
317
+ .typography_buttontext__vcxNi {
276
318
  margin: 0;
277
319
  font-family: var(--font-family-sans);
278
320
  font-size: 17px;
@@ -287,7 +329,7 @@
287
329
  }
288
330
 
289
331
  /* Caption Text */
290
- .styles_captiontext__-TA6x {
332
+ .typography_captiontext__91UFb {
291
333
  margin: 0;
292
334
  font-family: var(--font-family-sans);
293
335
  font-weight: 400;
@@ -303,7 +345,7 @@
303
345
  }
304
346
 
305
347
  /* Navigation Text */
306
- .styles_navigationtext__qnnIo {
348
+ .typography_navigationtext__YfGf7 {
307
349
  margin: 0;
308
350
  font-family: var(--font-family-sans);
309
351
  font-size: 19px;
@@ -317,48 +359,6 @@
317
359
  }
318
360
  }
319
361
 
320
- @font-face {
321
- font-family: 'GreyLLTT';
322
- src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
323
- font-weight: 400;
324
- font-style: normal;
325
- font-display: swap;
326
- }
327
-
328
- @font-face {
329
- font-family: 'GreyLLTT';
330
- src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
331
- font-weight: 500;
332
- font-style: normal;
333
- font-display: swap;
334
- }
335
-
336
- @font-face {
337
- font-family: 'GreyLLTT';
338
- src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
339
- font-weight: 700;
340
- font-style: normal;
341
- font-display: swap;
342
- }
343
-
344
- @font-face {
345
- font-family: 'VictorSerif';
346
- src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
347
- format('woff2');
348
- font-weight: 500;
349
- font-style: normal;
350
- font-display: swap;
351
- }
352
-
353
- @font-face {
354
- font-family: 'VictorSerif';
355
- src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
356
- format('woff2');
357
- font-weight: 500;
358
- font-style: italic;
359
- font-display: swap;
360
- }
361
-
362
362
  .core-theme-module_coreTheme__pWxYB {
363
363
  /* RBO Red */
364
364
  /* Primary Palette */
package/dist/harmonic.cjs.development.js CHANGED
@@ -9194,7 +9194,7 @@ var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject10$5 || (_t
9194
9194
  var isButtonPresent = _ref6.isButtonPresent;
9195
9195
  return isButtonPresent ? '20px' : '0';
9196
9196
  });
9197
- var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
9197
+ var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n min-height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
9198
9198
 
9199
9199
  var PageHeadingPromoBadge;
9200
9200
  (function (PageHeadingPromoBadge) {
@@ -10161,13 +10161,13 @@ var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObjec
10161
10161
  var imageToLeft = _ref3.imageToLeft;
10162
10162
  return imageToLeft ? 'left' : 'right';
10163
10163
  }, devices.mobile);
10164
- var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
10164
+ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
10165
10165
  var imageToLeft = _ref4.imageToLeft;
10166
10166
  return imageToLeft ? 'right' : 'left';
10167
10167
  }, devices.mobile);
10168
- var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
10169
- var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$t || (_templateObject5$t = /*#__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"])));
10170
- var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__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"])));
10168
+ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
10169
+ var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10170
+ var BodyCopyHarmonicWithWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$n || (_templateObject6$n = /*#__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);
10171
10171
  var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__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) {
10172
10172
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
10173
10173
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
@@ -10313,18 +10313,17 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10313
10313
  title = _ref$title === void 0 ? '' : _ref$title,
10314
10314
  _ref$titleSize = _ref.titleSize,
10315
10315
  titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
10316
+ titleHierarchy = _ref.titleHierarchy,
10316
10317
  subtitle = _ref.subtitle,
10317
10318
  text = _ref.text,
10318
10319
  links = _ref.links,
10319
10320
  children = _ref.children,
10320
10321
  videoSettings = _ref.videoSettings,
10321
- titleSemanticLevel = _ref.titleSemanticLevel,
10322
10322
  className = _ref.className;
10323
10323
  var truncate = function truncate(str, n) {
10324
10324
  return str.length >= n ? str.substr(0, n) : str;
10325
10325
  };
10326
10326
  var imageToLeft = imagePosition === 'left';
10327
- var titleLevel = titleSize === 'large' ? 2 : 3;
10328
10327
  var primaryButton = links == null ? void 0 : links[0];
10329
10328
  var _ref2 = primaryButton || {},
10330
10329
  _ref2$text = _ref2.text,
@@ -10348,20 +10347,19 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10348
10347
  imageToLeft: imageToLeft,
10349
10348
  className: className,
10350
10349
  "data-testid": "promo-with-title"
10351
- }, /*#__PURE__*/React__default.createElement(PromoChild
10352
- // eslint-disable-next-line react/no-children-prop
10353
- , {
10354
- // eslint-disable-next-line react/no-children-prop
10355
- children: children,
10350
+ }, /*#__PURE__*/React__default.createElement(PromoChild, {
10356
10351
  videoSettings: _extends({}, defaultVideoSettings, videoSettings),
10357
10352
  imageToLeft: imageToLeft
10358
- }), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
10353
+ }, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
10359
10354
  "data-testid": "content-wrapper",
10360
10355
  imageToLeft: imageToLeft
10361
- }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
10362
- level: titleLevel,
10363
- semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
10364
- }, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
10356
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
10357
+ size: titleSize,
10358
+ hierarchy: titleHierarchy
10359
+ }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
10360
+ size: "medium"
10361
+ }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
10362
+ size: "medium",
10365
10363
  dangerouslySetInnerHTML: {
10366
10364
  __html: text
10367
10365
  }