@cooperco/cooper-component-library 0.0.10 → 0.1.1

package/src/config/defaultPassthrough.ts

@@ -0,0 +1,261 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { twMerge } from 'tailwind-merge'
+import { ComponentPassthrough } from '../types'
+import { ContainerModulePassthrough } from '../components/ContainerModule/ContainerModule'
+import { AccordionItemPassthrough } from '../components/Accordion/AccordionItem'
+import { AccordionPassthrough } from '../components/Accordion/Accordion'
+import { CarouselPassthrough } from '../components/CarouselModule/CarouselModule'
+import { ContentModulePassthrough } from '../components/ContentModule/ContentModule'
+import { TestimonialModulePassthrough } from '../components/TestimonialModule/TestimonialModule'
+import { TileContentPassthrough } from '../components/TileContent/TileContent'
+import { CTAPassthrough } from '../components/CTA/CTA'
+
+export const DEFAULT_PASSTHROUGH: ComponentPassthrough = {
+	headline:
+		'mb-12 text-4xl md:text-5xl font-bold leading-tight text-center text-primary',
+	subheadline: 'mb-2',
+	content: '',
+	description: '',
+	start: '',
+	center: '',
+	end: '',
+	container: 'max-w-[1024px] mx-auto',
+}
+
+interface GenericComponentPassthrough
+	extends ComponentPassthrough,
+		AccordionPassthrough,
+		AccordionItemPassthrough,
+		CarouselPassthrough,
+		ContainerModulePassthrough,
+		ContentModulePassthrough,
+		CTAPassthrough,
+		TestimonialModulePassthrough,
+		TileContentPassthrough {}
+
+/**
+ * TODO: Need to define the types for the passthroughs.
+ * REMOVE eslint-disable once types are defined
+ */
+export const combinePassthroughs = <
+	PtType extends GenericComponentPassthrough,
+	OverrideType extends GenericComponentPassthrough,
+>(
+	passthrough: PtType,
+	overrides: OverrideType
+) => {
+	const built: GenericComponentPassthrough = {}
+
+	// First combine the core passthroughs
+	for (const key in passthrough) {
+		;(built as any)[key] = twMerge(
+			(passthrough as any)[key] ?? '',
+			(overrides as any)[key] ?? ''
+		)
+	}
+
+	// Combine any overrides
+	for (const key in overrides) {
+		;(built as any)[key] = twMerge(
+			(built as any)[key] ?? '',
+			(overrides as any)[key] ?? ''
+		)
+	}
+
+	return built
+}
+
+export interface AccordionPtVariants {
+	List: AccordionPassthrough
+	Tile: AccordionPassthrough
+}
+
+export const AccordionPt: AccordionPtVariants = {
+	List: combinePassthroughs(DEFAULT_PASSTHROUGH, {
+		container: 'flex flex-col',
+	}),
+	Tile: combinePassthroughs(DEFAULT_PASSTHROUGH, {
+		container: 'flex flex-wrap gap-4 items-stretch relative',
+		// we should make the "has-.." class programmatic, so it goes off the height of the opened item.
+		root: 'mb-0 relative transition-all duration-200 has-[.active]:mb-[550px]',
+	}),
+}
+
+export const AccordionItemPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	headline: 'text-lg md:text-lg mb-0 *:text-left',
+	image: 'w-14 mr-4',
+})
+
+export const AccordionListItemPt = combinePassthroughs(AccordionItemPt, {
+	root: 'border-b first:border-t first:border-t-black border-b-black',
+	headline:
+		'text-primary-950 text-xl md:text-xl py-6 pr-2 *:text-left font-bold ',
+	icon: 'text-primary-950',
+	content: 'pb-6',
+})
+
+export const AccordionTileItemPt = combinePassthroughs(AccordionItemPt, {
+	root: ' w-full md:w-[23%]',
+	headline:
+		'transition-height mb-0 h-[90%] duration-200 py-16 md:text-3xl text-3xl text-center relative rounded-2xl text-white h-[90%] bg-primary group-[.active]:rounded-t-2lg group-[.active]:rounded-b-none group-[.active]:h-full flex items-center justify-center',
+	button:
+		'h-full w-fit text-center *:text-center justify-center md:*:[word-spacing:100px]', // word-spacing so that text wraps when not in mobile
+	icon: 'absolute top-4 right-6',
+	content:
+		'group-[.first]:rounded-tl-none group-[.last]:rounded-tr-none transition-opacity duration-200 opacity-0 left-0 absolute w-full p-12 text-white rounded-2xl bg-primary group-[.active]:opacity-100',
+})
+
+export const CarouselModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const CarouselModuleAltPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const ContainerCollectionModulePt = combinePassthroughs(
+	DEFAULT_PASSTHROUGH,
+	{
+		root: 'px-8 md:px-0',
+		content: 'max-w-[1024px]',
+	}
+)
+
+export interface ContainerModulePtVariants {
+	Hero: ContainerModulePassthrough
+	Centered: ContainerModulePassthrough
+}
+
+export const ContainerModulePt: ContainerModulePtVariants = {
+	Centered: combinePassthroughs(DEFAULT_PASSTHROUGH, {
+		root: 'px-8 md:px-0',
+		inner: 'h-full mx-auto max-w-[1024px]',
+		fullWidthContent: 'max-w-full w-full',
+	}),
+	Hero: combinePassthroughs(DEFAULT_PASSTHROUGH, {
+		root: 'md:h-[500px] mb-12',
+		inner: 'md:flex md:items-center h-full py-16 px-4 md:px-16 mb-8',
+		headline:
+			'md:text-left text-primary-950 text-[8.75vmin] md:text-6xl text-center',
+	}),
+}
+
+export const ContentModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	root: 'p-5',
+	headline: 'mb-4 text-4xl md:text-4xl',
+	description: '',
+	ctas: 'mt-4',
+	cta: '',
+})
+
+export interface CTAPtVariants {
+	fill: CTAPassthrough
+	logo: CTAPassthrough
+	link: CTAPassthrough
+	outline: CTAPassthrough
+}
+
+export const CTAPt: CTAPtVariants = {
+	link: {
+		logo: 'p-2 bg-[#18a589] rounded-full',
+	},
+	logo: {
+		logo: 'p-2 bg-[#18a589] rounded-full',
+	},
+	fill: {},
+	outline: {},
+}
+
+export const FooterNavigationPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const ImagePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const LogoCollectionModulePt = combinePassthroughs(
+	DEFAULT_PASSTHROUGH,
+	{}
+)
+
+export const NavigationElementPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	icon: 'ps-2 text-xs',
+})
+
+export const PrimaryNavigationPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const SplitModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	root: 'px-8 md:px-0',
+	content:
+		'max-w-[1024px] flex justify-evenly gap-4 mx-auto flex-col md:flex-row',
+})
+
+export const TestimonialModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	headline: 'text-primary-950',
+	quote: 'text-primary-950 text-lg font-bold',
+	text: 'space-y-4 w-full md:w-1/2',
+	author: 'text-lg text-gray-600',
+	details: 'text-lg text-gray-600',
+	media: 'md:w-1/2 w-full',
+})
+
+export interface TileCollectionPtVariants {
+	IconTile: ComponentPassthrough
+	ImageTile: ComponentPassthrough
+	VideoTile: ComponentPassthrough
+	TextTile: ComponentPassthrough
+	ImageStackedAnimatedTile: ComponentPassthrough
+}
+
+export const TileCollectionModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	root: 'px-8 md:px-0',
+})
+
+export const TileContentPt = {
+	root: 'w-full md:w-[48%] lg:w-[30%] relative flex-auto rounded overflow-visible mx-auto shadow-none flex-none !m-0',
+	label:
+		'bg-[#18a589] w-[120px] p-2 rounded-[50%] rounded-lg text-2xl text-white flex items-center justify-center leading-none font-bold absolute right-[-4%] top-8',
+	numericLabel:
+		'absolute rounded-full bg-primary w-[25%] h-[25%] left-4 top-8 md:left-0 md:top-2 text-4xl text-white font-bold flex items-center justify-center',
+	headline: 'mb-4 text-4xl md:text-3xl text-center text-primary-950 font-bold',
+	// media: 'h-auto w-full mx-auto mb-8 flex items-center justify-center',
+	cta: 'text-xl *:font-bold mx-auto text-center font-bold',
+	ctas: 'flex gap-2',
+	container: 'h-full',
+	description: 'leading-normal text-lg',
+	body: 'h-full flex flex-col justify-between',
+	footer: 'font-bold text-center mt-4 space-y-2',
+	footerContent: 'font-bold text-center',
+}
+
+export const TileContentIconTilePt = combinePassthroughs(TileContentPt, {
+	root: 'bg-white rounded-2xl p-8',
+	ctas: 'text-center',
+	media: 'mb-6 mx-auto',
+	numericLabel:
+		'bg-[#18a589] w-[50px] p-2 rounded-[50%] h-[40px] rounded-lg text-3xl md:text-3xl text-white flex items-center justify-center leading-none font-bold absolute left-[-4%] md:left-[-4%] top-8 md:top-8',
+})
+
+export const TileContentImageStackedAnimatedTilePt = combinePassthroughs(
+	TileContentPt,
+	{
+		root: '!w-full',
+		inner: 'justify-center',
+		label:
+			'rounded-full flex items-center justify-center font-bold absolute text-white bg-primary z-20 w-auto w-20 h-20 text-4xl rounded-full font-bold',
+		media: 'flex-[1_0_26%] md:flex-[1_0_20%]',
+		headline: 'font-bold text-left max-w-[400px]',
+		subheadline:
+			'text-[4.5vmin] md:text-3xl font-bold text-white max-w-[400px]',
+		description: 'text-lg max-w-[400px]',
+	}
+)
+export const TileContentImageTilePt = combinePassthroughs(TileContentPt, {
+	media: 'relative mb-4 md:w-3/4 mx-auto',
+})
+export const TileContentTextTilePt = combinePassthroughs(TileContentPt, {
+	ctas: 'flex-col gap-4',
+	description: 'text-center',
+})
+export const TileContentVideoTilePt = combinePassthroughs(TileContentPt, {
+	root: 'bg-white p-8 rounded-xl',
+	headline: 'text-3xl md:text-3xl mb-2 text-primary font-bold',
+	subheadline: 'text-base md:text-base text-primary-950 text-center',
+	media: 'mb-4 mt-6',
+	description: 'text-left',
+})
+
+export const VideoPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})

