@total_onion/onion-library 1.0.41 → 1.0.43

package/components/block-post-info-v3/group_6866429531436.json

@@ -89,8 +89,6 @@
                 "layout"
             ],
             "acfe_flexible_add_actions": [
-                "title",
-                "toggle",
                 "copy",
                 "close"
             ],
@@ -741,6 +739,26 @@
                     "label": "Post info description",
                     "display": "block",
                     "sub_fields": [
+                        {
+                            "key": "field_687b84fb837e9",
+                            "label": "Grid Layout",
+                            "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_6866429554690",
                             "label": "Grid layout",
@@ -769,6 +787,26 @@
                             "acfe_clone_modal_button": "",
                             "acfe_clone_modal_size": "large"
                         },
+                        {
+                            "key": "field_687b850b837ea",
+                            "label": "Style",
+                            "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_6866429554a69",
                             "label": "Text style",
@@ -785,7 +823,7 @@
                             },
                             "wpml_cf_preferences": 3,
                             "clone": [
-                                "group_6509a986674f1"
+                                "group_687a4e2334e37"
                             ],
                             "display": "seamless",
                             "layout": "block",
@@ -1948,5 +1986,5 @@
     "acfe_display_title": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1752877913
+    "modified": 1752927937
 }

package/components/block-post-info-v3/post-info-v3/post-info-description.twig

@@ -1,9 +1,14 @@
 {% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
-{% set textStyle = include('components/text-style.twig', {field, post}) %}
 {% set elementStyles = gridLayoutElement ~ textStyle %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
 <style>
-	.{{blockClassName}}__post-info-description.{{block.id}} {
-		{{elementStyles}}
-	}
+.{{blockClassName}}__post-info-description.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+	{{textEditorStyleVars}}
+}
 </style>
-<{{field.text_style.text_element_type|ru}} data-pattern-post-info="post_info_description" class="{{blockClassName}}__post-info-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.post_info_description}}</{{field.text_style.text_element_type|ru}}>
+	<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{block.id}}"> <{{elementType}} data-pattern-post-info="post_info_description" class="{{blockClassName}}__post-info-description {{blockClassName}}__info-item {{textEditorElementClasses}} {{block.id}}">
+		{{post.post_info_description}}</{{elementType}}>
+</div>

package/components/block-post-info-v3/post-info-v3/{spacer-v2.twig → spacer-v3.twig}

@@ -1,10 +1,10 @@
 {% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block }, with_context = false) %}
 {% set elementStyles = gridLayoutElement %}
 <style>
