pageflow 15.5.0 → 15.7.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of pageflow might be problematic. Click here for more details.

Files changed (270) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +219 -87
  3. data/README.md +1 -2
  4. data/admins/pageflow/entry.rb +28 -57
  5. data/admins/pageflow/user.rb +1 -3
  6. data/app/assets/images/pageflow/admin/icons/buttons/editor.svg +2 -0
  7. data/app/assets/images/pageflow/admin/icons/buttons/preview.svg +2 -0
  8. data/app/assets/images/pageflow/admin/icons/buttons/show_public.svg +2 -0
  9. data/app/assets/images/pageflow/admin/icons/delete.svg +9 -0
  10. data/app/assets/images/pageflow/admin/icons/done.svg +6 -0
  11. data/app/assets/images/pageflow/admin/icons/edit.svg +7 -0
  12. data/app/assets/images/pageflow/admin/icons/editor.svg +2 -0
  13. data/app/assets/images/pageflow/admin/icons/folder.svg +8 -0
  14. data/app/assets/images/pageflow/admin/icons/folder_active.svg +8 -0
  15. data/app/assets/images/pageflow/admin/icons/info.svg +3 -0
  16. data/app/assets/images/pageflow/admin/icons/new.svg +5 -0
  17. data/app/assets/images/pageflow/admin/icons/preview.svg +2 -0
  18. data/app/assets/images/pageflow/admin/icons/published.svg +2 -0
  19. data/app/assets/images/pageflow/admin/icons/published_with_password.svg +2 -0
  20. data/app/assets/images/pageflow/admin/icons/show_public.svg +2 -0
  21. data/app/assets/images/pageflow/editor/blank_entry/logo.png +0 -0
  22. data/app/assets/images/pageflow/themes/default/embed_opt_in.svg +3 -0
  23. data/app/assets/images/pageflow/themes/default/embed_opt_out_info.svg +16 -0
  24. data/app/assets/javascripts/pageflow/admin/entries.js +9 -57
  25. data/app/assets/javascripts/pageflow/dist/ui.js +127 -10
  26. data/app/assets/stylesheets/pageflow/admin/active_admin_patches.scss +18 -16
  27. data/app/assets/stylesheets/pageflow/admin/badge_list.scss +25 -35
  28. data/app/assets/stylesheets/pageflow/admin/columns.scss +13 -11
  29. data/app/assets/stylesheets/pageflow/admin/embed_code.scss +1 -4
  30. data/app/assets/stylesheets/pageflow/admin/entries/folders.scss +44 -19
  31. data/app/assets/stylesheets/pageflow/admin/entries.scss +15 -31
  32. data/app/assets/stylesheets/pageflow/admin/features.scss +3 -1
  33. data/app/assets/stylesheets/pageflow/admin/forms.scss +14 -12
  34. data/app/assets/stylesheets/pageflow/admin/hint.scss +8 -14
  35. data/app/assets/stylesheets/pageflow/admin/icon_button.scss +25 -14
  36. data/app/assets/stylesheets/pageflow/admin/icon_link.scss +31 -15
  37. data/app/assets/stylesheets/pageflow/admin/publication_state_indicator.scss +14 -7
  38. data/app/assets/stylesheets/pageflow/admin/status_tags.scss +5 -4
  39. data/app/assets/stylesheets/pageflow/admin/tabs_view.scss +36 -34
  40. data/app/assets/stylesheets/pageflow/admin/tooltip_bubble.scss +15 -11
  41. data/app/assets/stylesheets/pageflow/admin.scss +12 -0
  42. data/app/assets/stylesheets/pageflow/editor/background_positioning.scss +15 -61
  43. data/app/assets/stylesheets/pageflow/editor/base.scss +28 -13
  44. data/app/assets/stylesheets/pageflow/editor/blank_entry.scss +6 -6
  45. data/app/assets/stylesheets/pageflow/editor/change_theme.scss +28 -71
  46. data/app/assets/stylesheets/pageflow/editor/composables.scss +2 -2
  47. data/app/assets/stylesheets/pageflow/editor/confirm_encoding.scss +18 -36
  48. data/app/assets/stylesheets/pageflow/editor/confirm_upload.scss +12 -39
  49. data/app/assets/stylesheets/pageflow/editor/dialogs.scss +39 -12
  50. data/app/assets/stylesheets/pageflow/editor/disabled_atmo_indicator.scss +3 -3
  51. data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +7 -10
  52. data/app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss +3 -8
  53. data/app/assets/stylesheets/pageflow/editor/failures.scss +3 -3
  54. data/app/assets/stylesheets/pageflow/editor/file_import.scss +22 -38
  55. data/app/assets/stylesheets/pageflow/editor/file_meta_data.scss +3 -7
  56. data/app/assets/stylesheets/pageflow/editor/file_settings_dialog.scss +4 -24
  57. data/app/assets/stylesheets/pageflow/editor/file_stages.scss +10 -11
  58. data/app/assets/stylesheets/pageflow/editor/file_thumbnails.scss +4 -8
  59. data/app/assets/stylesheets/pageflow/editor/files.scss +7 -6
  60. data/app/assets/stylesheets/pageflow/editor/files_explorer.scss +13 -30
  61. data/app/assets/stylesheets/pageflow/editor/files_gallery.scss +15 -11
  62. data/app/assets/stylesheets/pageflow/editor/filtered_files.scss +6 -7
  63. data/app/assets/stylesheets/pageflow/editor/help.scss +19 -14
  64. data/app/assets/stylesheets/pageflow/editor/help_image.scss +1 -1
  65. data/app/assets/stylesheets/pageflow/editor/info_box.scss +19 -0
  66. data/app/assets/stylesheets/pageflow/editor/inputs/file_input.scss +7 -11
  67. data/app/assets/stylesheets/pageflow/editor/inputs/file_processing_state_display.scss +0 -2
  68. data/app/assets/stylesheets/pageflow/editor/inputs/reference.scss +7 -11
  69. data/app/assets/stylesheets/pageflow/editor/list.scss +13 -10
  70. data/app/assets/stylesheets/pageflow/editor/loading.scss +1 -1
  71. data/app/assets/stylesheets/pageflow/editor/locked.scss +9 -5
  72. data/app/assets/stylesheets/pageflow/editor/menu.scss +5 -5
  73. data/app/assets/stylesheets/pageflow/editor/notifications.scss +15 -14
  74. data/app/assets/stylesheets/pageflow/editor/other_entry_item.scss +7 -3
  75. data/app/assets/stylesheets/pageflow/editor/outline.scss +57 -19
  76. data/app/assets/stylesheets/pageflow/editor/page_links.scss +10 -8
  77. data/app/assets/stylesheets/pageflow/editor/page_selection.scss +2 -29
  78. data/app/assets/stylesheets/pageflow/editor/publish_entry.scss +5 -6
  79. data/app/assets/stylesheets/pageflow/editor/quotas.scss +2 -3
  80. data/app/assets/stylesheets/pageflow/editor/select_button.scss +12 -6
  81. data/app/assets/stylesheets/pageflow/editor/sidebar_footer.scss +1 -5
  82. data/app/assets/stylesheets/pageflow/editor/storyline_picker.scss +6 -2
  83. data/app/assets/stylesheets/pageflow/editor/text_tracks.scss +6 -22
  84. data/app/assets/stylesheets/pageflow/editor/widgets.scss +2 -2
  85. data/app/assets/stylesheets/pageflow/editor/wysihtml5.scss +35 -29
  86. data/app/assets/stylesheets/pageflow/mixins/background_icons.scss +3 -3
  87. data/app/assets/stylesheets/pageflow/mixins/buttons.scss +50 -68
  88. data/app/assets/stylesheets/pageflow/themes/default/base.scss +2 -0
  89. data/app/assets/stylesheets/pageflow/themes/default/consent/bar.scss +156 -0
  90. data/app/assets/stylesheets/pageflow/themes/default/consent/vendor_list.scss +62 -0
  91. data/app/assets/stylesheets/pageflow/themes/default/consent.scss +2 -0
  92. data/app/assets/stylesheets/pageflow/themes/default/logo/alignment.scss +7 -0
  93. data/app/assets/stylesheets/pageflow/themes/default/page/shadow.scss +44 -0
  94. data/app/assets/stylesheets/pageflow/themes/default/third_party_embed_consent.scss +103 -0
  95. data/app/assets/stylesheets/pageflow/ui/forms.scss +79 -84
  96. data/app/assets/stylesheets/pageflow/ui/functions.scss +56 -0
  97. data/app/assets/stylesheets/pageflow/ui/input/check_box_group_input.scss +2 -3
  98. data/app/assets/stylesheets/pageflow/ui/input/color_input.scss +6 -6
  99. data/app/assets/stylesheets/pageflow/ui/input/extended_select_input.scss +63 -50
  100. data/app/assets/stylesheets/pageflow/ui/normalize/forms.scss +153 -0
  101. data/app/assets/stylesheets/pageflow/ui/normalize.scss +278 -0
  102. data/app/assets/stylesheets/pageflow/ui/properties.scss +44 -0
  103. data/app/assets/stylesheets/pageflow/ui/table_cells/delete_row_table_cell.scss +1 -1
  104. data/app/assets/stylesheets/pageflow/ui/table_view.scss +14 -18
  105. data/app/assets/stylesheets/pageflow/ui/tabs_view.scss +8 -11
  106. data/app/assets/stylesheets/pageflow/ui/tooltip.scss +6 -8
  107. data/app/assets/stylesheets/pageflow/ui/validation_error_messages.scss +6 -0
  108. data/app/assets/stylesheets/pageflow/ui.scss +4 -0
  109. data/app/controllers/pageflow/edit_locks_controller.rb +3 -1
  110. data/app/helpers/pageflow/admin/entries_helper.rb +2 -12
  111. data/app/helpers/pageflow/embed_code_helper.rb +1 -1
  112. data/app/helpers/pageflow/entries_helper.rb +41 -2
  113. data/app/helpers/pageflow/file_background_images_helper.rb +1 -1
  114. data/app/helpers/pageflow/page_types_helper.rb +1 -1
  115. data/app/helpers/pageflow/themes_helper.rb +1 -1
  116. data/app/jobs/pageflow/poll_meta_data_from_zencoder_job.rb +1 -1
  117. data/app/jobs/pageflow/poll_zencoder_job.rb +1 -9
  118. data/app/models/pageflow/audio_file.rb +17 -0
  119. data/app/models/pageflow/audio_file_url_templates.rb +4 -1
  120. data/app/models/pageflow/customized_theme.rb +37 -0
  121. data/app/models/pageflow/draft_entry.rb +6 -59
  122. data/app/models/pageflow/entry_at_revision.rb +68 -0
  123. data/app/models/pageflow/entry_role_query.rb +44 -24
  124. data/app/models/pageflow/image_file_css_background_image_urls.rb +8 -2
  125. data/app/models/pageflow/published_entry.rb +9 -56
  126. data/app/models/pageflow/theme_customization.rb +46 -0
  127. data/app/models/pageflow/theme_customization_file.rb +58 -0
  128. data/app/models/pageflow/video_file.rb +11 -1
  129. data/app/models/pageflow/video_file_url_templates.rb +1 -0
  130. data/app/policies/pageflow/entry_policy.rb +4 -0
  131. data/app/state_machines/pageflow/media_encoding_state_machine.rb +23 -4
  132. data/app/views/admin/entries/_form.html.erb +50 -0
  133. data/app/views/admin/entries/entry_type_name_input.html.erb +5 -0
  134. data/app/views/admin/features/_form.html.erb +1 -1
  135. data/app/views/admin/memberships/_form.html.erb +2 -3
  136. data/app/views/admin/users/_form.html.erb +1 -1
  137. data/app/views/admin/users/invitation.html.erb +2 -2
  138. data/app/views/components/pageflow/admin/entry_user_badge_list.rb +10 -9
  139. data/app/views/components/pageflow/admin/members_tab.rb +5 -1
  140. data/app/views/components/pageflow/admin/revisions_tab.rb +13 -3
  141. data/app/views/components/pageflow/admin/timestamp.rb +20 -0
  142. data/app/views/components/pageflow/admin/user_account_badge_list.rb +5 -6
  143. data/app/views/pageflow/admin/entries/_cannot_add_user.html.erb +9 -5
  144. data/app/views/pageflow/admin/entries/_entry_type_name_input.html.erb +7 -0
  145. data/app/views/pageflow/audio_files/_audio_file.json.jbuilder +13 -0
  146. data/app/views/pageflow/editor/encoding_confirmations/_intro.html.erb +0 -0
  147. data/app/views/pageflow/editor/encoding_confirmations/check.json.jbuilder +14 -2
  148. data/config/initializers/paperclip.rb +16 -1
  149. data/config/locales/de.yml +24 -28
  150. data/config/locales/en.yml +19 -10
  151. data/db/migrate/20210528073122_create_pageflow_theme_customizations.rb +11 -0
  152. data/db/migrate/20210531090654_create_pageflow_theme_customization_files.rb +15 -0
  153. data/db/migrate/20210531102228_add_selected_file_ids_to_theme_customizations.rb +5 -0
  154. data/db/migrate/20211020085902_add_canonical_entry_url_prefix_to_themings.rb +5 -0
  155. data/db/migrate/20220503150010_add_peak_data_to_audio_files.rb +5 -0
  156. data/db/migrate/20220705084830_add_trailing_slash_in_canonical_urls_to_themings.rb +5 -0
  157. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +256 -124
  158. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +566 -167
  159. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-client.js +5 -5
  160. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-server.js +4 -4
  161. data/entry_types/paged/app/helpers/pageflow_paged/third_party_embed_consent_helper.rb +38 -0
  162. data/entry_types/paged/app/views/pageflow_paged/third_party_embed_consent/_opt_in.html.erb +12 -0
  163. data/entry_types/paged/app/views/pageflow_paged/third_party_embed_consent/_opt_out_info.html.erb +10 -0
  164. data/entry_types/paged/config/initializers/features.rb +2 -0
  165. data/entry_types/paged/config/locales/new/video_contain.de.yml +7 -0
  166. data/entry_types/paged/config/locales/new/video_contain.en.yml +7 -0
  167. data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb +3 -0
  168. data/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb +1 -0
  169. data/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb +58 -0
  170. data/entry_types/scrolled/app/helpers/pageflow_scrolled/react_server_side_rendering_helper.rb +37 -3
  171. data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb +92 -6
  172. data/entry_types/scrolled/app/helpers/pageflow_scrolled/webpack_public_path_helper.rb +20 -0
  173. data/entry_types/scrolled/app/models/pageflow_scrolled/content_element.rb +7 -0
  174. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb +5 -2
  175. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_seed.json.jbuilder +5 -1
  176. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +5 -4
  177. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +16 -0
  178. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder +13 -2
  179. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_widget.json.jbuilder +2 -0
  180. data/entry_types/scrolled/config/locales/de.yml +1 -8
  181. data/entry_types/scrolled/config/locales/en.yml +1 -9
  182. data/entry_types/scrolled/config/locales/new/before_after_slider.de.yml +8 -0
  183. data/entry_types/scrolled/config/locales/new/before_after_slider.en.yml +8 -0
  184. data/entry_types/scrolled/config/locales/new/center_ragged.de.yml +8 -0
  185. data/entry_types/scrolled/config/locales/new/center_ragged.en.yml +9 -0
  186. data/entry_types/scrolled/config/locales/new/consent.de.yml +25 -0
  187. data/entry_types/scrolled/config/locales/new/consent.en.yml +24 -0
  188. data/entry_types/scrolled/config/locales/new/content_element_categories.de.yml +39 -0
  189. data/entry_types/scrolled/config/locales/new/content_element_categories.en.yml +39 -0
  190. data/entry_types/scrolled/config/locales/new/default_transition.de.yml +14 -0
  191. data/entry_types/scrolled/config/locales/new/default_transition.en.yml +14 -0
  192. data/entry_types/scrolled/config/locales/new/header_line_breaks.de.yml +28 -0
  193. data/entry_types/scrolled/config/locales/new/header_line_breaks.en.yml +27 -0
  194. data/entry_types/scrolled/config/locales/new/header_size.de.yml +17 -0
  195. data/entry_types/scrolled/config/locales/new/header_size.en.yml +17 -0
  196. data/entry_types/scrolled/config/locales/new/iframe_embed.de.yml +39 -0
  197. data/entry_types/scrolled/config/locales/new/iframe_embed.en.yml +39 -0
  198. data/entry_types/scrolled/config/locales/new/inline_loops.de.yml +26 -0
  199. data/entry_types/scrolled/config/locales/new/inline_loops.en.yml +26 -0
  200. data/entry_types/scrolled/config/locales/new/portrait_inline_image.de.yml +9 -0
  201. data/entry_types/scrolled/config/locales/new/portrait_inline_image.en.yml +9 -0
  202. data/entry_types/scrolled/config/locales/new/section_width.de.yml +10 -0
  203. data/entry_types/scrolled/config/locales/new/section_width.en.yml +10 -0
  204. data/entry_types/scrolled/config/locales/new/typography_variants.de.yml +7 -0
  205. data/entry_types/scrolled/config/locales/new/typography_variants.en.yml +7 -0
  206. data/entry_types/scrolled/config/locales/new/video_embed_poster.de.yml +8 -0
  207. data/entry_types/scrolled/config/locales/new/video_embed_poster.en.yml +8 -0
  208. data/entry_types/scrolled/config/locales/new/waveform_styles.de.yml +11 -0
  209. data/entry_types/scrolled/config/locales/new/waveform_styles.en.yml +12 -0
  210. data/entry_types/scrolled/config/locales/new/widgets.de.yml +6 -0
  211. data/entry_types/scrolled/config/locales/new/widgets.en.yml +6 -0
  212. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +29 -5
  213. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt +8 -6
  214. data/entry_types/scrolled/lib/pageflow_scrolled/additional_packs.rb +37 -0
  215. data/entry_types/scrolled/lib/pageflow_scrolled/additional_seed_data.rb +57 -0
  216. data/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb +49 -0
  217. data/entry_types/scrolled/lib/pageflow_scrolled/engine.rb +2 -0
  218. data/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +8 -0
  219. data/entry_types/scrolled/lib/pageflow_scrolled/react_widget_type.rb +42 -0
  220. data/entry_types/scrolled/lib/pageflow_scrolled.rb +17 -1
  221. data/entry_types/scrolled/lib/tasks/pageflow_scrolled/create_bundle_symlinks_for_yarn.rake +3 -2
  222. data/entry_types/scrolled/package/config/webpack.js +11 -0
  223. data/entry_types/scrolled/package/contentElements-editor.js +323 -89
  224. data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
  225. data/entry_types/scrolled/package/contentElements-frontend.js +719 -529
  226. data/entry_types/scrolled/package/editor.js +459 -261
  227. data/entry_types/scrolled/package/frontend/{EditableText-7093fd0e.js → EditableInlineText.module-b9923660.js} +284 -362
  228. data/entry_types/scrolled/package/frontend/{i18n-4dc6c377.js → PhonePlatformContext-9fb97827.js} +199 -106
  229. data/entry_types/scrolled/package/frontend/{Viewer-e49e7807.js → Viewer-e2290ea0.js} +196 -79
  230. data/entry_types/scrolled/package/frontend/{Wavesurfer-0adf5667.js → Wavesurfer-7d9cf1b7.js} +16 -58
  231. data/entry_types/scrolled/package/frontend/{components-6a6793ca.js → components-6ab26015.js} +664 -671
  232. data/entry_types/scrolled/package/frontend/{getPrototypeOf-63c7c8e8.js → createSuper-d0f30da3.js} +34 -5
  233. data/entry_types/scrolled/package/frontend/index.css +1 -9
  234. data/entry_types/scrolled/package/frontend/index.js +1919 -2386
  235. data/entry_types/scrolled/package/frontend/{useBrowserFeature-91a4c29d.js → usePhonePlatform-2857c22b.js} +9 -8
  236. data/entry_types/scrolled/package/frontend-server.js +3 -6
  237. data/entry_types/scrolled/package/package.json +16 -8
  238. data/entry_types/scrolled/package/testHelpers.js +456 -0
  239. data/entry_types/scrolled/package/values/breakpoints.module.css +9 -0
  240. data/entry_types/scrolled/package/values/colors.module.css +5 -0
  241. data/entry_types/scrolled/package/widgets/defaultNavigation.css +9 -0
  242. data/entry_types/scrolled/package/widgets/defaultNavigation.js +612 -0
  243. data/entry_types/scrolled/spec/fixtures/image.svg +1 -0
  244. data/lib/pageflow/ability_mixin.rb +4 -0
  245. data/lib/pageflow/built_in_widget_type.rb +4 -0
  246. data/lib/pageflow/built_in_widget_types_plugin.rb +7 -0
  247. data/lib/pageflow/configuration.rb +34 -1
  248. data/lib/pageflow/entry_type.rb +11 -2
  249. data/lib/pageflow/entry_type_configuration.rb +2 -0
  250. data/lib/pageflow/file_type.rb +24 -0
  251. data/lib/pageflow/paperclip_processors/audio_waveform.rb +42 -0
  252. data/lib/pageflow/paperclip_processors/noop.rb +10 -0
  253. data/lib/pageflow/theme_customizations.rb +61 -0
  254. data/lib/pageflow/version.rb +1 -1
  255. data/lib/pageflow.rb +9 -0
  256. data/package/config/jest/index.js +2 -1
  257. data/package/config/postcss/scaleFunctions.js +71 -0
  258. data/package/editor.js +95 -85
  259. data/package/frontend.js +521 -161
  260. data/package/package.json +5 -3
  261. data/package/testHelpers.js +26 -5
  262. data/package/ui.js +124 -11
  263. data/spec/factories/draft_entries.rb +19 -1
  264. data/spec/factories/entries.rb +4 -0
  265. data/spec/factories/published_entries.rb +6 -0
  266. data/spec/fixtures/audio.ogg +0 -0
  267. metadata +119 -14
  268. data/app/views/admin/entries/_not_allowed_to_see_entry_types.json.jbuilder +0 -2
  269. data/app/views/admin/entries/entry_types.json.jbuilder +0 -4
  270. data/package/config/jest/transformers/upwardBabel.js +0 -5
