@total_onion/onion-library 1.0.29 → 1.0.30

package/components/block-standard-content-v3/group_68655756737c9.json

@@ -125,156 +125,6 @@
             "acfe_clone_modal_button": "",
             "acfe_clone_modal_size": "large"
         },
-        {
-            "key": "field_6865575687011",
-            "label": "Accent Image v3",
-            "name": "",
-            "aria-label": "",
-            "type": "tab",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "placement": "top",
-            "endpoint": 0,
-            "no_preference": 0,
-            "selected": 0
-        },
-        {
-            "key": "field_68655756873f5",
-            "label": "Accent Image v3 Fields",
-            "name": "accent_image_v3_fields",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "clone": [
-                "group_686cd5547efd2"
-            ],
-            "display": "seamless",
-            "layout": "block",
-            "prefix_label": 0,
-            "prefix_name": 0,
-            "acfe_seamless_style": 0,
-            "acfe_clone_modal": 0,
-            "acfe_clone_modal_close": 0,
-            "acfe_clone_modal_button": "",
-            "acfe_clone_modal_size": "large"
-        },
-        {
-            "key": "field_6865575687f76",
-            "label": "Scrolling Banner",
-            "name": "",
-            "aria-label": "",
-            "type": "tab",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "placement": "top",
-            "endpoint": 0,
-            "no_preference": 0,
-            "selected": 0
-        },
-        {
-            "key": "field_68655756883a1",
-            "label": "scrolling banner fields",
-            "name": "scrolling_banner_fields",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "user_roles": [
-                "all"
-            ],
-            "clone": [
-                "group_626472bf26f5c"
-            ],
-            "display": "seamless",
-            "layout": "block",
-            "prefix_label": 0,
-            "prefix_name": 0,
-            "acfe_seamless_style": 0,
-            "acfe_clone_modal": 0,
-            "acfe_clone_modal_close": 0,
-            "acfe_clone_modal_button": "",
-            "acfe_clone_modal_size": "large"
-        },
-        {
-            "key": "field_6865575688783",
-            "label": "Buy Now Button",
-            "name": "",
-            "aria-label": "",
-            "type": "tab",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "placement": "top",
-            "endpoint": 0,
-            "no_preference": 0,
-            "selected": 0
-        },
-        {
-            "key": "field_6865575688b74",
-            "label": "Buy now fields",
-            "name": "buy_now_fields",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "user_roles": [
-                "all"
-            ],
-            "clone": [
-                "field_659685d580e5f"
-            ],
-            "display": "seamless",
-            "layout": "block",
-            "prefix_label": 0,
-            "prefix_name": 0,
-            "acfe_seamless_style": 0,
-            "acfe_clone_modal": 0,
-            "acfe_clone_modal_close": 0,
-            "acfe_clone_modal_button": "",
-            "acfe_clone_modal_size": "large",
-            "wpml_cf_preferences": 3
-        },
         {
             "key": "field_6865575688f54",
             "label": "Animations",
@@ -590,5 +440,5 @@
     "acfe_display_title": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1752275529
+    "modified": 1752844414
 }

package/components/fields-content-container-settings-v3/content-container-settings-v3.scss