-	.{{blockClassName}}__spacer-container.{{block.id}} {
+	.{{blockClassName}}__spacer-container.{{block.id}}{
 		{{elementStyles}}
 	}
 </style>
 <div class="{{blockClassName}}__spacer-container {{blockClassName}}__info-item {{block.id}}">
-	{{ include( 'blocks/spacer-v2.twig', {fields : field, block, blockClassName}, with_context = false) }}
+	{{ include( 'blocks/spacer-v3.twig', {fields : field, block, blockClassName}, with_context = false) }}
 </div>

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

@@ -1,5 +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-mixins-v3/core-mixins-v3';
 @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
 @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/blocks/post-info-v3/post-info-v3-extra';
@@ -9,21 +9,16 @@
 @use 'Assets/scss/modules/library-modules/gradient-overlay/gradient-overlay';
 @use 'Assets/scss/modules/library-modules/social-media-share/social-media-share';
 @use 'Assets/scss/modules/library-modules/better-reviews/better-reviews';
-@use 'Assets/scss/modules/library-modules/truncated-text/truncated-text';
-@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/content-container-settings-v3/content-container-settings-v3';
 
 .post-info-v3 {
 	display: grid;
 	grid-auto-columns: 1fr;
 	grid-template: 'main' / 1fr;
+	@include content-container-settings-v3.contentContainerSettingsV3();
 	@include grid-layout-container.gridLayoutContainer();
 	@include social-media-share.social-media-share();
 	@include better-reviews.better-reviews();
-	@include truncated-text.truncated-text();
-	@include post-author.postauthorinfo();
-	@include content-tooltip.content-tooltip();
-
 	&__post-cover-link {
 		grid-area: unset;
 		position: absolute;
@@ -33,7 +28,6 @@
 		z-index: 99;
 		opacity: 0;
 	}
-
 	&__post-cover-label {
 		position: absolute;
 		width: 1px;
@@ -45,75 +39,64 @@
 		white-space: nowrap;
 		border: 0;
 	}
-
 	&__info-item {
 		@include grid-layout-element.gridLayoutElement();
 		width: 100%;
 		position: relative;
 
 		&:not(.post-info-v3__cta) {
-			@include core-mixins.textStyle();
+			@include core-mixins-v3.textStyle();
 		}
 	}
-
+	&__content-container {
+		width: 100%;
+	}
 	&__cta-selection-container {
 		@include grid-layout-element.gridLayoutElement();
 	}
-
 	&__cta {
 		display: flex;
 	}
-
 	&__cta-style-post-colour,
 	&__cta-style-post-text-colour-style {
 		padding-block: core-functions.fluidSize(10, 'mobile');
 		padding-inline: core-functions.fluidSize(20, 'mobile');
-
-		@include core-mixins.device(breakpoints.$tabPortrait) {
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 			padding-block: core-functions.fluidSize(10, 'portrait');
 			padding-inline: core-functions.fluidSize(20, 'portrait');
 		}
-
-		@include core-mixins.device(breakpoints.$tabLandscape) {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 			padding-block: core-functions.fluidSize(10, 'desktop');
 			padding-inline: core-functions.fluidSize(20, 'desktop');
 		}
 	}
-
 	&__cta-style-post-colour {
 		color: var(--post-colour);
 		border: 1px solid var(--post-colour);
 	}
-
 	&__cta-style-post-text-colour-style {
 		color: var(--post-text-colour-style);
 		border: 1px solid var(--post-text-colour-style);
 	}
-
 	&__post-link,
 	&__better-reviews {
 		max-width: max-content;
 	}
-
 	&__gradient-overlay {
 		height: 100%;
 		@include gradient-overlay.gradientOverlay();
 	}
-
 	&__post-tags {
 		pointer-events: none;
 		display: flex;
 		width: auto;
 		@include grid-layout-element.gridLayoutElement();
 	}
-
 	&__post-image-container {
 		display: grid;
 		grid-template: 'main' / 1fr;
-
 		&--image-accent {
 			position: relative;
-
 			img,
 			svg {
 				margin: unset;
@@ -121,89 +104,78 @@
 			}
 		}
 	}
-
 	&__post__image {
 		display: flex;
 		justify-content: center;
 		margin-inline: auto;
 		grid-area: main;
 		height: auto;
-		aspect-ratio: var(--image-aspect-ratio-mobile,
-				var(--image-aspect-ratio-desktop));
+		aspect-ratio: var(
+			--image-aspect-ratio-mobile,
+			var(--image-aspect-ratio-desktop)
+		);
 		@include grid-layout-element.gridLayoutElement();
 		width: var(--post-image-width-mobile);
 
-		@include core-mixins.device(breakpoints.$tabPortrait) {
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 			aspect-ratio: var(--image-aspect-ratio-portrait);
 		}
-
-		@include core-mixins.device(breakpoints.$tabLandscape) {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 			width: var(--post-image-width-desktop);
 			aspect-ratio: var(--image-aspect-ratio-desktop);
 		}
 	}
-
 	&__post__image {
 		object-fit: var(--image-fit-style);
 		margin: auto;
 	}
-
 	&__global-image {
 		z-index: var(--global-image-zindex);
 		max-width: var(--global-image-max-width);
 		min-height: 100%;
 	}
-
 	&__global-image__picture {
 		width: var(--global-image-width);
 		display: flex;
 		position: var(--global-image-position);
 		inset: 0;
 	}
-
 	&__global-image__image {
 		object-fit: var(--global-image-fit-style);
 	}
-
 	&__product-logo {
-		max-width: core-functions.fluidSize(var(--logo-max-width-mobile),
-				'mobile'
+		max-width: core-functions.fluidSize(
+			var(--logo-max-width-mobile),
+			'mobile'
+		);
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			max-width: core-functions.fluidSize(
+				var(--logo-max-width-desktop),
+				'desktop'
 			);
-
-		@include core-mixins.device(breakpoints.$tabLandscape) {
-			max-width: core-functions.fluidSize(var(--logo-max-width-desktop),
-					'desktop'
-				);
 		}
 	}
-
 	&__person-rating {
 		display: flex;
 		gap: 1em;
 	}
-
 	&__person-rating-star {
 		--rating-star-colour: gold;
 		width: core-functions.fluidSize(20, 'static');
 	}
-
 	&__person-questionaire-list {
 		list-style-type: none;
 	}
-
 	&__person-email {
 		display: flex;
 		gap: 1em;
 	}
-
 	&__person-email-icon {
 		width: 1em;
 	}
-
 	&__post-text-alternative-style {
 		width: auto;
 		@include grid-layout-element.gridLayoutElement();
 	}
-
 	@include post-info-v3-extra.additionalStyles();
-}
+}

package/components/block-post-info-v3/post-info-v3.twig

@@ -26,7 +26,7 @@
 		{% if field.acf_fc_layout == 'cta_selection' or field.acf_fc_layout == 'social_media_share' %}
 			{{include('components/' ~ field.acf_fc_layout|replace({'_': '-'}) ~ '.twig', {fields: field, field, post, block, blockClassName, postType, options, cta_styles, imageSizes}, with_context = false, ignore_missing = true)}}
 		{% else %}
-			{{include('blocks/post-info/' ~ field.acf_fc_layout|replace({'_': '-'}) ~ '.twig', {field, post, block, blockClassName, postType, options, cta_styles, imageSizes}, with_context = false, ignore_missing = true)}}
+			{{include('blocks/post-info-v3/' ~ field.acf_fc_layout|replace({'_': '-'}) ~ '.twig', {field, post, block, blockClassName, postType, options, cta_styles, imageSizes}, with_context = false, ignore_missing = true)}}
 		{% endif %}
 	{% endfor %}
 	{% if fields.enable_post_cover_link %}

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

@@ -1,17 +1,17 @@
 // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
 @use 'Assets/scss/blocks/standard-content-v3/standard-content-v3-extra';
-@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
 @use 'NodeModules/@pernod-ricard-global-cms/cblvideocontroller/vc-styles';
-@use 'Assets/scss/modules/library-modules/content-container/content-container';
+@use 'Assets/scss/modules/library-modules/content-container-v3/content-container-v3';
 
 .standard-content-v3 {
 	display: grid;
 	grid-template: 'main' / 1fr;
 	@include vc-styles.basic();
-	@include core-mixins.responsiveShowHide(grid);
+	@include core-mixins-v3.responsiveShowHide(grid);
 	&__video-container {
 		grid-area: main;
 	}
-	@include content-container.contentContainer();
+	@include content-container-v3.contentContainerV3();
 	@include standard-content-v3-extra.additionalStyles();
 }

package/components/component-accent-text-v3/accent-text-v3-extra.scss

@@ -0,0 +1,6 @@
+// @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/component-accent-text-v3/accent-text-v3.scss

@@ -0,0 +1,61 @@
+@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/accent-text-v3/accent-text-v3-extra';
+
+@mixin accentTextV3() {
+	&__accent-text {
+		display: flex;
+		align-items: center;
+		color: var(--accent-text-colour-mobile);
+		text-align: center;
+		place-self: var(--alignment, center);
+		font-family: var(--secondary-font-family);
+		letter-spacing: 0.8em;
+		text-transform: uppercase;
+
+		gap: core-functions.fluidSize(10);
+		margin-inline: core-functions.fluidSize(5, 'mobile');
+		font-size: core-functions.fontSize(10, 'mobile');
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			font-size: core-functions.fontSize(10, 'portrait');
+			margin-inline: core-functions.fluidSize(5, 'portrait');
+			gap: core-functions.fluidSize(20, 'portrait');
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			color: var(--accent-text-colour);
+			font-size: core-functions.fontSize(10, 'desktop');
+			margin-inline: core-functions.fluidSize(5, 'desktop');
+			gap: core-functions.fluidSize(20, 'desktop');
+		}
+
+		&::before,
+		&::after {
+			content: '';
+			background-color: var(
+				--accent-text-colour-mobile,
+				var(--default-text-colour-mobile)
+			);
+			width: core-functions.fluidSize(20, 'mobile');
+			height: core-functions.fluidSize(2, 'mobile');
+
+			@include core-mixins.device(breakpoints.$tabPortrait) {
+				width: core-functions.fluidSize(40, 'portrait');
+				height: core-functions.fluidSize(2, 'portrait');
+			}
+
+			@include core-mixins.device(breakpoints.$tabLandscape) {
+				background-color: var(
+					--accent-text-colour,
+					var(--default-text-colour-desktop)
+				);
+				width: core-functions.fluidSize(80, 'desktop');
+				height: core-functions.fluidSize(2, 'desktop');
+			}
+		}
+
+		// @include accent-text-v3-extra.additionalStyles();
+	}
+}

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

