@royaloperahouse/harmonic 0.2.0 → 0.2.2-a

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 (13) hide show
  1. package/README.md +252 -43
  2. package/dist/components/Typography/Typography.d.ts +0 -1
  3. package/dist/components/organisms/Navigation/Navigation.d.ts +1 -1
  4. package/dist/harmonic.cjs.development.css +105 -105
  5. package/dist/harmonic.cjs.development.js +39 -10
  6. package/dist/harmonic.cjs.development.js.map +1 -1
  7. package/dist/harmonic.cjs.production.min.js +1 -1
  8. package/dist/harmonic.cjs.production.min.js.map +1 -1
  9. package/dist/harmonic.esm.js +70 -41
  10. package/dist/harmonic.esm.js.map +1 -1
  11. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
  12. package/package.json +1 -1
  13. 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://s3.eu-west-1.amazonaws.com/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://s3.eu-west-1.amazonaws.com/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://s3.eu-west-1.amazonaws.com/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://s3.eu-west-1.amazonaws.com/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://s3.eu-west-1.amazonaws.com/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
@@ -3806,6 +3806,7 @@ var _templateObject$j, _templateObject2$b;
3806
3806
  var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
3807
3807
  var SponsorshipStyledIframe = /*#__PURE__*/styled__default.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
3808
3808
 
3809
+ /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
3809
3810
  var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
3810
3811
  var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
3811
3812
  var DEFAULT_DATA_ROH = 'ImgAdvert';
@@ -3831,7 +3832,14 @@ var Sponsorship = function Sponsorship(_ref) {
3831
3832
  scrolling: "no",
3832
3833
  "data-roh": dataRoh,
3833
3834
  title: title,
3834
- className: "desktopIframe"
3835
+ className: "desktopIframe",
3836
+ "aria-label": title + " sponsorship content",
3837
+ "aria-description": "Click to visit " + title + "'s website",
3838
+ sandbox: "allow-scripts allow-same-origin",
3839
+ loading: "lazy",
3840
+ "aria-hidden": "false",
3841
+ tabIndex: 0,
3842
+ role: "link"
3835
3843
  }));
3836
3844
  };
3837
3845
 
@@ -4678,7 +4686,7 @@ var Timer = function Timer(_ref) {
4678
4686
  };
4679
4687
 
4680
4688
  var _templateObject$t;
4681
- 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 & 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"])));
4689
+ 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"])));
4682
4690
 
4683
4691
  var TypeTags = function TypeTags(_ref) {
4684
4692
  var list = _ref.list;
@@ -5192,7 +5200,7 @@ var SocialLinks = function SocialLinks(_ref) {
5192
5200
  };
5193
5201
 
5194
5202
  var _templateObject$x, _templateObject2$o, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
5195
- var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
5203
+ var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 4px;\n\n @media ", " {\n padding-top: 0px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
5196
5204
  var isMenuOpen = _ref.isMenuOpen;
5197
5205
  return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--color-base-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
5198
5206
  });
@@ -5895,9 +5903,7 @@ var SearchBar = function SearchBar(_ref) {
5895
5903
  };
5896
5904
 
5897
5905
  var dataRoh = 'imgLogo';
5898
- var urlLink = 'https://www.rbo.org.uk/';
5899
5906
  var title = 'Royal Ballet and Opera';
5900
- // const altText = 'Royal Ballet and Opera Homepage';
5901
5907
  var Navigation = function Navigation(_ref) {
5902
5908
  var dataNavTop = _ref.dataNavTop,
5903
5909
  menuData = _ref.menuData,
@@ -5905,7 +5911,8 @@ var Navigation = function Navigation(_ref) {
5905
5911
  onLink = _ref.onLink,
5906
5912
  _ref$crest = _ref.crest,
5907
5913
  crest = _ref$crest === void 0 ? true : _ref$crest,
5908
- className = _ref.className;
5914
+ className = _ref.className,
5915
+ logoLink = _ref.logoLink;
5909
5916
  var _useState = React.useState(dataNavTop),
5910
5917
  navTopData = _useState[0],
5911
5918
  setNavTopData = _useState[1];
@@ -5971,7 +5978,7 @@ var Navigation = function Navigation(_ref) {
5971
5978
  }, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, {
5972
5979
  "data-roh": dataRoh,
5973
5980
  rel: "noopener noreferrer",
5974
- href: urlLink,
5981
+ href: logoLink,
5975
5982
  title: title
5976
5983
  }, /*#__PURE__*/React__default.createElement(Icon, {
5977
5984
  iconName: crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
@@ -9278,7 +9285,8 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9278
9285
  titleSemanticLevel = _ref.titleSemanticLevel,
9279
9286
  additionalLink = _ref.additionalLink,
9280
9287
  image = _ref.image;
9281
- var isMobile = useMobile();
9288
+ var _useViewport = useViewport(),
9289
+ isMobile = _useViewport.isMobile;
9282
9290
  var showImageButton = !title && !badge && !additionalLink && !isMobile;
9283
9291
  var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
9284
9292
  var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
@@ -9307,7 +9315,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9307
9315
  columnSpanDevice: 12
9308
9316
  }, /*#__PURE__*/React__default.createElement(ContentWrapper$2, {
9309
9317
  theme: theme
9310
- }, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
9318
+ }, !isMobile && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
9311
9319
  isBadgePresent: !!badge
9312
9320
  }, /*#__PURE__*/React__default.createElement(Badge, {
9313
9321
  theme: theme,
@@ -9328,7 +9336,28 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9328
9336
  theme: theme,
9329
9337
  link: mainLink,
9330
9338
  isMobile: isMobile
9331
- }))))))));
9339
+ }))))), isMobile && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
9340
+ theme: theme,
9341
+ isButtonPresent: !!mainLink || !!additionalLink
9342
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
9343
+ hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
9344
+ size: "large"
9345
+ }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
9346
+ isAdditionalButtonPresent: !!additionalLink && !badge
9347
+ }, /*#__PURE__*/React__default.createElement(Button$1, {
9348
+ theme: theme,
9349
+ link: mainLink,
9350
+ isMobile: isMobile
9351
+ }))), (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
9352
+ isBadgePresent: !!badge
9353
+ }, /*#__PURE__*/React__default.createElement(Badge, {
9354
+ theme: theme,
9355
+ badge: badge,
9356
+ isMobile: isMobile
9357
+ }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
9358
+ theme: theme,
9359
+ link: additionalLink
9360
+ }))))))))))));
9332
9361
  };
9333
9362
 
9334
9363
  var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6;