package/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/Accordion.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-// Can potentially merge this and Testimonial
-import { type Accordion } from './types/Accordion'
-import AccordionItem from './AccordionItem.vue'
-
-defineProps<Accordion>()
-</script>
-
-<template>
-	<component :is="isChild ? 'div' : 'section'" class="accordion-module">
-		<h3
-			v-if="headline"
-			:class="`accordion-module-headline ${pt?.headline ?? ''}`"
-		>
-			{{ headline }}
-		</h3>
-		<div
-			v-if="modules"
-			:class="`accordion-module-container container ${type === 'List' ? 'flex-col' : ''} flex ${pt?.container ?? ''}`"
-		>
-			<template v-for="(item, index) in modules">
-				<AccordionItem
-					:itemNumber="index"
-					:isFirst="index === 0"
-					:isLast="index === modules.length - 1"
-					v-bind="item"
-				/>
-			</template>
-		</div>
-	</component>
-</template>
-
-<style></style>

package/src/components/CTA.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { CTA } from './types/CTA'
-import { CTAOptions } from '../types'
-import Button from 'primevue/button'
-import { computed } from 'vue'
-
-const props = defineProps<CTA>()
-
-const buttonTypeValue = computed(() => {
-	return CTAOptions[props?.buttonType]
-})
-
-const fullClassname = computed(() => `cta ${props.class ?? ''}`)
-
-const computedStyle = computed(() => {
-	return {
-		color: props.textColor,
-		'background-color':
-			buttonTypeValue.value == CTAOptions.fill ? props.color : 'transparent',
-		'border-color':
-			buttonTypeValue.value != CTAOptions.link ? props.color : 'transparent',
-	}
-})
-
-// Update to support url vs page
-const url = computed(() => {
-	return props?.url?.link
-})
-</script>
-
-<template>
-	<Button
-		:class="fullClassname"
-		:label="title"
-		:style="computedStyle"
-		:aria-label="ariaLabel"
-		:link="buttonTypeValue == CTAOptions.link"
-	/>
-</template>