@@ -0,0 +1,55 @@
+// 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 'Assets/scss/theme/breakpoints';
+
+@mixin blockquoteV3() {
+	&__blockquote {
+		display: flex;
+		flex-direction: column;
+		font-weight: unset;
+		gap: core-functions.fluidSize(20, 'static');
+		&::before {
+			content: unset;
+		}
+		&::after {
+			content: unset;
+		}
+		&-quote-text {
+			font-weight: var(--default-font-weight-mobile);
+			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(
+					var(--text-stroke-width),
+					'static'
+				)
+				var(--text-stroke-colour);
+
+			@include core-mixins.device(breakpoints.$tabLandscape) {
+				font-weight: var(--default-font-weight-desktop);
+				text-transform: var(--default-text-transform-desktop);
+				text-align: var(--default-text-align-desktop);
+				color: var(--default-text-colour-desktop);
+			}
+			&:before {
+				position: absolute;
+				left: -0.6em;
+				font-size: var(--quotes-size);
+			}
+			&:after {
+				content: var(--hide-close-quote);
+				position: absolute;
+				bottom: calc(var(--quotes-size) * -0.04);
+				font-size: var(--quotes-size);
+			}
+		}
+	}
+	footer {
+		align-self: var(--footer-align);
+		color: var(--default-text-colour-mobile);
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			color: var(--default-text-colour-desktop);
+		}
+	}
+}

