@total_onion/onion-library 1.0.216 → 1.0.217

package/components/block-accent-image-v3/accent-image-v3.scss

@@ -1,7 +1,4 @@
-// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins'; 
-// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-// @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/blocks/accent-image-v3/accent-image-v3-extra';
 .accent-image-v3 {
 	@include accent-image-v3-extra.additionalStyles();
-}
+}

package/components/block-accordion-v3/accordion-v3-extra.scss

@@ -1,5 +1,5 @@
-// @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
-// @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
+// @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
+// @use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
 // @use 'Assets/scss/theme/breakpoints';
 @mixin additionalStyles() {
 }

package/components/block-block-interactions-v3/block-interactions-v3.scss

@@ -1,5 +1,5 @@
-@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
-@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
 @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/blocks/block-interactions-v3/block-interactions-v3-extra';
 .block-interactions-v3 {

package/components/block-divider-v3/divider-v3.scss

@@ -1,4 +1,3 @@
-// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
 @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
 @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
 @use 'Assets/scss/theme/breakpoints';

package/components/block-gradient-layer-v3/gradient-layer-v3-extra.scss

@@ -1,5 +1,2 @@
-// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-// @use 'Assets/scss/theme/breakpoints';
 @mixin additionalStyles() {
 }

package/components/block-gradient-layer-v3/gradient-layer-v3.scss

@@ -1,11 +1,8 @@
-// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-// @use 'Assets/scss/theme/breakpoints';
-@use 'Assets/scss/modules/library-modules/gradient-overlay/gradient-overlay';
+@use 'Assets/scss/modules/library-modules/gradient-overlay-v3/gradient-overlay-v3';
 @use 'Assets/scss/blocks/gradient-layer-v3/gradient-layer-v3-extra';
 .gradient-layer-v3 {
 	display: grid;
 	grid-template: 'main' / 1fr;
-	@include gradient-overlay.gradientOverlay();
+	@include gradient-overlay-v3.gradientOverlay();
 	@include gradient-layer-v3-extra.additionalStyles();
 }

package/components/block-lottie-content-v3/lottie-content-v3-extra.scss

@@ -1,5 +1,2 @@
-// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-// @use 'Assets/scss/theme/breakpoints';
 @mixin additionalStyles() {
 }

package/components/block-lottie-content-v3/lottie-content-v3.scss

@@ -1,7 +1,4 @@
-// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins'; 
-// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-// @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/blocks/lottie-content-v3/lottie-content-v3-extra';
 .lottie-content-v3 {
 	@include lottie-content-v3-extra.additionalStyles();
-}
+}

package/components/block-market-selector-v3/market-selector-v3-extra.scss

@@ -1,5 +1,2 @@
-// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-// @use 'Assets/scss/theme/breakpoints';
 @mixin additionalStyles() {
 }

package/components/block-market-selector-v3/market-selector-v3.js