package/src/components/ContentAndImage.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-// Can potentially merge this and Testimonial
-import { type ContentAndImage } from './types/ContentAndImage'
-import { computed } from 'vue'
-import ContentModule from './ContentModule.vue'
-
-const props = defineProps<ContentAndImage>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<component
-		:is="isChild ? 'div' : 'section'"
-		:style="computedStyle"
-		class="content-and-image"
-	>
-		<div
-			class="content-and-image-inner container flex flex-col lg:flex-row content-between justify-between mx-auto"
-			:class="{ 'text-center': fullWidthContent }"
-		>
-			<div v-if="content" class="content">
-				<ContentModule :="content" />
-			</div>
-
-			<img v-if="image" class="image" :="image" />
-		</div>
-	</component>
-</template>

package/src/components/ContentMediaModule.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { ContentMediaModule } from './types/ContentMediaModule'
-import { VariantOptions } from '../types'
-import { computed } from 'vue'
-import ContentModule from './ContentModule.vue'
-
-const props = defineProps<ContentMediaModule>()
-
-const variantValue = computed(() => {
-	return VariantOptions[props.variant]
-})
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<component
-		:is="isChild ? 'div' : 'section'"
-		:style="computedStyle"
-		class="content-media-module"
-	>
-		<div
-			class="content-media-container flex flex-row gap-5 relative"
-			:class="{ container: variantValue != VariantOptions.Hero }"
-		>
-			<img
-				v-if="media"
-				class="media"
-				:class="{ 'w-screen': variantValue == VariantOptions.Hero }"
-				:src="media.src"
-				:alt="media.altTag"
-				:height="media.height"
-				:width="media.width"
-			/>
-
-			<ContentModule
-				class="content"
-				:class="{
-					absolute: variantValue == VariantOptions.Hero,
-				}"
-				:="content"
-			/>
-		</div>
-	</component>
-</template>