package/components/component-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-v3/core-mixins-v3';
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/modules/library-modules/box-shadow/box-shadow';
+
+@mixin contentContainerSettingsV3() {
+	&__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-v3.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-v3.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-v3.defaultThemeTextColours();
+		@include core-mixins-v3.defaultTextTransform();
+		@include core-mixins-v3.defaultTextAlign();
+		@include core-mixins-v3.responsiveShowHide();
+		p,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		a,
+		li,
+		div {
+			@include core-mixins-v3.defaultFontWeight();
+			@include core-mixins-v3.defaultFontStyle();
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			max-width: var(--wysiwyg-max-width-portrait);
+		}
+
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			max-width: var(--wysiwyg-max-width);
+		}
+	}
+
+	&--text-shadow {
+		@include core-mixins-v3.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-v3.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-v3.device(breakpoints.$tabLandscape) {
+			justify-content: var(--cta-alignment);
+			grid-template-columns: var(--grid-columns-desktop);
+		}
+	}
+}

package/components/component-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/component-content-container-v3/content-container-v3.scss

@@ -0,0 +1,31 @@
+@use 'Assets/scss/modules/library-modules/content-container-settings-v3/content-container-settings-v3';
+@use 'Assets/scss/modules/library-modules/content-image-v3/content-image-v3';
+@use 'Assets/scss/modules/library-modules/accent-text-v3/accent-text-v3';
+@use 'Assets/scss/modules/library-modules/nav-menu-v3/nav-menu-v3';
+@use 'Assets/scss/modules/library-modules/blockquote-v3/blockquote-v3';
+@use 'Assets/scss/theme/buttons';
+
+@mixin contentContainerV3() {
+	@include content-container-settings-v3.contentContainerSettingsV3();
+	@include nav-menu-v3.navMenuV3();
+	@include blockquote-v3.blockquoteV3();
+	@include accent-text-v3.accentTextV3();
+	@include buttons.shareIconStyles();
+	@include buttons.playButtonStyles();
+	&__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-v3.contentImageV3();
+	}
+}

package/components/component-content-image-v3/content-image-v3.scss