@@ -0,0 +1,213 @@
+@use 'Assets/scss/theme/breakpoints';
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/modules/library-modules/box-shadow/box-shadow';
+
+@mixin contentContainerSettings() {
+	&__inner-container {
+		grid-area: main;
+		place-self: var(--content-box-vert-align-mobile)
+			var(--content-box-horiz-align-mobile);
+		z-index: var(--content-z-index, 5);
+		overflow: var(--content-box-overflow);
+		min-width: min-content;
+		aspect-ratio: var(--content-box-aspect-ratio);
+		border-radius: var(--border-radius);
+		border-width: var(--border-width);
+		border-color: var(--border-colour);
+		border-style: var(--border-style);
+		display: flex;
+		flex-direction: var(--content-box-items-direction-mobile, column);
+		justify-content: var(--content-items-alignment-mobile);
+		align-items: center;
+		background-color: var(--cb-bg-colour);
+		padding: calc(
+				var(--global-content-box-padding-block) *
+					var(--content-box-top-padding-mult-mobile)
+			)
+			calc(
+				var(--global-content-box-padding-inline) *
+					var(--content-box-right-padding-mult-mobile)
+			)
+			calc(
+				var(--global-content-box-padding-inline) *
+					var(--content-box-bottom-padding-mult-mobile)
+			)
+			calc(
+				var(--global-content-box-padding-inline) *
+					var(--content-box-left-padding-mult-mobile)
+			);
+		margin: calc(
+				var(--global-inline-spacing) *
+					var(--content-container-top-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-container-right-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-container-bottom-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-container-left-margin-mobile)
+			);
+		column-gap: var(
+			--content-items-micro-gap-mobile,
+			calc(var(--content-items-gap-mobile) * var(--global-inline-spacing))
+		);
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			justify-content: var(--content-items-alignment-portrait);
+			place-self: var(--content-box-vert-align-portrait)
+				var(--content-box-horiz-align-portrait);
+			padding: calc(
+					var(--global-content-box-padding-block) *
+						var(--content-box-top-padding-mult-portrait)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-right-padding-mult-portrait)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-bottom-padding-mult-portrait)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-left-padding-mult-portrait)
+				);
+			margin: calc(
+					var(--global-inline-spacing) *
+						var(--content-container-top-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-right-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-bottom-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-left-margin-portrait)
+				);
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			column-gap: var(
+				--content-items-micro-gap-desktop,
+				calc(
+					var(--content-items-gap-desktop) *
+						var(--global-inline-spacing)
+				)
+			);
+			justify-content: var(--content-items-alignment);
+			max-width: var(--cb-max-width);
+			place-self: var(--content-box-vert-align)
+				var(--content-box-horiz-align);
+			padding: calc(
+					var(--global-content-box-padding-block) *
+						var(--content-box-top-padding-mult)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-right-padding-mult)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-bottom-padding-mult)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-left-padding-mult)
+				);
+			margin: calc(
+					var(--global-inline-spacing) *
+						var(--content-container-top-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-right-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-bottom-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-left-margin)
+				);
+		}
+
+		@include box-shadow.boxShadow();
+	}
+	&__content-container {
+		max-width: var(--wysiwyg-max-width-mobile);
+		margin-inline: auto;
+		display: grid;
+		word-break: normal;
+		width: var(--content-container-width, 100%);
+		-webkit-text-stroke: core-functions.fontSize(
+				var(--text-stroke-width),
+				'static'
+			)
+			var(--text-stroke-colour);
+		@include core-mixins.defaultThemeTextColours();
+		@include core-mixins.defaultTextTransform();
+		@include core-mixins.defaultTextAlign();
+		@include core-mixins.responsiveShowHide();
+		p,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		a,
+		li,
+		div {
+			@include core-mixins.defaultFontWeight();
+			@include core-mixins.defaultFontStyle();
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			max-width: var(--wysiwyg-max-width-portrait);
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			max-width: var(--wysiwyg-max-width);
+		}
+	}
+
+	&--text-shadow {
+		@include core-mixins.textShadow();
+	}
+
+	&__cta-selection-container {
+		width: 100%;
+		display: var(--cta-container-display);
+		grid-template-columns: var(--grid-columns-mobile);
+		flex-wrap: wrap;
+		flex-direction: var(--cta-flex-direction);
+		justify-content: var(--cta-alignment-mobile);
+		gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			gap: calc(
+				var(--global-inline-spacing) * var(--cta-spacing-gap-desktop)
+			);
+			justify-content: var(--cta-alignment-portrait);
+			grid-template-columns: var(--grid-columns-portrait);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			justify-content: var(--cta-alignment);
+			grid-template-columns: var(--grid-columns-desktop);
+		}
+	}
+}

package/components/fields-content-container-v3/content-container-v3.js