package/src/components/ContentModule.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { ContentModule } from './types/ContentModule'
-import CTA from './CTA.vue'
-import { computed } from 'vue'
-
-const props = defineProps<ContentModule>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-const computedClassname = computed(
-	() => `content-module p-5 ${props.class ?? ''}`
-)
-</script>
-
-<template>
-	<div :class="computedClassname" :style="computedStyle">
-		<div :class="`content-module-container mx-auto ${pt?.container ?? ''}`">
-			<img
-				v-if="logo"
-				:src="logo.src"
-				:alt="logo.alt"
-				:class="`${pt?.logo ?? ''}`"
-			/>
-			<h2
-				v-if="headline"
-				:class="`content-module-headline ${pt?.headline ?? ''}`"
-			>
-				{{ headline }}
-			</h2>
-			<h2
-				v-if="subHeadline"
-				:class="`content-module-subHeadline ${pt?.subHeadline ?? ''}`"
-			>
-				{{ subHeadline }}
-			</h2>
-			<p
-				v-if="description"
-				:class="`content-module-description ${pt?.description ?? ''}`"
-			>
-				{{ description }}
-			</p>
-			<div v-if="CTAs" :class="`content-module-ctas ${pt?.ctas ?? ''}`">
-				<CTA v-for="(item, index) in CTAs" v-bind="item" />
-			</div>
-		</div>
-	</div>
-</template>

package/src/components/IconChevron.vue