@@ -0,0 +1,33 @@
+@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 contentImageV3() {
+	width: 100%;
+	height: auto;
+	place-self: var(--image-position-horizontal) var(--image-position-vertical);
+	translate: var(--image-position-offset-horizontal)
+		var(--image-position-offset-vertical);
+	rotate: var(--image-rotation);
+	z-index: -1;
+	border-radius: var(--content-image-border-radius);
+	max-width: core-functions.fluidSize(
+		var(--image-max-width-mobile),
+		'mobile'
+	);
+	@include core-mixins.device(breakpoints.$tabPortrait) {
+		max-width: core-functions.fluidSize(
+			var(--image-max-width-portrait),
+			'portrait'
+		);
+	}
+	@include core-mixins.device(breakpoints.$tabLandscape) {
+		max-width: core-functions.fluidSize(
+			var(--image-max-width-desktop),
+			'desktop'
+		);
+	}
+	&__content-image-link {
+		pointer-events: all;
+	}
+}

package/components/component-nav-menu-v3/nav-menu-v3.scss

@@ -0,0 +1,44 @@
+@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 navMenuV3() {
+	&__nav-menu {
+		display: flex;
+		width: 100%;
+		justify-content: var(--alignment-mobile);
+		align-items: var(--alignment-mobile);
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			justify-content: var(--alignment-portrait);
+			align-items: var(--alignment-portrait);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			justify-content: var(--alignment-desktop);
+		}
+	}
+	&__nav-menu-list {
+		list-style: none;
+		width: auto;
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: unset;
+		flex-direction: var(--menu-direction-mobile);
+		align-items: var(--alignment-mobile);
+		gap: calc(var(--global-inline-spacing) * var(--gap-mobile));
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			gap: calc(var(--global-inline-spacing) * var(--gap-portrait));
+			flex-direction: var(--menu-direction-portrait);
+			align-items: var(--alignment-portrait);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			align-items: var(--alignment-desktop);
+			gap: calc(var(--global-inline-spacing) * var(--gap-desktop));
+			flex-direction: var(--menu-direction);
+		}
+	}
+	&__nav-menu-list-item {
+		margin-bottom: unset;
+		line-height: unset;
+		letter-spacing: unset;
+	}
+}

package/components/component-text-editor-settings-container-classes-v3/text-editor-settings-container-classes-v3.twig

@@ -0,0 +1,8 @@
+{% if fields.enable_wysiwyg_decoration %}
+	{% set wysiwygDecorationStyle = blockClassName ~ '__' ~ fields.wysiwyg_decoration_style|ru %}
+{% endif %}
+{% if fields.enable_text_shadow %}
+	{% set textShadowClass = blockClassName ~ "--text-shadow" %}
+{% endif %}
+{% set styleClasses = wysiwygDecorationStyle  ~ ' ' ~ textShadowClass %}
+{{styleClasses}}

package/components/component-text-editor-settings-element-classes-v3/text-editor-settings-element-classes-v3.twig

@@ -0,0 +1,6 @@
+{% set typographicStyle = fields.typographic_style|ru %}
+{% set typographicStyleDesktop = fields.typographic_style_desktop|ru %}
+{% set typographicStylePortrait = fields.typographic_style_portrait|ru %}
+{% set typographicStyleMobile = fields.typographic_style_mobile|ru %}
+{% set styleClasses = typographicStyle  ~ ' ' ~ typographicStyleDesktop  ~ ' ' ~ typographicStylePortrait  ~ ' ' ~ typographicStyleMobile  ~ ' ' ~ textShadowClass %}
+{{styleClasses}}

package/components/component-text-editor-settings-variables-v3/text-editor-settings-variables-v3.twig