@@ -1,26 +1,6 @@
 export default function marketselectorv3Js(options = {}) {
 	try {
 		const {block} = options;
-		const marketSelectorPopupBtn = block.querySelector('.pop-up');
-		const marketSelectorInlineBtn = block.querySelector('.inline');
-		const marketSelectorModal = block.querySelector(
-			'.market-selector-v3__modal-overlay'
-		);
-		const marketSelectorModalClose = block.querySelector(
-			'.market-selector-v3__modal-close-button'
-		);
-		if (marketSelectorPopupBtn) {
-			marketSelectorPopupBtn.addEventListener('click', (e) => {
-				marketSelectorModal.style.display = 'flex';
-				document.documentElement.classList.add('lock-position');
-			});
-		}
-		if (marketSelectorModalClose) {
-			marketSelectorModalClose.addEventListener('click', (e) => {
-				marketSelectorModal.style.display = 'none';
-				document.documentElement.classList.remove('lock-position');
-			});
-		}
 	} catch (error) {
 		console.error(error);
 	}

package/components/block-market-selector-v3/market-selector-v3.scss

@@ -1,78 +1,58 @@
-@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
 @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/blocks/market-selector-v3/market-selector-v3-extra';
 .market-selector-v3 {
-	@include market-selector-v3-extra.additionalStyles();
 	pointer-events: all;
-	&__modal-overlay {
-		display: none;
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100vh;
-		background: rgba(0, 0, 0, 0.6);
-		justify-content: center;
-		align-items: center;
-		z-index: 1000;
+	display: grid;
+	background: #f6f6f0;
+	width: 100%;
+	height: 100%;
+	max-width: core-functions-v3.fluidSize(345);
+	max-height: core-functions-v3.fluidSize(500);
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		max-width: core-functions-v3.fluidSize(725);
+		max-height: core-functions-v3.fluidSize(528);
 	}
-	&__modal {
-		display: grid;
-		background: #f6f6f0;
-		width: 75%;
-		height: 75%;
-		grid-template:
-			'header'
-			'markets'
-			'markets'
-			'logo' / 1fr;
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		max-width: core-functions-v3.fluidSize(1102);
+		max-height: core-functions-v3.fluidSize(528);
 	}
+	grid-template:
+		'header'
+		'markets'
+		'markets'
+		'logo' / 1fr;
+
 	&__modal-header-container {
 		grid-area: header;
 		display: grid;
 		grid-auto-flow: column;
 		align-items: center;
 		height: min-content;
-		padding: core-functions.fluidSize(15, 'mobile')
-			core-functions.fluidSize(20, 'mobile');
-		@include core-mixins.device(breakpoints.$tabPortrait) {
-			padding: core-functions.fluidSize(30, 'portrait');
+		padding: core-functions-v3.fluidSize(15, 'mobile')
+			core-functions-v3.fluidSize(20, 'mobile');
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			padding: core-functions-v3.fluidSize(30, 'portrait');
 		}
-		@include core-mixins.device(breakpoints.$tabLandscape) {
-			padding: core-functions.fluidSize(30, 'desktop');
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			padding: core-functions-v3.fluidSize(30, 'desktop');
 		}
-		border-bottom: solid 2px #00968f;
+		border-bottom: solid 1px #00968f;
 	}
 	&__modal-heading {
 		color: #00968f;
 		font-weight: 700;
 		text-transform: uppercase;
-		font-size: core-functions.fluidSize(20, 'mobile');
-		line-height: core-functions.fluidSize(20, 'mobile');
-		@include core-mixins.device(breakpoints.$tabPortrait) {
-			font-size: core-functions.fluidSize(20, 'portrait');
-			line-height: core-functions.fluidSize(20, 'portrait');
-		}
-		@include core-mixins.device(breakpoints.$tabLandscape) {
-			font-size: core-functions.fluidSize(24, 'desktop');
-			line-height: core-functions.fluidSize(24, 'desktop');
+		font-size: core-functions-v3.fluidSize(20, 'mobile');
+		line-height: core-functions-v3.fluidSize(20, 'mobile');
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			font-size: core-functions-v3.fluidSize(20, 'portrait');
+			line-height: core-functions-v3.fluidSize(20, 'portrait');
 		}
-	}
-	.market-selector-v3__modal-close-button {
-		justify-self: flex-end;
-		background-image: url('Assets/images/icon/close-modal-teal.svg');
-		background-size: cover;
-		background-color: transparent;
-		cursor: pointer;
-		width: 40px;
-		height: 40px;
-		border: unset;
-		padding: unset;
-		transition: transform 0.2s;
-
-		&:hover {
-			transform: scale(1.1);
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			font-size: core-functions-v3.fluidSize(24, 'desktop');
+			line-height: core-functions-v3.fluidSize(24, 'desktop');
 		}
 	}
 	&__modal-markets-container {
@@ -80,9 +60,17 @@
 		display: grid;
 		grid-template-columns: repeat(2, 1fr);
 		grid-auto-rows: auto;
-		place-items: center;
 		text-transform: uppercase;
-		@include core-mixins.device(breakpoints.$tabLandscape) {
+		place-items: flex-start;
+		gap: core-functions-v3.fluidSize(10);
+		padding: 0px core-functions-v3.fluidSize(15);
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			padding: 0px core-functions-v3.fluidSize(35);
+			gap: core-functions-v3.fluidSize(10);
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			padding: 0px core-functions-v3.fluidSize(100);
+			gap: core-functions-v3.fluidSize(20);
 			grid-auto-flow: column;
 			grid-template-columns: repeat(3, 1fr);
 			grid-template-rows: repeat(4, 1fr);
@@ -93,17 +81,18 @@
 		text-decoration: none;
 		color: #2d2926;
 		font-weight: 400;
-		line-height: core-functions.fluidSize(20, 'mobile');
-		font-size: core-functions.fluidSize(12, 'mobile');
+		line-height: core-functions-v3.fluidSize(20, 'mobile');
+		font-size: core-functions-v3.fluidSize(12, 'mobile');
 		border-bottom: 2px solid transparent;
+		padding-bottom: core-functions-v3.fluidSize(2, 'static');
 		transition: border 0.3s ease-out;
-		@include core-mixins.device(breakpoints.$tabPortrait) {
-			font-size: core-functions.fluidSize(16, 'portrait');
-			line-height: core-functions.fluidSize(16, 'portrait');
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			font-size: core-functions-v3.fluidSize(16, 'portrait');
+			line-height: core-functions-v3.fluidSize(16, 'portrait');
 		}
-		@include core-mixins.device(breakpoints.$tabLandscape) {
-			font-size: core-functions.fluidSize(20, 'desktop');
-			line-height: core-functions.fluidSize(16, 'desktop');
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			font-size: core-functions-v3.fluidSize(20, 'desktop');
+			line-height: core-functions-v3.fluidSize(16, 'desktop');
 		}
 
 		&:hover {
@@ -125,4 +114,8 @@
 			width: auto;
 		}
 	}
+	&__icon {
+		display: flex;
+	}
+	@include market-selector-v3-extra.additionalStyles();
 }

package/components/block-market-selector-v3/market-selector-v3.twig

@@ -17,36 +17,23 @@
 	}
 </style>
 
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
-	<a class="{{blockClassName}}__cta {{selectorType}}">
-		{% set iconType = options.theme_cta_icons.cta_market_selector_icon %}
-		{% set iconImage = get_image(iconType) %}
-		{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
-		<span class="{{blockClassName}}__icon">
-			{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
-		</span>
-	</a>
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-loadjs="false" data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 
-	<div class="{{blockClassName}}__modal-overlay">
-		<div class="{{blockClassName}}__modal">
-			<div class="{{blockClassName}}__modal-header-container">
-				<h5 class="{{blockClassName}}__modal-heading">{{fields.heading_text}}</h5>
-				<button class="{{blockClassName}}__modal-close-button"></button>
-			</div>
-			<div class="{{blockClassName}}__modal-markets-container">
-				{% for language in languages %}
-					<a class="{{blockClassName}}__market-link {{language['active'] ? "market-selector-v3__market-link--active" : ""}}" href=" {{ language[ 'url' ] }} " data-lang=" {{ language[ 'language_code' ] }} " aria-label=" view this page on the {{language[ 'native_name' ]}} market">{{ language[ 'native_name' ] }}</a>
-				{% endfor %}
-			</div>
-			<div class="{{blockClassName}}__modal-logo-container">
-				{% set logo = fields.logo %}
-				{% set logoImage = get_image(logo) %}
-				{% set isSVG = logoImage.post_mime_type == 'image/svg+xml' %}
-				<span class="{{blockClassName}}__modal-logo">
-					{{ isSVG ? get_raw_svg(logoImage.id) : '<img class="" src="' ~ logoImage.src ~ '">'}}
-				</span>
-			</div>
-		</div>
+	<div class="{{blockClassName}}__modal-header-container">
+		<h5 class="{{blockClassName}}__modal-heading">{{fields.heading_text}}</h5>
+	</div>
+	<div class="{{blockClassName}}__modal-markets-container">
+		{% for language in languages %}
+			<a class="{{blockClassName}}__market-link {{language['active'] ? "market-selector-v3__market-link--active" : ""}}" href=" {{ language[ 'url' ] }} " data-lang=" {{ language[ 'language_code' ] }} " aria-label=" view this page on the {{language[ 'native_name' ]}} market">{{ language[ 'native_name' ] }}</a>
+		{% endfor %}
+	</div>
+	<div class="{{blockClassName}}__modal-logo-container">
+		{% set logo = fields.logo %}
+		{% set logoImage = get_image(logo) %}
+		{% set isSVG = logoImage.post_mime_type == 'image/svg+xml' %}
+		<span class="{{blockClassName}}__modal-logo">
+			{{ isSVG ? get_raw_svg(logoImage.id) : '<img class="" src="' ~ logoImage.src ~ '">'}}
+		</span>
 	</div>
 
 	{{htmlEntryPoint}}

package/components/block-product-info-v3/product-info-v3-extra.scss

@@ -1,8 +1,3 @@
-// @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/grid-layout-element/grid-layout-element';
-// @use 'Assets/scss/theme/breakpoints';
-
 @mixin additionalStyles {
 	&:has(.post-info__post-cover-link.post-cover-link-hover-effect) {
 		&:hover {

package/components/block-product-info-v3/product-info-v3.scss

@@ -1,12 +1,12 @@
 @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
 @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
-@use 'Assets/scss/theme/breakpoints';
-@use 'Assets/scss/blocks/product-info-v3/product-info-v3-extra';
 @use 'NodeModules/@total_onion/onion-library/components/component-grid-layout-container-v3/grid-layout-container-v3';
 @use 'NodeModules/@total_onion/onion-library/components/component-grid-layout-element-v3/grid-layout-element-v3';
 @use 'NodeModules/@total_onion/onion-library/components/component-element-positioning-v3/element-positioning-v3';
-@use 'Assets/scss/modules/library-modules/gradient-overlay/gradient-overlay';
 @use 'NodeModules/@total_onion/onion-library/components/component-content-container-settings-v3/content-container-settings-v3';
+@use 'NodeModules/@total_onion/onion-library/components/component-gradient-overlay-v3/gradient-overlay-v3';
+@use 'Assets/scss/theme/breakpoints';
+@use 'Assets/scss/blocks/product-info-v3/product-info-v3-extra';
 
 .product-info-v3 {
 	display: grid;
@@ -75,7 +75,7 @@
 	}
 	&__gradient-overlay {
 		height: 100%;
-		@include gradient-overlay.gradientOverlay();
+		@include gradient-overlay-v3.gradientOverlay();
 	}
 	&__post-tags {
 		pointer-events: none;

package/components/block-single-responsive-image-v3/single-responsive-image-v3.scss

@@ -1,7 +1,7 @@
-@use 'Assets/scss/modules/library-modules/responsive-image/responsive-image';
+@use 'NodeModules/@total_onion/onion-library/components/component-responsive-image-v3/responsive-image-v3';
 @use 'Assets/scss/blocks/single-responsive-image-v3/single-responsive-image-v3-extra';
 
 .single-responsive-image-v3 {
-	@include responsive-image.responsiveImage();
+	@include responsive-image-v3.responsiveImage();
 }
 @include single-responsive-image-v3-extra.additionalStyles();

package/components/block-spacer-v3/spacer-v3.scss

@@ -1,4 +1,3 @@
-// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
 @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
 @use 'Assets/scss/theme/breakpoints';
 

package/components/block-standard-content-v3/standard-content-v3.scss

@@ -1,6 +1,6 @@
-@use 'Assets/scss/blocks/standard-content-v3/standard-content-v3-extra';
 @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
-@use 'Assets/scss/modules/library-modules/content-container-v3/content-container-v3';
+@use 'NodeModules/@total_onion/onion-library/components/component-content-container-v3/content-container-v3';
+@use 'Assets/scss/blocks/standard-content-v3/standard-content-v3-extra';
 
 .standard-content-v3 {
 	display: grid;

package/components/block-sub-group-container-v3/sub-group-container-v3.scss

@@ -1,7 +1,7 @@
 @use 'NodeModules/@total_onion/onion-library/components/component-grid-layout-element-v3/grid-layout-element-v3';
 @use 'NodeModules/@total_onion/onion-library/components/component-grid-layout-container-v3/grid-layout-container-v3';
 @use 'NodeModules/@total_onion/onion-library/components/component-flex-layout-container-v3/flex-layout-container-v3';
-@use 'Assets/scss/modules/library-modules/animations-v3/animations-v3';
+@use 'NodeModules/@total_onion/onion-library/components/component-animations-v3/animations-v3';
 @use 'Assets/scss/blocks/sub-group-container-v3/sub-group-container-v3-extra';
 .sub-group-container-v3 {
 	display: grid;

package/components/component-block-padding-v3/block-padding-v3.scss

@@ -0,0 +1,62 @@
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
+@use 'Assets/scss/theme/breakpoints';
+
+@mixin blockPadding() {
+	.cmpl-block-padding {
+		padding: calc(
+				var(--global-inline-spacing) *
+					var(--padding-block-multiplier-mobile-top)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--padding-inline-multiplier-mobile-right)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--padding-block-multiplier-mobile-bottom)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--padding-inline-multiplier-mobile-left)
+			);
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			padding: calc(
+					var(--global-inline-spacing) *
+						var(--padding-block-multiplier-portrait-top)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-inline-multiplier-portrait-right)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-block-multiplier-portrait-bottom)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-inline-multiplier-portrait-left)
+				);
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			padding: calc(
+					var(--global-inline-spacing) *
+						var(--padding-block-multiplier-desktop-top)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-inline-multiplier-desktop-right)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-block-multiplier-desktop-bottom)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-inline-multiplier-desktop-left)
+				);
+		}
+	}
+}