@@ -1,107 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-const props = defineProps({
-	bold: {
-		type: Boolean,
-		default: false,
-	},
-	orientation: {
-		type: String,
-		default: 'right',
-	},
-})
-
-const orientClass = computed(() => {
-	return 'orient-' + props.orientation
-})
-</script>
-
-<template>
-	<i>
-		<svg
-			v-if="!props.bold"
-			:class="orientClass"
-			xwidth="19px"
-			xheight="35px"
-			height="1em"
-			viewBox="0 0 19 35"
-			version="1.1"
-			xmlns="http://www.w3.org/2000/svg"
-			xmlns:xlink="http://www.w3.org/1999/xlink"
-		>
-			<title>icon-arrow-lg</title>
-			<defs>
-				<path
-					id="path-1"
-					d="M366,124.5 C366,124.907277 365.845623,125.313759 365.536079,125.624786 L349.70258,141.534057 C349.084282,142.155314 348.08123,142.155314 347.463724,141.534057 C346.845425,140.9128 346.845425,139.905743 347.463724,139.284486 L362.177794,124.5 L347.463724,109.715514 C346.845425,109.094257 346.845425,108.0872 347.463724,107.465943 C348.082022,106.844686 349.085074,106.844686 349.70258,107.465943 L365.536079,123.375214 C365.845623,123.686241 366,124.092723 366,124.5"
-				></path>
-			</defs>
-			<g id="r4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-				<g
-					id="CCB_Sperm-Donor_HP_M_R4"
-					transform="translate(-380.000000, -2753.000000)"
-				>
-					<g id="TESTIMONIALS" transform="translate(0.000000, 2175.000000)">
-						<g id="Group-15" transform="translate(33.000000, 471.000000)">
-							<mask id="mask-2" fill="white">
-								<use xlink:href="#path-1"></use>
-							</mask>
-							<use
-								id="icon-arrow-lg"
-								fill="currentcolor"
-								xlink:href="#path-1"
-							></use>
-						</g>
-					</g>
-				</g>
-			</g>
-		</svg>
-		<svg
-			v-if="props.bold"
-			:class="orientClass"
-			xwidth="7px"
-			xheight="10px"
-			height="1em"
-			viewBox="0 0 7 10"
-			version="1.1"
-			xmlns="http://www.w3.org/2000/svg"
-			xmlns:xlink="http://www.w3.org/1999/xlink"
-		>
-			<title>icon-arrow</title>
-			<g id="r4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-				<g
-					id="CCB_Sperm-Donor_Location_1_D_R4"
-					transform="translate(-182.000000, -2023.000000)"
-					fill="currentcolor"
-				>
-					<g id="Group-2" transform="translate(120.000000, 409.000000)">
-						<g id="Group" transform="translate(0.000000, 90.000000)">
-							<g id="LOS-ALTOS" transform="translate(60.000000, 1294.000000)">
-								<g id="ADDRESS" transform="translate(0.000000, 12.000000)">
-									<g id="Group-19" transform="translate(2.696552, 214.000000)">
-										<path
-											id="icon-arrow"
-											d="M5.59137931,8.92855676 C5.59137931,9.13884623 5.51349799,9.34872498 5.35733597,9.50931713 L1.36342228,13.6165333 C1.05149763,13.9373069 0.545868153,13.9373069 0.233943494,13.6165333 C-0.0779811647,13.2957597 -0.0779811647,12.7757862 0.233943494,12.4550126 L3.66271839,8.92855676 L0.233943494,5.40210093 C-0.0779811647,5.08132735 -0.0779811647,4.56135377 0.233943494,4.24058019 C0.545868153,3.9198066 1.05149763,3.9198066 1.36342228,4.24058019 L5.35733597,8.34779639 C5.51349799,8.50838854 5.59137931,8.71826729 5.59137931,8.92855676 Z"
-										></path>
-									</g>
-								</g>
-							</g>
-						</g>
-					</g>
-				</g>
-			</g>
-		</svg>
-	</i>
-</template>
-
-<style scoped>
-.orient-up {
-	transform: rotate(-90deg);
-}
-.orient-down {
-	transform: rotate(90deg);
-}
-.orient-left {
-	transform: rotate(180deg);
-}
-</style>

package/src/components/Image.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { Image } from './types/Image'
-
-defineProps<Image>()
-</script>
-
-<template>
-	<img
-		:src="media.src"
-		:alt="altTag"
-		:height="media.height"
-		:width="media.width"
-		:class="class"
-	/>
-</template>

package/src/components/LogoContainerModule.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { LogoContainerModule } from './types/LogoContainerModule'
-import { computed } from 'vue'
-
-const props = defineProps<LogoContainerModule>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<section :style="computedStyle" class="logo-module">
-		<div :class="`container mx-auto ${pt?.container ?? ''}`">
-			<h2 v-if="headline" :class="`logo-module-headline ${pt?.headline ?? ''}`">
-				{{ headline }}
-			</h2>
-			<div
-				v-if="modules"
-				:class="`logo-module-content flex flex-wrap justify-evenly gap-2 ${pt?.content ?? ''}`"
-			>
-				<Image v-for="image in modules" v-bind="image" />
-			</div>
-		</div>
-	</section>
-</template>
-./types/LogoContainerModule

package/src/components/SplitModule.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { SplitModule } from './types/SplitModule'
-
-const props = defineProps<SplitModule>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		'background-image': `url(${props.backgroundImage ?? ''})`,
-		'background-size': 'cover',
-	}
-})
-</script>
-
-<template>
-	<section class="split-module" :style="computedStyle">
-		<h2 :class="`headline ${pt?.headline ?? ''}`">{{ headline }}</h2>
-		<div
-			:class="`split-module-content flex justify-evenly gap-4 mx-auto ${pt?.content ?? ''}`"
-		>
-			<component
-				v-if="start"
-				:is="start.__typename"
-				v-bind="start"
-				class="split-module-left"
-			/>
-			<component
-				v-if="center"
-				:is="center.__typename"
-				v-bind="center"
-				class="split-module-center"
-			/>
-			<component
-				v-if="end"
-				:is="end.__typename"
-				v-bind="end"
-				class="split-module-right"
-			/>
-		</div>
-	</section>
-</template>