@@ -0,0 +1,61 @@
+{% if fields.enable_text_shadow %}
+	{# {% set textShadowClass = blockClassName|default('default-class') ~ "--text-shadow" %} #}
+	{% set textShadowStyle = "--text-shadow-offset-x:" ~ (fields.text_shadow_horizontal_offset|default(0)) ~ "; --text-shadow-offset-y: " ~ (fields.text_shadow_vertical_offset|default(0)) ~ "; --text-shadow-blur: " ~ (fields.text_shadow_blur|default(0)) ~ "; --text-shadow-colour: " ~ (fields.text_shadow_colour|default("#000000")) ~ ";" %}
+{% endif %}
+
+{% if fields.mobile_default_text_transform %}
+	{% set defaultTextTransformMobile = '--default-text-transform-mobile: ' ~  fields.mobile_default_text_transform|ru ~ ';' %}
+{% endif %}
+{% if fields.portrait_default_text_transform %}
+	{% set defaultTextTransformPortrait = '--default-text-transform-portrait: ' ~  fields.portrait_default_text_transform|ru ~ ';' %}
+{% endif %}
+{% if fields.desktop_default_text_transform %}
+	{% set defaultTextTransformDesktop = '--default-text-transform-desktop: ' ~  fields.desktop_default_text_transform|ru ~ ';' %}
+{% endif %}
+{% if fields.mobile_default_text_align %}
+	{% set defaultTextAlignMobile = '--default-text-align-mobile: ' ~  fields.mobile_default_text_align|ru ~ ';' %}
+{% endif %}
+{% if fields.portrait_default_text_align %}
+	{% set defaultTextAlignPortrait = '--default-text-align-portrait: ' ~  fields.portrait_default_text_align|ru ~ ';' %}
+{% endif %}
+{% if fields.desktop_default_text_align %}
+	{% set defaultTextAlignDesktop = '--default-text-align-desktop: ' ~  fields.desktop_default_text_align|ru ~ ';' %}
+{% endif %}
+{% if fields.mobile_default_font_weight %}
+	{% set defaultFontWeightMobile = '--default-font-weight-mobile: ' ~  fields.mobile_default_font_weight|ru ~ ';' %}
+{% endif %}
+{% if fields.portrait_default_font_weight %}
+	{% set defaultFontWeightPortrait = '--default-font-weight-portrait: ' ~  fields.portrait_default_font_weight|ru ~ ';' %}
+{% endif %}
+{% if fields.desktop_default_font_weight %}
+	{% set defaultFontWeightDesktop = '--default-font-weight-desktop: ' ~  fields.desktop_default_font_weight|ru ~ ';' %}
+{% endif %}
+{% set displaytype = 'grid' %}
+{% set responsiveShowHide = include('components/responsive-show-hide.twig', { fields, block, blockClassName, displaytype, is_preview }, with_context = false) %}
+{% if fields.mobile_default_font_style %}
+	{% set defaultFontStyleMobile = '--default-font-style-mobile: ' ~ fields.mobile_default_font_style|ru ~ ';' %}
+{% endif %}
+{% if fields.portrait_default_font_style %}
+	{% set defaultFontStylePortrait = '--default-font-style-portrait: ' ~ fields.portrait_default_font_style|ru ~ ';' %}
+{% endif %}
+{% if fields.desktop_default_font_style %}
+	{% set defaultFontStyleDesktop = '--default-font-style-desktop: ' ~ fields.desktop_default_font_style|ru ~ ';' %}
+{% endif %}
+{% if fields.desktop_default_text_colour %}
+	{% set defaultTextColourDesktop = '--default-text-colour-desktop: ' ~ fields.desktop_default_text_colour|ru ~ ';' %}
+{% endif %}
+{% if fields.portrait_default_text_colour %}
+	{% set defaultTextColourPortrait = '--default-text-colour-portrait: ' ~ fields.portrait_default_text_colour|ru ~ ';' %}
+{% endif %}
+{% if fields.mobile_default_text_colour %}
+	{% set defaultTextColourMobile = '--default-text-colour-mobile: ' ~ fields.mobile_default_text_colour|ru ~ ';' %}
+{% endif %}
+{% if fields.enable_text_outline %}
+	{% set textStrokeWidth = '--text-stroke-width: ' ~ fields.text_outline_width ~ ';' %}
+	{% set textStrokeColour = '--text-stroke-colour: ' ~ fields.text_outline_colour ~ ';' %}
+{% endif %}
+{% set wysiwygMaxWidth = '--wysiwyg-max-width: ' ~ fields.wysiwyg_max_width ~ '%;' %}
+{% set wysiwygMaxWidthPortrait = '--wysiwyg-max-width-portrait: ' ~ fields.wysiwyg_max_width_portrait ~ '%;' %}
+{% set wysiwygMaxWidthMobile = '--wysiwyg-max-width-mobile: ' ~ fields.wysiwyg_max_width_mobile ~ '%;' %}
+{% set styles = textShadowStyle ~ defaultTextColourDesktop ~ defaultTextColourPortrait ~ defaultTextColourMobile ~ textStrokeWidth ~ textStrokeColour ~ wysiwygHorizPaddingMobile ~ wysiwygHorizPaddingDesktop ~ wysiwygMaxWidth ~ wysiwygMaxWidthMobile ~ wysiwygMaxWidthPortrait ~ defaultTextTransformDesktop ~ defaultTextTransformMobile ~ defaultTextTransformPortrait ~ defaultFontWeightMobile ~ defaultFontWeightPortrait ~ defaultFontWeightDesktop ~ defaultFontStyleMobile ~ defaultFontStylePortrait ~ defaultFontStyleDesktop ~ defaultTextAlignMobile ~ defaultTextAlignPortrait ~ defaultTextAlignDesktop ~ responsiveShowHide %}
+{{styles}}

package/components/component-wysiwyg-editor-v3/wysiwyg-editor-v3.twig

@@ -1,81 +1,16 @@
-{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
-{% if fields.enable_text_shadow %}
-	{% set textShadowClass = blockClassName|default('default-class') ~ "--text-shadow" %}
-	{% set textShadowStyle = "--text-shadow-offset-x:" ~ (fields.text_shadow_horizontal_offset|default(0)) ~ "; --text-shadow-offset-y: " ~ (fields.text_shadow_vertical_offset|default(0)) ~ "; --text-shadow-blur: " ~ (fields.text_shadow_blur|default(0)) ~ "; --text-shadow-colour: " ~ (fields.text_shadow_colour|default("#000000")) ~ ";" %}
-{% endif %}
-{% if fields.enable_wysiwyg_decoration %}
-	{% set wysiwygDecorationStyle = fields.wysiwyg_decoration_style|ru %}
-{% endif %}
-{% if fields.mobile_default_text_transform %}
-	{% set defaultTextTransformMobile = '--default-text-transform-mobile: ' ~  fields.mobile_default_text_transform|ru ~ ';' %}
-{% endif %}
-{% if fields.portrait_default_text_transform %}
-	{% set defaultTextTransformPortrait = '--default-text-transform-portrait: ' ~  fields.portrait_default_text_transform|ru ~ ';' %}
-{% endif %}
-{% if fields.desktop_default_text_transform %}
-	{% set defaultTextTransformDesktop = '--default-text-transform-desktop: ' ~  fields.desktop_default_text_transform|ru ~ ';' %}
-{% endif %}
-{% if fields.mobile_default_text_align %}
-	{% set defaultTextAlignMobile = '--default-text-align-mobile: ' ~  fields.mobile_default_text_align|ru ~ ';' %}
-{% endif %}
-{% if fields.portrait_default_text_align %}
-	{% set defaultTextAlignPortrait = '--default-text-align-portrait: ' ~  fields.portrait_default_text_align|ru ~ ';' %}
-{% endif %}
-{% if fields.desktop_default_text_align %}
-	{% set defaultTextAlignDesktop = '--default-text-align-desktop: ' ~  fields.desktop_default_text_align|ru ~ ';' %}
-{% endif %}
-{% if fields.mobile_default_font_weight %}
-	{% set defaultFontWeightMobile = '--default-font-weight-mobile: ' ~  fields.mobile_default_font_weight|ru ~ ';' %}
-{% endif %}
-{% if fields.portrait_default_font_weight %}
-	{% set defaultFontWeightPortrait = '--default-font-weight-portrait: ' ~  fields.portrait_default_font_weight|ru ~ ';' %}
-{% endif %}
-{% if fields.desktop_default_font_weight %}
-	{% set defaultFontWeightDesktop = '--default-font-weight-desktop: ' ~  fields.desktop_default_font_weight|ru ~ ';' %}
-{% endif %}
-{% set displaytype = 'grid' %}
-{% set responsiveShowHide = include('components/responsive-show-hide.twig', { fields, block, blockClassName, displaytype, is_preview }, with_context = false) %}
-{% if fields.mobile_default_font_style %}
-	{% set defaultFontStyleMobile = '--default-font-style-mobile: ' ~ fields.mobile_default_font_style|ru ~ ';' %}
-{% endif %}
-{% if fields.portrait_default_font_style %}
-	{% set defaultFontStylePortrait = '--default-font-style-portrait: ' ~ fields.portrait_default_font_style|ru ~ ';' %}
-{% endif %}
-{% if fields.desktop_default_font_style %}
-	{% set defaultFontStyleDesktop = '--default-font-style-desktop: ' ~ fields.desktop_default_font_style|ru ~ ';' %}
-{% endif %}
-{% if fields.desktop_default_text_colour %}
-	{% set defaultTextColourDesktop = '--default-text-colour-desktop: ' ~ fields.desktop_default_text_colour|ru ~ ';' %}
-{% endif %}
-{% if fields.portrait_default_text_colour %}
-	{% set defaultTextColourPortrait = '--default-text-colour-portrait: ' ~ fields.portrait_default_text_colour|ru ~ ';' %}
-{% endif %}
-{% if fields.mobile_default_text_colour %}
-	{% set defaultTextColourMobile = '--default-text-colour-mobile: ' ~ fields.mobile_default_text_colour|ru ~ ';' %}
-{% endif %}
-{% if fields.enable_text_outline %}
-	{% set textStrokeWidth = '--text-stroke-width: ' ~ fields.text_outline_width ~ ';' %}
-	{% set textStrokeColour = '--text-stroke-colour: ' ~ fields.text_outline_colour ~ ';' %}
-{% endif %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields, block, blockClassName, is_preview }, with_context = false) %}
 {% set elementType = fields.element_type|ru %}
