pageflow 16.0.0 → 16.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (145) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +210 -33
  3. data/README.md +0 -1
  4. data/Rakefile +1 -1
  5. data/admins/pageflow/entry.rb +0 -1
  6. data/admins/pageflow/sites.rb +3 -0
  7. data/app/assets/javascripts/pageflow/dist/ui.js +298 -72
  8. data/app/assets/stylesheets/pageflow/admin/permalink_input.scss +10 -0
  9. data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +6 -1
  10. data/app/assets/stylesheets/pageflow/editor/file_thumbnails.scss +4 -0
  11. data/app/assets/stylesheets/pageflow/editor/help.scss +3 -3
  12. data/app/assets/stylesheets/pageflow/editor/info_box.scss +7 -0
  13. data/app/assets/stylesheets/pageflow/editor/inputs/file_input.scss +0 -5
  14. data/app/assets/stylesheets/pageflow/ui/forms.scss +1 -1
  15. data/app/controllers/pageflow/chapters_controller.rb +2 -2
  16. data/app/controllers/pageflow/editor/files_controller.rb +1 -1
  17. data/app/controllers/pageflow/entries_controller.rb +10 -0
  18. data/app/controllers/pageflow/feeds_controller.rb +18 -0
  19. data/app/controllers/pageflow/pages_controller.rb +2 -2
  20. data/app/controllers/pageflow/sitemaps_controller.rb +15 -0
  21. data/app/controllers/pageflow/storylines_controller.rb +2 -2
  22. data/app/helpers/pageflow/entries_helper.rb +2 -1
  23. data/app/helpers/pageflow/feeds_helper.rb +66 -0
  24. data/app/helpers/pageflow/page_types_helper.rb +9 -9
  25. data/app/inputs/pageflow_permalink_input.rb +15 -3
  26. data/app/models/concerns/pageflow/reusable_file.rb +3 -3
  27. data/app/models/pageflow/account.rb +8 -0
  28. data/app/models/pageflow/audio_file_url_templates.rb +2 -1
  29. data/app/models/pageflow/draft_entry.rb +1 -1
  30. data/app/models/pageflow/entries_feed.rb +32 -0
  31. data/app/models/pageflow/image_file.rb +14 -3
  32. data/app/models/pageflow/membership.rb +3 -2
  33. data/app/models/pageflow/other_file.rb +5 -0
  34. data/app/models/pageflow/other_file_url_templates.rb +16 -0
  35. data/app/models/pageflow/published_entry.rb +6 -0
  36. data/app/models/pageflow/revision.rb +4 -0
  37. data/app/models/pageflow/site.rb +8 -0
  38. data/app/models/pageflow/sitemaps.rb +13 -0
  39. data/app/models/pageflow/used_file.rb +2 -2
  40. data/app/models/pageflow/video_file_url_templates.rb +3 -1
  41. data/app/models/pageflow/widget.rb +9 -1
  42. data/app/views/admin/entries/_permalink_inputs.html.erb +1 -2
  43. data/app/views/admin/sites/_attributes_table.html.arb +3 -0
  44. data/app/views/admin/sites/_fields.html.erb +6 -0
  45. data/app/views/components/pageflow/admin/extensible_attributes_table.rb +8 -2
  46. data/app/views/components/pageflow/admin/sites_tab.rb +3 -0
  47. data/app/views/pageflow/editor/config/_seeds.json.jbuilder +1 -0
  48. data/app/views/pageflow/feeds/index.atom.builder +20 -0
  49. data/app/views/pageflow/sitemaps/index.xml.builder +9 -0
  50. data/config/initializers/features.rb +1 -0
  51. data/config/initializers/paperclip.rb +4 -0
  52. data/config/locales/de.yml +27 -6
  53. data/config/locales/en.yml +30 -4
  54. data/config/routes.rb +3 -0
  55. data/config/spring.rb +1 -1
  56. data/db/migrate/20230120092923_create_other_files.rb +23 -0
  57. data/db/migrate/20230323115745_add_feeds_enabled_to_sites.rb +5 -0
  58. data/db/migrate/20230323154323_add_sitemap_enabled_to_sites.rb +5 -0
  59. data/db/migrate/20230331103823_add_title_to_sites.rb +5 -0
  60. data/db/migrate/20230405103612_add_custom_feed_url_to_sites.rb +5 -0
  61. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +445 -109
  62. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +26 -3
  63. data/entry_types/paged/app/controllers/pageflow_paged/editor/entries_controller.rb +0 -2
  64. data/entry_types/paged/app/controllers/pageflow_paged/entries_controller.rb +1 -0
  65. data/entry_types/paged/app/views/pageflow_paged/entries/show.html.erb +1 -0
  66. data/entry_types/paged/config/initializers/features.rb +0 -1
  67. data/entry_types/paged/lib/pageflow_paged/engine.rb +17 -1
  68. data/entry_types/scrolled/app/controllers/pageflow_scrolled/editor/chapters_controller.rb +2 -2
  69. data/entry_types/scrolled/app/controllers/pageflow_scrolled/editor/content_elements_controller.rb +3 -4
  70. data/entry_types/scrolled/app/controllers/pageflow_scrolled/editor/sections_controller.rb +13 -6
  71. data/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb +2 -0
  72. data/entry_types/scrolled/app/helpers/pageflow_scrolled/cache_helper.rb +11 -0
  73. data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/entry_json_seed_helper.rb +42 -0
  74. data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb +3 -0
  75. data/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb +31 -10
  76. data/entry_types/scrolled/app/helpers/pageflow_scrolled/react_server_side_rendering_helper.rb +9 -1
  77. data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb +3 -1
  78. data/entry_types/scrolled/app/models/pageflow_scrolled/chapter.rb +23 -0
  79. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb +6 -1
  80. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_seed.json.jbuilder +1 -5
  81. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/sections/_section_with_content_elements.json.jbuilder +10 -0
  82. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +44 -41
  83. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_consent_vendors.json.jbuilder +16 -0
  84. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +3 -0
  85. data/entry_types/scrolled/config/initializers/features.rb +5 -0
  86. data/entry_types/scrolled/config/locales/consent_widget.de.yml +4 -0
  87. data/entry_types/scrolled/config/locales/consent_widget.en.yml +4 -0
  88. data/entry_types/scrolled/config/locales/de.yml +189 -8
  89. data/entry_types/scrolled/config/locales/en.yml +207 -2
  90. data/entry_types/scrolled/config/routes.rb +4 -0
  91. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +97 -5
  92. data/entry_types/scrolled/lib/pageflow_scrolled/additional_seed_data.rb +1 -1
  93. data/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb +96 -0
  94. data/entry_types/scrolled/lib/pageflow_scrolled/content_element_consent_vendors.rb +38 -0
  95. data/entry_types/scrolled/lib/pageflow_scrolled/engine.rb +17 -1
  96. data/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +24 -0
  97. data/entry_types/scrolled/lib/pageflow_scrolled/react_widget_type.rb +6 -1
  98. data/entry_types/scrolled/lib/tasks/pageflow_scrolled/storybook.rake +1 -2
  99. data/entry_types/scrolled/package/contentElements-editor.js +307 -22
  100. data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
  101. data/entry_types/scrolled/package/contentElements-frontend.js +690 -71
  102. data/entry_types/scrolled/package/editor.js +616 -220
  103. data/entry_types/scrolled/package/frontend/{EditableInlineText.module-14c7b097.js → EditableInlineText.module-fa9e3aff.js} +1669 -1674
  104. data/entry_types/scrolled/package/frontend/PhonePlatformContext-10a1d600.js +32 -0
  105. data/entry_types/scrolled/package/frontend/ToggleFullscreenCornerButton-727cce0d.js +107 -0
  106. data/entry_types/scrolled/package/frontend/Viewer-169e14ca.js +154 -0
  107. data/entry_types/scrolled/package/frontend/{Viewer-b6becc57.js → Viewer-ee1aa590.js} +32 -161
  108. data/entry_types/scrolled/package/frontend/arrowRight-92a34ccc.js +77 -0
  109. data/entry_types/scrolled/package/frontend/{components-b3160dd7.js → components-4a09bfa3.js} +185 -45
  110. data/entry_types/scrolled/package/frontend/{PhonePlatformContext-f6093cc6.js → i18n-ddd92820.js} +149 -107
  111. data/entry_types/scrolled/package/frontend/index-02378634.js +118 -0
  112. data/entry_types/scrolled/package/frontend/index.css +1 -1
  113. data/entry_types/scrolled/package/frontend/index.js +206 -54
  114. data/entry_types/scrolled/package/frontend/useContentElementEditorState-63045393.js +52 -0
  115. data/entry_types/scrolled/package/package.json +2 -1
  116. data/entry_types/scrolled/package/testHelpers.js +9 -2
  117. data/entry_types/scrolled/package/values/colors.module.css +15 -0
  118. data/entry_types/scrolled/package/widgets/consentBar.css +1 -0
  119. data/entry_types/scrolled/package/widgets/consentBar.js +426 -0
  120. data/entry_types/scrolled/package/widgets/defaultNavigation.css +1 -1
  121. data/lib/generators/pageflow/resque/resque_generator.rb +1 -1
  122. data/lib/pageflow/ability_mixin.rb +5 -5
  123. data/lib/pageflow/active_admin_can_can_fix.rb +2 -2
  124. data/lib/pageflow/built_in_file_type.rb +7 -0
  125. data/lib/pageflow/configuration.rb +21 -0
  126. data/lib/pageflow/engine.rb +60 -39
  127. data/lib/pageflow/entry_export_import/revision_serialization.rb +1 -1
  128. data/lib/pageflow/file_type.rb +2 -2
  129. data/lib/pageflow/global_config_api.rb +2 -2
  130. data/lib/pageflow/nested_revision_component.rb +23 -5
  131. data/lib/pageflow/rails_version.rb +19 -0
  132. data/lib/pageflow/seeds.rb +10 -7
  133. data/lib/pageflow/version.rb +1 -1
  134. data/lib/pageflow/widget_types.rb +4 -0
  135. data/package/config/webpack5.js +14 -0
  136. data/package/editor.js +141 -30
  137. data/package/frontend.js +26 -2
  138. data/package/testHelpers.js +1 -1
  139. data/package/ui.js +296 -71
  140. data/spec/factories/entries.rb +17 -3
  141. data/spec/factories/sites.rb +3 -0
  142. data/vendor/assets/javascripts/iscroll.js +4 -7
  143. metadata +65 -49
  144. data/app/helpers/pageflow/admin/permalinks_helper.rb +0 -15
  145. data/entry_types/scrolled/package/frontend/arrowRight-78a7cee4.js +0 -42
@@ -1,11 +1,13 @@
1
1
  import regeneratorRuntime from 'regenerator-runtime';
2
- import { events, browser, documentHiddenState, PlayerSourceIDMap, media, MultiPlayer, settings, consent } from 'pageflow/frontend';
3
- import React, { useReducer, useState, useLayoutEffect, useEffect, useRef, createContext, useContext, useMemo, useCallback } from 'react';
4
- import { _ as _objectWithoutProperties, u as useI18n, a as _objectSpread2, b as _defineProperty, c as _slicedToArray, d as useLocale, e as useLegalInfo, f as useTheme, g as useEntryMetadata, h as useNestedFiles, i as useFile, j as _toConsumableArray, k as useSectionContentElements, l as useAdditionalSeedData, m as useSectionsWithChapter, n as useBrowserFeature, P as PhonePlatformContext, B as BrowserFeaturesProvider, E as EntryStateProvider, L as LocaleProvider, o as useEntryStateDispatch, p as useSection, q as useChapter } from './PhonePlatformContext-f6093cc6.js';
5
- import I18n from 'i18n-js';
2
+ import { events, browser, documentHiddenState, PlayerSourceIDMap, media, MultiPlayer, settings, features, consent } from 'pageflow/frontend';
3
+ import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useReducer, useCallback, useLayoutEffect } from 'react';
4
+ import { _ as _slicedToArray, a as _objectSpread2, b as _defineProperty, u as useI18n, c as useEntryMetadata, d as useNestedFiles, e as _objectWithoutProperties, f as useFile, g as useTheme, h as useSectionContentElements, i as useAdditionalSeedData, j as useSectionsWithChapter, k as useContentElementConsentVendor, l as _toConsumableArray, E as EntryStateProvider, L as LocaleProvider, m as useChapter, n as useEntryStateDispatch, o as useSection } from './i18n-ddd92820.js';
6
5
  import classNames from 'classnames';
6
+ import { u as useDelayedBoolean, a as useContentElementEditorState } from './useContentElementEditorState-63045393.js';
7
7
  import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _createSuper } from './createSuper-d0f30da3.js';
8
8
  import BackboneEvents from 'backbone-events-standalone';
9
+ import I18n from 'i18n-js';
10
+ import { u as useBrowserFeature, P as PhonePlatformContext, B as BrowserFeaturesProvider } from './PhonePlatformContext-10a1d600.js';
9
11
  import Measure from 'react-measure';
10
12
 
11
13
  var regenerator = regeneratorRuntime;
@@ -46,241 +48,6 @@ function _asyncToGenerator(fn) {
46
48
  };
47
49
  }
48
50
 
49
- var styles = {"toggle":"Toggle-module_toggle__1fb_N"};
50
-
51
- function _extends() {
52
- _extends = Object.assign || function (target) {
53
- for (var i = 1; i < arguments.length; i++) {
54
- var source = arguments[i];
55
-
56
- for (var key in source) {
57
- if (Object.prototype.hasOwnProperty.call(source, key)) {
58
- target[key] = source[key];
59
- }
60
- }
61
- }
62
-
63
- return target;
64
- };
65
-
66
- return _extends.apply(this, arguments);
67
- }
68
- var ToggleOnIcon = (function (_ref) {
69
- var _ref$styles = _ref.styles,
70
- props = _objectWithoutProperties(_ref, ["styles"]);
71
-
72
- return /*#__PURE__*/React.createElement("svg", _extends({
73
- xmlns: "http://www.w3.org/2000/svg",
74
- viewBox: "60 170 90 157"
75
- }, props), /*#__PURE__*/React.createElement("path", {
76
- d: "M150 297a50 50 0 0050-50 50 50 0 00-50-50H50a50 50 0 00-50 50 50 50 0 0050 50z"
77
- }), /*#__PURE__*/React.createElement("circle", {
78
- cx: "-150",
79
- cy: "-247",
80
- fill: "currentColor",
81
- r: "40",
82
- transform: "scale(-1)"
83
- }), /*#__PURE__*/React.createElement("path", {
84
- stroke: "currentColor",
85
- strokeWidth: "6",
86
- d: "M87 227l-37 37-16-18",
87
- fill: "none"
88
- }));
89
- });
90
-
91
- function _extends$1() {
92
- _extends$1 = Object.assign || function (target) {
93
- for (var i = 1; i < arguments.length; i++) {
94
- var source = arguments[i];
95
-
96
- for (var key in source) {
97
- if (Object.prototype.hasOwnProperty.call(source, key)) {
98
- target[key] = source[key];
99
- }
100
- }
101
- }
102
-
103
- return target;
104
- };
105
-
106
- return _extends$1.apply(this, arguments);
107
- }
108
- var ToggleOffIcon = (function (_ref) {
109
- var _ref$styles = _ref.styles,
110
- props = _objectWithoutProperties(_ref, ["styles"]);
111
-
112
- return /*#__PURE__*/React.createElement("svg", _extends$1({
113
- xmlns: "http://www.w3.org/2000/svg",
114
- viewBox: "60 170 90 157"
115
- }, props), /*#__PURE__*/React.createElement("path", {
116
- d: "M50 197a50 50 0 00-50 50 50 50 0 0050 50h100a50 50 0 0050-50 50 50 0 00-50-50H50z"
117
- }), /*#__PURE__*/React.createElement("circle", {
118
- cx: "50",
119
- cy: "247",
120
- fill: "currentColor",
121
- r: "40"
122
- }), /*#__PURE__*/React.createElement("path", {
123
- stroke: "currentColor",
124
- strokeWidth: "6",
125
- d: "M110.103 271.897l49.795-49.794m-.001 49.794l-49.794-49.795",
126
- fill: "none"
127
- }));
128
- });
129
-
130
- function Toggle(_ref) {
131
- var id = _ref.id,
132
- checked = _ref.checked,
133
- onChange = _ref.onChange;
134
- var Icon = checked ? ToggleOnIcon : ToggleOffIcon;
135
- return /*#__PURE__*/React.createElement("button", {
136
- id: id,
137
- className: styles.toggle,
138
- role: "checkbox",
139
- "aria-checked": checked ? 'true' : 'false',
140
- onClick: onChange
141
- }, /*#__PURE__*/React.createElement(Icon, {
142
- width: 50,
143
- height: 35
144
- }));
145
- }
146
-
147
- function _extends$2() {
148
- _extends$2 = Object.assign || function (target) {
149
- for (var i = 1; i < arguments.length; i++) {
150
- var source = arguments[i];
151
-
152
- for (var key in source) {
153
- if (Object.prototype.hasOwnProperty.call(source, key)) {
154
- target[key] = source[key];
155
- }
156
- }
157
- }
158
-
159
- return target;
160
- };
161
-
162
- return _extends$2.apply(this, arguments);
163
- }
164
- var information = (function (_ref) {
165
- var _ref$styles = _ref.styles,
166
- props = _objectWithoutProperties(_ref, ["styles"]);
167
-
168
- return /*#__PURE__*/React.createElement("svg", _extends$2({
169
- xmlns: "http://www.w3.org/2000/svg",
170
- viewBox: "-65 -65 449 449"
171
- }, props), /*#__PURE__*/React.createElement("path", {
172
- d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
173
- }), /*#__PURE__*/React.createElement("path", {
174
- d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
175
- }));
176
- });
177
-
178
- var styles$1 = {"bar":"Bar-module_bar__kk5uX","text":"Bar-module_text__3EwGu","button":"Bar-module_button__3Dg6p","acceptAllButton":"Bar-module_acceptAllButton__Ij5lh Bar-module_button__3Dg6p","saveButton":"Bar-module_saveButton__km-gH Bar-module_button__3Dg6p","configureButton":"Bar-module_configureButton__2mQQz Bar-module_button__3Dg6p","vendorsBox":"Bar-module_vendorsBox__1Uyex","vendorList":"Bar-module_vendorList__11m8q","vendor":"Bar-module_vendor__2ogmn","expandVendor":"Bar-module_expandVendor__1gfA3","decisionButtons":"Bar-module_decisionButtons__2JzYP"};
179
-
180
- function reducer(state, vendorName) {
181
- return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, vendorName, !state[vendorName]));
182
- }
183
-
184
- function VendorsBox(_ref) {
185
- var vendors = _ref.vendors,
186
- save = _ref.save,
187
- _ref$defaultExpanded = _ref.defaultExpanded,
188
- defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded;
189
-
190
- var _useI18n = useI18n(),
191
- t = _useI18n.t;
192
-
193
- var _useReducer = useReducer(reducer, vendors.reduce(function (result, vendor) {
194
- return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, vendor.name, vendor.state === 'accepted'));
195
- }, {})),
196
- _useReducer2 = _slicedToArray(_useReducer, 2),
197
- vendorStates = _useReducer2[0],
198
- dispatch = _useReducer2[1];
199
-
200
- return /*#__PURE__*/React.createElement("div", {
201
- className: styles$1.vendorsBox
202
- }, /*#__PURE__*/React.createElement("h3", null, t('pageflow_scrolled.public.consent_settings')), /*#__PURE__*/React.createElement("div", {
203
- className: styles$1.vendorList
204
- }, renderVendors({
205
- vendors: vendors,
206
- vendorStates: vendorStates,
207
- t: t,
208
- defaultExpanded: defaultExpanded,
209
- onToggle: dispatch
210
- })), /*#__PURE__*/React.createElement("button", {
211
- className: styles$1.saveButton,
212
- onClick: function onClick() {
213
- return save(vendorStates);
214
- }
215
- }, t('pageflow_scrolled.public.consent_save')));
216
- }
217
-
218
- function renderVendors(_ref2) {
219
- var vendors = _ref2.vendors,
220
- vendorStates = _ref2.vendorStates,
221
- t = _ref2.t,
222
- defaultExpanded = _ref2.defaultExpanded,
223
- onToggle = _ref2.onToggle;
224
-
225
- if (!vendors.length) {
226
- return /*#__PURE__*/React.createElement("div", {
227
- className: "consent_vendor_list-blank"
228
- }, t('pageflow_scrolled.public.consent_no_vendors'));
229
- }
230
-
231
- return vendors.map(function (vendor) {
232
- return /*#__PURE__*/React.createElement(Vendor, {
233
- key: vendor.name,
234
- vendor: vendor,
235
- state: vendorStates[vendor.name],
236
- t: t,
237
- defaultExpanded: defaultExpanded,
238
- onToggle: onToggle
239
- });
240
- });
241
- }
242
-
243
- function Vendor(_ref3) {
244
- var vendor = _ref3.vendor,
245
- state = _ref3.state,
246
- onToggle = _ref3.onToggle,
247
- t = _ref3.t,
248
- defaultExpanded = _ref3.defaultExpanded;
249
-
250
- var _useState = useState(defaultExpanded),
251
- _useState2 = _slicedToArray(_useState, 2),
252
- expanded = _useState2[0],
253
- setExpanded = _useState2[1];
254
-
255
- var id = "consent-vendor-".concat(vendor.name);
256
- return /*#__PURE__*/React.createElement("div", {
257
- className: styles$1.vendor
258
- }, /*#__PURE__*/React.createElement("label", {
259
- htmlFor: id
260
- }, vendor.displayName), /*#__PURE__*/React.createElement(Toggle, {
261
- id: id,
262
- checked: state,
263
- onChange: function onChange() {
264
- return onToggle(vendor.name);
265
- }
266
- }), /*#__PURE__*/React.createElement("button", {
267
- className: styles$1.expandVendor,
268
- title: t('pageflow_scrolled.public.consent_expand_vendor'),
269
- onClick: function onClick() {
270
- return setExpanded(!expanded);
271
- }
272
- }, /*#__PURE__*/React.createElement(information, {
273
- width: 30,
274
- height: 34
275
- })), expanded && /*#__PURE__*/React.createElement("p", {
276
- dangerouslySetInnerHTML: {
277
- __html: vendor.description
278
- }
279
- }));
280
- }
281
-
282
- var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
283
-
284
51
  function useOnScreen(ref) {
285
52
  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
286
53
  rootMargin = _ref.rootMargin,
@@ -361,7 +128,7 @@ function createIntersectionObserver(callback, options, skipIframeFix) {
361
128
  }
362
129
  }
363
130
 
364
- var styles$2 = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isActiveProbe":"useScrollPositionLifecycle-module_isActiveProbe__3VKB5"};
131
+ var styles = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isActiveProbe":"useScrollPositionLifecycle-module_isActiveProbe__3VKB5"};
365
132
 
366
133
  var StaticPreviewContext = createContext(false);