@@ -1,9 +1,7 @@
1
- import React, { useState, useEffect, createContext, useContext, useRef, useMemo, useCallback } from 'react';
2
- import { _ as _slicedToArray, k as _objectSpread2, a as _defineProperty, p as _toConsumableArray } from './i18n-4dc6c377.js';
1
+ import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useCallback } from 'react';
2
+ import { c as _slicedToArray, a as _objectSpread2, b as _defineProperty, f as useTheme, o as _toConsumableArray } from './PhonePlatformContext-9fb97827.js';
3
3
  import classNames from 'classnames';
4
- import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _getPrototypeOf, d as _possibleConstructorReturn } from './getPrototypeOf-63c7c8e8.js';
5
-
6
- var PhonePlatformContext = React.createContext(false);
4
+ import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _createSuper } from './createSuper-d0f30da3.js';
7
5
 
8
6
  function useOnScreen(ref) {
9
7
  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -16,6 +14,10 @@ function useOnScreen(ref) {
16
14
  isIntersecting = _useState2[0],
17
15
  setIntersecting = _useState2[1];
18
16
 
17
+ var onIntersectingRef = useRef();
18
+ useEffect(function () {
19
+ onIntersectingRef.current = onIntersecting;
20
+ }, [onIntersecting]);
19
21
  useEffect(function () {
20
22
  var current = ref.current;
21
23
  var observer = createIntersectionObserver(function (entries) {
@@ -30,8 +32,8 @@ function useOnScreen(ref) {
30
32
  var entry = entries[entries.length - 1];
31
33
  setIntersecting(entry.isIntersecting);
32
34
 
33
- if (entry.isIntersecting && onIntersecting) {
34
- onIntersecting();
35
+ if (entry.isIntersecting && onIntersectingRef.current) {
36
+ onIntersectingRef.current();
35
37
  }
36
38
  }, {
37
39
  rootMargin: rootMargin
@@ -44,7 +46,7 @@ function useOnScreen(ref) {
44
46
  return function () {
45
47
  observer.unobserve(current);
46
48
  };
47
- }, [ref, rootMargin, onIntersecting, skipIframeFix]);
49
+ }, [ref, rootMargin, skipIframeFix]);
48
50
  return isIntersecting;
49
51
  }
50
52
 
@@ -86,12 +88,9 @@ var styles = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isAc
86
88
  var StaticPreviewContext = createContext(false);
87
89
  function StaticPreview(_ref) {
88
90
  var children = _ref.children;
89
- return (
90
- /*#__PURE__*/
91
- React.createElement(StaticPreviewContext.Provider, {
92
- value: true
93
- }, children)
94
- );
91
+ return /*#__PURE__*/React.createElement(StaticPreviewContext.Provider, {
92
+ value: true
93
+ }, children);
95
94
  }
96
95
  /**
97
96
  * Use inside a content element component to determine whether the
@@ -131,22 +130,15 @@ function createScrollPositionLifecycleProvider(Context) {
131
130
  isActive: isActive
132
131
  };
133
132
  }, [shouldLoad, shouldPrepare, isVisible, isActive]);
134
- return (
135
- /*#__PURE__*/
136
- React.createElement("div", {
137
- ref: ref,
138
- className: classNames(styles.wrapper)
139
- },
140
- /*#__PURE__*/
141
- React.createElement("div", {
142
- ref: isActiveProbeRef,
143
- className: styles.isActiveProbe
144
- }),
145
- /*#__PURE__*/
146
- React.createElement(Context.Provider, {
147
- value: value
148
- }, children))
149
- );
133
+ return /*#__PURE__*/React.createElement("div", {
134
+ ref: ref,
135
+ className: classNames(styles.wrapper)
136
+ }, /*#__PURE__*/React.createElement("div", {
137
+ ref: isActiveProbeRef,
138
+ className: styles.isActiveProbe
139
+ }), /*#__PURE__*/React.createElement(Context.Provider, {
140
+ value: value
141
+ }, children));
150
142
  };
151
143
  }
152
144
  function createScrollPositionLifecycleHook(Context) {
@@ -187,18 +179,35 @@ function createScrollPositionLifecycleHook(Context) {
187
179
  };
188
180
  }
189
181
 
182
+ var ContentElementEditorStateContext = createContext({
183
+ isSelected: false,
184
+ isEditable: false,
185
+ setTransientState: function setTransientState() {}
186
+ });
187
+ /**
188
+ * Use inside a content element component to determine whether the
189
+ * component is being rendered inside the editor iframe, and whether
190
+ * the content element is currently selected. This can be used to
191
+ * implement simple inline editing capabilities like displaying extra
192
+ * information when the content element is selected.
193
+ *
194
+ * @example
195
+ * const {isEditable, isSelected} = useContentElementEditorState();
196
+ */
197
+
198
+ function useContentElementEditorState() {
199
+ return useContext(ContentElementEditorStateContext);
200
+ }
201
+
190
202
  var styles$1 = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
191
203
 
192
204
  var VisibilityContext = React.createContext(false);
193
205
  function MotifAreaVisibilityProvider(_ref) {
194
206
  var visible = _ref.visible,
195
207
  children = _ref.children;
196
- return (
197
- /*#__PURE__*/
198
- React.createElement(VisibilityContext.Provider, {
199
- value: visible
200
- }, children)
201
- );
208
+ return /*#__PURE__*/React.createElement(VisibilityContext.Provider, {
209
+ value: visible
210
+ }, children);
202
211
  }
203
212
  var MotifArea = function MotifArea(props) {
204
213
  var _props$file;
@@ -224,16 +233,13 @@ var MotifArea = function MotifArea(props) {
224
233
  return null;
225
234
  }
226
235
 
227
- return (
228
- /*#__PURE__*/
229
- React.createElement("div", {
230
- ref: setElementRef,
231
- className: classNames(styles$1.root, _defineProperty({}, styles$1.visible, visible)),
232
- style: position,
233
- onMouseEnter: props.onMouseEnter,
234
- onMouseLeave: props.onMouseLeave
235
- })
236
- );
236
+ return /*#__PURE__*/React.createElement("div", {
237
+ ref: setElementRef,
238
+ className: classNames(styles$1.root, _defineProperty({}, styles$1.visible, visible)),
239
+ style: position,
240
+ onMouseEnter: props.onMouseEnter,
241
+ onMouseLeave: props.onMouseLeave
242
+ });
237
243
  };
238
244
  MotifArea.defaultProps = {
239
245
  onUpdate: function onUpdate() {}
@@ -261,7 +267,7 @@ function useMediaQuery(query) {
261
267
  };
262
268
 
263
269
  var matcher = window.matchMedia(query);
264
- var isModern = 'addEventListener' in matcher;
270
+ var isModern = ('addEventListener' in matcher);
265
271
 
266
272
  if (isModern) {
267
273
  matcher.addEventListener('change', onUpdateMatch);
@@ -286,15 +292,12 @@ var styles$2 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeig
286
292
  var ForcePaddingContext = createContext(false);
287
293
  function Foreground(props) {
288
294
  var forcePadding = useContext(ForcePaddingContext);
289
- return (
290
- /*#__PURE__*/
291
- React.createElement("div", {
292
- className: className(props, forcePadding),
293
- style: {
294
- minHeight: props.minHeight
295
- }
296
- }, props.children)
297
- );
295
+ return /*#__PURE__*/React.createElement("div", {
296
+ className: className(props, forcePadding),
297
+ style: {
298
+ minHeight: props.minHeight
299
+ }
300
+ }, props.children);
298
301
  }
299
302
 
300
303
  function className(props, forcePadding) {
@@ -305,9 +308,7 @@ function className(props, forcePadding) {
305
308
  * Register new types of content elements.
306
309
  * @name frontend_contentElementTypes
307
310
  */
308
- var ContentElementTypeRegistry =
309
- /*#__PURE__*/
310
- function () {
311
+ var ContentElementTypeRegistry = /*#__PURE__*/function () {
311
312
  function ContentElementTypeRegistry() {
312
313
  _classCallCheck(this, ContentElementTypeRegistry);
313
314
 
@@ -356,13 +357,88 @@ function () {
356
357
  value: function getOptions(typeName) {
357
358
  return this.types[typeName];
358
359
  }
360
+ }, {
361
+ key: "consentVendors",
362
+ value: function consentVendors(_ref) {
363
+ var _this = this;
364
+
365
+ var contentElements = _ref.contentElements,
366
+ t = _ref.t;
367
+ var vendorsByName = {};
368
+ contentElements.forEach(function (contentElement) {
369
+ var type = _this.types[contentElement.typeName];
370
+ var consentVendors = typeof type.consentVendors === 'function' ? type.consentVendors({
371
+ configuration: contentElement.configuration,
372
+ t: t
373
+ }) : type.consentVendors || [];
374
+ consentVendors.forEach(function (vendor) {
375
+ vendorsByName[vendor.name] = vendor;
376
+ });
377
+ });
378
+ return Object.values(vendorsByName);
379
+ }
359
380
  }]);
360
381
 
361
382
  return ContentElementTypeRegistry;
362
383
  }();
363
384
 
385
+ /**
386
+ * Register new types of widgets.
387
+ * @name frontend_widgetTypes
388
+ */
389
+ var WidgetTypeRegistry = /*#__PURE__*/function () {
390
+ function WidgetTypeRegistry() {
391
+ _classCallCheck(this, WidgetTypeRegistry);
392
+
393
+ this.types = {};
394
+ }
395
+ /**
396
+ * Register a new type of widget.
397
+ *
398
+ * @param {string} typeName - Name of the content element type.
399
+ * @param {Object} options
400
+ * @param {React.Component} options.component
401
+ * @memberof frontend_widgetTypes
402
+ *
403
+ * @example
404
+ *
405
+ * // frontend.js
406
+ *
407
+ * import {frontend} from 'pageflow-scrolled/frontend';
408
+ * import {CustomNavigationBar} from './CustomNavigationBar';
409
+ *
410
+ * frontend.contentElementTypes.register('customNavigationBar', {
411
+ * component: CustomNavigationBar
412
+ * });
413
+ */
414
+
415
+
416
+ _createClass(WidgetTypeRegistry, [{
417
+ key: "register",
418
+ value: function register(typeName, options) {
419
+ if (!options.component) {
420
+ throw new Error("Missing required component option for widget type '".concat(typeName, "'."));
421
+ }
422
+
423
+ this.types[typeName] = options;
424
+ }
425
+ }, {
426
+ key: "getComponent",
427
+ value: function getComponent(typeName) {
428
+ if (!this.types[typeName]) {
429
+ throw new Error("Unknown widget type '".concat(typeName, "'. Consider calling frontent.widgetTypes.register."));
430
+ }
431
+
432
+ return this.types[typeName].component;
433
+ }
434
+ }]);
435
+
436
+ return WidgetTypeRegistry;
437
+ }();
438
+
364
439
  var api = {
365
- contentElementTypes: new ContentElementTypeRegistry()
440
+ contentElementTypes: new ContentElementTypeRegistry(),
441
+ widgetTypes: new WidgetTypeRegistry()
366
442
  };
367
443
 
368
444
  // For reasons that are beyond me, Storybook's Webpack build fails
@@ -373,7 +449,7 @@ var api = {
373
449
  // file with an empty one, but found out that extracting the import
374
450
  // to a separate file apparently is enough.
375
451
  function importComponents() {
376
- return import('./components-6a6793ca.js');
452
+ return import('./components-6ab26015.js');
377
453
  }
378
454
 
379
455
  var components = {};
@@ -387,17 +463,9 @@ function withInlineEditingDecorator(name, Component) {
387
463
  var Decorator = components[name];
388
464
 
389
465
  if (Decorator) {
390
- return (
391
- /*#__PURE__*/
392
- React.createElement(Decorator, props,
393
- /*#__PURE__*/
394
- React.createElement(Component, props))
395
- );
466
+ return /*#__PURE__*/React.createElement(Decorator, props, /*#__PURE__*/React.createElement(Component, props));
396
467
  } else {
397
- return (
398
- /*#__PURE__*/
399
- React.createElement(Component, props)
400
- );
468
+ return /*#__PURE__*/React.createElement(Component, props);
401
469
  }
402
470
  };
403
471
  }
@@ -406,15 +474,9 @@ function withInlineEditingAlternative(name, Component) {
406
474
  var Alternative = components[name];
407
475
 
408
476
  if (Alternative) {
409
- return (
410
- /*#__PURE__*/
411
- React.createElement(Alternative, props)
412
- );
477
+ return /*#__PURE__*/React.createElement(Alternative, props);
413
478
  } else {
414
- return (
415
- /*#__PURE__*/
416
- React.createElement(Component, props)
417
- );
479
+ return /*#__PURE__*/React.createElement(Component, props);
418
480
  }
419
481
  };
420
482
  }
@@ -428,12 +490,9 @@ function ContentElementAttributesProvider(_ref) {
428
490
  contentElementId: id
429
491
  };
430
492
  }, [id]);
431
- return (
432
- /*#__PURE__*/
433
- React.createElement(ContentElementAttributesContext.Provider, {
434
- value: attributes
435
- }, children)
436
- );
493
+ return /*#__PURE__*/React.createElement(ContentElementAttributesContext.Provider, {
494
+ value: attributes
495
+ }, children);
437
496
  }
438
497
  function useContentElementAttributes() {
439
498
  return useContext(ContentElementAttributesContext);
@@ -450,10 +509,7 @@ function ContentElementLifecycleProvider(_ref) {
450
509
  lifecycle = _api$contentElementTy.lifecycle;
451
510
 
452
511
  if (lifecycle) {
453
- return (
454
- /*#__PURE__*/
455
- React.createElement(LifecycleProvider, null, children)
456
- );
512
+ return /*#__PURE__*/React.createElement(LifecycleProvider, null, children);
457
513
  } else {
458
514
  return children;
459
515
  }
@@ -504,48 +560,14 @@ function ContentElementMargin(_ref) {
504
560
  return children;
505
561
  }
506
562
 
507
- return (
508
- /*#__PURE__*/
509
- React.createElement("div", {
510
- className: styles$3.wrapper
511
- }, children)
512
- );
563
+ return /*#__PURE__*/React.createElement("div", {
564
+ className: styles$3.wrapper
565
+ }, children);
513
566
  }
514
567
 
515
568
  var styles$4 = {"missing":"ContentElement-module_missing__2_1j9"};
516
569
 
517
- function _createSuper(Derived) {
518
- function isNativeReflectConstruct() {
519
- if (typeof Reflect === "undefined" || !Reflect.construct) return false;
520
- if (Reflect.construct.sham) return false;
521
- if (typeof Proxy === "function") return true;
522
-
523
- try {
524
- Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
525
- return true;
526
- } catch (e) {
527
- return false;
528
- }
529
- }
530
-
531
- return function () {
532
- var Super = _getPrototypeOf(Derived),
533
- result;
534
-
535
- if (isNativeReflectConstruct()) {
536
- var NewTarget = _getPrototypeOf(this).constructor;
537
-
538
- result = Reflect.construct(Super, arguments, NewTarget);
539
- } else {
540
- result = Super.apply(this, arguments);
541
- }
542
-
543
- return _possibleConstructorReturn(this, result);
544
- };
545
- }
546
- var ContentElementErrorBoundary =
547
- /*#__PURE__*/
548
- function (_React$Component) {
570
+ var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
549
571
  _inherits(ContentElementErrorBoundary, _React$Component);
550
572
 
551
573
  var _super = _createSuper(ContentElementErrorBoundary);
@@ -566,12 +588,9 @@ function (_React$Component) {
566
588
  key: "render",
567
589
  value: function render() {
568
590
  if (this.state.hasError) {
569
- return (
570
- /*#__PURE__*/
571
- React.createElement("div", {
572
- className: styles$4.missing
573
- }, "Error rendering element of type \"", this.props.type, "\"")
574
- );
591
+ return /*#__PURE__*/React.createElement("div", {
592
+ className: styles$4.missing
593
+ }, "Error rendering element of type \"", this.props.type, "\"");
575
594
  }
576
595
 
577
596
  return this.props.children;
@@ -592,37 +611,23 @@ var ContentElement = withInlineEditingDecorator('ContentElementDecorator', funct
592
611
  var Component = api.contentElementTypes.getComponent(props.type);
593
612
 
594
613
  if (Component) {
595
- return (
596
- /*#__PURE__*/
597
- React.createElement(ContentElementAttributesProvider, {
598
- id: props.id
599
- },
600
- /*#__PURE__*/
601
- React.createElement(ContentElementLifecycleProvider, {
602
- type: props.type
603
- },
604
- /*#__PURE__*/
605
- React.createElement(ContentElementMargin, {
606
- position: props.itemProps.position
607
- },
608
- /*#__PURE__*/
609
- React.createElement(ContentElementErrorBoundary, {
610
- type: props.type
611
- },
612
- /*#__PURE__*/
613
- React.createElement(Component, {
614
- sectionProps: props.sectionProps,
615
- configuration: props.itemProps,
616
- contentElementId: props.id
617
- })))))
618
- );
614
+ return /*#__PURE__*/React.createElement(ContentElementAttributesProvider, {
615
+ id: props.id
616
+ }, /*#__PURE__*/React.createElement(ContentElementLifecycleProvider, {
617
+ type: props.type
618
+ }, /*#__PURE__*/React.createElement(ContentElementMargin, {
619
+ position: props.itemProps.position
620
+ }, /*#__PURE__*/React.createElement(ContentElementErrorBoundary, {
621
+ type: props.type
622
+ }, /*#__PURE__*/React.createElement(Component, {
623
+ sectionProps: props.sectionProps,
624
+ configuration: props.itemProps,
625
+ contentElementId: props.id
626
+ })))));
619
627
  } else {
620
- return (
621
- /*#__PURE__*/
622
- React.createElement("div", {
623
- className: styles$4.missing
624
- }, "Element of unknown type \"", props.type, "\"")
625
- );
628
+ return /*#__PURE__*/React.createElement("div", {
629
+ className: styles$4.missing
630
+ }, "Element of unknown type \"", props.type, "\"");
626
631
  }
627
632
  });
628
633
  ContentElement.defaultProps = {
@@ -630,23 +635,18 @@ ContentElement.defaultProps = {
630
635
  };
631
636
 
632
637
  function ContentElements(props) {
633
- return (
634
- /*#__PURE__*/
635
- React.createElement(React.Fragment, null, props.items.map(function (item, index) {
636
- return props.children(item,
637
- /*#__PURE__*/
638
- React.createElement(MemoizedContentElement, {
639
- key: item.id,
640
- id: item.id,
641
- permaId: item.permaId,
642
- type: item.type,
643
- first: index === 0,
644
- position: item.position,
645
- itemProps: item.props,
646
- sectionProps: props.sectionProps
647
- }), index);
648
- }))
649
- );
638
+ return /*#__PURE__*/React.createElement(React.Fragment, null, props.items.map(function (item, index) {
639
+ return props.children(item, /*#__PURE__*/React.createElement(MemoizedContentElement, {
640
+ key: item.id,
641
+ id: item.id,
642
+ permaId: item.permaId,
643
+ type: item.type,
644
+ first: index === 0,
645
+ position: item.position,
646
+ itemProps: item.props,
647
+ sectionProps: props.sectionProps
648
+ }), index);
649
+ }));
650
650
  }
651
651
  var MemoizedContentElement = React.memo(ContentElement, function (prevProps, nextProps) {
652
652
  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;
@@ -658,10 +658,14 @@ ContentElements.defaultProps = {
658
658
  };
659
659
 
660
660
  function useNarrowViewport() {
661
- return useMediaQuery('(max-width: 950px)');
661
+ var _theme$options$proper, _theme$options$proper2;
662
+
663
+ var theme = useTheme();
664
+ 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';
665
+ return useMediaQuery("(max-width: ".concat(maxWidth, ")"));
662
666
  }
663
667
 
664
- var styles$5 = {"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","wideViewport":"TwoColumn-module_wideViewport___c_Zz","right":"TwoColumn-module_right__Fr52a","narrowViewport":"TwoColumn-module_narrowViewport__1x_NY"};
668
+ var styles$5 = {"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"};
665
669
 
666
670
  function availablePositions(narrow) {
667
671
  if (narrow) {
@@ -673,22 +677,15 @@ function availablePositions(narrow) {
673
677
 
674
678
  function TwoColumn(props) {
675
679
  var narrow = useNarrowViewport();
676
- return (
677
- /*#__PURE__*/
678
- React.createElement("div", {
679
- className: classNames(styles$5.root, styles$5[props.align], narrow ? styles$5.narrowViewport : styles$5.wideViewport)
680
- },
681
- /*#__PURE__*/
682
- React.createElement("div", {
683
- className: classNames(styles$5.group),
684
- key: props.align
685
- },
686
- /*#__PURE__*/
687
- React.createElement("div", {
688
- className: styles$5.inline,
689
- ref: props.contentAreaRef
690
- })), renderItems(props, narrow), renderPlaceholder(props.placeholder))
691
- );
680
+ return /*#__PURE__*/React.createElement("div", {
681
+ className: classNames(styles$5.root, styles$5[props.align], narrow ? styles$5.narrowViewport : styles$5.wideViewport)
682
+ }, /*#__PURE__*/React.createElement("div", {
683
+ className: classNames(styles$5.group),
684
+ key: props.align
685
+ }, /*#__PURE__*/React.createElement("div", {
686
+ className: styles$5.inline,
687
+ ref: props.contentAreaRef
688
+ })), renderItems(props, narrow), renderPlaceholder(props.placeholder));
692
689
  }
693
690
  TwoColumn.defaultProps = {
694
691
  align: 'left'
@@ -696,33 +693,25 @@ TwoColumn.defaultProps = {
696
693
 
697
694
  function renderItems(props, narrow) {
698
695
  return groupItemsByPosition(props.items, availablePositions(narrow)).map(function (group, index) {
699
- return (
700
- /*#__PURE__*/
701
- React.createElement("div", {
702
- key: index,
703
- className: classNames(styles$5.group, styles$5["group-".concat(group.position)])
704
- }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'wide'), renderItemGroup(props, group, 'full'))
705
- );
696
+ return /*#__PURE__*/React.createElement("div", {
697
+ key: index,
698
+ className: classNames(styles$5.group, styles$5["group-".concat(group.position)])
699
+ }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'wide'), renderItemGroup(props, group, 'full'));
706
700
  });
707
701
  }
708
702
 
709
703
  function renderItemGroup(props, group, position) {
710
704
  if (group[position].length) {
711
- return (
712
- /*#__PURE__*/
713
- React.createElement("div", {
714
- className: styles$5[position]
715
- }, props.children(
716
- /*#__PURE__*/
717
- React.createElement(ContentElements, {
718
- sectionProps: props.sectionProps,
719
- items: group[position]
720
- }), {
721
- position: position,
722
- openStart: position === 'inline' && group.openStart,
723
- openEnd: position === 'inline' && group.openEnd
724
- }))
725
- );
705
+ return /*#__PURE__*/React.createElement("div", {
706
+ className: styles$5[position]
707
+ }, props.children( /*#__PURE__*/React.createElement(ContentElements, {
708
+ sectionProps: props.sectionProps,
709
+ items: group[position]
710
+ }), {
711
+ position: position,
712
+ openStart: position === 'inline' && group.openStart,
713
+ openEnd: position === 'inline' && group.openEnd
714
+ }));
726
715
  }
727
716
  }
728
717
 
@@ -760,52 +749,33 @@ function renderPlaceholder(placeholder) {
760
749
  return null;
761
750
  }
762
751
 
763
- return (
764
- /*#__PURE__*/
765
- React.createElement("div", {
766
- className: classNames(styles$5.group)
767
- },
768
- /*#__PURE__*/
769
- React.createElement("div", {
770
- className: styles$5.inline
771
- }, placeholder))
772
- );
752
+ return /*#__PURE__*/React.createElement("div", {
753
+ className: classNames(styles$5.group)
754
+ }, /*#__PURE__*/React.createElement("div", {
755
+ className: styles$5.inline
756
+ }, placeholder));
773
757
  }
774
758
 
775
759
  var styles$6 = {"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"};
776
760
 
777
761
  function Center(props) {
778
- return (
779
- /*#__PURE__*/
780
- React.createElement("div", {
781
- className: classNames(styles$6.root)
782
- },
783
- /*#__PURE__*/
784
- React.createElement("div", {
785
- ref: props.contentAreaRef
786
- }),
787
- /*#__PURE__*/
788
- React.createElement(ContentElements, {
789
- sectionProps: props.sectionProps,
790
- items: props.items
791
- }, function (item, child, index) {
792
- return (
793
- /*#__PURE__*/
794
- React.createElement("div", {
795
- key: item.id,
796
- className: outerClassName(item)
797
- },
798
- /*#__PURE__*/
799
- React.createElement("div", {
800
- className: classNames(styles$6.item, styles$6["item-".concat(item.position)])
801
- }, props.children(
802
- /*#__PURE__*/
803
- React.createElement("div", {
804
- className: styles$6["inner-".concat(item.position)]
805
- }, child), boxProps(props.items, item, index))))
806
- );
807
- }), renderPlaceholder$1(props.placeholder))
808
- );
762
+ return /*#__PURE__*/React.createElement("div", {
763
+ className: classNames(styles$6.root)
764
+ }, /*#__PURE__*/React.createElement("div", {
765
+ ref: props.contentAreaRef
766
+ }), /*#__PURE__*/React.createElement(ContentElements, {
767
+ sectionProps: props.sectionProps,
768
+ items: props.items
769
+ }, function (item, child, index) {
770
+ return /*#__PURE__*/React.createElement("div", {
771
+ key: item.id,
772
+ className: outerClassName(item)
773
+ }, /*#__PURE__*/React.createElement("div", {
774
+ className: classNames(styles$6.item, styles$6["item-".concat(item.position)])
775
+ }, props.children( /*#__PURE__*/React.createElement("div", {
776
+ className: styles$6["inner-".concat(item.position)]
777
+ }, child), boxProps(props.items, item, index))));
778
+ }), renderPlaceholder$1(props.placeholder));
809
779
  }
810
780
 
811
781
  function outerClassName(item) {
@@ -830,39 +800,25 @@ function renderPlaceholder$1(placeholder) {
830
800
  return null;
831
801
  }
832
802
 
833
- return (
834
- /*#__PURE__*/
835
- React.createElement("div", {
836
- className: classNames(styles$6.outer)
837
- },
838
- /*#__PURE__*/
839
- React.createElement("div", {
840
- className: classNames(styles$6.item)
841
- }, placeholder))
842
- );
803
+ return /*#__PURE__*/React.createElement("div", {
804
+ className: classNames(styles$6.outer)
805
+ }, /*#__PURE__*/React.createElement("div", {
806
+ className: classNames(styles$6.item)
807
+ }, placeholder));
843
808
  }
844
809
 
845
810
  var Layout = React.memo(withInlineEditingAlternative('LayoutWithPlaceholder', LayoutWithoutInlineEditing), function (prevProps, nextProps) {
846
811
  return prevProps.sectionId === nextProps.sectionId && prevProps.items === nextProps.items && prevProps.appearance === nextProps.appearance && prevProps.contentAreaRef === nextProps.contentAreaRef && prevProps.sectionProps === nextProps.sectionProps;
847
812
  });
848
813
  function LayoutWithoutInlineEditing(props) {
849
- if (props.sectionProps.layout === 'center') {
850
- return (
851
- /*#__PURE__*/
852
- React.createElement(Center, props)
853
- );
814
+ if (props.sectionProps.layout === 'center' || props.sectionProps.layout === 'centerRagged') {
815
+ return /*#__PURE__*/React.createElement(Center, props);
854
816
  } else if (props.sectionProps.layout === 'right') {
855
- return (
856
- /*#__PURE__*/
857
- React.createElement(TwoColumn, Object.assign({
858
- align: "right"
859
- }, props))
860
- );
817
+ return /*#__PURE__*/React.createElement(TwoColumn, Object.assign({
818
+ align: "right"
819
+ }, props));
861
820
  } else {
862
- return (
863
- /*#__PURE__*/
864
- React.createElement(TwoColumn, props)
865
- );
821
+ return /*#__PURE__*/React.createElement(TwoColumn, props);
866
822
  }
867
823
  }
868
824
  Layout.defaultProps = {
@@ -887,13 +843,15 @@ function usePostMessageListener(receiveData) {
887
843
  }, [receiveData]);
888
844
  }
889
845
 
890
- var styles$7 = {"text-s":"20px","text-base":"22px","text-l":"40px","text-xl":"66px","text-2xl":"110px","h2":"Text-module_h2__34chJ","h1":"Text-module_h1__2_5kX","body":"Text-module_body__4oWD-","caption":"Text-module_caption__3_6Au"};
846
+ var textStyles = {"text-s":"20px","text-base":"22px","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"};
891
847
 
892
848
  /**
893
849
  * Render some text using the default typography scale.
894
850
  *
895
851
  * @param {Object} props
896
- * @param {string} props.scaleCategory - One of the styles `'h1'`, `'h2'`, `'body'`, `'caption'`.
852
+ * @param {string} props.scaleCategory -
853
+ * One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,
854
+ * `'heading-xs'`, `'body'`, `'caption'`.
897
855
  * @param {string} [props.inline] - Render a span instread of a div.
898
856
  * @param {string} props.children - Nodes to render with specified typography.
899
857
  */
@@ -903,7 +861,7 @@ function Text(_ref) {
903
861
  scaleCategory = _ref.scaleCategory,
904
862
  children = _ref.children;
905
863
  return React.createElement(inline ? 'span' : 'div', {
906
- className: styles$7[scaleCategory]
864
+ className: textStyles[scaleCategory]
907
865
  }, children);
908
866
  }
909
867
 
@@ -929,34 +887,11 @@ function useContentElementEditorCommandSubscription(callback) {
929
887
  }, [emitter, callback, contentElementId]);
930
888
  }
931
889
 
932
- var ContentElementEditorStateContext = createContext({
933
- isSelected: false,
934
- isEditable: false,
935
- setTransientState: function setTransientState() {}
936
- });
937
- /**
938
- * Use inside a content element component to determine whether the
939
- * component is being rendered inside the editor iframe, and whether
940
- * the content element is currently selected. This can be used to
941
- * implement simple inline editing capabilities like displaying extra
942
- * information when the content element is selected.
943
- *
944
- * @example
945
- * const {isEditable, isSelected} = useContentElementEditorState();
946
- */
947
-
948
- function useContentElementEditorState() {
949
- return useContext(ContentElementEditorStateContext);
950
- }
951
-
952
890
  var EditableText = withInlineEditingAlternative('EditableText', function EditableText(_ref) {
953
891
  var value = _ref.value;
954
- return (
955
- /*#__PURE__*/
956
- React.createElement(Text, {
957
- scaleCategory: "body"
958
- }, render(value))
959
- );
892
+ return /*#__PURE__*/React.createElement(Text, {
893
+ scaleCategory: "body"
894
+ }, render(value));
960
895
  });
961
896
 
962
897
  function render() {
@@ -986,51 +921,41 @@ function renderElement(_ref2) {
986
921
  var attributes = _ref2.attributes,
987
922
  children = _ref2.children,
988
923
  element = _ref2.element;
924
+ var variantClassName = element.variant && ['typography-textBlock', camelize(element.type), element.variant].join('-');
989
925
 
990
926
  switch (element.type) {
991
927
  case 'block-quote':
992
- return (
993
- /*#__PURE__*/
994
- React.createElement("blockquote", attributes, children)
995
- );
928
+ return /*#__PURE__*/React.createElement("blockquote", Object.assign({}, attributes, {
929
+ className: variantClassName
930
+ }), children);
996
931
 
997
932
  case 'bulleted-list':
998
- return (
999
- /*#__PURE__*/
1000
- React.createElement("ul", attributes, children)
1001
- );
933
+ return /*#__PURE__*/React.createElement("ul", Object.assign({}, attributes, {
934
+ className: variantClassName
935
+ }), children);
1002
936
 
1003
937
  case 'numbered-list':
1004
- return (
1005
- /*#__PURE__*/
1006
- React.createElement("ol", attributes, children)
1007
- );
938
+ return /*#__PURE__*/React.createElement("ol", Object.assign({}, attributes, {
939
+ className: variantClassName
940
+ }), children);
1008
941
 
1009
942
  case 'list-item':
1010
- return (
1011
- /*#__PURE__*/
1012
- React.createElement("li", attributes, children)
1013
- );
943
+ return /*#__PURE__*/React.createElement("li", attributes, children);
1014
944
 
1015
945
  case 'heading':
1016
- return (
1017
- /*#__PURE__*/
1018
- React.createElement("h2", attributes, children)
1019
- );
946
+ return /*#__PURE__*/React.createElement("h2", Object.assign({}, attributes, {
947
+ className: classNames(variantClassName, textStyles['heading-xs'])
948
+ }), children);
1020
949
 
1021
950
  case 'link':
1022
- return (
1023
- /*#__PURE__*/
1024
- React.createElement("a", Object.assign({}, attributes, {
1025
- href: element.href
1026
- }), children)
1027
- );
951
+ return /*#__PURE__*/React.createElement("a", Object.assign({}, attributes, {
952
+ href: element.href
953
+ }), children);
1028
954
 
1029
955
  default:
1030
- return (
1031
- /*#__PURE__*/
1032
- React.createElement("p", attributes, children)
1033
- );
956
+ return /*#__PURE__*/React.createElement("p", Object.assign({}, attributes, {
957
+ className: variantClassName
958
+ }), children);
1034
959
  }
1035
960
  }
1036
961
  function renderLeaf(_ref3) {
@@ -1039,33 +964,30 @@ function renderLeaf(_ref3) {
1039
964
  leaf = _ref3.leaf;
1040
965
 
1041
966
  if (leaf.bold) {
1042
- children =
1043
- /*#__PURE__*/
1044
- React.createElement("strong", null, children);
967
+ children = /*#__PURE__*/React.createElement("strong", null, children);
1045
968
  }
1046
969
 
1047
970
  if (leaf.italic) {
1048
- children =
1049
- /*#__PURE__*/
1050
- React.createElement("em", null, children);
971
+ children = /*#__PURE__*/React.createElement("em", null, children);
1051
972
  }
1052
973
 
1053
974
  if (leaf.underline) {
1054
- children =
1055
- /*#__PURE__*/
1056
- React.createElement("u", null, children);
975
+ children = /*#__PURE__*/React.createElement("u", null, children);
1057
976
  }
1058
977
 
1059
978
  if (leaf.strikethrough) {
1060
- children =
1061
- /*#__PURE__*/
1062
- React.createElement("s", null, children);
979
+ children = /*#__PURE__*/React.createElement("s", null, children);
1063
980
  }
1064
981
 
1065
- return (
1066
- /*#__PURE__*/
1067
- React.createElement("span", attributes, children)
1068
- );
982
+ return /*#__PURE__*/React.createElement("span", attributes, children);
983
+ }
984
+
985
+ function camelize(snakeCase) {
986
+ return snakeCase.replace(/-[a-z]/g, function (match) {
987
+ return match[1].toUpperCase();
988
+ });
1069
989
  }
1070
990
 
1071
- export { ContentElementEditorCommandEmitterContext as C, EditableText as E, Foreground as F, Layout as L, MotifArea as M, PhonePlatformContext as P, StaticPreview as S, Text as T, createScrollPositionLifecycleHook as a, useMediaQuery as b, createScrollPositionLifecycleProvider as c, usePostMessageListener as d, withInlineEditingAlternative as e, api as f, useContentElementConfigurationUpdate as g, useContentElementEditorCommandSubscription as h, useContentElementEditorState as i, useContentElementLifecycle as j, useOnScreen as k, loadInlineEditingComponents as l, MotifAreaVisibilityProvider as m, ForcePaddingContext as n, ContentElementConfigurationUpdateContext as o, ContentElementEditorStateContext as p, LayoutWithoutInlineEditing as q, renderElement as r, renderLeaf as s, useIsStaticPreview as u, withInlineEditingDecorator as w };
991
+ var frontendStyles = {"root":"EditableInlineText-module_root__3eA-J","manualHyphens":"EditableInlineText-module_manualHyphens__r4suO"};
992
+
993
+ export { ContentElementEditorCommandEmitterContext as C, EditableText as E, Foreground as F, Layout as L, MotifArea as M, StaticPreview as S, Text as T, useIsStaticPreview as a, createScrollPositionLifecycleHook as b, createScrollPositionLifecycleProvider as c, useMediaQuery as d, usePostMessageListener as e, api as f, withInlineEditingAlternative as g, frontendStyles as h, useContentElementConfigurationUpdate as i, useContentElementEditorCommandSubscription as j, useContentElementLifecycle as k, loadInlineEditingComponents as l, useOnScreen as m, MotifAreaVisibilityProvider as n, ForcePaddingContext as o, ContentElementConfigurationUpdateContext as p, ContentElementEditorStateContext as q, LayoutWithoutInlineEditing as r, renderElement as s, renderLeaf as t, useContentElementEditorState as u, withInlineEditingDecorator as w };