-{% set typographicStyle = fields.typographic_style|ru %}
-{% set typographicStyleDesktop = fields.typographic_style_desktop|ru %}
-{% set typographicStylePortrait = fields.typographic_style_portrait|ru %}
-{% set typographicStyleMobile = fields.typographic_style_mobile|ru %}
-
-{% set wysiwygMaxWidth = '--wysiwyg-max-width: ' ~ fields.wysiwyg_max_width ~ '%;' %}
-{% set wysiwygMaxWidthPortrait = '--wysiwyg-max-width-portrait: ' ~ fields.wysiwyg_max_width_portrait ~ '%;' %}
-{% set wysiwygMaxWidthMobile = '--wysiwyg-max-width-mobile: ' ~ fields.wysiwyg_max_width_mobile ~ '%;' %}
-{% set widgetStyles = textShadowStyle ~ defaultTextColourDesktop ~ defaultTextColourPortrait ~ defaultTextColourMobile ~ textStrokeWidth ~ textStrokeColour ~ wysiwygHorizPaddingMobile ~ wysiwygHorizPaddingDesktop ~ wysiwygMaxWidth ~ wysiwygMaxWidthMobile ~ wysiwygMaxWidthPortrait ~ defaultTextTransformDesktop ~ defaultTextTransformMobile ~ defaultTextTransformPortrait ~ defaultFontWeightMobile ~ defaultFontWeightPortrait ~ defaultFontWeightDesktop ~ defaultFontStyleMobile ~ defaultFontStylePortrait ~ defaultFontStyleDesktop ~ defaultTextAlignMobile ~ defaultTextAlignPortrait ~ defaultTextAlignDesktop ~ responsiveShowHide %}
 <style>
 	.{{blockClassName|default('default-class')}}__content-container.{{block.id}}{
-		{{widgetStyles}}
+		{{textEditorStyleVars}}
 	}
 </style>
 {% if fields.wysiwyg_editor %}
-	<div class="{{blockClassName|default('default-class')}}__content-container {{textShadowClass}} {{blockClassName|default('default-class')}}__{{wysiwygDecorationStyle}} standard-content-box-wysiwyg-editor {{block.id}}">
+	<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} standard-content-box-wysiwyg-editor {{block.id}}">
 		{% if fields.wysiwyg_editor is not empty %}
-			<{{elementType}} class="{{typographicStyle}} {{typographicStyleDesktop}} {{typographicStylePortrait}} {{typographicStyleMobile}}">
+			<{{elementType}} class="{{textEditorElementClasses}}">
 				{{fields.wysiwyg_editor|striptags('<br>, <a>, <em>, <i>, <span>, <strong>')|raw}}
 			</{{elementType}}>
 		{% endif %}

package/package.json

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