367
134
  function StaticPreview(_ref) {
@@ -385,7 +152,8 @@ function useIsStaticPreview() {
385
152
  function createScrollPositionLifecycleProvider(Context) {
386
153
  return function ScrollPositionLifecycleProvider(_ref2) {
387
154
  var children = _ref2.children,
388
- onActivate = _ref2.onActivate;
155
+ onActivate = _ref2.onActivate,
156
+ entersWithFadeTransition = _ref2.entersWithFadeTransition;
389
157
  var ref = useRef();
390
158
  var isActiveProbeRef = useRef();
391
159
  var isStaticPreview = useContext(StaticPreviewContext);
@@ -394,12 +162,39 @@ function createScrollPositionLifecycleProvider(Context) {
394
162
  });
395
163
  var shouldPrepare = useOnScreen(ref, {
396
164
  rootMargin: '25% 0px 25% 0px'
165
+ }) && !isStaticPreview; // Sections that enter with fade transition only become visible
166
+ // once they reach the center of the viewport. We want to reflect
167
+ // that in `isVisible`/`onVisible` to prevent background videos
168
+ // from starting too soon. Since fade section might still exit
169
+ // with a scroll transition, we want to keep `isVisible` true
170
+ // until the section has completely left the viewport. We do not
171
+ // care about when exactly a background video pauses.
172
+ //
173
+ // Note that with fade transitions sections actually stay visible
174
+ // a bit longer while they are still fading out. This is handled
175
+ // by `isVisibleWithDelay` below.
176
+
177
+ var shouldBeVisible = useOnScreen(ref, {
178
+ rootMargin: entersWithFadeTransition ? '0px 0px -50% 0px' : undefined
397
179
  }) && !isStaticPreview;
398
- var isVisible = useOnScreen(ref) && !isStaticPreview;
399
- var isActive = useOnScreen(isActiveProbeRef, {
180
+ var shouldBeActive = useOnScreen(isActiveProbeRef, {
400
181
  rootMargin: '-50% 0px -50% 0px',
401
182
  onIntersecting: onActivate
402
- }) && !isStaticPreview;
183
+ }) && !isStaticPreview; // useDelayedBoolean causes an extra render once the delay has
184
+ // elapsed. When entersWithFadeTransition is false,
185
+ // isVisibleWithDelay is never used, though. Since hooks can not
186
+ // be wrapped in conditionals, we ensure that the value passed to
187
+ // useDelayedBoolean is always false if entersWithFadeTransition
188
+ // is false. This prevents the extra render.
189
+
190
+ var isVisibleWithDelay = useDelayedBoolean(shouldBeVisible && entersWithFadeTransition, {
191
+ fromTrueToFalse: 1000
192
+ });
193
+ var isVisible = entersWithFadeTransition ? isVisibleWithDelay : shouldBeVisible; // We want to make sure that `onActivate` is never called before
194
+ // `onVisible`, no matter in which order the intersection
195
+ // observers above fire.
196
+
197
+ var isActive = isVisible && shouldBeActive;
403
198
  var value = useMemo(function () {
404
199
  return {
405
200
  shouldLoad: shouldLoad,
@@ -410,10 +205,10 @@ function createScrollPositionLifecycleProvider(Context) {
410
205
  }, [shouldLoad, shouldPrepare, isVisible, isActive]);
411
206
  return /*#__PURE__*/React.createElement("div", {
412
207
  ref: ref,
413
- className: classNames(styles$2.wrapper)
208
+ className: classNames(styles.wrapper)
414
209
  }, /*#__PURE__*/React.createElement("div", {
415
210
  ref: isActiveProbeRef,
416
- className: styles$2.isActiveProbe
211
+ className: styles.isActiveProbe
417
212
  }), /*#__PURE__*/React.createElement(Context.Provider, {
418
213
  value: value
419
214
  }, children));
@@ -457,718 +252,274 @@ function createScrollPositionLifecycleHook(Context) {
457
252
  };
458
253
  }
459
254
 
460
- var ContentElementEditorStateContext = createContext({
461
- isSelected: false,
462
- isEditable: false,
463
- setTransientState: function setTransientState() {}
464
- });
465
- /**
466
- * Use inside a content element component to determine whether the
467
- * component is being rendered inside the editor iframe, and whether
468
- * the content element is currently selected. This can be used to
469
- * implement simple inline editing capabilities like displaying extra
470
- * information when the content element is selected.
471
- *
472
- * @example
473
- * const {isEditable, isSelected} = useContentElementEditorState();
474
- */
255
+ var SectionLifecycleContext = createContext();
256
+ var SectionLifecycleProvider = createScrollPositionLifecycleProvider(SectionLifecycleContext);
257
+ var useSectionLifecycle = createScrollPositionLifecycleHook(SectionLifecycleContext);
475
258
 
476
- function useContentElementEditorState() {
477
- return useContext(ContentElementEditorStateContext);
478
- }
259
+ var Atmo = /*#__PURE__*/function () {
260
+ function Atmo(_ref) {
261
+ var _this = this;
479
262
 
480
- var ConsentContext = createContext();
481
- function ConsentProvider(_ref) {
482
- var consent = _ref.consent,
483
- children = _ref.children;
484
- return /*#__PURE__*/React.createElement(ConsentContext.Provider, {
485
- value: consent
486
- }, children);
487
- }
488
- function useConsentRequested() {
489
- var consent = useContext(ConsentContext);
263
+ var atmoSourceId = _ref.atmoSourceId,
264
+ multiPlayer = _ref.multiPlayer,
265
+ backgroundMedia = _ref.backgroundMedia;
490
266
 
491
- var _useState = useState({}),
492
- _useState2 = _slicedToArray(_useState, 2),
493
- request = _useState2[0],
494
- setRequest = _useState2[1];
267
+ _classCallCheck(this, Atmo);
495
268
 
496
- useIsomorphicLayoutEffect(function () {
497
- var unmounted = false;
269
+ this.multiPlayer = multiPlayer;
270
+ this.atmoSourceId = atmoSourceId;
271
+ this.backgroundMedia = backgroundMedia;
272
+ this.backgroundMedia.on('change:muted', function () {
273
+ _this.update();
274
+ });
275
+ documentHiddenState(function (hiddenState) {
276
+ if (hiddenState === 'hidden') {
277
+ _this.multiPlayer.fadeOutIfPlaying();
278
+ } else {
279
+ _this.update();
280
+ }
281
+ });
282
+ this.listenTo(this.multiPlayer, 'playfailed', function () {
283
+ backgroundMedia.mute(true);
284
+ });
285
+ }
498
286
 
499
- _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
500
- var _yield$consent$reques, vendors, _acceptAll, _denyAll, _save;
287
+ _createClass(Atmo, [{
288
+ key: "disable",
289
+ value: function disable() {
290
+ this.disabled = true;
291
+ this.multiPlayer.fadeOutAndPause();
292
+ events.trigger('atmo:disabled');
293
+ }
294
+ }, {
295
+ key: "enable",
296
+ value: function enable() {
297
+ this.disabled = false;
298
+ this.update();
299
+ events.trigger('atmo:enabled');
300
+ }
301
+ }, {
302
+ key: "pause",
303
+ value: function pause() {
304
+ if (browser.has('volume control support')) {
305
+ return this.multiPlayer.fadeOutAndPause();
306
+ } else {
307
+ this.multiPlayer.pause();
308
+ }
309
+ }
310
+ }, {
311
+ key: "turnDown",
312
+ value: function turnDown() {
313
+ if (browser.has('volume control support')) {
314
+ return this.multiPlayer.changeVolumeFactor(0.2);
315
+ } else {
316
+ this.multiPlayer.pause();
317
+ }
318
+ }
319
+ }, {
320
+ key: "resume",
321
+ value: function resume() {
322
+ if (this.multiPlayer.paused()) {
323
+ if (this.disabled || this.backgroundMedia.muted) {
324
+ return Promise.resolve();
325
+ } else {
326
+ return this.multiPlayer.resumeAndFadeIn();
327
+ }
328
+ } else {
329
+ return this.multiPlayer.changeVolumeFactor(1);
330
+ }
331
+ }
332
+ }, {
333
+ key: "update",
334
+ value: function update() {
335
+ if (!this.disabled) {
336
+ if (this.backgroundMedia.muted) {
337
+ this.multiPlayer.fadeOutAndPause();
338
+ } else {
339
+ this.multiPlayer.fadeTo(this.atmoSourceId);
340
+ }
341
+ }
342
+ }
343
+ }, {
344
+ key: "createMediaPlayerHooks",
345
+ value: function createMediaPlayerHooks(atmoDuringPlayback) {
346
+ var atmo = this;
347
+ return {
348
+ before: function before() {
349
+ if (atmoDuringPlayback === 'mute') {
350
+ atmo.pause();
351
+ } else if (atmoDuringPlayback === 'turnDown') {
352
+ atmo.turnDown();
353
+ }
354
+ },
355
+ after: function after() {
356
+ atmo.resume();
357
+ }
358
+ };
359
+ }
360
+ }]);
501
361
 
502
- return regenerator.wrap(function _callee$(_context) {
503
- while (1) {
504
- switch (_context.prev = _context.next) {
505
- case 0:
506
- _context.next = 2;
507
- return consent.requested();
508
-
509
- case 2:
510
- _yield$consent$reques = _context.sent;
511
- vendors = _yield$consent$reques.vendors;
512
- _acceptAll = _yield$consent$reques.acceptAll;
513
- _denyAll = _yield$consent$reques.denyAll;
514
- _save = _yield$consent$reques.save;
515
-
516
- if (!unmounted) {
517
- setRequest({
518
- vendors: vendors,
519
- acceptAll: function acceptAll() {
520
- _acceptAll();
521
-
522
- setRequest({});
523
- },
524
- denyAll: function denyAll() {
525
- _denyAll();
526
-
527
- setRequest({});
528
- },
529
- save: function save(decisions) {
530
- _save(decisions);
531
-
532
- setRequest({});
533
- }
534
- });
535
- }
362
+ return Atmo;
363
+ }();
364
+ Object.assign(Atmo.prototype, BackboneEvents);
536
365
 
537
- case 8:
538
- case "end":
539
- return _context.stop();
540
- }
541
- }
542
- }, _callee);
543
- }))();
366
+ function getContextValue(updateAtmo, createMediaPlayerHooks) {
367
+ var empty = function empty() {};
544
368
 
545
- return function () {
546
- return unmounted = true;
547
- };
548
- }, [consent]);
549
- return request;
369
+ return {
370
+ updateAtmo: updateAtmo || empty,
371
+ createMediaPlayerHooks: createMediaPlayerHooks || empty
372
+ };
550
373
  }
551
- function useConsentGiven(vendorName) {
552
- var consent = useContext(ConsentContext);
553
374
 
554
- var _useContentElementEdi = useContentElementEditorState(),
555
- isEditable = _useContentElementEdi.isEditable;
556
-
557
- var isStaticPreview = useIsStaticPreview();
558
-
559
- var _useState3 = useState(isEditable || isStaticPreview),
560
- _useState4 = _slicedToArray(_useState3, 2),
561
- consentGiven = _useState4[0],
562
- setConsentGiven = _useState4[1];
375
+ var AtmoContext = createContext(getContextValue());
376
+ function AtmoProvider(_ref) {
377
+ var children = _ref.children;
378
+ var atmoConfig = useRef({});
379
+ useEffect(function () {
380
+ var currentAtmo = atmoConfig.current;
381
+ currentAtmo.pool = PlayerSourceIDMap(media, {
382
+ playerOptions: {
383
+ tagName: 'audio',
384
+ loop: true
385
+ }
386
+ });
387
+ currentAtmo.multiPlayer = new MultiPlayer(currentAtmo.pool, {
388
+ fadeDuration: 500,
389
+ crossFade: true,
390
+ playFromBeginning: false,
391
+ rewindOnChange: true
392
+ });
393
+ currentAtmo.atmo = new Atmo({
394
+ multiPlayer: currentAtmo.multiPlayer,
395
+ backgroundMedia: media
396
+ });
397
+ }, []);
563
398
 
564
- useIsomorphicLayoutEffect(function () {
565
- var unmounted = false;
399
+ var updateAtmo = function updateAtmo(_ref2) {
400
+ var audioFilePermaId = _ref2.audioFilePermaId,
401
+ sources = _ref2.sources;
402
+ var currentAtmo = atmoConfig.current;
566
403
 
567
- _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
568
- var result;
569
- return regenerator.wrap(function _callee2$(_context2) {
570
- while (1) {
571
- switch (_context2.prev = _context2.next) {
572
- case 0:
573
- if (!(!vendorName || isEditable || isStaticPreview)) {
574
- _context2.next = 2;
575
- break;
576
- }
404
+ if (currentAtmo.atmo) {
405
+ currentAtmo.pool.mapSources(audioFilePermaId, sources);
406
+ currentAtmo.atmo.atmoSourceId = audioFilePermaId;
407
+ currentAtmo.atmo.update();
408
+ }
409
+ };
577
410
 
578
- return _context2.abrupt("return");
411
+ var createMediaPlayerHooks = function createMediaPlayerHooks(options) {
412
+ if (atmoConfig.current.atmo) {
413
+ return atmoConfig.current.atmo.createMediaPlayerHooks(options);
414
+ }
415
+ };
579
416
 
580
- case 2:
581
- _context2.next = 4;
582
- return consent.requireAccepted(vendorName);
417
+ var contextValue = useMemo(function () {
418
+ return getContextValue(updateAtmo, createMediaPlayerHooks);
419
+ }, []);
420
+ return /*#__PURE__*/React.createElement(AtmoContext.Provider, {
421
+ value: contextValue
422
+ }, children);
423
+ }
424
+ function useAtmo() {
425
+ return useContext(AtmoContext);
426
+ }
583
427
 
584
- case 4:
585
- result = _context2.sent;
428
+ function PlayerContainer(_ref) {
429
+ var filePermaId = _ref.filePermaId,
430
+ sources = _ref.sources,
431
+ textTrackSources = _ref.textTrackSources,
432
+ type = _ref.type,
433
+ playsInline = _ref.playsInline,
434
+ loop = _ref.loop,
435
+ controls = _ref.controls,
436
+ altText = _ref.altText,
437
+ mediaEventsContextData = _ref.mediaEventsContextData,
438
+ atmoDuringPlayback = _ref.atmoDuringPlayback,
439
+ onSetup = _ref.onSetup,
440
+ onDispose = _ref.onDispose;
441
+ var playerWrapperRef = useRef(null);
442
+ var atmo = useAtmo();
443
+ useEffect(function () {
444
+ var playerWrapper = playerWrapperRef.current;
586
445
 
587
- if (!unmounted && result === 'fulfilled') {
588
- setConsentGiven(true);
589
- }
446
+ if (sources) {
447
+ var player = media.getPlayer(sources, {
448
+ textTrackSources: textTrackSources,
449
+ filePermaId: filePermaId,
450
+ tagName: type,
451
+ playsInline: playsInline,
452
+ loop: loop,
453
+ controls: controls,
454
+ hooks: atmoDuringPlayback ? atmo.createMediaPlayerHooks(atmoDuringPlayback) : {},
455
+ //create hooks only for inline media players
456
+ mediaEventsContextData: mediaEventsContextData,
457
+ altText: altText,
458
+ onRelease: function onRelease() {
459
+ playerWrapper.removeChild(player.el());
460
+ player = null;
590
461
 
591
- case 6:
592
- case "end":
593
- return _context2.stop();
462
+ if (onDispose) {
463
+ onDispose();
594
464
  }
595
465
  }
596
- }, _callee2);
597
- }))();
598
-
599
- return function () {
600
- return unmounted = true;
601
- };
602
- }, [consent, vendorName]);
603
- var giveConsent = useCallback(function () {
604
- return consent.accept(vendorName);
605
- }, [consent, vendorName]);
606
- return [consentGiven, giveConsent];
607
- }
466
+ });
467
+ playerWrapper.appendChild(player.el());
608
468
 
609
- function _extends$3() {
610
- _extends$3 = Object.assign || function (target) {
611
- for (var i = 1; i < arguments.length; i++) {
612
- var source = arguments[i];
469
+ if (onSetup) {
470
+ onSetup(player);
471
+ }
613
472
 
614
- for (var key in source) {
615
- if (Object.prototype.hasOwnProperty.call(source, key)) {
616
- target[key] = source[key];
473
+ return function () {
474
+ // onRelease might already have been called by the pool when
475
+ // it needed to re-use a player.
476
+ if (player) {
477
+ media.releasePlayer(player);
617
478
  }
618
- }
479
+ };
619
480
  }
620
-
621
- return target;
622
- };
623
-
624
- return _extends$3.apply(this, arguments);
481
+ });
482
+ return /*#__PURE__*/React.createElement("div", {
483
+ ref: playerWrapperRef
484
+ });
625
485
  }
626
- var GearIcon = (function (_ref) {
627
- var _ref$styles = _ref.styles,
628
- props = _objectWithoutProperties(_ref, ["styles"]);
629
-
630
- return /*#__PURE__*/React.createElement("svg", _extends$3({
631
- xmlns: "http://www.w3.org/2000/svg",
632
- viewBox: "-3 -3 30 30"
633
- }, props), /*#__PURE__*/React.createElement("path", {
634
- d: "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0014 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
635
- }));
636
- });
637
-
638
- function Bar(_ref) {
639
- var _ref$defaultExpanded = _ref.defaultExpanded,
640
- defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded;
641
486
 
642
- var _useConsentRequested = useConsentRequested(),
643
- vendors = _useConsentRequested.vendors,
644
- acceptAll = _useConsentRequested.acceptAll,
645
- denyAll = _useConsentRequested.denyAll,
646
- save = _useConsentRequested.save;
487
+ PlayerContainer.defaultProps = {
488
+ textTrackSources: []
489
+ }; // This function assumes that that the parameters are arrays of
490
+ // objects containing only skalar values. It is not a full deep
491
+ // equality check, but suffices for the use case.
647
492
 
648
- var _useState = useState(defaultExpanded),
649
- _useState2 = _slicedToArray(_useState, 2),
650
- expanded = _useState2[0],
651
- setExpanded = _useState2[1];
493
+ function deepEqual(a, b) {
494
+ if (a.length !== b.length) {
495
+ return false;
496
+ }
652
497
 
653
- var _useI18n = useI18n(),
654
- t = _useI18n.t;
498
+ for (var i = 0; i < a.length; i++) {
499
+ var aItem = a[i];
500
+ var bItem = b[i];
655
501
 
656
- var locale = useLocale();
657
- var privacyLinkUrl = useLegalInfo().privacy.url;
502
+ if (Object.keys(aItem).length !== Object.keys(bItem).length) {
503
+ return false;
504
+ }
658
505
 
659
- if (vendors) {
660
- return /*#__PURE__*/React.createElement("div", {
661
- className: styles$1.bar
662
- }, renderText({
663
- privacyLinkUrl: privacyLinkUrl,
664
- t: t,
665
- locale: locale,
666
- vendors: vendors
667
- }), !expanded && /*#__PURE__*/React.createElement("button", {
668
- className: styles$1.configureButton,
669
- onClick: function onClick() {
670
- return setExpanded(true);
506
+ for (var key in aItem) {
507
+ if (aItem[key] !== bItem[key]) {
508
+ return false;
671
509
  }
672
- }, /*#__PURE__*/React.createElement(GearIcon, {
673
- width: 15,
674
- height: 15
675
- }), t('pageflow_scrolled.public.consent_configure')), expanded && /*#__PURE__*/React.createElement(VendorsBox, {
676
- vendors: vendors,
677
- save: save,
678
- t: t,
679
- defaultExpanded: defaultExpanded
680
- }), /*#__PURE__*/React.createElement("div", {
681
- className: styles$1.decisionButtons
682
- }, /*#__PURE__*/React.createElement("button", {
683
- className: styles$1.button,
684
- onClick: denyAll
685
- }, t('pageflow_scrolled.public.consent_deny_all')), /*#__PURE__*/React.createElement("button", {
686
- className: styles$1.acceptAllButton,
687
- onClick: acceptAll
688
- }, t('pageflow_scrolled.public.consent_accept_all'))));
510
+ }
689
511
  }
690
512
 
691
- return null;
513
+ return true;
692
514
  }
693
515
 
694
- function renderText(_ref2) {
695
- var privacyLinkUrl = _ref2.privacyLinkUrl,
696
- t = _ref2.t,
697
- locale = _ref2.locale,
698
- vendors = _ref2.vendors;
699
- var vendorNames = vendors.map(function (vendor) {
700
- return vendor.name;
701
- }).join(',');
702
- var text = t('pageflow_scrolled.public.consent_prompt_html', {
703
- privacyLinkUrl: "".concat(privacyLinkUrl, "?lang=").concat(locale, "&vendors=").concat(vendorNames, "#consent")
704
- });
705
- return /*#__PURE__*/React.createElement("div", {
706
- className: styles$1.text,
707
- dangerouslySetInnerHTML: {
708
- __html: text
709
- }
710
- });
516
+ function areEqual(prevProps, nextProps) {
517
+ return prevProps.type === nextProps.type && prevProps.playsInline === nextProps.playsInline && prevProps.loop === nextProps.loop && prevProps.controls === nextProps.controls && prevProps.altText === nextProps.altText && prevProps.atmoDuringPlayback === nextProps.atmoDuringPlayback && deepEqual(prevProps.sources, nextProps.sources) && deepEqual(prevProps.textTrackSources, nextProps.textTrackSources);
711
518
  }
712
519
 
713
- var styles$3 = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
520
+ var PlayerContainer$1 = React.memo(PlayerContainer, areEqual);
714
521
 
715
- function _extends$4() {
716
- _extends$4 = Object.assign || function (target) {
717
- for (var i = 1; i < arguments.length; i++) {
718
- var source = arguments[i];
719
-
720
- for (var key in source) {
721
- if (Object.prototype.hasOwnProperty.call(source, key)) {
722
- target[key] = source[key];
723
- }
724
- }
725
- }
726
-
727
- return target;
728
- };
729
-
730
- return _extends$4.apply(this, arguments);
731
- }
732
- var OptInIcon = (function (_ref) {
733
- var _ref$styles = _ref.styles,
734
- props = _objectWithoutProperties(_ref, ["styles"]);
735
-
736
- return /*#__PURE__*/React.createElement("svg", _extends$4({
737
- xmlns: "http://www.w3.org/2000/svg",
738
- viewBox: "0 0 131 95"
739
- }, props), /*#__PURE__*/React.createElement("path", {
740
- d: "M32.01.01C46.678-.01 61.345.009 76.014.002 83.007.007 90-.009 96.99.011c.015 9.157.014 18.316 0 27.474-1.357.073-2.706.259-4.048.478-.01-7.986 0-15.975-.004-23.961-18.958-.003-37.917-.003-56.875 0l-.001 28.916c.01 2.37-.022 4.742.016 7.113 6.173-.025 12.348-.006 18.52-.011 5.804.01 11.609-.022 17.41.013-1 1.28-2.001 2.56-2.844 3.948-12.372.024-24.748-.011-37.12.019-.06-.365-.03-.735-.034-1.1V17.497c.007-5.83-.024-11.659.001-17.486zm17.617 8.004a5.999 5.999 0 014.359 1.49c1.273 1.116 2.048 2.8 2.013 4.498.042 1.806-.845 3.59-2.263 4.702-1.271 1.013-2.975 1.483-4.583 1.228a5.88 5.88 0 01-3.479-1.785c-1.44-1.459-2.013-3.695-1.475-5.67.6-2.448 2.905-4.346 5.428-4.463zm22.106 7.758c.181-.258.332-.54.547-.772 2.325 3.868 4.683 7.717 7.02 11.578.891 1.503 1.85 2.973 2.7 4.5a35.062 35.062 0 00-5.646 3.779c-.154.162-.387.14-.592.143-10.585-.014-21.174.014-31.762-.015.088-.228.308-.367.47-.542 3.79-3.745 7.58-7.484 11.365-11.232.098-.085.217-.265.366-.15 2.65 1.308 5.3 2.62 7.951 3.928 2.545-3.73 5.052-7.48 7.581-11.217zM0 21.042c.256-.058.517-.039.775-.039 9.175.007 18.349-.007 27.523.007l.064.076c.017 1.308-.012 2.618.015 3.927-5.416.038-10.834.001-16.252.018-.01 7.981-.013 15.962.002 23.944 11.917.013 23.834.013 35.752 0 .022-.674-.002-1.35.012-2.023 4.034.01 8.07.01 12.105 0 .002 11.349.01 22.698-.003 34.048-12.082-.025-24.163-.003-36.244-.01-7.911.007-15.823-.015-23.734.01-.02-19.988.01-39.975-.015-59.959zm3.435 4.043c-.904.236-1.577 1.152-1.482 2.086.079.997.994 1.837 1.999 1.82 1.367.002 2.736.015 4.105-.007 1.04-.036 1.928-.995 1.878-2.03-.003-.996-.867-1.896-1.868-1.925-1.294-.01-2.585.002-3.878-.005-.252.004-.51-.013-.754.061zm-.219 8.067c-.815.317-1.373 1.203-1.256 2.076.1.938.94 1.724 1.89 1.756 1.25.016 2.5-.002 3.752.008.439.008.9-.025 1.288-.246.73-.39 1.173-1.257 1.019-2.075-.136-.889-.95-1.62-1.852-1.645-1.328-.007-2.653.002-3.98-.004-.29-.005-.589.016-.86.13zm.219 7.923c-.762.2-1.372.884-1.471 1.665-.128.844.384 1.718 1.158 2.064.403.192.859.19 1.295.181 1.217-.008 2.434.011 3.651-.008 1.032-.047 1.92-.998 1.868-2.034-.007-.994-.87-1.891-1.87-1.922-1.293-.011-2.584.002-3.877-.006-.252-.001-.51-.008-.754.06zm-.01 8.003c-1.018.249-1.706 1.392-1.413 2.403.21.868 1.057 1.512 1.95 1.497 1.364-.003 2.728.01 4.09-.006 1.02-.034 1.906-.958 1.883-1.975.026-1.017-.858-1.958-1.88-1.981-1.252-.011-2.503.002-3.754-.003-.292-.004-.591-.018-.877.065zm48.107 0c-1.117.272-1.79 1.607-1.323 2.66a2.027 2.027 0 001.86 1.238c1.326.003 2.652.003 3.977 0 1.056.025 2.032-.916 1.996-1.978.045-1.022-.86-1.96-1.88-1.984-1.252-.008-2.503.003-3.754-.002-.293 0-.591-.017-.876.066zM12.13 53.016c-.015 7.981-.012 15.961-.001 23.943 11.917.003 23.836.003 35.753 0 .011-7.982.014-15.962-.001-23.943a14203.52 14203.52 0 00-35.75 0zm-8.694 4.05c-.797.208-1.422.943-1.482 1.764-.112 1.07.805 2.103 1.883 2.137 1.371.014 2.743.003 4.113.006 1.035.01 1.977-.89 1.986-1.928.054-1.033-.83-2.003-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289 0-.584-.014-.867.064zm48.108.003c-.951.235-1.623 1.244-1.456 2.208.123.947 1.016 1.71 1.972 1.696h3.997c1.031.013 1.994-.886 1.984-1.928.071-1.036-.829-2.011-1.866-2.037-1.254-.01-2.51.003-3.764-.005-.29 0-.586-.014-.867.066zM3.425 65.066c-.955.242-1.634 1.262-1.45 2.234.14.9.957 1.638 1.874 1.662 1.364.011 2.727 0 4.09.006 1.06.022 2.023-.925 1.997-1.984.027-1.02-.86-1.952-1.882-1.98-1.211-.012-2.426.002-3.637-.004-.332-.001-.669-.021-.992.066zm48.107.003c-.927.231-1.584 1.195-1.456 2.14.093.935.935 1.723 1.879 1.752 1.365.011 2.73 0 4.093.006 1.055.016 2.043-.917 1.994-1.984.045-1.023-.86-1.958-1.88-1.981-1.252-.011-2.502.002-3.753-.003-.294-.003-.592-.012-.877.07zM3.435 73.057c-.797.204-1.422.94-1.482 1.76-.111 1.07.802 2.112 1.883 2.138 1.371.013 2.743.002 4.113.005 1.035.017 1.977-.891 1.986-1.928.054-1.033-.835-1.997-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289.001-.584-.01-.867.067zm48.108 0c-.887.22-1.543 1.118-1.476 2.029.035.974.892 1.837 1.874 1.869 1.37.013 2.742.002 4.114.005 1.033.017 1.993-.883 1.985-1.925.071-1.039-.833-2.006-1.868-2.04-1.254-.01-2.509.003-3.763-.005-.289.001-.585-.01-.866.067zM96.83 31.045c6.813-.36 13.73 1.456 19.431 5.154a32.396 32.396 0 019.482 9.342 31.527 31.527 0 015.043 13.773c.625 5.36-.123 10.88-2.225 15.867-1.766 4.254-4.499 8.108-7.91 11.243a32.605 32.605 0 01-11.584 6.844 33.066 33.066 0 01-15.656 1.337 32.59 32.59 0 01-13.329-5.235c-5.2-3.514-9.323-8.551-11.692-14.307a31.532 31.532 0 01-2.327-14.038 31.433 31.433 0 013.839-13.243 32.232 32.232 0 018.329-9.799c5.259-4.156 11.865-6.62 18.6-6.938zm15.6 12.011c-8.543.979-17.086 1.933-25.627 2.92-.013 8.152.006 16.308-.008 24.462-2.325-.848-5.015-.792-7.24.318-1.33.665-2.493 1.763-2.997 3.169-.503 1.356-.289 2.934.528 4.128.752 1.154 1.947 1.978 3.235 2.465 1.48.569 3.115.675 4.68.452 1.888-.295 3.742-1.222 4.862-2.784.67-.936.965-2.102.894-3.237-.014-7.054.008-14.105-.01-21.158 1.976-.282 3.965-.458 5.946-.7 4.944-.56 9.885-1.124 14.827-1.682V67.42c-1.677-.563-3.506-.755-5.247-.362-1.764.38-3.483 1.32-4.479 2.84a4.618 4.618 0 00-.637 3.729c.32 1.196 1.12 2.243 2.139 2.959 1.533 1.101 3.474 1.576 5.355 1.489 2.036-.083 4.111-.843 5.498-2.353a5.078 5.078 0 001.329-3.83c-.007-6.755-.002-13.51-.005-20.265.058-2.962-.002-5.924-.002-8.884-1.018.053-2.03.212-3.04.313z"
741
- }));
742
- });
743
-
744
- /**
745
- * Render opt in prompt instead of children if third party consent
746
- * cookie has been configured in theme options and user has not given
747
- * consent for passed provider.
748
- *
749
- * @param {Object} props
750
- * @param {string} props.providerName -
751
- * Only render children if user has given consent for this provider.
752
- * @param {React.ReactElement} props.children -
753
- * Children to conditionally render.
754
- * @param {function} [props.wrapper] -
755
- * Function that receives children to allow wrapping opt-in prompt
756
- * in custom elements.
757
- * @param {boolean} [props.icon=true] -
758
- * Allow hiding the icon in the opt-in prompt.
759
- *
760
- * @name ThirdPartyOptIn
761
- */
762
-
763
- function OptIn(_ref) {
764
- var children = _ref.children,
765
- providerName = _ref.providerName,
766
- wrapper = _ref.wrapper,
767
- icon = _ref.icon;
768
-
769
- var _useI18n = useI18n(),
770
- t = _useI18n.t;
771
-
772
- var cookieMessage = t("pageflow_scrolled.public.third_party_consent.opt_in_prompt.".concat(providerName));
773
-
774
- var _useState = useState(false),
775
- _useState2 = _slicedToArray(_useState, 2),
776
- consentedHere = _useState2[0],
777
- setConsentedHere = _useState2[1];
778
-
779
- var _useConsentGiven = useConsentGiven(providerName),
780
- _useConsentGiven2 = _slicedToArray(_useConsentGiven, 2),
781
- consentGiven = _useConsentGiven2[0],
782
- giveConsent = _useConsentGiven2[1];
783
-
784
- if (consentGiven || !providerName) {
785
- return typeof children === 'function' ? children({
786
- consentedHere: consentedHere
787
- }) : children;
788
- }
789
-
790
- function accept() {
791
- giveConsent(providerName);
792
- setConsentedHere(true);
793
- }
794
-
795
- return wrapper( /*#__PURE__*/React.createElement("div", {
796
- className: styles$3.optIn
797
- }, icon && /*#__PURE__*/React.createElement("div", {
798
- className: styles$3.optInIcon
799
- }, /*#__PURE__*/React.createElement(OptInIcon, null)), /*#__PURE__*/React.createElement("div", {
800
- className: styles$3.optInMessage
801
- }, cookieMessage), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
802
- className: styles$3.optInButton,
803
- onClick: accept
804
- }, t('pageflow_scrolled.public.third_party_consent.confirm')))));
805
- }
806
- OptIn.defaultProps = {
807
- icon: true,
808
- wrapper: function wrapper(children) {
809
- return children;
810
- }
811
- };
812
-
813
- var styles$4 = {"optOut":"OptOutInfo-module_optOut__2Q3d5","tooltip":"OptOutInfo-module_tooltip__2bpU0","icon":"OptOutInfo-module_icon__1kL6Q utils-module_unstyledButton__3rgne","full":"OptOutInfo-module_full__s_Ono"};
814
-
815
- /**
816
- * Display info tooltip with a link to opt out of third party
817
- * embeds. Opt out url needs to be configured in theme options.
818
- *
819
- * @param {Object} props
820
- * @param {string} props.providerName -
821
- * Only display if user has given consent for this provider.
822
- * @param {string} props.contentElementPosition -
823
- * Position setting of parent content element. Used to correctly place
824
- * tooltip when content element uses full width.
825
- * @param {boolean} [hide] -
826
- * Temporarily hide the tooltip, e.g. while the embed is playing
827
- *
828
- * @name ThirdPartyOptOutInfo
829
- */
830
-
831
- function OptOutInfo(_ref) {
832
- var _theme$options$thirdP;
833
-
834
- var providerName = _ref.providerName,
835
- hide = _ref.hide,
836
- contentElementPosition = _ref.contentElementPosition;
837
-
838
- var _useI18n = useI18n(),
839
- t = _useI18n.t;
840
-
841
- var theme = useTheme();
842
- var optOutUrl = (_theme$options$thirdP = theme.options.thirdPartyConsent) === null || _theme$options$thirdP === void 0 ? void 0 : _theme$options$thirdP.optOutUrl;
843
-
844
- var _useConsentGiven = useConsentGiven(providerName),
845
- _useConsentGiven2 = _slicedToArray(_useConsentGiven, 1),
846
- consentGiven = _useConsentGiven2[0];
847
-
848
- if (!optOutUrl || !consentGiven) {
849
- return null;
850
- }
851
-
852
- var linkText = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt_link');
853
- var linkHtml = "<a href=\"".concat(optOutUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(linkText, "</a>");
854
- var html = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt', {
855
- link: linkHtml
856
- });
857
- return /*#__PURE__*/React.createElement("div", {
858
- className: classNames(styles$4.optOut, styles$4[contentElementPosition]),
859
- style: hide ? {
860
- opacity: 0,
861
- visibility: 'hidden'
862
- } : undefined
863
- }, /*#__PURE__*/React.createElement("button", {
864
- className: styles$4.icon
865
- }, /*#__PURE__*/React.createElement(information, null)), /*#__PURE__*/React.createElement("div", {
866
- className: styles$4.tooltip
867
- }, /*#__PURE__*/React.createElement("div", {
868
- dangerouslySetInnerHTML: {
869
- __html: html
870
- }
871
- })));
872
- }
873
-
874
- function registerVendors(_ref) {
875
- var contentElementTypes = _ref.contentElementTypes,
876
- seed = _ref.seed,
877
- consent = _ref.consent,
878
- cookieName = _ref.cookieName;
879
- var options = seed.config.theme.options.thirdPartyConsent;
880
- var locale = seed.collections.entries[0].locale;
881
- cookieName = cookieName || (options === null || options === void 0 ? void 0 : options.cookieName);
882
- contentElementTypes.consentVendors({
883
- contentElements: seed.collections.contentElements,
884
- t: function t(key, options) {
885
- return I18n.t(key, _objectSpread2(_objectSpread2({}, options), {}, {
886
- locale: locale
887
- }));
888
- }
889
- }).forEach(function (vendor) {
890
- var _options$cookieProvid;
891
-
892
- consent.registerVendor(vendor.name, {
893
- displayName: vendor.displayName,
894
- description: vendor.description,
895
- paradigm: cookieName ? vendor.paradigm || 'opt-in' : 'skip',
896
- cookieName: cookieName,
897
- cookieKey: options === null || options === void 0 ? void 0 : (_options$cookieProvid = options.cookieProviderNameMapping) === null || _options$cookieProvid === void 0 ? void 0 : _options$cookieProvid[vendor.name],
898
- cookieDomain: options === null || options === void 0 ? void 0 : options.cookieDomain
899
- });
900
- });
901
- consent.closeVendorRegistration();
902
- }
903
-
904
- var SectionLifecycleContext = createContext();
905
- var SectionLifecycleProvider = createScrollPositionLifecycleProvider(SectionLifecycleContext);
906
- var useSectionLifecycle = createScrollPositionLifecycleHook(SectionLifecycleContext);
907
-
908
- var Atmo = /*#__PURE__*/function () {
909
- function Atmo(_ref) {
910
- var _this = this;
911
-
912
- var atmoSourceId = _ref.atmoSourceId,
913
- multiPlayer = _ref.multiPlayer,
914
- backgroundMedia = _ref.backgroundMedia;
915
-
916
- _classCallCheck(this, Atmo);
917
-
918
- this.multiPlayer = multiPlayer;
919
- this.atmoSourceId = atmoSourceId;
920
- this.backgroundMedia = backgroundMedia;
921
- this.backgroundMedia.on('change:muted', function () {
922
- _this.update();
923
- });
924
- documentHiddenState(function (hiddenState) {
925
- if (hiddenState === 'hidden') {
926
- _this.multiPlayer.fadeOutIfPlaying();
927
- } else {
928
- _this.update();
929
- }
930
- });
931
- this.listenTo(this.multiPlayer, 'playfailed', function () {
932
- backgroundMedia.mute(true);
933
- });
934
- }
935
-
936
- _createClass(Atmo, [{
937
- key: "disable",
938
- value: function disable() {
939
- this.disabled = true;
940
- this.multiPlayer.fadeOutAndPause();
941
- events.trigger('atmo:disabled');
942
- }
943
- }, {
944
- key: "enable",
945
- value: function enable() {
946
- this.disabled = false;
947
- this.update();
948
- events.trigger('atmo:enabled');
949
- }
950
- }, {
951
- key: "pause",
952
- value: function pause() {
953
- if (browser.has('volume control support')) {
954
- return this.multiPlayer.fadeOutAndPause();
955
- } else {
956
- this.multiPlayer.pause();
957
- }
958
- }
959
- }, {
960
- key: "turnDown",
961
- value: function turnDown() {
962
- if (browser.has('volume control support')) {
963
- return this.multiPlayer.changeVolumeFactor(0.2);
964
- } else {
965
- this.multiPlayer.pause();
966
- }
967
- }
968
- }, {
969
- key: "resume",
970
- value: function resume() {
971
- if (this.multiPlayer.paused()) {
972
- if (this.disabled || this.backgroundMedia.muted) {
973
- return Promise.resolve();
974
- } else {
975
- return this.multiPlayer.resumeAndFadeIn();
976
- }
977
- } else {
978
- return this.multiPlayer.changeVolumeFactor(1);
979
- }
980
- }
981
- }, {
982
- key: "update",
983
- value: function update() {
984
- if (!this.disabled) {
985
- if (this.backgroundMedia.muted) {
986
- this.multiPlayer.fadeOutAndPause();
987
- } else {
988
- this.multiPlayer.fadeTo(this.atmoSourceId);
989
- }
990
- }
991
- }
992
- }, {
993
- key: "createMediaPlayerHooks",
994
- value: function createMediaPlayerHooks(atmoDuringPlayback) {
995
- var atmo = this;
996
- return {
997
- before: function before() {
998
- if (atmoDuringPlayback === 'mute') {
999
- atmo.pause();
1000
- } else if (atmoDuringPlayback === 'turnDown') {
1001
- atmo.turnDown();
1002
- }
1003
- },
1004
- after: function after() {
1005
- atmo.resume();
1006
- }
1007
- };
1008
- }
1009
- }]);
1010
-
1011
- return Atmo;
1012
- }();
1013
- Object.assign(Atmo.prototype, BackboneEvents);
1014
-
1015
- function getContextValue(updateAtmo, createMediaPlayerHooks) {
1016
- var empty = function empty() {};
1017
-
1018
- return {
1019
- updateAtmo: updateAtmo || empty,
1020
- createMediaPlayerHooks: createMediaPlayerHooks || empty
1021
- };
1022
- }
1023
-
1024
- var AtmoContext = createContext(getContextValue());
1025
- function AtmoProvider(_ref) {
1026
- var children = _ref.children;
1027
- var atmoConfig = useRef({});
1028
- useEffect(function () {
1029
- var currentAtmo = atmoConfig.current;
1030
- currentAtmo.pool = PlayerSourceIDMap(media, {
1031
- playerOptions: {
1032
- tagName: 'audio',
1033
- loop: true
1034
- }
1035
- });
1036
- currentAtmo.multiPlayer = new MultiPlayer(currentAtmo.pool, {
1037
- fadeDuration: 500,
1038
- crossFade: true,
1039
- playFromBeginning: false,
1040
- rewindOnChange: true
1041
- });
1042
- currentAtmo.atmo = new Atmo({
1043
- multiPlayer: currentAtmo.multiPlayer,
1044
- backgroundMedia: media
1045
- });
1046
- }, []);
1047
-
1048
- var updateAtmo = function updateAtmo(_ref2) {
1049
- var audioFilePermaId = _ref2.audioFilePermaId,
1050
- sources = _ref2.sources;
1051
- var currentAtmo = atmoConfig.current;
1052
-
1053
- if (currentAtmo.atmo) {
1054
- currentAtmo.pool.mapSources(audioFilePermaId, sources);
1055
- currentAtmo.atmo.atmoSourceId = audioFilePermaId;
1056
- currentAtmo.atmo.update();
1057
- }
1058
- };
1059
-
1060
- var createMediaPlayerHooks = function createMediaPlayerHooks(options) {
1061
- if (atmoConfig.current.atmo) {
1062
- return atmoConfig.current.atmo.createMediaPlayerHooks(options);
1063
- }
1064
- };
1065
-
1066
- var contextValue = useMemo(function () {
1067
- return getContextValue(updateAtmo, createMediaPlayerHooks);
1068
- }, []);
1069
- return /*#__PURE__*/React.createElement(AtmoContext.Provider, {
1070
- value: contextValue
1071
- }, children);
1072
- }
1073
- function useAtmo() {
1074
- return useContext(AtmoContext);
1075
- }
1076
-
1077
- function PlayerContainer(_ref) {
1078
- var filePermaId = _ref.filePermaId,
1079
- sources = _ref.sources,
1080
- textTrackSources = _ref.textTrackSources,
1081
- type = _ref.type,
1082
- playsInline = _ref.playsInline,
1083
- loop = _ref.loop,
1084
- controls = _ref.controls,
1085
- altText = _ref.altText,
1086
- mediaEventsContextData = _ref.mediaEventsContextData,
1087
- atmoDuringPlayback = _ref.atmoDuringPlayback,
1088
- onSetup = _ref.onSetup,
1089
- onDispose = _ref.onDispose;
1090
- var playerWrapperRef = useRef(null);
1091
- var atmo = useAtmo();
1092
- useEffect(function () {
1093
- var playerWrapper = playerWrapperRef.current;
1094
-
1095
- if (sources) {
1096
- var player = media.getPlayer(sources, {
1097
- textTrackSources: textTrackSources,
1098
- filePermaId: filePermaId,
1099
- tagName: type,
1100
- playsInline: playsInline,
1101
- loop: loop,
1102
- controls: controls,
1103
- hooks: atmoDuringPlayback ? atmo.createMediaPlayerHooks(atmoDuringPlayback) : {},
1104
- //create hooks only for inline media players
1105
- mediaEventsContextData: mediaEventsContextData,
1106
- altText: altText,
1107
- onRelease: function onRelease() {
1108
- playerWrapper.removeChild(player.el());
1109
- player = null;
1110
-
1111
- if (onDispose) {
1112
- onDispose();
1113
- }
1114
- }
1115
- });
1116
- playerWrapper.appendChild(player.el());
1117
-
1118
- if (onSetup) {
1119
- onSetup(player);
1120
- }
1121
-
1122
- return function () {
1123
- // onRelease might already have been called by the pool when
1124
- // it needed to re-use a player.
1125
- if (player) {
1126
- media.releasePlayer(player);
1127
- }
1128
- };
1129
- }
1130
- });
1131
- return /*#__PURE__*/React.createElement("div", {
1132
- ref: playerWrapperRef
1133
- });
1134
- }
1135
-
1136
- PlayerContainer.defaultProps = {
1137
- textTrackSources: []
1138
- }; // This function assumes that that the parameters are arrays of
1139
- // objects containing only skalar values. It is not a full deep
1140
- // equality check, but suffices for the use case.
1141
-
1142
- function deepEqual(a, b) {
1143
- if (a.length !== b.length) {
1144
- return false;
1145
- }
1146
-
1147
- for (var i = 0; i < a.length; i++) {
1148
- var aItem = a[i];
1149
- var bItem = b[i];
1150
-
1151
- if (Object.keys(aItem).length !== Object.keys(bItem).length) {
1152
- return false;
1153
- }
1154
-
1155
- for (var key in aItem) {
1156
- if (aItem[key] !== bItem[key]) {
1157
- return false;
1158
- }
1159
- }
1160
- }
1161
-
1162
- return true;
1163
- }
1164
-
1165
- function areEqual(prevProps, nextProps) {
1166
- return prevProps.type === nextProps.type && prevProps.playsInline === nextProps.playsInline && prevProps.loop === nextProps.loop && prevProps.controls === nextProps.controls && prevProps.altText === nextProps.altText && prevProps.atmoDuringPlayback === nextProps.atmoDuringPlayback && deepEqual(prevProps.sources, nextProps.sources) && deepEqual(prevProps.textTrackSources, nextProps.textTrackSources);
1167
- }
1168
-
1169
- var PlayerContainer$1 = React.memo(PlayerContainer, areEqual);
1170
-
1171
- var ScrollToSectionContext = React.createContext(function () {});
522
+ var ScrollToSectionContext = React.createContext(function () {});
1172
523
 
1173
524
  function watchPlayer (player, actions) {
1174
525
  player.on('loadedmetadata', function () {
@@ -1353,7 +704,7 @@ function getTextTrackSources(textTrackFiles, textTracksDisabled) {
1353
704
 
1354
705
  var textTrackStyles = {"inset":"textTracks-module_inset__K7DIL"};
1355
706
 
1356
- var styles$5 = {"wrapper":"MediaPlayer-module_wrapper__1cSGR","cover":"MediaPlayer-module_cover__2wGez"};
707
+ var styles$1 = {"wrapper":"MediaPlayer-module_wrapper__1cSGR","cover":"MediaPlayer-module_cover__2wGez"};
1357
708
 
1358
709
  var PLAY = 'MEDIA_PLAY';
1359
710
  var PLAYING = 'MEDIA_PLAYING';
@@ -1814,6 +1165,10 @@ function playerStateReducer(state, action) {
1814
1165
  });
1815
1166
 
1816
1167
  case USER_INTERACTION:
1168
+ if (!state.userIdle) {
1169
+ return state;
1170
+ }
1171
+
1817
1172
  return _objectSpread2(_objectSpread2({}, state), {}, {
1818
1173
  userIdle: false
1819
1174
  });
@@ -1861,7 +1216,7 @@ function MediaPlayer(props) {
1861
1216
  var isStaticPreview = useIsStaticPreview();
1862
1217
  var load = props.load === 'auto' && isStaticPreview ? 'poster' : props.load;
1863
1218
  return /*#__PURE__*/React.createElement("div", {
1864
- className: classNames(styles$5.wrapper, styles$5[props.fit], _defineProperty({}, textTrackStyles.inset, props.textTracksInset))
1219
+ className: classNames(styles$1.wrapper, styles$1[props.fit], _defineProperty({}, textTrackStyles.inset, props.textTracksInset))
1865
1220
  }, load === 'auto' && /*#__PURE__*/React.createElement(PreparedMediaPlayer, props), load !== 'none' && /*#__PURE__*/React.createElement(Poster, {
1866
1221
  imageUrl: props.posterImageUrl,
1867
1222
  objectPosition: props.objectPosition,
@@ -2100,6 +1455,8 @@ function addDisplayLabel(textTrackFile, t) {
2100
1455
  });
2101
1456
  }
2102
1457
 
1458
+ var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
1459
+
2103
1460
  function usePrevious(value) {
2104
1461
  var ref = useRef();
2105
1462
  useEffect(function () {
@@ -2205,7 +1562,7 @@ function AudioStructuredData(_ref) {
2205
1562
  });
2206
1563
  }
2207
1564
 
2208
- var styles$6 = {"spaceForTextTracks":"AudioPlayer-module_spaceForTextTracks__169MK","spaceForTextTracksActive":"AudioPlayer-module_spaceForTextTracksActive__99m7R"};
1565
+ var styles$2 = {"spaceForTextTracks":"AudioPlayer-module_spaceForTextTracks__169MK","spaceForTextTracksActive":"AudioPlayer-module_spaceForTextTracksActive__99m7R"};
2209
1566
 
2210
1567
  /**
2211
1568
  * Render audio file in MediaPlayer.
@@ -2230,7 +1587,7 @@ function AudioPlayer(_ref) {
2230
1587
 
2231
1588
  if (audioFile && audioFile.isReady) {
2232
1589
  return /*#__PURE__*/React.createElement("div", {
2233
- className: classNames(styles$6.spaceForTextTracks, _defineProperty({}, styles$6.spaceForTextTracksActive, !posterImageFile && textTracks.files.length))
1590
+ className: classNames(styles$2.spaceForTextTracks, _defineProperty({}, styles$2.spaceForTextTracksActive, !posterImageFile && textTracks.files.length))
2234
1591
  }, /*#__PURE__*/React.createElement(MediaPlayer, Object.assign({
2235
1592
  type: 'audio',
2236
1593
  textTracks: textTracks,
@@ -2310,7 +1667,7 @@ function SectionAtmo(props) {
2310
1667
  return null;
2311
1668
  }
2312
1669
 
2313
- var styles$7 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","paddingBottom":"Foreground-module_paddingBottom__3OtY4"};
1670
+ var styles$3 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","paddingBottom":"Foreground-module_paddingBottom__3OtY4"};
2314
1671
 
2315
1672
  var ForcePaddingContext = createContext(false);
2316
1673
  function Foreground(props) {
@@ -2324,7 +1681,7 @@ function Foreground(props) {
2324
1681
  }
2325
1682
 
2326
1683
  function className(props, forcePadding) {
2327
- return classNames(styles$7.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$7.paddingBottom, props.paddingBottom || forcePadding), styles$7["".concat(props.heightMode, "Height")]);
1684
+ return classNames(styles$3.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$3.paddingBottom, props.paddingBottom || forcePadding), styles$3["".concat(props.heightMode, "Height")]);
2328
1685
  }
2329
1686
 
2330
1687
  /**
@@ -2472,7 +1829,7 @@ var api = {
2472
1829
  // file with an empty one, but found out that extracting the import
2473
1830
  // to a separate file apparently is enough.
2474
1831
  function importComponents() {
2475
- return import('./components-b3160dd7.js');
1832
+ return import('./components-4a09bfa3.js');
2476
1833
  }
2477
1834
 
2478
1835
  var components = {};
@@ -2509,12 +1866,14 @@ function withInlineEditingAlternative(name, Component) {
2509
1866
  var ContentElementAttributesContext = createContext({});
2510
1867
  function ContentElementAttributesProvider(_ref) {
2511
1868
  var id = _ref.id,
1869
+ width = _ref.width,
2512
1870
  children = _ref.children;
2513
1871
  var attributes = useMemo(function () {
2514
1872
  return {
2515
- contentElementId: id
1873
+ contentElementId: id,
1874
+ width: width
2516
1875
  };
2517
- }, [id]);
1876
+ }, [id, width]);
2518
1877
  return /*#__PURE__*/React.createElement(ContentElementAttributesContext.Provider, {
2519
1878
  value: attributes
2520
1879
  }, children);
@@ -2575,22 +1934,35 @@ function useContentElementLifecycle(options) {
2575
1934
  return result;
2576
1935
  }
2577
1936
 
2578
- var styles$8 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
1937
+ var widths = {
1938
+ xxs: -3,
1939
+ xs: -2,
1940
+ sm: -1,
1941
+ md: 0,
1942
+ lg: 1,
1943
+ xl: 2,
1944
+ full: 3
1945
+ };
1946
+ function widthName(width) {
1947
+ return Object.keys(widths)[(width || 0) + 3];
1948
+ }
1949
+
1950
+ var styles$4 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
2579
1951
 
2580
1952
  function ContentElementMargin(_ref) {
2581
- var position = _ref.position,
1953
+ var width = _ref.width,
2582
1954
  children = _ref.children;
2583
1955
 
2584
- if (position === 'full') {
1956
+ if (width === widths.full) {
2585
1957
  return children;
2586
1958
  }
2587
1959
 
2588
1960
  return /*#__PURE__*/React.createElement("div", {
2589
- className: styles$8.wrapper
1961
+ className: styles$4.wrapper
2590
1962
  }, children);
2591
1963
  }
2592
1964
 
2593
- var styles$9 = {"missing":"ContentElement-module_missing__2_1j9"};
1965
+ var styles$5 = {"missing":"ContentElement-module_missing__2_1j9"};
2594
1966
 
2595
1967
  var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
2596
1968
  _inherits(ContentElementErrorBoundary, _React$Component);
@@ -2614,7 +1986,7 @@ var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
2614
1986
  value: function render() {
2615
1987
  if (this.state.hasError) {
2616
1988
  return /*#__PURE__*/React.createElement("div", {
2617
- className: styles$9.missing
1989
+ className: styles$5.missing
2618
1990
  }, "Error rendering element of type \"", this.props.type, "\"");
2619
1991
  }
2620
1992
 
@@ -2637,21 +2009,24 @@ var ContentElement = withInlineEditingDecorator('ContentElementDecorator', funct
2637
2009
 
2638
2010
  if (Component) {
2639
2011
  return /*#__PURE__*/React.createElement(ContentElementAttributesProvider, {
2640
- id: props.id
2012
+ id: props.id,
2013
+ width: props.width
2641
2014
  }, /*#__PURE__*/React.createElement(ContentElementLifecycleProvider, {
2642
2015
  type: props.type
2643
2016
  }, /*#__PURE__*/React.createElement(ContentElementMargin, {
2644
- position: props.itemProps.position
2017
+ width: props.width
2645
2018
  }, /*#__PURE__*/React.createElement(ContentElementErrorBoundary, {
2646
2019
  type: props.type
2647
2020
  }, /*#__PURE__*/React.createElement(Component, {
2648
2021
  sectionProps: props.sectionProps,
2022
+ customMargin: props.customMargin,
2649
2023
  configuration: props.itemProps,
2024
+ contentElementWidth: props.width,
2650
2025
  contentElementId: props.id
2651
2026
  })))));
2652
2027
  } else {
2653
2028
  return /*#__PURE__*/React.createElement("div", {
2654
- className: styles$9.missing
2029
+ className: styles$5.missing
2655
2030
  }, "Element of unknown type \"", props.type, "\"");
2656
2031
  }
2657
2032
  });
@@ -2668,13 +2043,15 @@ function ContentElements(props) {
2668
2043
  type: item.type,
2669
2044
  first: index === 0,
2670
2045
  position: item.position,
2046
+ width: item.width,
2671
2047
  itemProps: item.props,
2048
+ customMargin: props.customMargin,
2672
2049
  sectionProps: props.sectionProps
2673
2050
  }), index);
2674
2051
  }));
2675
2052
  }
2676
2053
  var MemoizedContentElement = React.memo(ContentElement, function (prevProps, nextProps) {
2677
- return prevProps.id === nextProps.id && prevProps.permaId === nextProps.permaId && prevProps.type === nextProps.type && prevProps.position === nextProps.position && prevProps.itemProps === nextProps.itemProps && prevProps.sectionProps === nextProps.sectionProps;
2054
+ return prevProps.id === nextProps.id && prevProps.permaId === nextProps.permaId && prevProps.type === nextProps.type && prevProps.position === nextProps.position && prevProps.width === nextProps.width && prevProps.itemProps === nextProps.itemProps && prevProps.customMargin === nextProps.customMargin && prevProps.sectionProps === nextProps.sectionProps;
2678
2055
  });
2679
2056
  ContentElements.defaultProps = {
2680
2057
  children: function children(item, child) {
@@ -2715,90 +2092,136 @@ function useMediaQuery(query) {
2715
2092
  return doesMatch;
2716
2093
  }
2717
2094
 
2718
- function useNarrowViewport() {
2719
- var _theme$options$proper, _theme$options$proper2;
2720
-
2721
- var theme = useTheme();
2722
- var maxWidth = ((_theme$options$proper = theme.options.properties) === null || _theme$options$proper === void 0 ? void 0 : (_theme$options$proper2 = _theme$options$proper.root) === null || _theme$options$proper2 === void 0 ? void 0 : _theme$options$proper2.narrowViewportBreakpoint) || '950px';
2723
- return useMediaQuery("(max-width: ".concat(maxWidth, ")"));
2724
- }
2725
-
2726
- var styles$a = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","wide":"TwoColumn-module_wide__xdF_t","right":"TwoColumn-module_right__Fr52a","narrowViewport":"TwoColumn-module_narrowViewport__1x_NY","wideViewport":"TwoColumn-module_wideViewport___c_Zz"};
2727
-
2728
- function availablePositions(narrow) {
2729
- if (narrow) {
2730
- return ['inline', 'wide', 'full'];
2731
- } else {
2732
- return ['inline', 'sticky', 'wide', 'full'];
2733
- }
2734
- }
2095
+ var styles$6 = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","box":"TwoColumn-module_box__1Nils","inline":"TwoColumn-module_inline__1fPfM","width-lg":"TwoColumn-module_width-lg__2MD35","width-xl":"TwoColumn-module_width-xl__3Bxet","width-full":"TwoColumn-module_width-full__1QWYO","restrict-xxs":"TwoColumn-module_restrict-xxs__6il-H","restrict-xs":"TwoColumn-module_restrict-xs__AOezq","restrict-sm":"TwoColumn-module_restrict-sm__2rKty","customMargin":"TwoColumn-module_customMargin__o0uxH","right":"TwoColumn-module_right__Fr52a","sticky":"TwoColumn-module_sticky__4LCDO"};
2735
2096
 
2736
2097
  function TwoColumn(props) {
2737
- var narrow = useNarrowViewport();
2098
+ var shouldInline = useShouldInlineSticky();
2738
2099
  return /*#__PURE__*/React.createElement("div", {
2739
- className: classNames(styles$a.root, styles$a[props.align], narrow ? styles$a.narrowViewport : styles$a.wideViewport)
2100
+ className: classNames(styles$6.root, styles$6[props.align])
2740
2101
  }, /*#__PURE__*/React.createElement("div", {
2741
- className: classNames(styles$a.group),
2102
+ className: classNames(styles$6.group),
2742
2103
  key: props.align
2743
2104
  }, /*#__PURE__*/React.createElement("div", {
2744
- className: styles$a.inline,
2105
+ className: classNames(styles$6.box, styles$6.inline),
2745
2106
  ref: props.contentAreaRef
2746
- })), renderItems(props, narrow), renderPlaceholder(props.placeholder));
2107
+ })), renderItems(props, shouldInline), renderPlaceholder(props.placeholder));
2747
2108
  }
2748
2109
  TwoColumn.defaultProps = {
2749
2110
  align: 'left'
2750
2111
  };
2751
2112
 
2752
- function renderItems(props, narrow) {
2753
- return groupItemsByPosition(props.items, availablePositions(narrow)).map(function (group, index) {
2754
- return /*#__PURE__*/React.createElement("div", {
2113
+ function useShouldInlineSticky() {
2114
+ var _theme$options$proper, _shouldInline;
2115
+
2116
+ var theme = useTheme();
2117
+ var root = ((_theme$options$proper = theme.options.properties) === null || _theme$options$proper === void 0 ? void 0 : _theme$options$proper.root) || {};
2118
+ var shouldInline = (_shouldInline = {}, _defineProperty(_shouldInline, widths.md, useMediaQuery("(max-width: ".concat(root.twoColumnStickyBreakpoint || '950px', ")"))), _defineProperty(_shouldInline, widths.lg, useMediaQuery("(max-width: ".concat(root.twoColumnStickyLgBreakpoint || '1200px', ")"))), _defineProperty(_shouldInline, widths.xl, useMediaQuery("(max-width: ".concat(root.twoColumnStickyXlBreakpoint || '1400px', ")"))), _shouldInline);
2119
+ return function (width) {
2120
+ return width <= widths.md ? shouldInline[widths.md] : shouldInline[width];
2121
+ };
2122
+ } // Used in tests to render markers around groups
2123
+
2124
+
2125
+ TwoColumn.GroupComponent = 'div';
2126
+
2127
+ function renderItems(props, shouldInline) {
2128
+ return groupItemsByPosition(props.items, shouldInline).map(function (group, index) {
2129
+ return /*#__PURE__*/React.createElement(TwoColumn.GroupComponent, {
2755
2130
  key: index,
2756
- className: classNames(styles$a.group, styles$a["group-".concat(group.position)])
2757
- }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'wide'), renderItemGroup(props, group, 'full'));
2131
+ className: classNames(styles$6.group, styles$6["group-".concat(widthName(group.width))])
2132
+ }, group.boxes.map(function (box, index) {
2133
+ return renderItemGroup(props, box, index);
2134
+ }));
2758
2135
  });
2759
2136
  }
2760
2137
 
2761
- function renderItemGroup(props, group, position) {
2762
- if (group[position].length) {
2138
+ function renderItemGroup(props, box, key) {
2139
+ if (box.items.length) {
2763
2140
  return /*#__PURE__*/React.createElement("div", {
2764
- className: styles$a[position]
2765
- }, props.children( /*#__PURE__*/React.createElement(ContentElements, {
2141
+ key: key,
2142
+ className: classNames(styles$6.box, styles$6[box.position], styles$6["width-".concat(widthName(box.width))], _defineProperty({}, styles$6.customMargin, box.customMargin))
2143
+ }, props.children( /*#__PURE__*/React.createElement(RestrictWidth, {
2144
+ width: box.width
2145
+ }, /*#__PURE__*/React.createElement(ContentElements, {
2766
2146
  sectionProps: props.sectionProps,
2767
- items: group[position]
2768
- }), {
2769
- position: position,
2770
- openStart: position === 'inline' && group.openStart,
2771
- openEnd: position === 'inline' && group.openEnd
2147
+ customMargin: box.customMargin,
2148
+ items: box.items
2149
+ })), {
2150
+ position: box.position,
2151
+ width: box.width,
2152
+ customMargin: box.customMargin,
2153
+ openStart: box.openStart,
2154
+ openEnd: box.openEnd
2772
2155
  }));
2773
2156
  }
2774
2157
  }
2775
2158
 
2776
- function groupItemsByPosition(items, availablePositions) {
2159
+ function RestrictWidth(_ref) {
2160
+ var width = _ref.width,
2161
+ children = _ref.children;
2162
+
2163
+ if (width >= 0) {
2164
+ return children;
2165
+ } else {
2166
+ return /*#__PURE__*/React.createElement("div", {
2167
+ className: styles$6["restrict-".concat(widthName(width))]
2168
+ }, children);
2169
+ }
2170
+ }
2171
+
2172
+ function groupItemsByPosition(items, shouldInline) {
2777
2173
  var groups = [];
2778
- var currentGroup;
2779
- items.reduce(function (previousItemPosition, item, index) {
2780
- var position = availablePositions.indexOf(item.position) >= 0 ? item.position : 'inline';
2174
+ var lastInlineBox = null;
2175
+ var currentGroup, currentBox;
2176
+ items.reduce(function (previousPosition, item, index) {
2177
+ var _ref2 = api.contentElementTypes.getOptions(item.type) || {},
2178
+ elementSupportsCustomMargin = _ref2.customMargin;
2179
+
2180
+ var width = item.width || 0;
2181
+ var position = item.position === 'sticky' && !shouldInline(width) ? 'sticky' : 'inline';
2182
+ var customMargin = !!elementSupportsCustomMargin && width < widths.full;
2183
+
2184
+ if (item.position === 'sticky' && position === 'inline' && width > widths.md) {
2185
+ width -= 1;
2186
+ }
2187
+
2188
+ if (!currentGroup || previousPosition !== position || position === 'sticky' && currentBox.customMargin !== customMargin || currentBox.width !== width) {
2189
+ currentBox = null;
2190
+
2191
+ if (!(previousPosition === 'sticky' && position === 'inline' && width <= widths.md)) {
2192
+ currentGroup = {
2193
+ width: width,
2194
+ boxes: []
2195
+ };
2196
+ groups.push(currentGroup);
2197
+ }
2198
+ }
2781
2199
 
2782
- if (!previousItemPosition || previousItemPosition !== position && !(previousItemPosition === 'sticky' && position === 'inline')) {
2783
- currentGroup = {
2200
+ if (!currentBox || currentBox.customMargin !== customMargin) {
2201
+ currentBox = {
2202
+ customMargin: customMargin,
2784
2203
  position: position,
2785
- sticky: [],
2786
- inline: [],
2787
- wide: [],
2788
- full: []
2204
+ width: width,
2205
+ items: []
2789
2206
  };
2790
- groups = [].concat(_toConsumableArray(groups), [currentGroup]);
2207
+
2208
+ if (lastInlineBox && position === 'inline' && width <= widths.md && !customMargin) {
2209
+ lastInlineBox.openEnd = true;
2210
+ currentBox.openStart = true;
2211
+ }
2212
+
2213
+ if (position === 'inline' && width <= widths.md && !customMargin) {
2214
+ lastInlineBox = currentBox;
2215
+ } else if (position === 'inline' && width > widths.md || customMargin && position !== 'sticky') {
2216
+ lastInlineBox = null;
2217
+ }
2218
+
2219
+ currentGroup.boxes.push(currentBox);
2791
2220
  }
2792
2221
 
2793
- currentGroup[position].push(item);
2222
+ currentBox.items.push(item);
2794
2223
  return position;
2795
2224
  }, null);
2796
- groups.forEach(function (group, index) {
2797
- var previous = groups[index - 1];
2798
- var next = groups[index + 1];
2799
- group.openStart = previous && !(previous.full.length || previous.wide.length);
2800
- group.openEnd = next && next.inline.length > 0;
2801
- });
2802
2225
  return groups;
2803
2226
  }
2804
2227
 
@@ -2807,50 +2230,122 @@ function renderPlaceholder(placeholder) {
2807
2230
  return null;
2808
2231
  }
2809
2232
 
2810
- return /*#__PURE__*/React.createElement("div", {
2811
- className: classNames(styles$a.group)
2812
- }, /*#__PURE__*/React.createElement("div", {
2813
- className: styles$a.inline
2814
- }, placeholder));
2233
+ return /*#__PURE__*/React.createElement("div", {
2234
+ className: classNames(styles$6.group)
2235
+ }, /*#__PURE__*/React.createElement("div", {
2236
+ className: classNames(styles$6.box, styles$6.inline)
2237
+ }, placeholder));
2238
+ }
2239
+
2240
+ var styles$7 = {"outer":"Center-module_outer__3Rr0H","customMargin":"Center-module_customMargin__1es3t","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-inline-lg":"Center-module_item-inline-lg__DGjXl","item-inline-xl":"Center-module_item-inline-xl__2McfB","item-inline-full":"Center-module_item-inline-full__l-6kG","clear":"Center-module_clear__jJEap","inner-xxs":"Center-module_inner-xxs__1oroz","inner-xs":"Center-module_inner-xs__3FRT8","inner-sm":"Center-module_inner-sm__-oQ0E","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt","sideBySide":"Center-module_sideBySide__-YsP0","inner-md":"Center-module_inner-md__3dLC3","inner-lg":"Center-module_inner-lg__2GQbs","inner-xl":"Center-module_inner-xl__3dOME"};
2241
+
2242
+ var floatedPositions = ['left', 'right'];
2243
+ function Center(props) {
2244
+ return /*#__PURE__*/React.createElement("div", {
2245
+ className: classNames(styles$7.root)
2246
+ }, /*#__PURE__*/React.createElement("div", {
2247
+ ref: props.contentAreaRef
2248
+ }), props.items.map(function (item, index) {
2249
+ var customMargin = hasCustomMargin(item);
2250
+ var position = item.position;
2251
+ var width = widthName(getWidth(item));
2252
+ return /*#__PURE__*/React.createElement(ContentElements, {
2253
+ key: item.id,
2254
+ sectionProps: props.sectionProps,
2255
+ items: [item],
2256
+ customMargin: customMargin
2257
+ }, function (item, child) {
2258
+ return /*#__PURE__*/React.createElement("div", {
2259
+ key: item.id,
2260
+ className: outerClassName(props.items, index)
2261
+ }, /*#__PURE__*/React.createElement("div", {
2262
+ className: classNames(styles$7.item, styles$7["item-".concat(position, "-").concat(width)])
2263
+ }, props.children( /*#__PURE__*/React.createElement("div", {
2264
+ className: classNames(styles$7["inner-".concat(item.position)], styles$7["inner-".concat(width)], _defineProperty({}, styles$7["sideBySide"], sideBySideFloat(props.items, index)))
2265
+ }, child), boxProps(props.items, item, index))));
2266
+ });
2267
+ }), renderPlaceholder$1(props.placeholder));
2268
+ }
2269
+
2270
+ function outerClassName(items, index) {
2271
+ var item = items[index];
2272
+ return classNames(styles$7.outer, styles$7["outer-".concat(widthName(getWidth(item)))], _defineProperty({}, styles$7.customMargin, hasCustomMargin(item)), _defineProperty({}, styles$7.clear, clearItem(items, index)));
2273
+ }
2274
+
2275
+ function boxProps(items, item, index) {
2276
+ var previous = items[index - 1];
2277
+ var next = items[index + 1];
2278
+ var customMargin = hasCustomMargin(item);
2279
+ var width = getWidth(item);
2280
+ return {
2281
+ position: item.position,
2282
+ width: width,
2283
+ customMargin: customMargin,
2284
+ selfClear: selfClear(items, index),
2285
+ openStart: previous && !customMargin && !hasCustomMargin(previous) && !isWideOrFull(item) && !isWideOrFull(previous),
2286
+ openEnd: next && !customMargin && !hasCustomMargin(next) && !isWideOrFull(item) && !isWideOrFull(next)
2287
+ };
2288
+ }
2289
+
2290
+ function isWideOrFull(item) {
2291
+ return item.position === 'inline' && getWidth(item) > widths.md;
2292
+ }
2293
+
2294
+ function selfClear(items, index) {
2295
+ var item = items[index];
2296
+ var next = items[index + 1];
2297
+
2298
+ if (supportsWrappingAroundFloats(item) || isFloated(item) && (!next || clearItem(items, index + 1))) {
2299
+ return 'both';
2300
+ } else if (isFloated(item)) {
2301
+ return item.position === 'left' ? 'right' : 'left';
2302
+ }
2303
+
2304
+ return 'none';
2305
+ }
2306
+
2307
+ function clearItem(items, index) {
2308
+ return supportsWrappingAroundFloats(items[index]) ? followsSideBySideElements(items, index) : !isFloatedFollowingOppositeFloated(items, index);
2309
+ }
2310
+
2311
+ function followsSideBySideElements(items, index) {
2312
+ return index > 1 && (items[index - 1].position === 'left' && items[index - 2].position === 'right' || items[index - 1].position === 'right' && items[index - 2].position === 'left');
2313
+ }
2314
+
2315
+ function sideBySideFloat(items, index) {
2316
+ return isFloatedFollowingOppositeFloated(items, index) || isFloatedFollowedByOppositeFloated(items, index);
2317
+ }
2318
+
2319
+ function isFloatedFollowingOppositeFloated(items, index) {
2320
+ return index > 0 && isFloated(items[index]) && isFloated(items[index - 1]) && items[index].position !== items[index - 1].position;
2815
2321
  }
2816
2322
 
2817
- var styles$b = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-wide":"Center-module_item-wide__2shH7","item-full":"Center-module_item-full__1cEuv","clear":"Center-module_clear__jJEap","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
2323
+ function isFloatedFollowedByOppositeFloated(items, index) {
2324
+ return index < items.length - 1 && isFloated(items[index]) && isFloated(items[index + 1]) && items[index].position !== items[index + 1].position;
2325
+ }
2818
2326
 
2819
- function Center(props) {
2820
- return /*#__PURE__*/React.createElement("div", {
2821
- className: classNames(styles$b.root)
2822
- }, /*#__PURE__*/React.createElement("div", {
2823
- ref: props.contentAreaRef
2824
- }), /*#__PURE__*/React.createElement(ContentElements, {
2825
- sectionProps: props.sectionProps,
2826
- items: props.items
2827
- }, function (item, child, index) {
2828
- return /*#__PURE__*/React.createElement("div", {
2829
- key: item.id,
2830
- className: outerClassName(item)
2831
- }, /*#__PURE__*/React.createElement("div", {
2832
- className: classNames(styles$b.item, styles$b["item-".concat(item.position)])
2833
- }, props.children( /*#__PURE__*/React.createElement("div", {
2834
- className: styles$b["inner-".concat(item.position)]
2835
- }, child), boxProps(props.items, item, index))));
2836
- }), renderPlaceholder$1(props.placeholder));
2327
+ function isFloated(item) {
2328
+ return floatedPositions.includes(item.position);
2837
2329
  }
2838
2330
 
2839
- function outerClassName(item) {
2331
+ function supportsWrappingAroundFloats(item) {
2840
2332
  var _api$contentElementTy = api.contentElementTypes.getOptions(item.type),
2841
2333
  supportsWrappingAroundFloats = _api$contentElementTy.supportsWrappingAroundFloats;
2842
2334
 
2843
- return classNames(styles$b.outer, styles$b["outer-".concat(item.position)], _defineProperty({}, styles$b.clear, !supportsWrappingAroundFloats));
2335
+ return supportsWrappingAroundFloats;
2844
2336
  }
2845
2337
 
2846
- function boxProps(items, item, index) {
2847
- var previous = items[index - 1];
2848
- var next = items[index + 1];
2849
- return {
2850
- position: item.position,
2851
- openStart: previous && item.position !== 'full' && previous.position !== 'full' && item.position !== 'wide' && previous.position !== 'wide',
2852
- openEnd: next && item.position !== 'full' && next.position !== 'full' && item.position !== 'wide' && next.position !== 'wide'
2853
- };
2338
+ function hasCustomMargin(item) {
2339
+ var position = item.position;
2340
+
2341
+ var _ref = api.contentElementTypes.getOptions(item.type) || {},
2342
+ elementSupportsCustomMargin = _ref.customMargin;
2343
+
2344
+ return !!(elementSupportsCustomMargin && position === 'inline' && getWidth(item) < widths.full);
2345
+ }
2346
+
2347
+ function getWidth(item) {
2348
+ return item.width || widths.md;
2854
2349
  }
2855
2350
 
2856
2351
  function renderPlaceholder$1(placeholder) {
@@ -2859,9 +2354,9 @@ function renderPlaceholder$1(placeholder) {
2859
2354
  }
2860
2355
 
2861
2356
  return /*#__PURE__*/React.createElement("div", {
2862
- className: classNames(styles$b.outer)
2357
+ className: classNames(styles$7.outer)
2863
2358
  }, /*#__PURE__*/React.createElement("div", {
2864
- className: classNames(styles$b.item)
2359
+ className: classNames(styles$7.item)
2865
2360
  }, placeholder));
2866
2361
  }
2867
2362
 
@@ -2988,7 +2483,7 @@ function useDimension() {
2988
2483
  return [componentSize, measuredRef];
2989
2484
  }
2990
2485
 
2991
- var styles$c = {"root":"Fullscreen-module_root__1N3CI"};
2486
+ var styles$8 = {"root":"Fullscreen-module_root__1N3CI"};
2992
2487
 
2993
2488
  var DimensionContext = React.createContext({});
2994
2489
  function useFullscreenDimensions() {
@@ -3014,18 +2509,18 @@ var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
3014
2509
 
3015
2510
  return /*#__PURE__*/React.createElement("div", {
3016
2511
  ref: ref,
3017
- className: styles$c.root,
2512
+ className: styles$8.root,
3018
2513
  style: {
3019
2514
  height: height
3020
2515
  }
3021
2516
  }, props.children);
3022
2517
  });
3023
2518
 
3024
- var styles$d = {"FillColor":"FillColor-module_FillColor__S1uEG"};
2519
+ var styles$9 = {"FillColor":"FillColor-module_FillColor__S1uEG"};
3025
2520
 
3026
2521
  function FillColor(props) {
3027
2522
  return /*#__PURE__*/React.createElement("div", {
3028
- className: styles$d.FillColor,
2523
+ className: styles$9.FillColor,
3029
2524
  style: {
3030
2525
  backgroundColor: props.color
3031
2526
  }
@@ -3187,7 +2682,12 @@ function sources(videoFile) {
3187
2682
  }
3188
2683
  }
3189
2684
 
3190
- if (quality === 'auto') {
2685
+ if (features.isEnabled('force_fullhd_video_quality')) {
2686
+ return [{
2687
+ type: 'video/mp4',
2688
+ src: videoFile.urls.fullhd || videoFile.urls.high
2689
+ }];
2690
+ } else if (quality === 'auto') {
3191
2691
  var result = [{
3192
2692
  type: 'application/x-mpegURL',
3193
2693
  src: videoFile.urls['hls-playlist']
@@ -3196,7 +2696,7 @@ function sources(videoFile) {
3196
2696
  src: videoFile.urls.high
3197
2697
  }];
3198
2698
 
3199
- if (videoFile.urls['dash-playlist']) {
2699
+ if (videoFile.urls['dash-playlist'] && !features.isEnabled('hls_instead_of_dash')) {
3200
2700
  result = [{
3201
2701
  type: 'application/dash+xml',
3202
2702
  src: videoFile.urls['dash-playlist']
@@ -3290,7 +2790,7 @@ VideoPlayer.defaultProps = {
3290
2790
  controls: true
3291
2791
  };
3292
2792
 
3293
- var styles$e = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
2793
+ var styles$a = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
3294
2794
 
3295
2795
  var MotifAreaVisibilityContext = React.createContext(false);
3296
2796
  function MotifAreaVisibilityProvider(_ref) {
@@ -3327,7 +2827,7 @@ var MotifArea = function MotifArea(props) {
3327
2827
 
3328
2828
  return /*#__PURE__*/React.createElement("div", {
3329
2829
  ref: setElementRef,
3330
- className: classNames(styles$e.root, _defineProperty({}, styles$e.visible, visible)),
2830
+ className: classNames(styles$a.root, _defineProperty({}, styles$a.visible, visible)),
3331
2831
  style: position,
3332
2832
  onMouseEnter: props.onMouseEnter,
3333
2833
  onMouseLeave: props.onMouseLeave
@@ -3346,13 +2846,13 @@ function getPosition(props) {
3346
2846
  };
3347
2847
  }
3348
2848
 
3349
- var styles$f = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","noCompositionLayer":"Backdrop-module_noCompositionLayer__33IlH","defaultBackground":"Backdrop-module_defaultBackground__1YQQL","effects":"Backdrop-module_effects__lCEXd"};
2849
+ var styles$b = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","noCompositionLayer":"Backdrop-module_noCompositionLayer__33IlH","defaultBackground":"Backdrop-module_defaultBackground__1YQQL","effects":"Backdrop-module_effects__lCEXd"};
3350
2850
 
3351
2851
  function Effects(_ref) {
3352
2852
  var file = _ref.file,
3353
2853
  children = _ref.children;
3354
2854
  return /*#__PURE__*/React.createElement("div", {
3355
- className: styles$f.effects,
2855
+ className: styles$b.effects,
3356
2856
  style: {
3357
2857
  filter: getFilter((file === null || file === void 0 ? void 0 : file.effects) || [])
3358
2858
  }
@@ -3443,7 +2943,7 @@ function usePortraitOrientation() {
3443
2943
  return useMediaQuery('(orientation: portrait)');
3444
2944
  }
3445
2945
 
3446
- var styles$g = {"root":"Image-module_root__1ef3j"};
2946
+ var styles$c = {"fill":"Image-module_fill__1D1wH"};
3447
2947
 
3448
2948
  function ImageStructuredData(_ref) {
3449
2949
  var file = _ref.file;
@@ -3477,6 +2977,7 @@ function ImageStructuredData(_ref) {
3477
2977
  * @param {boolean} [props.load] - Whether to load the image. Can be used for lazy loading.
3478
2978
  * @param {boolean} [props.structuredData] - Whether to render a JSON+LD script tag.
3479
2979
  * @param {boolean} [props.preferSvg] - Use original if image is SVG.
2980
+ * @param {boolean} [props.fill=true] - Position absolute and fill parent.
3480
2981
  */
3481
2982
 
3482
2983
  function Image(_ref) {
@@ -3494,7 +2995,7 @@ function renderImageTag(props, imageFile) {
3494
2995
  var cropPositionX = imageFile.cropPosition ? imageFile.cropPosition.x : 50;
3495
2996
  var cropPositionY = imageFile.cropPosition ? imageFile.cropPosition.y : 50;
3496
2997
  return /*#__PURE__*/React.createElement("img", {
3497
- className: classNames(styles$g.root),
2998
+ className: classNames(_defineProperty({}, styles$c.fill, props.fill)),
3498
2999
  src: imageUrl(imageFile, props),
3499
3000
  alt: imageFile.configuration.alt ? imageFile.configuration.alt : '',
3500
3001
  style: {
@@ -3524,7 +3025,8 @@ function renderStructuredData(props, file) {
3524
3025
 
3525
3026
  Image.defaultProps = {
3526
3027
  load: true,
3527
- variant: 'large'
3028
+ variant: 'large',
3029
+ fill: true
3528
3030
  };
3529
3031
 
3530
3032
  function BackgroundImage(_ref) {
@@ -3573,6 +3075,28 @@ function OrientationAwareBackgroundImage(_ref) {
3573
3075
  }
3574
3076
  }
3575
3077
 
3078
+ function OrientationAwareBackgroundVideo(_ref) {
3079
+ var video = _ref.video,
3080
+ onMotifAreaUpdate = _ref.onMotifAreaUpdate,
3081
+ videoMobile = _ref.videoMobile,
3082
+ containerDimension = _ref.containerDimension;
3083
+ var mobile = usePortraitOrientation();
3084
+
3085
+ if (mobile) {
3086
+ return /*#__PURE__*/React.createElement(BackgroundVideo, {
3087
+ video: videoMobile,
3088
+ onMotifAreaUpdate: onMotifAreaUpdate,
3089
+ containerDimension: containerDimension
3090
+ });
3091
+ } else {
3092
+ return /*#__PURE__*/React.createElement(BackgroundVideo, {
3093
+ video: video,
3094
+ onMotifAreaUpdate: onMotifAreaUpdate,
3095
+ containerDimension: containerDimension
3096
+ });
3097
+ }
3098
+ }
3099
+
3576
3100
  function BackgroundAsset(props) {
3577
3101
  var video = useBackgroundFile({
3578
3102
  file: useFile({
@@ -3583,6 +3107,15 @@ function BackgroundAsset(props) {
3583
3107
  containerDimension: props.containerDimension,
3584
3108
  effects: props.effects
3585
3109
  });
3110
+ var videoMobile = useBackgroundFile({
3111
+ file: useFile({
3112
+ collectionName: 'videoFiles',
3113
+ permaId: props.videoMobile
3114
+ }),
3115
+ motifArea: props.videoMobileMotifArea,
3116
+ containerDimension: props.containerDimension,
3117
+ effects: props.effectsMobile
3118
+ });
3586
3119
  var image = useBackgroundFile({
3587
3120
  file: useFile({
3588
3121
  collectionName: 'imageFiles',
@@ -3602,11 +3135,12 @@ function BackgroundAsset(props) {
3602
3135
  effects: props.effectsMobile
3603
3136
  });
3604
3137
 
3605
- if (video) {
3138
+ if (video || videoMobile) {
3606
3139
  return /*#__PURE__*/React.createElement(Fullscreen, {
3607
3140
  ref: props.setContainerRef
3608
- }, /*#__PURE__*/React.createElement(BackgroundVideo, {
3141
+ }, renderBackgroundVideo({
3609
3142
  video: video,
3143
+ videoMobile: videoMobile,
3610
3144
  onMotifAreaUpdate: props.onMotifAreaUpdate,
3611
3145
  containerDimension: props.containerDimension
3612
3146
  }));
@@ -3626,12 +3160,34 @@ function BackgroundAsset(props) {
3626
3160
  }
3627
3161
  }
3628
3162
 
3629
- function renderBackgroundImage(_ref) {
3630
- var image = _ref.image,
3631
- imageMobile = _ref.imageMobile,
3163
+ function renderBackgroundVideo(_ref) {
3164
+ var video = _ref.video,
3165
+ videoMobile = _ref.videoMobile,
3632
3166
  onMotifAreaUpdate = _ref.onMotifAreaUpdate,
3633
3167
  containerDimension = _ref.containerDimension;
3634
3168
 
3169
+ if (video && videoMobile) {
3170
+ return /*#__PURE__*/React.createElement(OrientationAwareBackgroundVideo, {
3171
+ video: video,
3172
+ videoMobile: videoMobile,
3173
+ onMotifAreaUpdate: onMotifAreaUpdate,
3174
+ containerDimension: containerDimension
3175
+ });
3176
+ } else {
3177
+ return /*#__PURE__*/React.createElement(BackgroundVideo, {
3178
+ video: video || videoMobile,
3179
+ onMotifAreaUpdate: onMotifAreaUpdate,
3180
+ containerDimension: containerDimension
3181
+ });
3182
+ }
3183
+ }
3184
+
3185
+ function renderBackgroundImage(_ref2) {
3186
+ var image = _ref2.image,
3187
+ imageMobile = _ref2.imageMobile,
3188
+ onMotifAreaUpdate = _ref2.onMotifAreaUpdate,
3189
+ containerDimension = _ref2.containerDimension;
3190
+
3635
3191
  if (image && imageMobile) {
3636
3192
  return /*#__PURE__*/React.createElement(OrientationAwareBackgroundImage, {
3637
3193
  image: image,
@@ -3658,11 +3214,11 @@ function Backdrop(props) {
3658
3214
  shouldLoad = _useSectionLifecycle.shouldLoad;
3659
3215
 
3660
3216
  return /*#__PURE__*/React.createElement("div", {
3661
- className: classNames(styles$f.Backdrop, _defineProperty({}, styles$f.noCompositionLayer, !shouldLoad && !props.eagerLoad), props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
3217
+ className: classNames(styles$b.Backdrop, _defineProperty({}, styles$b.noCompositionLayer, !shouldLoad && !props.eagerLoad), props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
3662
3218
  }, /*#__PURE__*/React.createElement("div", {
3663
3219
  className: props.transitionStyles.backdropInner
3664
3220
  }, /*#__PURE__*/React.createElement("div", {
3665
- className: classNames(styles$f.defaultBackground, props.transitionStyles.backdropInner2)
3221
+ className: classNames(styles$b.defaultBackground, props.transitionStyles.backdropInner2)
3666
3222
  }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset, Object.assign({}, props, {
3667
3223
  containerDimension: containerDimension,
3668
3224
  setContainerRef: setContainerRef
@@ -3919,16 +3475,16 @@ var v1 = /*#__PURE__*/Object.freeze({
3919
3475
  useMotifAreaState: useMotifAreaState
3920
3476
  });
3921
3477
 
3922
- var styles$h = {"wrapper":"Positioner-module_wrapper__3iFSg"};
3478
+ var styles$d = {"wrapper":"Positioner-module_wrapper__3iFSg"};
3923
3479
 
3924
3480
  function Positioner(_ref) {
3925
3481
  var children = _ref.children;
3926
3482
  return /*#__PURE__*/React.createElement("div", {
3927
- className: styles$h.wrapper
3483
+ className: styles$d.wrapper
3928
3484
  }, children);
3929
3485
  }
3930
3486
 
3931
- var styles$i = {"root":"Picture-module_root__1BCCg"};
3487
+ var styles$e = {"root":"Picture-module_root__1BCCg"};
3932
3488
 
3933
3489
  function Picture(_ref) {
3934
3490
  var imageFile = _ref.imageFile,
@@ -3966,7 +3522,7 @@ function renderTag(_ref2) {
3966
3522
  }),
3967
3523
  media: "(orientation: portrait)"
3968
3524
  }), /*#__PURE__*/React.createElement("img", {
3969
- className: classNames(styles$i.root),
3525
+ className: classNames(styles$e.root),
3970
3526
  src: imageUrl$1({
3971
3527
  imageFile: imageFile,
3972
3528
  variant: variant,
@@ -4010,18 +3566,18 @@ var MotifArea$1 = function MotifArea(props) {
4010
3566
  var visible = useContext(MotifAreaVisibilityContext);
4011
3567
  return /*#__PURE__*/React.createElement("div", {
4012
3568
  ref: props.onUpdate,
4013
- className: classNames(styles$e.root, v2Styles.root, _defineProperty({}, styles$e.visible, visible))
3569
+ className: classNames(styles$a.root, v2Styles.root, _defineProperty({}, styles$a.visible, visible))
4014
3570
  });
4015
3571
  };
4016
3572
 
4017
- var styles$j = {"effects":"Effects-module_effects__MDZRR"};
3573
+ var styles$f = {"effects":"Effects-module_effects__MDZRR"};
4018
3574
 
4019
3575
  function Effects$1(_ref) {
4020
3576
  var file = _ref.file,
4021
3577
  mobileFile = _ref.mobileFile,
4022
3578
  children = _ref.children;
4023
3579
  return /*#__PURE__*/React.createElement("div", {
4024
- className: styles$j.effects,
3580
+ className: styles$f.effects,
4025
3581
  style: {
4026
3582
  '--filter': getFilter$1((file === null || file === void 0 ? void 0 : file.effects) || []),
4027
3583
  '--mobile-filter': getFilter$1((mobileFile === null || mobileFile === void 0 ? void 0 : mobileFile.effects) || [])
@@ -4157,11 +3713,11 @@ BackgroundAsset$1.defaultProps = {
4157
3713
 
4158
3714
  function Backdrop$1(props) {
4159
3715
  return /*#__PURE__*/React.createElement("div", {
4160
- className: classNames(styles$f.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
3716
+ className: classNames(styles$b.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
4161
3717
  }, /*#__PURE__*/React.createElement("div", {
4162
3718
  className: props.transitionStyles.backdropInner
4163
3719
  }, /*#__PURE__*/React.createElement("div", {
4164
- className: classNames(styles$f.defaultBackground, props.transitionStyles.backdropInner2)
3720
+ className: classNames(styles$b.defaultBackground, props.transitionStyles.backdropInner2)
4165
3721
  }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset$1, props)))));
4166
3722
  }
4167
3723
  Backdrop$1.defaultProps = {
@@ -4354,7 +3910,7 @@ function motifAreaCustomProperties(motifArea, prefix) {
4354
3910
  return motifArea ? (_ref = {}, _defineProperty(_ref, "--".concat(prefix, "motif-t"), motifArea.top), _defineProperty(_ref, "--".concat(prefix, "motif-l"), motifArea.left), _defineProperty(_ref, "--".concat(prefix, "motif-w"), motifArea.width), _defineProperty(_ref, "--".concat(prefix, "motif-h"), motifArea.height), _ref) : {};
4355
3911
  }
4356
3912
 
4357
- var styles$k = {"section":"Section-module_section__7UvMm","orientation":"Section-module_orientation__3-m2N","exposeMotifArea":"Section-module_exposeMotifArea__2rsq_","layout-left":"Section-module_layout-left__2IqOD","layout-right":"Section-module_layout-right__3al0b"};
3913
+ var styles$g = {"section":"Section-module_section__7UvMm","orientation":"Section-module_orientation__3-m2N","exposeMotifArea":"Section-module_exposeMotifArea__2rsq_","layout-left":"Section-module_layout-left__2IqOD","layout-right":"Section-module_layout-right__3al0b"};
4358
3914
 
4359
3915
  function useBackdropSectionClassNames$1(backdrop) {
4360
3916
  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -4363,7 +3919,7 @@ function useBackdropSectionClassNames$1(backdrop) {
4363
3919
  empty = _ref.empty;
4364
3920
 
4365
3921
  var fullscreenDimensions = useFullscreenDimensions();
4366
- return [styles$k.section, !fullscreenDimensions.height && styles$k.orientation, styles$k["layout-".concat(layout || 'left')], exposeMotifArea && !empty && styles$k.exposeMotifArea, useAspectRatioClassName(backdrop.file, fullscreenDimensions), useAspectRatioClassName(backdrop.mobileFile, fullscreenDimensions, {
3922
+ return [styles$g.section, !fullscreenDimensions.height && styles$g.orientation, styles$g["layout-".concat(layout || 'left')], exposeMotifArea && !empty && styles$g.exposeMotifArea, useAspectRatioClassName(backdrop.file, fullscreenDimensions), useAspectRatioClassName(backdrop.mobileFile, fullscreenDimensions, {
4367
3923
  mobile: true
4368
3924
  })].filter(Boolean);
4369
3925
  }
@@ -4433,597 +3989,968 @@ function getAspectRatioCSS(aspectRatio, className, orientation) {
4433
3989
  }
4434
3990
  }
4435
3991
 
4436
- function getAspectRatioRule(className) {
4437
- // WARNING: This CSS snippet needs to be kept in sync with the
4438
- // corresponding snippet in GeneratedMediaQueriesHelper
4439
- return "\n section.".concat(className, " {\n --backdrop-positioner-transform: var(--backdrop-positioner-min-ar-transform);\n --backdrop-positioner-width: var(--backdrop-positioner-min-ar-width);\n --backdrop-positioner-height: var(--backdrop-positioner-min-ar-height);\n\n --motif-placeholder-width: var(--motif-placeholder-min-ar-width);\n\n --motif-display-top: var(--motif-display-min-ar-top);\n --motif-display-bottom: var(--motif-display-min-ar-bottom);\n --motif-display-height: var(--motif-display-min-ar-height);\n }\n ");
3992
+ function getAspectRatioRule(className) {
3993
+ // WARNING: This CSS snippet needs to be kept in sync with the
3994
+ // corresponding snippet in GeneratedMediaQueriesHelper
3995
+ return "\n section.".concat(className, " {\n --backdrop-positioner-transform: var(--backdrop-positioner-min-ar-transform);\n --backdrop-positioner-width: var(--backdrop-positioner-min-ar-width);\n --backdrop-positioner-height: var(--backdrop-positioner-min-ar-height);\n\n --motif-placeholder-width: var(--motif-placeholder-min-ar-width);\n\n --motif-display-top: var(--motif-display-min-ar-top);\n --motif-display-bottom: var(--motif-display-min-ar-bottom);\n --motif-display-height: var(--motif-display-min-ar-height);\n }\n ");
3996
+ }
3997
+
3998
+
3999
+
4000
+ var v2 = /*#__PURE__*/Object.freeze({
4001
+ __proto__: null,
4002
+ Backdrop: Backdrop$1,
4003
+ useMotifAreaState: useMotifAreaState$1,
4004
+ useBackdrop: useBackdrop$1,
4005
+ useBackdropSectionCustomProperties: useBackdropSectionCustomProperties$1,
4006
+ useBackdropSectionClassNames: useBackdropSectionClassNames$1
4007
+ });
4008
+
4009
+ var styles$h = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","darkContentLinkColor":"var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor))","lightContentLinkColor":"var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor))","Section":"Section-module_Section__Yo58b","first":"Section-module_first__1vLBH","narrow":"Section-module_narrow__3Dawu","invert":"Section-module_invert__3_p7F"};
4010
+
4011
+ var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
4012
+
4013
+ var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9"};
4014
+
4015
+ var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6"};
4016
+
4017
+ var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
4018
+
4019
+ var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground":"fadeInConceal-module_foreground__3giM9","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
4020
+
4021
+ var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f"};
4022
+
4023
+ var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground":"fadeInFadeOutBg-module_foreground__24f_M","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc"};
4024
+
4025
+ var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH"};
4026
+
4027
+ var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU utils-module_clip__34eot","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
4028
+
4029
+ var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF utils-module_clip__34eot","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
4030
+
4031
+ var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF utils-module_clip__34eot","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
4032
+
4033
+ var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd utils-module_clip__34eot","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
4034
+
4035
+ var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
4036
+
4037
+ var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-"};
4038
+
4039
+ var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau"};
4040
+
4041
+ var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
4042
+
4043
+ var styles$i = {
4044
+ fadeInBgConceal: fadeInBgConceal,
4045
+ fadeInBgFadeOut: fadeInBgFadeOut,
4046
+ fadeInBgFadeOutBg: fadeInBgFadeOutBg,
4047
+ fadeInBgScrollOut: fadeInBgScrollOut,
4048
+ fadeInConceal: fadeInConceal,
4049
+ fadeInFadeOut: fadeInFadeOut,
4050
+ fadeInFadeOutBg: fadeInFadeOutBg,
4051
+ fadeInScrollOut: fadeInScrollOut,
4052
+ revealConceal: revealConceal,
4053
+ revealFadeOut: revealFadeOut,
4054
+ revealFadeOutBg: revealFadeOutBg,
4055
+ revealScrollOut: revealScrollOut,
4056
+ scrollInConceal: scrollInConceal,
4057
+ scrollInFadeOut: scrollInFadeOut,
4058
+ scrollInFadeOutBg: scrollInFadeOutBg,
4059
+ scrollInScrollOut: scrollInScrollOut
4060
+ };
4061
+ var enterTransitions = {
4062
+ fade: 'fadeIn',
4063
+ fadeBg: 'fadeInBg',
4064
+ scroll: 'scrollIn',
4065
+ scrollOver: 'scrollIn',
4066
+ reveal: 'reveal',
4067
+ beforeAfter: 'reveal'
4068
+ };
4069
+ var exitTransitions = {
4070
+ fade: 'fadeOut',
4071
+ fadeBg: 'fadeOutBg',
4072
+ scroll: 'scrollOut',
4073
+ scrollOver: 'conceal',
4074
+ reveal: 'scrollOut',
4075
+ beforeAfter: 'conceal'
4076
+ };
4077
+ function getTransitionNames() {
4078
+ return Object.keys(exitTransitions);
4079
+ }
4080
+ function getAvailableTransitionNames(section, previousSection) {
4081
+ if (!section.fullHeight || !previousSection.fullHeight) {
4082
+ return getTransitionNames().filter(function (name) {
4083
+ return !name.startsWith('fade');
4084
+ });
4085
+ }
4086
+
4087
+ return getTransitionNames();
4088
+ }
4089
+ function getTransitionStyles(section, previousSection, nextSection) {
4090
+ var name = getTransitionStylesName(section, previousSection, nextSection);
4091
+
4092
+ if (!styles$i[name]) {
4093
+ throw new Error("Unknown transition ".concat(name));
4094
+ }
4095
+
4096
+ return styles$i[name];
4097
+ }
4098
+ function getEnterAndExitTransitions(section, previousSection, nextSection) {
4099
+ return [enterTransitions[getTransitionName(previousSection, section)], exitTransitions[getTransitionName(section, nextSection)]];
4100
+ }
4101
+ function getTransitionStylesName(section, previousSection, nextSection) {
4102
+ var _getEnterAndExitTrans = getEnterAndExitTransitions(section, previousSection, nextSection),
4103
+ _getEnterAndExitTrans2 = _slicedToArray(_getEnterAndExitTrans, 2),
4104
+ enter = _getEnterAndExitTrans2[0],
4105
+ exit = _getEnterAndExitTrans2[1];
4106
+
4107
+ return "".concat(enter).concat(capitalize(exit));
4108
+ }
4109
+
4110
+ function getTransitionName(previousSection, section) {
4111
+ if (!section || !previousSection) {
4112
+ return 'scroll';
4113
+ }
4114
+
4115
+ if ((!section.fullHeight || !previousSection.fullHeight) && section.transition.startsWith('fade')) {
4116
+ return 'scroll';
4117
+ }
4118
+
4119
+ return section.transition;
4120
+ }
4121
+
4122
+ function capitalize(string) {
4123
+ return string.charAt(0).toUpperCase() + string.slice(1);
4124
+ }
4125
+
4126
+ function NoOpShadow(props) {
4127
+ return /*#__PURE__*/React.createElement("div", null, props.children);
4128
+ }
4129
+
4130
+ var styles$j = {"static":"GradientShadow-module_static__rXNpZ","dynamic":"GradientShadow-module_dynamic__2v2JU","align-right":"GradientShadow-module_align-right__3iXZs","dark":"GradientShadow-module_dark__1YuV5","align-left":"GradientShadow-module_align-left__3qcNM","align-center":"GradientShadow-module_align-center__2C7cl","align-centerRagged":"GradientShadow-module_align-centerRagged__2-iv8","light":"GradientShadow-module_light__Vn92v","shadow":"GradientShadow-module_shadow__2UiDH"};
4131
+
4132
+ function GradientShadow(props) {
4133
+ // Hide static shadow if motif area intersects with content area.
4134
+ var staticShadowOpacity = props.motifAreaState.isContentPadded ? 0 : props.staticShadowOpacity; // If motif area intersects with content area horizontally, fade in
4135
+ // shadow soon as the content has been scrolled far enough to start
4136
+ // intersecting with the motif area vertically.
4137
+
4138
+ var opacityFactor = // Make shadow reach full opacity when content has been scrolled
4139
+ // up half way across the motif area.
4140
+ roundToFirstDecimalPlace(Math.min(1, props.motifAreaState.intersectionRatioY * 2));
4141
+ return /*#__PURE__*/React.createElement("div", {
4142
+ className: classNames(styles$j["align-".concat(props.align)], props.inverted ? styles$j.light : styles$j.dark)
4143
+ }, /*#__PURE__*/React.createElement("div", {
4144
+ className: styles$j.dynamic,
4145
+ style: {
4146
+ opacity: props.dynamicShadowOpacity * opacityFactor
4147
+ }
4148
+ }, /*#__PURE__*/React.createElement(Fullscreen, null)), /*#__PURE__*/React.createElement("div", {
4149
+ className: styles$j["static"],
4150
+ style: {
4151
+ opacity: staticShadowOpacity
4152
+ }
4153
+ }, /*#__PURE__*/React.createElement(Fullscreen, null)), props.children);
4154
+ }
4155
+ GradientShadow.defaultProps = {
4156
+ opacity: 0.7,
4157
+ align: 'left'
4158
+ };
4159
+
4160
+ function roundToFirstDecimalPlace(value) {
4161
+ return Math.round(value * 10) / 10;
4162
+ }
4163
+
4164
+ var styles$k = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
4165
+
4166
+ function InvisibleBoxWrapper(_ref) {
4167
+ var _classNames;
4168
+
4169
+ var position = _ref.position,
4170
+ width = _ref.width,
4171
+ openStart = _ref.openStart,
4172
+ openEnd = _ref.openEnd,
4173
+ children = _ref.children;
4174
+ var full = width === widths.full;
4175
+ return /*#__PURE__*/React.createElement("div", {
4176
+ className: classNames((_classNames = {}, _defineProperty(_classNames, styles$k.start, !openStart && !full), _defineProperty(_classNames, styles$k.end, !openEnd && !full), _classNames))
4177
+ }, children);
4178
+ }
4179
+
4180
+ var styles$l = {"wrapper":"GradientBox-module_wrapper__1Jj7N","content":"GradientBox-module_content__96lDk","shadow":"GradientBox-module_shadow__2XilX","gradient":"GradientBox-module_gradient__31tJ-","long":"GradientBox-module_long__10s6v","root":"GradientBox-module_root__8Xn9W","withShadow":"GradientBox-module_withShadow__3mhPR","shadowDark":"GradientBox-module_shadowDark__3Tv0L","shadowLight":"GradientBox-module_shadowLight__Bieg6"};
4181
+
4182
+ function GradientBox(props) {
4183
+ var _classNames;
4184
+
4185
+ return /*#__PURE__*/React.createElement("div", {
4186
+ className: classNames(styles$l.root, (_classNames = {}, _defineProperty(_classNames, styles$l.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$l["long"], props.coverInvisibleNextSection), _classNames)),
4187
+ style: {
4188
+ paddingTop: props.motifAreaState.paddingTop
4189
+ }
4190
+ }, /*#__PURE__*/React.createElement("div", {
4191
+ className: styles$l.wrapper
4192
+ }, /*#__PURE__*/React.createElement("div", {
4193
+ className: classNames(styles$l.shadow, props.inverted ? styles$l.shadowLight : styles$l.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
4194
+ style: {
4195
+ top: props.motifAreaState.paddingTop,
4196
+ opacity: props.staticShadowOpacity
4197
+ }
4198
+ }), /*#__PURE__*/React.createElement("div", {
4199
+ className: styles$l.content
4200
+ }, props.children)));
4201
+ }
4202
+
4203
+ var styles$m = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
4204
+
4205
+ function CardBox(props) {
4206
+ return /*#__PURE__*/React.createElement("div", {
4207
+ className: styles$m.wrapper,
4208
+ style: {
4209
+ paddingTop: props.motifAreaState.paddingTop
4210
+ }
4211
+ }, /*#__PURE__*/React.createElement("div", {
4212
+ className: styles$m.content
4213
+ }, props.children));
4440
4214
  }
4441
4215
 
4216
+ var styles$n = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","darkContentLinkColor":"var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor))","lightContentLinkColor":"var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor))","card":"CardBoxWrapper-module_card__hvRUa scope-cardsAppearance","selfClear-left":"CardBoxWrapper-module_selfClear-left__2Dd26","selfClear-right":"CardBoxWrapper-module_selfClear-right__9kgvN","selfClear-both":"CardBoxWrapper-module_selfClear-both__2hwB7","cardStart":"CardBoxWrapper-module_cardStart__2NywG","cardEnd":"CardBoxWrapper-module_cardEnd__x4Ye6","cardBgWhite":"CardBoxWrapper-module_cardBgWhite__xXhg7","cardBgBlack":"CardBoxWrapper-module_cardBgBlack__Ahp3s"};
4442
4217
 
4218
+ function CardBoxWrapper(props) {
4219
+ if (outsideBox(props)) {
4220
+ return props.children;
4221
+ }
4443
4222
 
4444
- var v2 = /*#__PURE__*/Object.freeze({
4445
- __proto__: null,
4446
- Backdrop: Backdrop$1,
4447
- useMotifAreaState: useMotifAreaState$1,
4448
- useBackdrop: useBackdrop$1,
4449
- useBackdropSectionCustomProperties: useBackdropSectionCustomProperties$1,
4450
- useBackdropSectionClassNames: useBackdropSectionClassNames$1
4451
- });
4223
+ return /*#__PURE__*/React.createElement("div", {
4224
+ className: className$1(props)
4225
+ }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
4226
+ invert: true
4227
+ }, props.children));
4228
+ }
4452
4229
 
4453
- var styles$l = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","Section":"Section-module_Section__Yo58b","first":"Section-module_first__1vLBH","narrow":"Section-module_narrow__3Dawu","invert":"Section-module_invert__3_p7F"};
4230
+ function outsideBox(props) {
4231
+ return props.position === 'sticky' || props.position === 'inline' && props.width > widths.md || props.customMargin;
4232
+ }
4454
4233
 
4455
- var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
4234
+ function className$1(props) {
4235
+ return classNames(styles$n.card, props.inverted ? styles$n.cardBgBlack : styles$n.cardBgWhite, styles$n["selfClear-".concat(props.selfClear)], _defineProperty({}, styles$n.cardStart, !props.openStart), _defineProperty({}, styles$n.cardEnd, !props.openEnd));
4236
+ }
4456
4237
 
4457
- var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9"};
4238
+ var components$1 = {
4239
+ shadow: {
4240
+ Shadow: GradientShadow,
4241
+ Box: GradientBox,
4242
+ BoxWrapper: InvisibleBoxWrapper
4243
+ },
4244
+ transparent: {
4245
+ Shadow: NoOpShadow,
4246
+ Box: CardBox,
4247
+ BoxWrapper: InvisibleBoxWrapper
4248
+ },
4249
+ cards: {
4250
+ Shadow: NoOpShadow,
4251
+ Box: CardBox,
4252
+ BoxWrapper: CardBoxWrapper
4253
+ }
4254
+ };
4255
+ function getAppearanceComponents(appearance) {
4256
+ return components$1[appearance || 'shadow'];
4257
+ }
4458
4258
 
4459
- var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6"};
4259
+ var Section = withInlineEditingDecorator('SectionDecorator', function Section(_ref) {
4260
+ var _section$transition;
4460
4261
 
4461
- var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
4262
+ var section = _ref.section,
4263
+ contentElements = _ref.contentElements,
4264
+ state = _ref.state,
4265
+ isScrollTarget = _ref.isScrollTarget,
4266
+ onActivate = _ref.onActivate,
4267
+ domIdPrefix = _ref.domIdPrefix;
4462
4268
 
4463
- var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground":"fadeInConceal-module_foreground__3giM9","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
4269
+ var _ref2 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
4270
+ useBackdrop = _ref2.useBackdrop,
4271
+ useBackdropSectionClassNames = _ref2.useBackdropSectionClassNames,
4272
+ useBackdropSectionCustomProperties = _ref2.useBackdropSectionCustomProperties;
4464
4273
 
4465
- var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f"};
4274
+ var backdrop = useBackdrop(section);
4275
+ var ref = useRef();
4276
+ useScrollTarget(ref, isScrollTarget);
4277
+ var transitionStyles = getTransitionStyles(section, section.previousSection, section.nextSection);
4278
+ var backdropSectionClassNames = useBackdropSectionClassNames(backdrop, {
4279
+ layout: section.layout,
4280
+ exposeMotifArea: section.exposeMotifArea,
4281
+ empty: !contentElements.length
4282
+ });
4283
+ return /*#__PURE__*/React.createElement("section", {
4284
+ id: "".concat(domIdPrefix, "-").concat(section.permaId),
4285
+ ref: ref,
4286
+ className: classNames(styles$h.Section, transitionStyles.section, backdropSectionClassNames, _defineProperty({}, styles$h.first, section.sectionIndex === 0), _defineProperty({}, styles$h.narrow, section.width === 'narrow'), _defineProperty({}, styles$h.invert, section.invert)),
4287
+ style: useBackdropSectionCustomProperties(backdrop)
4288
+ }, /*#__PURE__*/React.createElement(SectionLifecycleProvider, {
4289
+ onActivate: onActivate,
4290
+ entersWithFadeTransition: (_section$transition = section.transition) === null || _section$transition === void 0 ? void 0 : _section$transition.startsWith('fade')
4291
+ }, /*#__PURE__*/React.createElement(SectionAtmo, {
4292
+ audioFilePermaId: section.atmoAudioFileId
4293
+ }), /*#__PURE__*/React.createElement(SectionContents, {
4294
+ section: section,
4295
+ backdrop: backdrop,
4296
+ contentElements: contentElements,
4297
+ state: state,
4298
+ transitionStyles: transitionStyles
4299
+ })));
4300
+ });
4301
+ Section.defaultProps = {
4302
+ domIdPrefix: 'section'
4303
+ };
4466
4304
 
4467
- var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground":"fadeInFadeOutBg-module_foreground__24f_M","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc"};
4305
+ function SectionContents(_ref3) {
4306
+ var section = _ref3.section,
4307
+ backdrop = _ref3.backdrop,
4308
+ contentElements = _ref3.contentElements,
4309
+ state = _ref3.state,
4310
+ transitionStyles = _ref3.transitionStyles;
4468
4311
 
4469
- var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH"};
4312
+ var _ref4 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
4313
+ Backdrop = _ref4.Backdrop,
4314
+ useMotifAreaState = _ref4.useMotifAreaState;
4470
4315
 
4471
- var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU utils-module_clip__34eot","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
4316
+ var _useSectionLifecycle = useSectionLifecycle(),
4317
+ shouldPrepare = _useSectionLifecycle.shouldPrepare;
4472
4318
 
4473
- var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF utils-module_clip__34eot","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
4319
+ var sectionProperties = useMemo(function () {
4320
+ return {
4321
+ layout: section.layout,
4322
+ invert: section.invert,
4323
+ sectionIndex: section.sectionIndex
4324
+ };
4325
+ }, [section.layout, section.invert, section.sectionIndex]);
4326
+ var transitions = getEnterAndExitTransitions(section, section.previousSection, section.nextSection);
4474
4327
 
4475
- var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF utils-module_clip__34eot","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
4328
+ var _transitions = _slicedToArray(transitions, 2),
4329
+ exitTransition = _transitions[1];
4476
4330
 
4477
- var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd utils-module_clip__34eot","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
4331
+ var _useMotifAreaState = useMotifAreaState({
4332
+ updateOnScrollAndResize: shouldPrepare,
4333
+ exposeMotifArea: section.exposeMotifArea,
4334
+ transitions: transitions,
4335
+ empty: !contentElements.length,
4336
+ sectionTransition: section.transition,
4337
+ fullHeight: section.fullHeight
4338
+ }),
4339
+ _useMotifAreaState2 = _slicedToArray(_useMotifAreaState, 3),
4340
+ motifAreaState = _useMotifAreaState2[0],
4341
+ setMotifAreaRef = _useMotifAreaState2[1],
4342
+ setContentAreaRef = _useMotifAreaState2[2];
4478
4343
 
4479
- var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
4344
+ var _getAppearanceCompone = getAppearanceComponents(section.appearance),
4345
+ Shadow = _getAppearanceCompone.Shadow,
4346
+ Box = _getAppearanceCompone.Box,
4347
+ BoxWrapper = _getAppearanceCompone.BoxWrapper;
4480
4348
 
4481
- var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-"};
4349
+ var staticShadowOpacity = percentToFraction(section.staticShadowOpacity, {
4350
+ defaultValue: 0.7
4351
+ });
4352
+ var dynamicShadowOpacity = percentToFraction(section.dynamicShadowOpacity, {
4353
+ defaultValue: 0.7
4354
+ });
4355
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Backdrop, Object.assign({}, section.backdrop, {
4356
+ effects: section.backdropEffects,
4357
+ effectsMobile: section.backdropEffectsMobile,
4358
+ backdrop: backdrop,
4359
+ eagerLoad: section.sectionIndex === 0,
4360
+ onMotifAreaUpdate: setMotifAreaRef,
4361
+ state: state,
4362
+ transitionStyles: transitionStyles
4363
+ }), function (children) {
4364
+ return /*#__PURE__*/React.createElement(Shadow, {
4365
+ align: section.layout,
4366
+ inverted: section.invert,
4367
+ motifAreaState: motifAreaState,
4368
+ staticShadowOpacity: staticShadowOpacity,
4369
+ dynamicShadowOpacity: dynamicShadowOpacity
4370
+ }, children);
4371
+ }), /*#__PURE__*/React.createElement(Foreground, {
4372
+ transitionStyles: transitionStyles,
4373
+ state: state,
4374
+ minHeight: motifAreaState.minHeight,
4375
+ paddingBottom: !endsWithFullWidthElement(contentElements),
4376
+ heightMode: heightMode(section)
4377
+ }, /*#__PURE__*/React.createElement(Box, {
4378
+ inverted: section.invert,
4379
+ coverInvisibleNextSection: exitTransition.startsWith('fade'),
4380
+ transitionStyles: transitionStyles,
4381
+ state: state,
4382
+ motifAreaState: motifAreaState,
4383
+ staticShadowOpacity: staticShadowOpacity
4384
+ }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
4385
+ dark: !section.invert
4386
+ }, /*#__PURE__*/React.createElement(Layout, {
4387
+ sectionId: section.id,
4388
+ items: contentElements,
4389
+ appearance: section.appearance,
4390
+ contentAreaRef: setContentAreaRef,
4391
+ sectionProps: sectionProperties
4392
+ }, function (children, boxProps) {
4393
+ return /*#__PURE__*/React.createElement(BoxWrapper, Object.assign({}, boxProps, {
4394
+ inverted: section.invert
4395
+ }), children);
4396
+ })))));
4397
+ }
4482
4398
 
4483
- var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau"};
4399
+ function ConnectedSection(props) {
4400
+ var contentElements = useSectionContentElements({
4401
+ sectionId: props.section.id,
4402
+ layout: props.section.layout
4403
+ });
4404
+ return /*#__PURE__*/React.createElement(Section, Object.assign({}, props, {
4405
+ contentElements: contentElements
4406
+ }));
4407
+ }
4484
4408
 
4485
- var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
4409
+ function heightMode(section) {
4410
+ if (section.fullHeight) {
4411
+ if (section.transition.startsWith('fade') && section.previousSection || section.nextSection && section.nextSection.transition.startsWith('fade')) {
4412
+ return 'fullFade';
4413
+ } else {
4414
+ return 'full';
4415
+ }
4416
+ }
4486
4417
 
4487
- var styles$m = {
4488
- fadeInBgConceal: fadeInBgConceal,
4489
- fadeInBgFadeOut: fadeInBgFadeOut,
4490
- fadeInBgFadeOutBg: fadeInBgFadeOutBg,
4491
- fadeInBgScrollOut: fadeInBgScrollOut,
4492
- fadeInConceal: fadeInConceal,
4493
- fadeInFadeOut: fadeInFadeOut,
4494
- fadeInFadeOutBg: fadeInFadeOutBg,
4495
- fadeInScrollOut: fadeInScrollOut,
4496
- revealConceal: revealConceal,
4497
- revealFadeOut: revealFadeOut,
4498
- revealFadeOutBg: revealFadeOutBg,
4499
- revealScrollOut: revealScrollOut,
4500
- scrollInConceal: scrollInConceal,
4501
- scrollInFadeOut: scrollInFadeOut,
4502
- scrollInFadeOutBg: scrollInFadeOutBg,
4503
- scrollInScrollOut: scrollInScrollOut
4504
- };
4505
- var enterTransitions = {
4506
- fade: 'fadeIn',
4507
- fadeBg: 'fadeInBg',
4508
- scroll: 'scrollIn',
4509
- scrollOver: 'scrollIn',
4510
- reveal: 'reveal',
4511
- beforeAfter: 'reveal'
4512
- };
4513
- var exitTransitions = {
4514
- fade: 'fadeOut',
4515
- fadeBg: 'fadeOutBg',
4516
- scroll: 'scrollOut',
4517
- scrollOver: 'conceal',
4518
- reveal: 'scrollOut',
4519
- beforeAfter: 'conceal'
4520
- };
4521
- function getTransitionNames() {
4522
- return Object.keys(exitTransitions);
4418
+ return 'dynamic';
4419
+ }
4420
+
4421
+ function endsWithFullWidthElement(elements) {
4422
+ var lastElement = elements[elements.length - 1];
4423
+ return lastElement && lastElement.position === 'inline' && lastElement.width === widths.full;
4523
4424
  }
4524
- function getAvailableTransitionNames(section, previousSection) {
4525
- if (!section.fullHeight || !previousSection.fullHeight) {
4526
- return getTransitionNames().filter(function (name) {
4527
- return !name.startsWith('fade');
4528
- });
4529
- }
4530
4425
 
4531
- return getTransitionNames();
4426
+ function percentToFraction(value, _ref5) {
4427
+ var defaultValue = _ref5.defaultValue;
4428
+ return typeof value !== 'undefined' ? value / 100 : defaultValue;
4532
4429
  }
4533
- function getTransitionStyles(section, previousSection, nextSection) {
4534
- var name = getTransitionStylesName(section, previousSection, nextSection);
4535
4430
 
4536
- if (!styles$m[name]) {
4537
- throw new Error("Unknown transition ".concat(name));
4538
- }
4431
+ var CurrentChapterContext = React.createContext();
4432
+ var CurrentSectionIndexStateContext = React.createContext();
4433
+ function CurrentSectionProvider(_ref) {
4434
+ var children = _ref.children;
4539
4435
 
4540
- return styles$m[name];
4541
- }
4542
- function getEnterAndExitTransitions(section, previousSection, nextSection) {
4543
- return [enterTransitions[getTransitionName(previousSection, section)], exitTransitions[getTransitionName(section, nextSection)]];
4436
+ var _useState = useState(0),
4437
+ _useState2 = _slicedToArray(_useState, 2),
4438
+ currentSectionIndex = _useState2[0],
4439
+ setCurrentSectionIndex = _useState2[1];
4440
+
4441
+ var currentSectionIndexState = useMemo(function () {
4442
+ return [currentSectionIndex, setCurrentSectionIndex];
4443
+ }, [currentSectionIndex, setCurrentSectionIndex]);
4444
+ var sections = useSectionsWithChapter();
4445
+ var currentSection = sections[currentSectionIndex];
4446
+ return /*#__PURE__*/React.createElement(CurrentChapterContext.Provider, {
4447
+ value: currentSection === null || currentSection === void 0 ? void 0 : currentSection.chapter
4448
+ }, /*#__PURE__*/React.createElement(CurrentSectionIndexStateContext.Provider, {
4449
+ value: currentSectionIndexState
4450
+ }, children));
4544
4451
  }
4545
- function getTransitionStylesName(section, previousSection, nextSection) {
4546
- var _getEnterAndExitTrans = getEnterAndExitTransitions(section, previousSection, nextSection),
4547
- _getEnterAndExitTrans2 = _slicedToArray(_getEnterAndExitTrans, 2),
4548
- enter = _getEnterAndExitTrans2[0],
4549
- exit = _getEnterAndExitTrans2[1];
4452
+ /**
4453
+ * Returns chapter containing the current scroll position.
4454
+ *
4455
+ * @example
4456
+ *
4457
+ * const chapter = useCurrentChapter();
4458
+ * chapter // =>
4459
+ * {
4460
+ * id: 3,
4461
+ * permaId: 5,
4462
+ * title: 'Chapter 1',
4463
+ * summary: 'An introductory chapter',
4464
+ * chapterSlug: 'chapter-1'
4465
+ * }
4466
+ */
4550
4467
 
4551
- return "".concat(enter).concat(capitalize(exit));
4468
+ function useCurrentChapter() {
4469
+ return useContext(CurrentChapterContext);
4470
+ }
4471
+ function useCurrentSectionIndexState() {
4472
+ return useContext(CurrentSectionIndexStateContext);
4552
4473
  }
4553
4474
 
4554
- function getTransitionName(previousSection, section) {
4555
- if (!section || !previousSection) {
4556
- return 'scroll';
4557
- }
4475
+ function usePostMessageListener(receiveData) {
4476
+ useEffect(function () {
4477
+ if (window.parent !== window) {
4478
+ window.addEventListener('message', receive);
4479
+ }
4558
4480
 
4559
- if ((!section.fullHeight || !previousSection.fullHeight) && section.transition.startsWith('fade')) {
4560
- return 'scroll';
4561
- }
4481
+ return function () {
4482
+ return window.removeEventListener('message', receive);
4483
+ };
4562
4484
 
4563
- return section.transition;
4485
+ function receive(message) {
4486
+ if (window.location.href.indexOf(message.origin) === 0) {
4487
+ receiveData(message.data);
4488
+ }
4489
+ }
4490
+ }, [receiveData]);
4564
4491
  }
4565
4492
 
4566
- function capitalize(string) {
4567
- return string.charAt(0).toUpperCase() + string.slice(1);
4568
- }
4493
+ var contentStyles = {"Content":"Content-module_Content__m7urk"};
4569
4494
 
4570
- function NoOpShadow(props) {
4571
- return /*#__PURE__*/React.createElement("div", null, props.children);
4495
+ var styles$o = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
4496
+
4497
+ var FocusVisibleContext = createContext();
4498
+ function useFocusOutlineVisible() {
4499
+ return useContext(FocusVisibleContext);
4572
4500
  }
4501
+ function FocusOutlineProvider(_ref) {
4502
+ var children = _ref.children;
4573
4503
 
4574
- var styles$n = {"static":"GradientShadow-module_static__rXNpZ","dynamic":"GradientShadow-module_dynamic__2v2JU","align-right":"GradientShadow-module_align-right__3iXZs","dark":"GradientShadow-module_dark__1YuV5","align-left":"GradientShadow-module_align-left__3qcNM","align-center":"GradientShadow-module_align-center__2C7cl","align-centerRagged":"GradientShadow-module_align-centerRagged__2-iv8","light":"GradientShadow-module_light__Vn92v","shadow":"GradientShadow-module_shadow__2UiDH"};
4504
+ var _useState = useState(),
4505
+ _useState2 = _slicedToArray(_useState, 2),
4506
+ value = _useState2[0],
4507
+ setValue = _useState2[1];
4575
4508
 
4576
- function GradientShadow(props) {
4577
- // Hide static shadow if motif area intersects with content area.
4578
- var staticShadowOpacity = props.motifAreaState.isContentPadded ? 0 : props.staticShadowOpacity; // If motif area intersects with content area horizontally, fade in
4579
- // shadow soon as the content has been scrolled far enough to start
4580
- // intersecting with the motif area vertically.
4509
+ useEffect(function () {
4510
+ document.body.addEventListener('keydown', enable);
4511
+ document.body.addEventListener('mousedown', disable);
4512
+ disable();
4513
+ return function () {
4514
+ document.body.removeEventListener('keydown', enable);
4515
+ document.body.removeEventListener('mousedown', disable);
4516
+ };
4581
4517
 
4582
- var opacityFactor = // Make shadow reach full opacity when content has been scrolled
4583
- // up half way across the motif area.
4584
- roundToFirstDecimalPlace(Math.min(1, props.motifAreaState.intersectionRatioY * 2));
4585
- return /*#__PURE__*/React.createElement("div", {
4586
- className: classNames(styles$n["align-".concat(props.align)], props.inverted ? styles$n.light : styles$n.dark)
4587
- }, /*#__PURE__*/React.createElement("div", {
4588
- className: styles$n.dynamic,
4589
- style: {
4590
- opacity: props.dynamicShadowOpacity * opacityFactor
4518
+ function enable() {
4519
+ document.body.classList.remove(styles$o.focusOutlineDisabled);
4520
+ setValue(true);
4591
4521
  }
4592
- }, /*#__PURE__*/React.createElement(Fullscreen, null)), /*#__PURE__*/React.createElement("div", {
4593
- className: styles$n["static"],
4594
- style: {
4595
- opacity: staticShadowOpacity
4522
+
4523
+ function disable() {
4524
+ document.body.classList.add(styles$o.focusOutlineDisabled);
4525
+ setValue(false);
4596
4526
  }
4597
- }, /*#__PURE__*/React.createElement(Fullscreen, null)), props.children);
4527
+ }, []);
4528
+ return /*#__PURE__*/React.createElement(FocusVisibleContext.Provider, {
4529
+ value: value
4530
+ }, children);
4598
4531
  }
4599
- GradientShadow.defaultProps = {
4600
- opacity: 0.7,
4601
- align: 'left'
4602
- };
4603
4532
 
4604
- function roundToFirstDecimalPlace(value) {
4605
- return Math.round(value * 10) / 10;
4606
- }
4533
+ var PhonePlatformProvider = withInlineEditingAlternative('PhonePlatformProvider', function PhonePlatformProvider(_ref) {
4534
+ var children = _ref.children;
4535
+ var isPhonePlatform = useBrowserFeature('phone platform');
4536
+ return /*#__PURE__*/React.createElement(PhonePlatformContext.Provider, {
4537
+ value: isPhonePlatform
4538
+ }, children);
4539
+ });
4607
4540
 
4608
- var styles$o = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
4541
+ var AudioFocusContext = createContext();
4542
+ function AudioFocusProvider(_ref) {
4543
+ var children = _ref.children;
4609
4544
 
4610
- function InvisibleBoxWrapper(_ref) {
4611
- var _classNames;
4545
+ var _useState = useState([]),
4546
+ _useState2 = _slicedToArray(_useState, 2),
4547
+ currentKey = _useState2[0],
4548
+ setCurrentKey = _useState2[1];
4612
4549
 
4613
- var position = _ref.position,
4614
- openStart = _ref.openStart,
4615
- openEnd = _ref.openEnd,
4616
- children = _ref.children;
4617
- return /*#__PURE__*/React.createElement("div", {
4618
- className: classNames((_classNames = {}, _defineProperty(_classNames, styles$o.start, !openStart && position !== 'full'), _defineProperty(_classNames, styles$o.end, !openEnd && position !== 'full'), _classNames))
4550
+ var value = useMemo(function () {
4551
+ return [currentKey, setCurrentKey];
4552
+ }, [currentKey, setCurrentKey]);
4553
+ return /*#__PURE__*/React.createElement(AudioFocusContext.Provider, {
4554
+ value: value
4619
4555
  }, children);
4620
4556
  }
4557
+ /**
4558
+ * Prevent parallel playback of multiple media elements.
4559
+ *
4560
+ * @param {Object} options
4561
+ * @param {number} options.key - Unique id used to identify the element.
4562
+ * @param {boolean} options.request - Set to true to request audio focus.
4563
+ * @param {Function} options.onLost -
4564
+ * Callback that will be invoked if another element requests audio
4565
+ * focus, thereby preempting your hold of audio focus. The callback
4566
+ * should pause the element.
4567
+ */
4621
4568
 
4622
- var styles$p = {"wrapper":"GradientBox-module_wrapper__1Jj7N","content":"GradientBox-module_content__96lDk","shadow":"GradientBox-module_shadow__2XilX","gradient":"GradientBox-module_gradient__31tJ-","long":"GradientBox-module_long__10s6v","root":"GradientBox-module_root__8Xn9W","withShadow":"GradientBox-module_withShadow__3mhPR","shadowDark":"GradientBox-module_shadowDark__3Tv0L","shadowLight":"GradientBox-module_shadowLight__Bieg6"};
4569
+ function useAudioFocus(_ref2) {
4570
+ var key = _ref2.key,
4571
+ request = _ref2.request,
4572
+ onLost = _ref2.onLost;
4573
+ var wasRequested = usePrevious(request);
4623
4574
 
4624
- function GradientBox(props) {
4625
- var _classNames;
4575
+ var _useContext = useContext(AudioFocusContext),
4576
+ _useContext2 = _slicedToArray(_useContext, 2),
4577
+ currentKey = _useContext2[0],
4578
+ setCurrentKey = _useContext2[1];
4626
4579
 
4627
- return /*#__PURE__*/React.createElement("div", {
4628
- className: classNames(styles$p.root, (_classNames = {}, _defineProperty(_classNames, styles$p.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$p["long"], props.coverInvisibleNextSection), _classNames)),
4629
- style: {
4630
- paddingTop: props.motifAreaState.paddingTop
4580
+ var previousKey = usePrevious(currentKey);
4581
+ useEffect(function () {
4582
+ if (request && !wasRequested) {
4583
+ setCurrentKey(key);
4631
4584
  }
4632
- }, /*#__PURE__*/React.createElement("div", {
4633
- className: styles$p.wrapper
4634
- }, /*#__PURE__*/React.createElement("div", {
4635
- className: classNames(styles$p.shadow, props.inverted ? styles$p.shadowLight : styles$p.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
4636
- style: {
4637
- top: props.motifAreaState.paddingTop,
4638
- opacity: props.staticShadowOpacity
4585
+ }, [request, wasRequested, setCurrentKey, key]);
4586
+ useEffect(function () {
4587
+ if (previousKey === key && currentKey !== key) {
4588
+ onLost();
4639
4589
  }
4640
- }), /*#__PURE__*/React.createElement("div", {
4641
- className: styles$p.content
4642
- }, props.children)));
4590
+ }, [currentKey, previousKey, key, onLost]);
4643
4591
  }
4644
4592
 
4645
- var styles$q = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
4646
-
4647
- function CardBox(props) {
4648
- return /*#__PURE__*/React.createElement("div", {
4649
- className: styles$q.wrapper,
4650
- style: {
4651
- paddingTop: props.motifAreaState.paddingTop
4652
- }
4653
- }, /*#__PURE__*/React.createElement("div", {
4654
- className: styles$q.content
4655
- }, props.children));
4593
+ var ConsentContext = createContext();
4594
+ function ConsentProvider(_ref) {
4595
+ var consent = _ref.consent,
4596
+ children = _ref.children;
4597
+ return /*#__PURE__*/React.createElement(ConsentContext.Provider, {
4598
+ value: consent
4599
+ }, children);
4656
4600
  }
4601
+ function useConsentRequested() {
4602
+ var consent = useContext(ConsentContext);
4657
4603
 
4658
- var styles$r = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","card":"CardBoxWrapper-module_card__hvRUa","cardStart":"CardBoxWrapper-module_cardStart__2NywG","cardEnd":"CardBoxWrapper-module_cardEnd__x4Ye6","cardBgWhite":"CardBoxWrapper-module_cardBgWhite__xXhg7","cardBgBlack":"CardBoxWrapper-module_cardBgBlack__Ahp3s"};
4659
-
4660
- var positionOutsideBox = ['sticky', 'wide', 'full'];
4661
- function CardBoxWrapper(props) {
4662
- return /*#__PURE__*/React.createElement("div", {
4663
- className: className$1(props)
4664
- }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
4665
- invert: !positionOutsideBox.includes(props.position)
4666
- }, props.children));
4667
- }
4604
+ var _useState = useState({}),
4605
+ _useState2 = _slicedToArray(_useState, 2),
4606
+ request = _useState2[0],
4607
+ setRequest = _useState2[1];
4668
4608
 
4669
- function className$1(props) {
4670
- if (positionOutsideBox.includes(props.position)) {
4671
- return undefined;
4672
- }
4609
+ useIsomorphicLayoutEffect(function () {
4610
+ var unmounted = false;
4673
4611
 
4674
- return classNames(styles$r.card, props.inverted ? styles$r.cardBgBlack : styles$r.cardBgWhite, _defineProperty({}, styles$r.cardStart, !props.openStart), _defineProperty({}, styles$r.cardEnd, !props.openEnd));
4675
- }
4612
+ _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
4613
+ var _yield$consent$reques, vendors, _acceptAll, _denyAll, _save;
4676
4614
 
4677
- var components$1 = {
4678
- shadow: {
4679
- Shadow: GradientShadow,
4680
- Box: GradientBox,
4681
- BoxWrapper: InvisibleBoxWrapper
4682
- },
4683
- transparent: {
4684
- Shadow: NoOpShadow,
4685
- Box: CardBox,
4686
- BoxWrapper: InvisibleBoxWrapper
4687
- },
4688
- cards: {
4689
- Shadow: NoOpShadow,
4690
- Box: CardBox,
4691
- BoxWrapper: CardBoxWrapper
4692
- }
4693
- };
4694
- function getAppearanceComponents(appearance) {
4695
- return components$1[appearance || 'shadow'];
4696
- }
4615
+ return regenerator.wrap(function _callee$(_context) {
4616
+ while (1) {
4617
+ switch (_context.prev = _context.next) {
4618
+ case 0:
4619
+ _context.next = 2;
4620
+ return consent.requested();
4697
4621
 
4698
- var Section = withInlineEditingDecorator('SectionDecorator', function Section(_ref) {
4699
- var section = _ref.section,
4700
- contentElements = _ref.contentElements,
4701
- state = _ref.state,
4702
- isScrollTarget = _ref.isScrollTarget,
4703
- onActivate = _ref.onActivate,
4704
- domIdPrefix = _ref.domIdPrefix;
4622
+ case 2:
4623
+ _yield$consent$reques = _context.sent;
4624
+ vendors = _yield$consent$reques.vendors;
4625
+ _acceptAll = _yield$consent$reques.acceptAll;
4626
+ _denyAll = _yield$consent$reques.denyAll;
4627
+ _save = _yield$consent$reques.save;
4705
4628
 
4706
- var _ref2 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
4707
- useBackdrop = _ref2.useBackdrop,
4708
- useBackdropSectionClassNames = _ref2.useBackdropSectionClassNames,
4709
- useBackdropSectionCustomProperties = _ref2.useBackdropSectionCustomProperties;
4629
+ if (!unmounted) {
4630
+ setRequest({
4631
+ vendors: vendors,
4632
+ acceptAll: function acceptAll() {
4633
+ _acceptAll();
4710
4634
 
4711
- var backdrop = useBackdrop(section);
4712
- var ref = useRef();
4713
- useScrollTarget(ref, isScrollTarget);
4714
- var transitionStyles = getTransitionStyles(section, section.previousSection, section.nextSection);
4715
- var backdropSectionClassNames = useBackdropSectionClassNames(backdrop, {
4716
- layout: section.layout,
4717
- exposeMotifArea: section.exposeMotifArea,
4718
- empty: !contentElements.length
4719
- });
4720
- return /*#__PURE__*/React.createElement("section", {
4721
- id: "".concat(domIdPrefix, "-").concat(section.permaId),
4722
- ref: ref,
4723
- className: classNames(styles$l.Section, transitionStyles.section, backdropSectionClassNames, _defineProperty({}, styles$l.first, section.sectionIndex === 0), _defineProperty({}, styles$l.narrow, section.width === 'narrow'), _defineProperty({}, styles$l.invert, section.invert)),
4724
- style: useBackdropSectionCustomProperties(backdrop)
4725
- }, /*#__PURE__*/React.createElement(SectionLifecycleProvider, {
4726
- onActivate: onActivate,
4727
- isLast: !section.nextSection
4728
- }, /*#__PURE__*/React.createElement(SectionAtmo, {
4729
- audioFilePermaId: section.atmoAudioFileId
4730
- }), /*#__PURE__*/React.createElement(SectionContents, {
4731
- section: section,
4732
- backdrop: backdrop,
4733
- contentElements: contentElements,
4734
- state: state,
4735
- transitionStyles: transitionStyles
4736
- })));
4737
- });
4738
- Section.defaultProps = {
4739
- domIdPrefix: 'section'
4740
- };
4635
+ setRequest({});
4636
+ },
4637
+ denyAll: function denyAll() {
4638
+ _denyAll();
4741
4639
 
4742
- function SectionContents(_ref3) {
4743
- var section = _ref3.section,
4744
- backdrop = _ref3.backdrop,
4745
- contentElements = _ref3.contentElements,
4746
- state = _ref3.state,
4747
- transitionStyles = _ref3.transitionStyles;
4640
+ setRequest({});
4641
+ },
4642
+ save: function save(decisions) {
4643
+ _save(decisions);
4748
4644
 
4749
- var _ref4 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
4750
- Backdrop = _ref4.Backdrop,
4751
- useMotifAreaState = _ref4.useMotifAreaState;
4645
+ setRequest({});
4646
+ }
4647
+ });
4648
+ }
4752
4649
 
4753
- var _useSectionLifecycle = useSectionLifecycle(),
4754
- shouldPrepare = _useSectionLifecycle.shouldPrepare;
4650
+ case 8:
4651
+ case "end":
4652
+ return _context.stop();
4653
+ }
4654
+ }
4655
+ }, _callee);
4656
+ }))();
4755
4657
 
4756
- var sectionProperties = useMemo(function () {
4757
- return {
4758
- layout: section.layout,
4759
- invert: section.invert,
4760
- sectionIndex: section.sectionIndex
4658
+ return function () {
4659
+ return unmounted = true;
4761
4660
  };
4762
- }, [section.layout, section.invert, section.sectionIndex]);
4763
- var transitions = getEnterAndExitTransitions(section, section.previousSection, section.nextSection);
4661
+ }, [consent]);
4662
+ return request;
4663
+ }
4664
+ function useConsentGiven(vendorName) {
4665
+ var consent = useContext(ConsentContext);
4764
4666
 
4765
- var _transitions = _slicedToArray(transitions, 2),
4766
- exitTransition = _transitions[1];
4667
+ var _useContentElementEdi = useContentElementEditorState(),
4668
+ isEditable = _useContentElementEdi.isEditable;
4767
4669
 
4768
- var _useMotifAreaState = useMotifAreaState({
4769
- updateOnScrollAndResize: shouldPrepare,
4770
- exposeMotifArea: section.exposeMotifArea,
4771
- transitions: transitions,
4772
- empty: !contentElements.length,
4773
- sectionTransition: section.transition,
4774
- fullHeight: section.fullHeight
4775
- }),
4776
- _useMotifAreaState2 = _slicedToArray(_useMotifAreaState, 3),
4777
- motifAreaState = _useMotifAreaState2[0],
4778
- setMotifAreaRef = _useMotifAreaState2[1],
4779
- setContentAreaRef = _useMotifAreaState2[2];
4670
+ var isStaticPreview = useIsStaticPreview();
4780
4671
 
4781
- var _getAppearanceCompone = getAppearanceComponents(section.appearance),
4782
- Shadow = _getAppearanceCompone.Shadow,
4783
- Box = _getAppearanceCompone.Box,
4784
- BoxWrapper = _getAppearanceCompone.BoxWrapper;
4672
+ var _useState3 = useState(isEditable || isStaticPreview),
4673
+ _useState4 = _slicedToArray(_useState3, 2),
4674
+ consentGiven = _useState4[0],
4675
+ setConsentGiven = _useState4[1];
4785
4676
 
4786
- var staticShadowOpacity = percentToFraction(section.staticShadowOpacity, {
4787
- defaultValue: 0.7
4788
- });
4789
- var dynamicShadowOpacity = percentToFraction(section.dynamicShadowOpacity, {
4790
- defaultValue: 0.7
4791
- });
4792
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Backdrop, Object.assign({}, section.backdrop, {
4793
- effects: section.backdropEffects,
4794
- effectsMobile: section.backdropEffectsMobile,
4795
- backdrop: backdrop,
4796
- eagerLoad: section.sectionIndex === 0,
4797
- onMotifAreaUpdate: setMotifAreaRef,
4798
- state: state,
4799
- transitionStyles: transitionStyles
4800
- }), function (children) {
4801
- return /*#__PURE__*/React.createElement(Shadow, {
4802
- align: section.layout,
4803
- inverted: section.invert,
4804
- motifAreaState: motifAreaState,
4805
- staticShadowOpacity: staticShadowOpacity,
4806
- dynamicShadowOpacity: dynamicShadowOpacity
4807
- }, children);
4808
- }), /*#__PURE__*/React.createElement(Foreground, {
4809
- transitionStyles: transitionStyles,
4810
- state: state,
4811
- minHeight: motifAreaState.minHeight,
4812
- paddingBottom: !endsWithFullWidthElement(contentElements),
4813
- heightMode: heightMode(section)
4814
- }, /*#__PURE__*/React.createElement(Box, {
4815
- inverted: section.invert,
4816
- coverInvisibleNextSection: exitTransition.startsWith('fade'),
4817
- transitionStyles: transitionStyles,
4818
- state: state,
4819
- motifAreaState: motifAreaState,
4820
- staticShadowOpacity: staticShadowOpacity
4821
- }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
4822
- dark: !section.invert
4823
- }, /*#__PURE__*/React.createElement(Layout, {
4824
- sectionId: section.id,
4825
- items: contentElements,
4826
- appearance: section.appearance,
4827
- contentAreaRef: setContentAreaRef,
4828
- sectionProps: sectionProperties
4829
- }, function (children, boxProps) {
4830
- return /*#__PURE__*/React.createElement(BoxWrapper, Object.assign({}, boxProps, {
4831
- inverted: section.invert
4832
- }), children);
4833
- })))));
4834
- }
4677
+ useIsomorphicLayoutEffect(function () {
4678
+ var unmounted = false;
4835
4679
 
4836
- function ConnectedSection(props) {
4837
- var contentElements = useSectionContentElements({
4838
- sectionId: props.section.id
4839
- });
4840
- return /*#__PURE__*/React.createElement(Section, Object.assign({}, props, {
4841
- contentElements: contentElements
4842
- }));
4843
- }
4680
+ _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
4681
+ var result;
4682
+ return regenerator.wrap(function _callee2$(_context2) {
4683
+ while (1) {
4684
+ switch (_context2.prev = _context2.next) {
4685
+ case 0:
4686
+ if (!(!vendorName || isEditable || isStaticPreview)) {
4687
+ _context2.next = 2;
4688
+ break;
4689
+ }
4844
4690
 
4845
- function heightMode(section) {
4846
- if (section.fullHeight) {
4847
- if (section.transition.startsWith('fade') && section.previousSection || section.nextSection && section.nextSection.transition.startsWith('fade')) {
4848
- return 'fullFade';
4849
- } else {
4850
- return 'full';
4851
- }
4852
- }
4691
+ return _context2.abrupt("return");
4853
4692
 
4854
- return 'dynamic';
4855
- }
4693
+ case 2:
4694
+ _context2.next = 4;
4695
+ return consent.requireAccepted(vendorName);
4856
4696
 
4857
- function endsWithFullWidthElement(elements) {
4858
- var lastElement = elements[elements.length - 1];
4859
- return lastElement && lastElement.position === 'full';
4860
- }
4697
+ case 4:
4698
+ result = _context2.sent;
4861
4699
 
4862
- function percentToFraction(value, _ref5) {
4863
- var defaultValue = _ref5.defaultValue;
4864
- return typeof value !== 'undefined' ? value / 100 : defaultValue;
4700
+ if (!unmounted && result === 'fulfilled') {
4701
+ setConsentGiven(true);
4702
+ }
4703
+
4704
+ case 6:
4705
+ case "end":
4706
+ return _context2.stop();
4707
+ }
4708
+ }
4709
+ }, _callee2);
4710
+ }))();
4711
+
4712
+ return function () {
4713
+ return unmounted = true;
4714
+ };
4715
+ }, [consent, vendorName]);
4716
+ var giveConsent = useCallback(function () {
4717
+ return consent.accept(vendorName);
4718
+ }, [consent, vendorName]);
4719
+ return [consentGiven, giveConsent];
4865
4720
  }
4866
4721
 
4867
- var CurrentChapterContext = React.createContext();
4868
- var CurrentSectionIndexStateContext = React.createContext();
4869
- function CurrentSectionProvider(_ref) {
4870
- var children = _ref.children;
4722
+ var styles$p = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
4871
4723
 
4872
- var _useState = useState(0),
4873
- _useState2 = _slicedToArray(_useState, 2),
4874
- currentSectionIndex = _useState2[0],
4875
- setCurrentSectionIndex = _useState2[1];
4724
+ function _extends() {
4725
+ _extends = Object.assign || function (target) {
4726
+ for (var i = 1; i < arguments.length; i++) {
4727
+ var source = arguments[i];
4728
+
4729
+ for (var key in source) {
4730
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
4731
+ target[key] = source[key];
4732
+ }
4733
+ }
4734
+ }
4735
+
4736
+ return target;
4737
+ };
4876
4738
 
4877
- var currentSectionIndexState = useMemo(function () {
4878
- return [currentSectionIndex, setCurrentSectionIndex];
4879
- }, [currentSectionIndex, setCurrentSectionIndex]);
4880
- var sections = useSectionsWithChapter();
4881
- var currentSection = sections[currentSectionIndex];
4882
- return /*#__PURE__*/React.createElement(CurrentChapterContext.Provider, {
4883
- value: currentSection === null || currentSection === void 0 ? void 0 : currentSection.chapter
4884
- }, /*#__PURE__*/React.createElement(CurrentSectionIndexStateContext.Provider, {
4885
- value: currentSectionIndexState
4886
- }, children));
4739
+ return _extends.apply(this, arguments);
4887
4740
  }
4741
+ var OptInIcon = (function (_ref) {
4742
+ var _ref$styles = _ref.styles,
4743
+ props = _objectWithoutProperties(_ref, ["styles"]);
4744
+
4745
+ return /*#__PURE__*/React.createElement("svg", _extends({
4746
+ xmlns: "http://www.w3.org/2000/svg",
4747
+ viewBox: "0 0 131 95"
4748
+ }, props), /*#__PURE__*/React.createElement("path", {
4749
+ d: "M32.01.01C46.678-.01 61.345.009 76.014.002 83.007.007 90-.009 96.99.011c.015 9.157.014 18.316 0 27.474-1.357.073-2.706.259-4.048.478-.01-7.986 0-15.975-.004-23.961-18.958-.003-37.917-.003-56.875 0l-.001 28.916c.01 2.37-.022 4.742.016 7.113 6.173-.025 12.348-.006 18.52-.011 5.804.01 11.609-.022 17.41.013-1 1.28-2.001 2.56-2.844 3.948-12.372.024-24.748-.011-37.12.019-.06-.365-.03-.735-.034-1.1V17.497c.007-5.83-.024-11.659.001-17.486zm17.617 8.004a5.999 5.999 0 014.359 1.49c1.273 1.116 2.048 2.8 2.013 4.498.042 1.806-.845 3.59-2.263 4.702-1.271 1.013-2.975 1.483-4.583 1.228a5.88 5.88 0 01-3.479-1.785c-1.44-1.459-2.013-3.695-1.475-5.67.6-2.448 2.905-4.346 5.428-4.463zm22.106 7.758c.181-.258.332-.54.547-.772 2.325 3.868 4.683 7.717 7.02 11.578.891 1.503 1.85 2.973 2.7 4.5a35.062 35.062 0 00-5.646 3.779c-.154.162-.387.14-.592.143-10.585-.014-21.174.014-31.762-.015.088-.228.308-.367.47-.542 3.79-3.745 7.58-7.484 11.365-11.232.098-.085.217-.265.366-.15 2.65 1.308 5.3 2.62 7.951 3.928 2.545-3.73 5.052-7.48 7.581-11.217zM0 21.042c.256-.058.517-.039.775-.039 9.175.007 18.349-.007 27.523.007l.064.076c.017 1.308-.012 2.618.015 3.927-5.416.038-10.834.001-16.252.018-.01 7.981-.013 15.962.002 23.944 11.917.013 23.834.013 35.752 0 .022-.674-.002-1.35.012-2.023 4.034.01 8.07.01 12.105 0 .002 11.349.01 22.698-.003 34.048-12.082-.025-24.163-.003-36.244-.01-7.911.007-15.823-.015-23.734.01-.02-19.988.01-39.975-.015-59.959zm3.435 4.043c-.904.236-1.577 1.152-1.482 2.086.079.997.994 1.837 1.999 1.82 1.367.002 2.736.015 4.105-.007 1.04-.036 1.928-.995 1.878-2.03-.003-.996-.867-1.896-1.868-1.925-1.294-.01-2.585.002-3.878-.005-.252.004-.51-.013-.754.061zm-.219 8.067c-.815.317-1.373 1.203-1.256 2.076.1.938.94 1.724 1.89 1.756 1.25.016 2.5-.002 3.752.008.439.008.9-.025 1.288-.246.73-.39 1.173-1.257 1.019-2.075-.136-.889-.95-1.62-1.852-1.645-1.328-.007-2.653.002-3.98-.004-.29-.005-.589.016-.86.13zm.219 7.923c-.762.2-1.372.884-1.471 1.665-.128.844.384 1.718 1.158 2.064.403.192.859.19 1.295.181 1.217-.008 2.434.011 3.651-.008 1.032-.047 1.92-.998 1.868-2.034-.007-.994-.87-1.891-1.87-1.922-1.293-.011-2.584.002-3.877-.006-.252-.001-.51-.008-.754.06zm-.01 8.003c-1.018.249-1.706 1.392-1.413 2.403.21.868 1.057 1.512 1.95 1.497 1.364-.003 2.728.01 4.09-.006 1.02-.034 1.906-.958 1.883-1.975.026-1.017-.858-1.958-1.88-1.981-1.252-.011-2.503.002-3.754-.003-.292-.004-.591-.018-.877.065zm48.107 0c-1.117.272-1.79 1.607-1.323 2.66a2.027 2.027 0 001.86 1.238c1.326.003 2.652.003 3.977 0 1.056.025 2.032-.916 1.996-1.978.045-1.022-.86-1.96-1.88-1.984-1.252-.008-2.503.003-3.754-.002-.293 0-.591-.017-.876.066zM12.13 53.016c-.015 7.981-.012 15.961-.001 23.943 11.917.003 23.836.003 35.753 0 .011-7.982.014-15.962-.001-23.943a14203.52 14203.52 0 00-35.75 0zm-8.694 4.05c-.797.208-1.422.943-1.482 1.764-.112 1.07.805 2.103 1.883 2.137 1.371.014 2.743.003 4.113.006 1.035.01 1.977-.89 1.986-1.928.054-1.033-.83-2.003-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289 0-.584-.014-.867.064zm48.108.003c-.951.235-1.623 1.244-1.456 2.208.123.947 1.016 1.71 1.972 1.696h3.997c1.031.013 1.994-.886 1.984-1.928.071-1.036-.829-2.011-1.866-2.037-1.254-.01-2.51.003-3.764-.005-.29 0-.586-.014-.867.066zM3.425 65.066c-.955.242-1.634 1.262-1.45 2.234.14.9.957 1.638 1.874 1.662 1.364.011 2.727 0 4.09.006 1.06.022 2.023-.925 1.997-1.984.027-1.02-.86-1.952-1.882-1.98-1.211-.012-2.426.002-3.637-.004-.332-.001-.669-.021-.992.066zm48.107.003c-.927.231-1.584 1.195-1.456 2.14.093.935.935 1.723 1.879 1.752 1.365.011 2.73 0 4.093.006 1.055.016 2.043-.917 1.994-1.984.045-1.023-.86-1.958-1.88-1.981-1.252-.011-2.502.002-3.753-.003-.294-.003-.592-.012-.877.07zM3.435 73.057c-.797.204-1.422.94-1.482 1.76-.111 1.07.802 2.112 1.883 2.138 1.371.013 2.743.002 4.113.005 1.035.017 1.977-.891 1.986-1.928.054-1.033-.835-1.997-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289.001-.584-.01-.867.067zm48.108 0c-.887.22-1.543 1.118-1.476 2.029.035.974.892 1.837 1.874 1.869 1.37.013 2.742.002 4.114.005 1.033.017 1.993-.883 1.985-1.925.071-1.039-.833-2.006-1.868-2.04-1.254-.01-2.509.003-3.763-.005-.289.001-.585-.01-.866.067zM96.83 31.045c6.813-.36 13.73 1.456 19.431 5.154a32.396 32.396 0 019.482 9.342 31.527 31.527 0 015.043 13.773c.625 5.36-.123 10.88-2.225 15.867-1.766 4.254-4.499 8.108-7.91 11.243a32.605 32.605 0 01-11.584 6.844 33.066 33.066 0 01-15.656 1.337 32.59 32.59 0 01-13.329-5.235c-5.2-3.514-9.323-8.551-11.692-14.307a31.532 31.532 0 01-2.327-14.038 31.433 31.433 0 013.839-13.243 32.232 32.232 0 018.329-9.799c5.259-4.156 11.865-6.62 18.6-6.938zm15.6 12.011c-8.543.979-17.086 1.933-25.627 2.92-.013 8.152.006 16.308-.008 24.462-2.325-.848-5.015-.792-7.24.318-1.33.665-2.493 1.763-2.997 3.169-.503 1.356-.289 2.934.528 4.128.752 1.154 1.947 1.978 3.235 2.465 1.48.569 3.115.675 4.68.452 1.888-.295 3.742-1.222 4.862-2.784.67-.936.965-2.102.894-3.237-.014-7.054.008-14.105-.01-21.158 1.976-.282 3.965-.458 5.946-.7 4.944-.56 9.885-1.124 14.827-1.682V67.42c-1.677-.563-3.506-.755-5.247-.362-1.764.38-3.483 1.32-4.479 2.84a4.618 4.618 0 00-.637 3.729c.32 1.196 1.12 2.243 2.139 2.959 1.533 1.101 3.474 1.576 5.355 1.489 2.036-.083 4.111-.843 5.498-2.353a5.078 5.078 0 001.329-3.83c-.007-6.755-.002-13.51-.005-20.265.058-2.962-.002-5.924-.002-8.884-1.018.053-2.03.212-3.04.313z"
4750
+ }));
4751
+ });
4752
+
4888
4753
  /**
4889
- * Returns chapter containing the current scroll position.
4754
+ * Render opt in prompt instead of children if third party consent
4755
+ * cookie has been configured in theme options and user has not given
4756
+ * consent for passed provider.
4890
4757
  *
4891
- * @example
4758
+ * @param {Object} props
4759
+ * @param {string} props.providerName -
4760
+ * Only render children if user has given consent for this provider.
4761
+ * @param {React.ReactElement} props.children -
4762
+ * Children to conditionally render.
4763
+ * @param {function} [props.wrapper] -
4764
+ * Function that receives children to allow wrapping opt-in prompt
4765
+ * in custom elements.
4766
+ * @param {boolean} [props.icon=true] -
4767
+ * Allow hiding the icon in the opt-in prompt.
4892
4768
  *
4893
- * const chapter = useCurrentChapter();
4894
- * chapter // =>
4895
- * {
4896
- * id: 3,
4897
- * permaId: 5,
4898
- * title: 'Chapter 1',
4899
- * summary: 'An introductory chapter',
4900
- * chapterSlug: 'chapter-1'
4901
- * }
4769
+ * @name ThirdPartyOptIn
4902
4770
  */
4903
4771
 
4904
- function useCurrentChapter() {
4905
- return useContext(CurrentChapterContext);
4906
- }
4907
- function useCurrentSectionIndexState() {
4908
- return useContext(CurrentSectionIndexStateContext);
4909
- }
4772
+ function OptIn(_ref) {
4773
+ var children = _ref.children,
4774
+ providerName = _ref.providerName,
4775
+ wrapper = _ref.wrapper,
4776
+ icon = _ref.icon;
4910
4777
 
4911
- function usePostMessageListener(receiveData) {
4912
- useEffect(function () {
4913
- if (window.parent !== window) {
4914
- window.addEventListener('message', receive);
4915
- }
4778
+ var _useI18n = useI18n(),
4779
+ t = _useI18n.t;
4916
4780
 
4917
- return function () {
4918
- return window.removeEventListener('message', receive);
4919
- };
4781
+ var _useContentElementAtt = useContentElementAttributes(),
4782
+ contentElementId = _useContentElementAtt.contentElementId;
4920
4783
 
4921
- function receive(message) {
4922
- if (window.location.href.indexOf(message.origin) === 0) {
4923
- receiveData(message.data);
4924
- }
4925
- }
4926
- }, [receiveData]);
4927
- }
4784
+ var contentElementConsentVendor = useContentElementConsentVendor({
4785
+ contentElementId: contentElementId
4786
+ });
4787
+ providerName = providerName || (contentElementConsentVendor === null || contentElementConsentVendor === void 0 ? void 0 : contentElementConsentVendor.name);
4788
+ var cookieMessage = (contentElementConsentVendor === null || contentElementConsentVendor === void 0 ? void 0 : contentElementConsentVendor.optInPrompt) || t("pageflow_scrolled.public.third_party_consent.opt_in_prompt.".concat(providerName));
4928
4789
 
4929
- var contentStyles = {"Content":"Content-module_Content__m7urk"};
4790
+ var _useState = useState(false),
4791
+ _useState2 = _slicedToArray(_useState, 2),
4792
+ consentedHere = _useState2[0],
4793
+ setConsentedHere = _useState2[1];
4930
4794
 
4931
- var styles$s = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
4795
+ var _useConsentGiven = useConsentGiven(providerName),
4796
+ _useConsentGiven2 = _slicedToArray(_useConsentGiven, 2),
4797
+ consentGiven = _useConsentGiven2[0],
4798
+ giveConsent = _useConsentGiven2[1];
4932
4799
 
4933
- var FocusVisibleContext = createContext();
4934
- function useFocusOutlineVisible() {
4935
- return useContext(FocusVisibleContext);
4800
+ if (consentGiven || !providerName) {
4801
+ return typeof children === 'function' ? children({
4802
+ consentedHere: consentedHere
4803
+ }) : children;
4804
+ }
4805
+
4806
+ function accept() {
4807
+ giveConsent(providerName);
4808
+ setConsentedHere(true);
4809
+ }
4810
+
4811
+ return wrapper( /*#__PURE__*/React.createElement("div", {
4812
+ className: styles$p.optIn
4813
+ }, icon && /*#__PURE__*/React.createElement("div", {
4814
+ className: styles$p.optInIcon
4815
+ }, /*#__PURE__*/React.createElement(OptInIcon, null)), /*#__PURE__*/React.createElement("div", {
4816
+ className: styles$p.optInMessage
4817
+ }, cookieMessage), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
4818
+ className: styles$p.optInButton,
4819
+ onClick: accept
4820
+ }, t('pageflow_scrolled.public.third_party_consent.confirm')))));
4936
4821
  }
4937
- function FocusOutlineProvider(_ref) {
4938
- var children = _ref.children;
4822
+ OptIn.defaultProps = {
4823
+ icon: true,
4824
+ wrapper: function wrapper(children) {
4825
+ return children;
4826
+ }
4827
+ };
4939
4828
 
4940
- var _useState = useState(),
4941
- _useState2 = _slicedToArray(_useState, 2),
4942
- value = _useState2[0],
4943
- setValue = _useState2[1];
4829
+ var styles$q = {"optOut":"OptOutInfo-module_optOut__2Q3d5","tooltip":"OptOutInfo-module_tooltip__2bpU0","icon":"OptOutInfo-module_icon__1kL6Q utils-module_unstyledButton__3rgne","full":"OptOutInfo-module_full__s_Ono"};
4944
4830
 
4945
- useEffect(function () {
4946
- document.body.addEventListener('keydown', enable);
4947
- document.body.addEventListener('mousedown', disable);
4948
- disable();
4949
- return function () {
4950
- document.body.removeEventListener('keydown', enable);
4951
- document.body.removeEventListener('mousedown', disable);
4952
- };
4831
+ function _extends$1() {
4832
+ _extends$1 = Object.assign || function (target) {
4833
+ for (var i = 1; i < arguments.length; i++) {
4834
+ var source = arguments[i];
4953
4835
 
4954
- function enable() {
4955
- document.body.classList.remove(styles$s.focusOutlineDisabled);
4956
- setValue(true);
4836
+ for (var key in source) {
4837
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
4838
+ target[key] = source[key];
4839
+ }
4840
+ }
4957
4841
  }
4958
4842
 
4959
- function disable() {
4960
- document.body.classList.add(styles$s.focusOutlineDisabled);
4961
- setValue(false);
4962
- }
4963
- }, []);
4964
- return /*#__PURE__*/React.createElement(FocusVisibleContext.Provider, {
4965
- value: value
4966
- }, children);
4843
+ return target;
4844
+ };
4845
+
4846
+ return _extends$1.apply(this, arguments);
4967
4847
  }
4848
+ var information = (function (_ref) {
4849
+ var _ref$styles = _ref.styles,
4850
+ props = _objectWithoutProperties(_ref, ["styles"]);
4968
4851
 
4969
- var PhonePlatformProvider = withInlineEditingAlternative('PhonePlatformProvider', function PhonePlatformProvider(_ref) {
4970
- var children = _ref.children;
4971
- var isPhonePlatform = useBrowserFeature('phone platform');
4972
- return /*#__PURE__*/React.createElement(PhonePlatformContext.Provider, {
4973
- value: isPhonePlatform
4974
- }, children);
4852
+ return /*#__PURE__*/React.createElement("svg", _extends$1({
4853
+ xmlns: "http://www.w3.org/2000/svg",
4854
+ viewBox: "-65 -65 449 449"
4855
+ }, props), /*#__PURE__*/React.createElement("path", {
4856
+ d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
4857
+ }), /*#__PURE__*/React.createElement("path", {
4858
+ d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
4859
+ }));
4975
4860
  });
4976
4861
 
4977
- var AudioFocusContext = createContext();
4978
- function AudioFocusProvider(_ref) {
4979
- var children = _ref.children;
4980
-
4981
- var _useState = useState([]),
4982
- _useState2 = _slicedToArray(_useState, 2),
4983
- currentKey = _useState2[0],
4984
- setCurrentKey = _useState2[1];
4985
-
4986
- var value = useMemo(function () {
4987
- return [currentKey, setCurrentKey];
4988
- }, [currentKey, setCurrentKey]);
4989
- return /*#__PURE__*/React.createElement(AudioFocusContext.Provider, {
4990
- value: value
4991
- }, children);
4992
- }
4993
4862
  /**
4994
- * Prevent parallel playback of multiple media elements.
4863
+ * Display info tooltip with a link to opt out of third party
4864
+ * embeds. Opt out url needs to be configured in theme options.
4995
4865
  *
4996
- * @param {Object} options
4997
- * @param {number} options.key - Unique id used to identify the element.
4998
- * @param {boolean} options.request - Set to true to request audio focus.
4999
- * @param {Function} options.onLost -
5000
- * Callback that will be invoked if another element requests audio
5001
- * focus, thereby preempting your hold of audio focus. The callback
5002
- * should pause the element.
4866
+ * @param {Object} props
4867
+ * @param {string} props.providerName -
4868
+ * Only display if user has given consent for this provider.
4869
+ * @param {boolean} [hide] -
4870
+ * Temporarily hide the tooltip, e.g. while the embed is playing
4871
+ *
4872
+ * @name ThirdPartyOptOutInfo
5003
4873
  */
5004
4874
 
5005
- function useAudioFocus(_ref2) {
5006
- var key = _ref2.key,
5007
- request = _ref2.request,
5008
- onLost = _ref2.onLost;
5009
- var wasRequested = usePrevious(request);
4875
+ function OptOutInfo(_ref) {
4876
+ var _theme$options$thirdP;
5010
4877
 
5011
- var _useContext = useContext(AudioFocusContext),
5012
- _useContext2 = _slicedToArray(_useContext, 2),
5013
- currentKey = _useContext2[0],
5014
- setCurrentKey = _useContext2[1];
4878
+ var providerName = _ref.providerName,
4879
+ hide = _ref.hide;
5015
4880
 
5016
- var previousKey = usePrevious(currentKey);
5017
- useEffect(function () {
5018
- if (request && !wasRequested) {
5019
- setCurrentKey(key);
4881
+ var _useI18n = useI18n(),
4882
+ t = _useI18n.t;
4883
+
4884
+ var theme = useTheme();
4885
+ var optOutUrl = (_theme$options$thirdP = theme.options.thirdPartyConsent) === null || _theme$options$thirdP === void 0 ? void 0 : _theme$options$thirdP.optOutUrl;
4886
+
4887
+ var _useContentElementAtt = useContentElementAttributes(),
4888
+ width = _useContentElementAtt.width,
4889
+ contentElementId = _useContentElementAtt.contentElementId;
4890
+
4891
+ var contentElementConsentVendor = useContentElementConsentVendor({
4892
+ contentElementId: contentElementId
4893
+ });
4894
+ providerName = providerName || (contentElementConsentVendor === null || contentElementConsentVendor === void 0 ? void 0 : contentElementConsentVendor.name);
4895
+
4896
+ var _useConsentGiven = useConsentGiven(providerName),
4897
+ _useConsentGiven2 = _slicedToArray(_useConsentGiven, 1),
4898
+ consentGiven = _useConsentGiven2[0];
4899
+
4900
+ if (!optOutUrl || !consentGiven) {
4901
+ return null;
4902
+ }
4903
+
4904
+ var linkText = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt_link');
4905
+ var linkHtml = "<a href=\"".concat(optOutUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(linkText, "</a>");
4906
+ var html = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt', {
4907
+ link: linkHtml
4908
+ });
4909
+ return /*#__PURE__*/React.createElement("div", {
4910
+ className: classNames(styles$q.optOut, _defineProperty({}, styles$q.full, width === widths.full)),
4911
+ style: hide ? {
4912
+ opacity: 0,
4913
+ visibility: 'hidden'
4914
+ } : undefined
4915
+ }, /*#__PURE__*/React.createElement("button", {
4916
+ className: styles$q.icon
4917
+ }, /*#__PURE__*/React.createElement(information, null)), /*#__PURE__*/React.createElement("div", {
4918
+ className: styles$q.tooltip
4919
+ }, /*#__PURE__*/React.createElement("div", {
4920
+ dangerouslySetInnerHTML: {
4921
+ __html: html
5020
4922
  }
5021
- }, [request, wasRequested, setCurrentKey, key]);
5022
- useEffect(function () {
5023
- if (previousKey === key && currentKey !== key) {
5024
- onLost();
4923
+ })));
4924
+ }
4925
+
4926
+ function registerVendors(_ref) {
4927
+ var contentElementTypes = _ref.contentElementTypes,
4928
+ seed = _ref.seed,
4929
+ consent = _ref.consent,
4930
+ cookieName = _ref.cookieName;
4931
+ var options = seed.config.theme.options.thirdPartyConsent;
4932
+ var locale = seed.collections.entries[0].locale;
4933
+ cookieName = cookieName || (options === null || options === void 0 ? void 0 : options.cookieName);
4934
+ [].concat(_toConsumableArray(seed.config.consentVendors), _toConsumableArray(contentElementTypes.consentVendors({
4935
+ contentElements: seed.collections.contentElements,
4936
+ t: function t(key, options) {
4937
+ return I18n.t(key, _objectSpread2(_objectSpread2({}, options), {}, {
4938
+ locale: locale
4939
+ }));
5025
4940
  }
5026
- }, [currentKey, previousKey, key, onLost]);
4941
+ }))).forEach(function (vendor) {
4942
+ var _options$cookieProvid;
4943
+
4944
+ consent.registerVendor(vendor.name, {
4945
+ displayName: vendor.displayName,
4946
+ description: vendor.description,
4947
+ paradigm: cookieName ? vendor.paradigm || 'opt-in' : 'skip',
4948
+ cookieName: cookieName,
4949
+ cookieKey: options === null || options === void 0 ? void 0 : (_options$cookieProvid = options.cookieProviderNameMapping) === null || _options$cookieProvid === void 0 ? void 0 : _options$cookieProvid[vendor.name],
4950
+ cookieDomain: options === null || options === void 0 ? void 0 : options.cookieDomain
4951
+ });
4952
+ });
4953
+ consent.closeVendorRegistration();
5027
4954
  }
5028
4955
 
5029
4956
  function RootProviders(_ref) {
@@ -5038,7 +4965,23 @@ function RootProviders(_ref) {
5038
4965
  }, children)))))))));
5039
4966
  }
5040
4967
 
5041
- var textStyles = {"text-s":"20px","text-base":"22px","text-md":"33px","text-l":"40px","text-2l":"50px","text-xl":"66px","text-2xl":"88px","text-3xl":"110px","heading-lg":"Text-module_heading-lg__FKxzu typography-headingLg typography-heading","heading-md":"Text-module_heading-md__1q5Ss typography-headingMd typography-heading","heading-sm":"Text-module_heading-sm__2awaz typography-headingSm typography-heading","heading-xs":"Text-module_heading-xs__21nHy typography-headingXs typography-heading","body":"Text-module_body__4oWD- typography-body","caption":"Text-module_caption__3_6Au typography-caption","question":"Text-module_question__ByVAq typography-question"};
4968
+ function camelize(snakeCase) {
4969
+ return snakeCase.replace(/[_-][a-z]/g, function (match) {
4970
+ return match[1].toUpperCase();
4971
+ });
4972
+ }
4973
+
4974
+ /**
4975
+ * Resolve a palette color to a CSS custom property.
4976
+ *
4977
+ * @example
4978
+ * <div style={{backgroundColor: paletteColor(configuration.backgroundColor)}}>
4979
+ */
4980
+ function paletteColor(value) {
4981
+ return !value || value[0] === '#' ? value : "var(--theme-palette-color-".concat(value, ")");
4982
+ }
4983
+
4984
+ var textStyles = {"text-s":"20px","text-base":"22px","text-md":"33px","text-l":"40px","text-2l":"50px","text-xl":"66px","text-2xl":"88px","text-3xl":"110px","text-4xl":"200px","text-5xl":"350px","heading-lg":"Text-module_heading-lg__FKxzu typography-headingLg typography-heading","heading-md":"Text-module_heading-md__1q5Ss typography-headingMd typography-heading","heading-sm":"Text-module_heading-sm__2awaz typography-headingSm typography-heading","heading-xs":"Text-module_heading-xs__21nHy typography-headingXs typography-heading","body":"Text-module_body__4oWD- typography-body","caption":"Text-module_caption__3_6Au typography-caption","question":"Text-module_question__ByVAq typography-question","quoteText-lg":"Text-module_quoteText-lg__3ZnZi typography-quoteText","quoteText-md":"Text-module_quoteText-md__2eooO typography-quoteText","quoteText-sm":"Text-module_quoteText-sm__5nKex typography-quoteText","quoteText-xs":"Text-module_quoteText-xs__2p5on typography-quoteText","quoteAttribution":"Text-module_quoteAttribution__VBqLw typography-quoteAttribution","counterNumber-lg":"Text-module_counterNumber-lg__2myJg typography-counterNumber","counterNumber-md":"Text-module_counterNumber-md__1NC3q typography-counterNumber","counterNumber-sm":"Text-module_counterNumber-sm__2SwHQ typography-counterNumber","counterNumber-xs":"Text-module_counterNumber-xs__1D-YR typography-counterNumber","counterDescription":"Text-module_counterDescription__34NjQ typography-counterDescription"};
5042
4985
 
5043
4986
  /**
5044
4987
  * Render some text using the default typography scale.
@@ -5046,7 +4989,10 @@ var textStyles = {"text-s":"20px","text-base":"22px","text-md":"33px","text-l":"
5046
4989
  * @param {Object} props
5047
4990
  * @param {string} props.scaleCategory -
5048
4991
  * One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,
5049
- * `'heading-xs'`, `'body'`, `'caption'`, `'question'`.
4992
+ * `'heading-xs'`, `'body'`, `'caption'`, `'question'`,
4993
+ * `'quoteText-lg`', `'quoteText-md`', `'quoteText-sm`', `'quoteText-xs`', `'quoteAttribution`',
4994
+ * `'counterNumber-lg`', `'counterNumber-md`', `'counterNumber-sm`',
4995
+ * `'counterNumber-xs`', `'counterDescription`'.
5050
4996
  * @param {string} [props.inline] - Render a span instread of a div.
5051
4997
  * @param {string} props.children - Nodes to render with specified typography.
5052
4998
  */
@@ -5060,123 +5006,27 @@ function Text(_ref) {
5060
5006
  }, children);
5061
5007
  }
5062
5008
 
5063
- var styles$t = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
5064
-
5065
- function StandaloneSectionThumbnail(_ref) {
5066
- var seed = _ref.seed,
5067
- props = _objectWithoutProperties(_ref, ["seed"]);
5068
-
5069
- return /*#__PURE__*/React.createElement(RootProviders, {
5070
- seed: seed
5071
- }, /*#__PURE__*/React.createElement(SectionThumbnail, props));
5072
- }
5073
- function SectionThumbnail(_ref2) {
5074
- var sectionPermaId = _ref2.sectionPermaId,
5075
- subscribe = _ref2.subscribe,
5076
- scale = _ref2.scale;
5077
- var dispatch = useEntryStateDispatch();
5078
- useEffect(function () {
5079
- if (subscribe) {
5080
- return subscribe(dispatch);
5081
- }
5082
- }, [subscribe, dispatch]);
5083
- var section = useSection({
5084
- sectionPermaId: sectionPermaId
5085
- });
5086
- var scaleFactor = scale ? 5 : 1;
5087
-
5088
- if (section) {
5089
- return /*#__PURE__*/React.createElement(StaticPreview, null, /*#__PURE__*/React.createElement(Measure, {
5090
- client: true
5091
- }, function (_ref3) {
5092
- var measureRef = _ref3.measureRef,
5093
- contentRect = _ref3.contentRect;
5094
- return /*#__PURE__*/React.createElement(FullscreenDimensionProvider, clientDimensions(contentRect, scaleFactor), /*#__PURE__*/React.createElement("div", {
5095
- ref: measureRef,
5096
- className: styles$t.crop,
5097
- inert: ""
5098
- }, /*#__PURE__*/React.createElement("div", {
5099
- className: classNames(_defineProperty({}, styles$t.scale, scale))
5100
- }, /*#__PURE__*/React.createElement("div", {
5101
- className: contentStyles.Content,
5102
- style: viewportUnitCustomProperties(clientDimensions(contentRect, scaleFactor))
5103
- }, /*#__PURE__*/React.createElement(ConnectedSection, {
5104
- state: "active",
5105
- domIdPrefix: "section-preview",
5106
- section: _objectSpread2(_objectSpread2({}, section), {}, {
5107
- transition: 'preview'
5108
- })
5109
- })))));
5110
- }));
5111
- } else {
5112
- return /*#__PURE__*/React.createElement("div", {
5113
- className: styles$t.root
5114
- }, "Not found.");
5115
- }
5116
- }
5117
- SectionThumbnail.defaultProps = {
5118
- scale: true,
5119
- subscribe: function subscribe() {}
5120
- };
5121
-
5122
- function clientDimensions(contentRect, scaleFactor) {
5123
- return {
5124
- width: contentRect.client.width && Math.ceil(contentRect.client.width * scaleFactor),
5125
- height: contentRect.client.height && Math.ceil(contentRect.client.height * scaleFactor)
5126
- };
5127
- }
5128
-
5129
- function viewportUnitCustomProperties(_ref4) {
5130
- var width = _ref4.width,
5131
- height = _ref4.height;
5132
- return {
5133
- '--vw': width && "".concat(width / 100, "px"),
5134
- '--vh': height && "".concat(height / 100, "px")
5135
- };
5136
- }
5137
-
5138
- var ContentElementConfigurationUpdateContext = React.createContext(function () {});
5139
- function useContentElementConfigurationUpdate() {
5140
- return useContext(ContentElementConfigurationUpdateContext);
5141
- }
5142
-
5143
- var ContentElementEditorCommandEmitterContext = createContext({
5144
- on: function on() {},
5145
- off: function off() {}
5146
- });
5147
- function useContentElementEditorCommandSubscription(callback) {
5148
- var _useContentElementAtt = useContentElementAttributes(),
5149
- contentElementId = _useContentElementAtt.contentElementId;
5150
-
5151
- var emitter = useContext(ContentElementEditorCommandEmitterContext);
5152
- useEffect(function () {
5153
- emitter.on("command:".concat(contentElementId), callback);
5154
- return function () {
5155
- return emitter.off("command:".concat(contentElementId), callback);
5156
- };
5157
- }, [emitter, callback, contentElementId]);
5158
- }
5159
-
5160
- function camelize(snakeCase) {
5161
- return snakeCase.replace(/-[a-z]/g, function (match) {
5162
- return match[1].toUpperCase();
5163
- });
5164
- }
5165
-
5166
- var styles$u = {"root":"EditableText-module_root__2v1tU"};
5009
+ var styles$r = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"EditableText-module_root__2v1tU","light":"EditableText-module_light__2c29h","dark":"EditableText-module_dark__2ym90"};
5167
5010
 
5011
+ var defaultValue = [{
5012
+ type: 'paragraph',
5013
+ children: [{
5014
+ text: ''
5015
+ }]
5016
+ }];
5168
5017
  var EditableText = withInlineEditingAlternative('EditableText', function EditableText(_ref) {
5169
5018
  var value = _ref.value,
5170
- className = _ref.className;
5019
+ className = _ref.className,
5020
+ _ref$scaleCategory = _ref.scaleCategory,
5021
+ scaleCategory = _ref$scaleCategory === void 0 ? 'body' : _ref$scaleCategory;
5171
5022
  return /*#__PURE__*/React.createElement("div", {
5172
- className: classNames(styles$u.root, className)
5023
+ className: classNames(styles$r.root, className)
5173
5024
  }, /*#__PURE__*/React.createElement(Text, {
5174
- scaleCategory: "body"
5175
- }, render(value)));
5025
+ scaleCategory: scaleCategory
5026
+ }, render(value || defaultValue)));
5176
5027
  });
5177
5028
 
5178
- function render() {
5179
- var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
5029
+ function render(children) {
5180
5030
  return children.map(function (element, index) {
5181
5031
  if (element.type) {
5182
5032
  return renderElement({
@@ -5192,7 +5042,7 @@ function render() {
5192
5042
  key: index
5193
5043
  },
5194
5044
  leaf: element,
5195
- children: element.text.trim() === '' ? "\uFEFF" : element.text
5045
+ children: children.length === 1 && element.text.trim() === '' ? "\uFEFF" : element.text
5196
5046
  });
5197
5047
  }
5198
5048
  });
@@ -5203,30 +5053,42 @@ function renderElement(_ref2) {
5203
5053
  children = _ref2.children,
5204
5054
  element = _ref2.element;
5205
5055
  var variantClassName = element.variant && ['typography-textBlock', camelize(element.type), element.variant].join('-');
5056
+ var styles = element.color && {
5057
+ color: paletteColor(element.color)
5058
+ };
5206
5059
 
5207
5060
  switch (element.type) {
5208
5061
  case 'block-quote':
5209
5062
  return /*#__PURE__*/React.createElement("blockquote", Object.assign({}, attributes, {
5210
- className: variantClassName
5063
+ className: variantClassName,
5064
+ style: styles
5211
5065
  }), children);
5212
5066
 
5213
5067
  case 'bulleted-list':
5214
5068
  return /*#__PURE__*/React.createElement("ul", Object.assign({}, attributes, {
5215
- className: variantClassName
5069
+ className: variantClassName,
5070
+ style: styles
5216
5071
  }), children);
5217
5072
 
5218
5073
  case 'numbered-list':
5219
5074
  return /*#__PURE__*/React.createElement("ol", Object.assign({}, attributes, {
5220
- className: variantClassName
5075
+ className: variantClassName,
5076
+ style: styles
5221
5077
  }), children);
5222
5078
 
5223
5079
  case 'list-item':
5224
5080
  return /*#__PURE__*/React.createElement("li", attributes, children);
5225
5081
 
5226
5082
  case 'heading':
5227
- return /*#__PURE__*/React.createElement("h2", Object.assign({}, attributes, {
5228
- className: classNames(variantClassName, textStyles['heading-xs'])
5229
- }), children);
5083
+ var key = attributes.key,
5084
+ otherAttributes = _objectWithoutProperties(attributes, ["key"]);
5085
+
5086
+ return /*#__PURE__*/React.createElement(Heading, {
5087
+ key: key,
5088
+ attributes: otherAttributes,
5089
+ variantClassName: variantClassName,
5090
+ styles: styles
5091
+ }, children);
5230
5092
 
5231
5093
  case 'link':
5232
5094
  return renderLink({
@@ -5237,17 +5099,30 @@ function renderElement(_ref2) {
5237
5099
 
5238
5100
  default:
5239
5101
  return /*#__PURE__*/React.createElement("p", Object.assign({}, attributes, {
5240
- className: variantClassName
5102
+ className: variantClassName,
5103
+ style: styles
5241
5104
  }), children);
5242
5105
  }
5243
5106
  }
5244
5107
 
5245
- function renderLink(_ref3) {
5246
- var _element$href, _element$href2;
5247
-
5108
+ function Heading(_ref3) {
5248
5109
  var attributes = _ref3.attributes,
5249
- children = _ref3.children,
5250
- element = _ref3.element;
5110
+ variantClassName = _ref3.variantClassName,
5111
+ inlineStyles = _ref3.styles,
5112
+ children = _ref3.children;
5113
+ var darkBackground = useDarkBackground();
5114
+ return /*#__PURE__*/React.createElement("h2", Object.assign({}, attributes, {
5115
+ className: classNames(variantClassName, darkBackground ? styles$r.light : styles$r.dark, 'scope-headings', textStyles['heading-xs']),
5116
+ style: inlineStyles
5117
+ }), children);
5118
+ }
5119
+
5120
+ function renderLink(_ref4) {
5121
+ var _element$href, _element$href2, _element$href3;
5122
+
5123
+ var attributes = _ref4.attributes,
5124
+ children = _ref4.children,
5125
+ element = _ref4.element;
5251
5126
 
5252
5127
  if (element === null || element === void 0 ? void 0 : (_element$href = element.href) === null || _element$href === void 0 ? void 0 : _element$href.chapter) {
5253
5128
  var key = attributes.key,
@@ -5262,6 +5137,17 @@ function renderLink(_ref3) {
5262
5137
  return /*#__PURE__*/React.createElement("a", Object.assign({}, attributes, {
5263
5138
  href: "#section-".concat(element.href.section)
5264
5139
  }), children);
5140
+ }
5141
+
5142
+ if (element === null || element === void 0 ? void 0 : (_element$href3 = element.href) === null || _element$href3 === void 0 ? void 0 : _element$href3.file) {
5143
+ var _key = attributes.key,
5144
+ _otherAttributes = _objectWithoutProperties(attributes, ["key"]);
5145
+
5146
+ return /*#__PURE__*/React.createElement(FileLink, {
5147
+ key: _key,
5148
+ attributes: _otherAttributes,
5149
+ fileOptions: element.href.file
5150
+ }, children);
5265
5151
  } else {
5266
5152
  var targetAttributes = element.openInNewTab ? {
5267
5153
  target: '_blank',
@@ -5273,10 +5159,10 @@ function renderLink(_ref3) {
5273
5159
  }
5274
5160
  }
5275
5161
 
5276
- function ChapterLink(_ref4) {
5277
- var attributes = _ref4.attributes,
5278
- children = _ref4.children,
5279
- chapterPermaId = _ref4.chapterPermaId;
5162
+ function ChapterLink(_ref5) {
5163
+ var attributes = _ref5.attributes,
5164
+ children = _ref5.children,
5165
+ chapterPermaId = _ref5.chapterPermaId;
5280
5166
  var chapter = useChapter({
5281
5167
  permaId: chapterPermaId
5282
5168
  });
@@ -5285,10 +5171,22 @@ function ChapterLink(_ref4) {
5285
5171
  }), children);
5286
5172
  }
5287
5173
 
5288
- function renderLeaf(_ref5) {
5289
- var attributes = _ref5.attributes,
5290
- children = _ref5.children,
5291
- leaf = _ref5.leaf;
5174
+ function FileLink(_ref6) {
5175
+ var attributes = _ref6.attributes,
5176
+ children = _ref6.children,
5177
+ fileOptions = _ref6.fileOptions;
5178
+ var file = useFile(fileOptions);
5179
+ return /*#__PURE__*/React.createElement("a", Object.assign({}, attributes, {
5180
+ target: "_blank",
5181
+ rel: "noopener noreferrer",
5182
+ href: (file === null || file === void 0 ? void 0 : file.urls.original) || '#'
5183
+ }), children);
5184
+ }
5185
+
5186
+ function renderLeaf(_ref7) {
5187
+ var attributes = _ref7.attributes,
5188
+ children = _ref7.children,
5189
+ leaf = _ref7.leaf;
5292
5190
 
5293
5191
  if (leaf.bold) {
5294
5192
  children = /*#__PURE__*/React.createElement("strong", null, children);
@@ -5309,6 +5207,103 @@ function renderLeaf(_ref5) {
5309
5207
  return /*#__PURE__*/React.createElement("span", attributes, children);
5310
5208
  }
5311
5209
 
5210
+ var ContentElementConfigurationUpdateContext = React.createContext(function () {});
5211
+ function useContentElementConfigurationUpdate() {
5212
+ return useContext(ContentElementConfigurationUpdateContext);
5213
+ }
5214
+
5215
+ var styles$s = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
5216
+
5217
+ function StandaloneSectionThumbnail(_ref) {
5218
+ var seed = _ref.seed,
5219
+ props = _objectWithoutProperties(_ref, ["seed"]);
5220
+
5221
+ return /*#__PURE__*/React.createElement(RootProviders, {
5222
+ seed: seed
5223
+ }, /*#__PURE__*/React.createElement(SectionThumbnail, props));
5224
+ }
5225
+ function SectionThumbnail(_ref2) {
5226
+ var sectionPermaId = _ref2.sectionPermaId,
5227
+ subscribe = _ref2.subscribe,
5228
+ scale = _ref2.scale;
5229
+ var dispatch = useEntryStateDispatch();
5230
+ useEffect(function () {
5231
+ if (subscribe) {
5232
+ return subscribe(dispatch);
5233
+ }
5234
+ }, [subscribe, dispatch]);
5235
+ var section = useSection({
5236
+ sectionPermaId: sectionPermaId
5237
+ });
5238
+ var scaleFactor = scale ? 5 : 1;
5239
+
5240
+ if (section) {
5241
+ return /*#__PURE__*/React.createElement(StaticPreview, null, /*#__PURE__*/React.createElement(Measure, {
5242
+ client: true
5243
+ }, function (_ref3) {
5244
+ var measureRef = _ref3.measureRef,
5245
+ contentRect = _ref3.contentRect;
5246
+ return /*#__PURE__*/React.createElement(FullscreenDimensionProvider, clientDimensions(contentRect, scaleFactor), /*#__PURE__*/React.createElement("div", {
5247
+ ref: measureRef,
5248
+ className: styles$s.crop,
5249
+ inert: ""
5250
+ }, /*#__PURE__*/React.createElement("div", {
5251
+ className: classNames(_defineProperty({}, styles$s.scale, scale))
5252
+ }, /*#__PURE__*/React.createElement("div", {
5253
+ className: contentStyles.Content,
5254
+ style: viewportUnitCustomProperties(clientDimensions(contentRect, scaleFactor))
5255
+ }, /*#__PURE__*/React.createElement(ConnectedSection, {
5256
+ state: "active",
5257
+ domIdPrefix: "section-preview",
5258
+ section: _objectSpread2(_objectSpread2({}, section), {}, {
5259
+ transition: 'preview'
5260
+ })
5261
+ })))));
5262
+ }));
5263
+ } else {
5264
+ return /*#__PURE__*/React.createElement("div", {
5265
+ className: styles$s.root
5266
+ }, "Not found.");
5267
+ }
5268
+ }
5269
+ SectionThumbnail.defaultProps = {
5270
+ scale: true,
5271
+ subscribe: function subscribe() {}
5272
+ };
5273
+
5274
+ function clientDimensions(contentRect, scaleFactor) {
5275
+ return {
5276
+ width: contentRect.client.width && Math.ceil(contentRect.client.width * scaleFactor),
5277
+ height: contentRect.client.height && Math.ceil(contentRect.client.height * scaleFactor)
5278
+ };
5279
+ }
5280
+
5281
+ function viewportUnitCustomProperties(_ref4) {
5282
+ var width = _ref4.width,
5283
+ height = _ref4.height;
5284
+ return {
5285
+ '--vw': width && "".concat(width / 100, "px"),
5286
+ '--vh': height && "".concat(height / 100, "px")
5287
+ };
5288
+ }
5289
+
5290
+ var ContentElementEditorCommandEmitterContext = createContext({
5291
+ on: function on() {},
5292
+ off: function off() {}
5293
+ });
5294
+ function useContentElementEditorCommandSubscription(callback) {
5295
+ var _useContentElementAtt = useContentElementAttributes(),
5296
+ contentElementId = _useContentElementAtt.contentElementId;
5297
+
5298
+ var emitter = useContext(ContentElementEditorCommandEmitterContext);
5299
+ useEffect(function () {
5300
+ emitter.on("command:".concat(contentElementId), callback);
5301
+ return function () {
5302
+ return emitter.off("command:".concat(contentElementId), callback);
5303
+ };
5304
+ }, [emitter, callback, contentElementId]);
5305
+ }
5306
+
5312
5307
  var frontendStyles = {"root":"EditableInlineText-module_root__3eA-J","hyphens-manual":"EditableInlineText-module_hyphens-manual__3Lj4H","hyphens-none":"EditableInlineText-module_hyphens-none__1UvNH"};
5313
5308
 
5314
- export { processSources as $, AtmoProvider as A, Bar as B, ConnectedSection as C, useContentElementLifecycle as D, EventContextDataProvider as E, useCurrentChapter as F, useIsStaticPreview as G, useOnUnmuteMedia as H, usePortraitOrientation as I, EditableText as J, PhonePlatformProvider as K, OptOutInfo as L, getTransitionNames as M, getAvailableTransitionNames as N, OptIn as O, PlayerEventContextDataProvider as P, Image as Q, RootProviders as R, ScrollToSectionContext as S, Text as T, MediaPlayer as U, getInitialPlayerState as V, playerStateReducer as W, usePlayerState as X, VideoPlayer as Y, AudioPlayer as Z, _asyncToGenerator as _, useCurrentSectionIndexState as a, Atmo as a0, AtmoContext as a1, useAtmo as a2, useOnScreen as a3, StandaloneSectionThumbnail as a4, SectionThumbnail as a5, ContentElementEditorCommandEmitterContext as a6, MotifAreaVisibilityProvider as a7, ForcePaddingContext as a8, ContentElementConfigurationUpdateContext as a9, ContentElementEditorStateContext as aa, LayoutWithoutInlineEditing as ab, renderElement as ac, renderLeaf as ad, usePostMessageListener as b, contentStyles as c, api as d, regenerator as e, useDarkBackground as f, getEventObject as g, useTextTracks as h, useMediaMuted as i, useFocusOutlineVisible as j, useVideoQualitySetting as k, useIsomorphicLayoutEffect as l, withInlineEditingAlternative as m, frontendStyles as n, useFullscreenDimensions as o, information as p, camelize as q, registerVendors as r, styles$p as s, loadInlineEditingComponents as t, usePrevious as u, useAudioFocus as v, withInlineEditingDecorator as w, useContentElementConfigurationUpdate as x, useContentElementEditorCommandSubscription as y, useContentElementEditorState as z };
5309
+ export { usePlayerState as $, AtmoProvider as A, useAudioFocus as B, ConnectedSection as C, useContentElementEditorCommandSubscription as D, EventContextDataProvider as E, useContentElementLifecycle as F, useCurrentChapter as G, useIsStaticPreview as H, useOnUnmuteMedia as I, usePortraitOrientation as J, PhonePlatformProvider as K, OptOutInfo as L, useConsentRequested as M, getTransitionNames as N, OptIn as O, PlayerEventContextDataProvider as P, getAvailableTransitionNames as Q, RootProviders as R, ScrollToSectionContext as S, paletteColor as T, widthName as U, Image as V, Text as W, MediaPlayer as X, getInitialPlayerState as Y, playerStateReducer as Z, _asyncToGenerator as _, useCurrentSectionIndexState as a, VideoPlayer as a0, AudioPlayer as a1, processSources as a2, Atmo as a3, AtmoContext as a4, useAtmo as a5, useOnScreen as a6, StandaloneSectionThumbnail as a7, SectionThumbnail as a8, ContentElementEditorCommandEmitterContext as a9, MotifAreaVisibilityProvider as aa, ForcePaddingContext as ab, ContentElementConfigurationUpdateContext as ac, LayoutWithoutInlineEditing as ad, renderElement as ae, renderLeaf as af, usePostMessageListener as b, contentStyles as c, api as d, regenerator as e, withInlineEditingAlternative as f, getEventObject as g, useDarkBackground as h, EditableText as i, useContentElementConfigurationUpdate as j, useContentElementAttributes as k, widths as l, useTextTracks as m, useMediaMuted as n, useFocusOutlineVisible as o, useVideoQualitySetting as p, useIsomorphicLayoutEffect as q, frontendStyles as r, useFullscreenDimensions as s, information as t, usePrevious as u, camelize as v, withInlineEditingDecorator as w, styles$l as x, registerVendors as y, loadInlineEditingComponents as z };