package/components/component-blockquote-v3/blockquote-v3.scss

@@ -1,6 +1,5 @@
-// 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-functions/core-functions';
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
 @use 'Assets/scss/theme/breakpoints';
 
 @mixin blockquoteV3() {
@@ -8,7 +7,7 @@
 		display: flex;
 		flex-direction: column;
 		font-weight: unset;
-		gap: core-functions.fluidSize(20, 'static');
+		gap: core-functions-v3.fluidSize(20, 'static');
 		&::before {
 			content: unset;
 		}
@@ -20,13 +19,13 @@
 			text-transform: var(--default-text-transform-mobile);
 			text-align: var(--default-text-align-mobile);
 			color: var(--default-text-colour-mobile);
-			-webkit-text-stroke: core-functions.fontSize(
+			-webkit-text-stroke: core-functions-v3.fontSize(
 					var(--text-stroke-width),
 					'static'
 				)
 				var(--text-stroke-colour);
 
-			@include core-mixins.device(breakpoints.$tabLandscape) {
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 				font-weight: var(--default-font-weight-desktop);
 				text-transform: var(--default-text-transform-desktop);
 				text-align: var(--default-text-align-desktop);
@@ -48,7 +47,7 @@
 	footer {
 		align-self: var(--footer-align);
 		color: var(--default-text-colour-mobile);
-		@include core-mixins.device(breakpoints.$tabLandscape) {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 			color: var(--default-text-colour-desktop);
 		}
 	}

package/components/component-box-shadow-v3/box-shadow-v3.scss

@@ -0,0 +1,12 @@
+@use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
+
+@mixin boxShadow() {
+	box-shadow: core-functions-v3.fluidSize(
+			var(--box-shadow-offset-x),
+			'static'
+		)
+		core-functions-v3.fluidSize(var(--box-shadow-offset-y), 'static')
+		core-functions-v3.fluidSize(var(--box-shadow-blur), 'static')
+		core-functions-v3.fluidSize(var(--box-shadow-spread), 'static')
+		var(--box-shadow-colour);
+}

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

@@ -1,7 +1,7 @@
-@use 'Assets/scss/theme/breakpoints';
 @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
 @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
 @use 'Assets/scss/modules/library-modules/box-shadow/box-shadow';
+@use 'Assets/scss/theme/breakpoints';
 
 @mixin contentContainerSettingsV3() {
 	&__inner-container {

package/package.json

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