@@ -0,0 +1,96 @@
+import shop from 'Assets/js/modules/library-modules/shopify/shop';
+
+export default function contentContainerJs(block) {
+	if (!block) {
+		return;
+	}
+
+	const blockClassName = block.dataset.assetkey;
+	const formContainerElement = block.querySelector('.form-container');
+	const modalFormContainerElement = block.querySelector(
+		'.form-container__modal'
+	);
+	const countdownElement = block.querySelector('.countdowndate');
+	const socialMediaElement = block.querySelector('.social-media-share-popup');
+	const accordionV2Element = block.querySelector(
+		`.${blockClassName}__accordion-v2`
+	);
+	const marketSelector = block.querySelector('.market-selector');
+	const shopifySelector = block.querySelector('.shopify__cart');
+	const contentTooltip = block.querySelector('.content-tooltip-wrapper');
+	const spotifyEmbed = block.querySelector('.spotify-embed');
+	const truncatedText = block.querySelector('.truncated-text');
+	// const accordionV3Element = block.querySelector(
+	// 	'.standard-content-v2__accordion-v3'
+	// );
+
+	if (formContainerElement || modalFormContainerElement) {
+		import(
+			'Assets/js/modules/library-modules/form-selection/form-selection.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+
+	if (countdownElement) {
+		import('Assets/js/modules/library-modules/countdown/countdown.js').then(
+			(module) => {
+				module.default(block);
+			}
+		);
+	}
+
+	if (socialMediaElement) {
+		import(
+			'Assets/js/modules/library-modules/social-media-share/social-media-share.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+
+	if (accordionV2Element) {
+		import(
+			'Assets/js/modules/library-modules/accordion-v2/accordion-v2.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+
+	if (marketSelector) {
+		import(
+			'Assets/js/modules/library-modules/market-selector/market-selector.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+	if (shopifySelector) {
+		shop.loadShops();
+	}
+	if (contentTooltip) {
+		import(
+			'Assets/js/modules/library-modules/content-tooltip/content-tooltip.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+	if (spotifyEmbed) {
+		import(
+			'Assets/js/modules/library-modules/spotify-embed/spotify-embed.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+	if (truncatedText) {
+		import(
+			'Assets/js/modules/library-modules/truncated-text/truncated-text.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+
+	// if (accordionV3Element) {
+	// 	import('Assets/js/modules/library-modules/accordion-v3/accordion-v3.js').then((module) => {
+	// 		module.default(block);
+	// 	})
+	// }
+}

package/components/fields-content-container-v3/content-container-v3.scss

@@ -0,0 +1,57 @@
+@use 'Assets/scss/modules/library-modules/content-image-v2/content-image-v2';
+@use 'Assets/scss/modules/library-modules/nav-menu/nav-menu';
+@use 'Assets/scss/modules/library-modules/code-block/code-block';
+@use 'Assets/scss/modules/library-modules/countdown/countdown';
+@use 'Assets/scss/modules/library-modules/bazaarvoice-review/bazaarvoice-review';
+@use 'Assets/scss/modules/library-modules/post-author/post-author';
+@use 'Assets/scss/modules/library-modules/content-tooltip/content-tooltip';
+
+@use 'Assets/scss/modules/library-modules/accent-text/accent-text';
+@use 'Assets/scss/modules/library-modules/content-container-settings/content-container-settings';
+@use 'Assets/scss/modules/library-modules/better-reviews/better-reviews';
+@use 'Assets/scss/modules/library-modules/blockquote/blockquote';
+@use 'Assets/scss/modules/library-modules/social-media-share/social-media-share';
+@use 'Assets/scss/modules/library-modules/accordion-v2/accordion-v2';
+// @use 'Assets/scss/modules/library-modules/accordion-v3/accordion-v3';
+@use 'Assets/scss/modules/library-modules/market-selector/market-selector';
+@use 'Assets/scss/modules/library-modules/truncated-text/truncated-text';
+@use 'Assets/scss/modules/library-modules/spotify-embed/spotify-embed';
+@use 'Assets/scss/theme/buttons';
+
+@mixin contentContainer() {
+	@include nav-menu.navMenu();
+	@include code-block.codeBlock();
+	@include countdown.countdown();
+	@include bazaarvoice-review.bazaarvoice-review();
+	@include post-author.postauthorinfo();
+	@include content-tooltip.content-tooltip();
+	@include spotify-embed.spotify-embed();
+	// @include market-selector.market-selector();
+	@include accent-text.accent-text();
+	@include content-container-settings.contentContainerSettings();
+	@include better-reviews.better-reviews();
+	@include blockquote.blockquote();
+	@include social-media-share.social-media-share();
+	@include accordion-v2.accordion-v2();
+	// @include accordion-v3.accordion-v3();
+	@include buttons.shareIconStyles();
+	@include buttons.playButtonStyles();
+	@include truncated-text.truncated-text();
+
+	&__video-play-button-container {
+		display: grid;
+		width: 100%;
+		pointer-events: all;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+	&__video-play-button {
+		grid-area: unset;
+		place-self: var(--playbutton-vertical-alignment, center)
+			var(--playbutton-horizontal-alignment, center);
+	}
+	&__content-image {
+		@include content-image-v2.contentImage();
+	}
+}

package/components/fields-core-root-variables-v3/core-root-variables-v3.scss

@@ -0,0 +1,45 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/theme/breakpoints';
+
+//Global native CSS variables
+body {
+	//Font weights
+	--weight-thin: 100;
+	--weight-extra-light: 200;
+	--weight-light: 300;
+	--weight-medium: 400;
+	--weight-demi-bold: 500;
+	--weight-demi-bold-plus: 600;
+	--weight-bold: 700;
+	--weight-extra-bold: 800;
+	--weight-extra-bold-plus: 900;
+	--default-text-colour-mobile: var(--theme-primary-text-colour);
+	--default-text-colour-desktop: var(--theme-primary-text-colour);
+	// When you are in the WP preview - the screen width var now now needs to match the width of the WP editor preview box.
+	.wp-toolbar & {
+		--screen-width-mobile: 360px;
+		--font-reference-mobile: 360px;
+		--screen-width: 360px;
+		--font-reference: 360px;
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			--screen-width-portrait: 768px;
+			--screen-width-landscape: 768px;
+			--screen-width-desktop: 768px;
+			--screen-width-static: 768px;
+			--screen-width: 768px;
+			--font-reference: 768px;
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			--screen-width-portrait: 840px;
+			--screen-width-landscape: 840px;
+			--screen-width-desktop: 840px;
+			--screen-width-static: 840px;
+			--screen-width: 840px;
+			--font-reference-portrait: 840px;
+			--font-reference-landscape: 840px;
+			--font-reference-desktop: 840px;
+			--font-reference: 840px;
+		}
+	}
+}

package/components/fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.js

@@ -0,0 +1,121 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+import wppreview from '@pernod-ricard-global-cms/wordpresspreview';
+import colourPalettes from '@pernod-ricard-global-cms/cblcolourpalettes';
+import ctaStyles from 'Assets/js/modules/library-modules/core-editor-cta-style-select/core-editor-cta-style-select.js';
+import themeNames from 'Assets/js/modules/library-modules/core-editor-theme-select/core-editor-theme-select.js';
+import jQuery from 'jquery';
+const $ = jQuery;
+
+function setPageBgColour(colourType) {
+	if (colourType !== 'custom') {
+		document
+			.querySelector('body')
+			.style.setProperty('--page-background-colour', colourType);
+	} else {
+		requestAnimationFrame(() => {
+			const customColour = $(`[data-name=page_background_colour]`).find(
+				'input[type=hidden]'
+			)[0]?.value;
+			document
+				.querySelector('body')
+				.style.setProperty('--page-background-colour', customColour);
+		});
+	}
+}
+$(document).ready(function ($) {
+	let colourTypeSelect = $(`[data-name=page_background_colour_type] select`);
+
+	if (colourTypeSelect.length !== 0) {
+		let colourType = colourTypeSelect
+			.find(':selected')[0]
+			.value.replace('__', '');
+
+		colourTypeSelect.on('select2:select', function (event) {
+			colourType = colourTypeSelect
+				.find(':selected')[0]
+				.value.replace('__', '');
+			setPageBgColour(colourType);
+		});
+
+		setPageBgColour(colourType);
+		// return;
+	}
+
+	const ctaSelectNames = [
+		'cta_style',
+		'load_more_button_style',
+		'category_button_style',
+		'active_category_button_style',
+		'top_level_category_button_style',
+		'show_all_button_style',
+		'toggle_filter_button_style'
+	];
+	const themeSelectNames = ['page_theme'];
+	const colourData = globalThis.colourconfig;
+	colourPalettes(colourData);
+	ctaStyles(ctaSelectNames);
+	themeNames(themeSelectNames);
+	wppreview({lazyloaderFilepath: 'js/blocks/'});
+
+	document.documentElement.insertAdjacentHTML('afterbegin', previewvars[0]);
+	document.documentElement.insertAdjacentHTML(
+		'afterbegin',
+		coretypography[0]
+	);
+	document.documentElement.insertAdjacentHTML(
+		'afterbegin',
+		corefontmodifiers[0]
+	);
+	document.documentElement.insertAdjacentHTML('afterbegin', corethemes[0]);
+	document.documentElement.insertAdjacentHTML('afterbegin', corecta[0]);
+
+	setTimeout(() => {
+		const previewToggle = document.querySelector(
+			'.editor-preview-dropdown__toggle'
+		);
+		previewToggle.addEventListener('click', () => {
+			setTimeout(() => {
+				const resizeButtons = document.querySelectorAll(
+					'.components-menu-item__button'
+				);
+				resizeButtons.forEach((button) => {
+					button.addEventListener('click', () => {
+						setTimeout(() => {
+							let frame = document.querySelector(
+								'.edit-post-visual-editor iframe'
+							);
+							frame.contentWindow.document.documentElement.insertAdjacentHTML(
+								'afterbegin',
+								coretypography[0]
+							);
+							frame.contentWindow.document.documentElement.insertAdjacentHTML(
+								'afterbegin',
+								previewvars[0]
+							);
+							frame.contentWindow.document.documentElement.insertAdjacentHTML(
+								'afterbegin',
+								corefontmodifiers[0]
+							);
+							frame.contentWindow.document.documentElement.insertAdjacentHTML(
+								'afterbegin',
+								corecta[0]
+							);
+							frame.contentWindow.document.documentElement.insertAdjacentHTML(
+								'afterbegin',
+								corethemes[0]
+							);
+							let currentTheme =
+								document.documentElement.getAttribute(
+									'data-currentcolourpalette'
+								);
+							frame.contentWindow.document.documentElement.setAttribute(
+								'data-currentcolourpalette',
+								currentTheme
+							);
+						}, 1000);
+					});
+				});
+			}, 1000);
+		});
+	}, 2000);
+});

package/components/fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.scss

@@ -0,0 +1,92 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-root-variables/core-root-variables';
+@use 'Assets/scss/modules/library-modules/core-css-sizing-vars/core-css-sizing-vars';
+@use 'Assets/scss/modules/library-modules/core-css-modules/core-css-modules';
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+.editor-styles-wrapper {
+}
+.block-editor-block-list__layout .wp-block {
+	@include core-mixins.fontSecondary();
+	border: 1px solid #0000002e;
+	background: var(--theme-primary-background-colour);
+	color: var(--theme-primary-text-colour);
+}
+
+img {
+	width: 100%;
+	height: auto;
+	display: block;
+}
+
+//This is to correct a horrible, horrible bit of Wordpress admin css!! :0
+html :where([style*='border-width'][data-assetkey]) {
+	border-style: initial;
+}
+
+.acf-block-component.acf-block-body .acf-block-preview {
+	@import 'Assets/scss/modules/dynamicBlocksPreview';
+	@import 'Assets/scss/theme/typography';
+
+	.swiper {
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 9;
+		}
+	}
+
+	.swiper-wrapper {
+		height: auto;
+	}
+
+	section {
+		width: 100%;
+		pointer-events: all;
+
+		a {
+			pointer-events: none;
+		}
+	}
+
+	// Theme generic
+	.lazy,
+	.lazy-fade {
+		opacity: 1;
+	}
+	.js-enabled-hide {
+		display: none;
+	}
+
+	.loading-spinner {
+		margin-top: unset;
+		margin-bottom: unset;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		z-index: 99;
+		display: grid;
+		place-items: center;
+		left: 50%;
+		transform: translateX(-50%);
+		opacity: 1;
+		display: none;
+	}
+
+	&.loaded {
+		.loading-spinner {
+			opacity: 0;
+			transition: opacity 0.3s;
+		}
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "1.0.29",
+	"version": "1.0.30",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {