Flex.vue

<script setup lang="ts">
type GapSizes =
	"0"
	| "px"
	| "0.5"
	| "1"
	| "1.5"
	| "2"
	| "2.5"
	| "3"
	| "3.5"
	| "4"
	| "5"
	| "6"
	| "7"
	| "8"
	| "9"
	| "10"
	| "11"
	| "12"
	| "14"
	| "16";

defineProps<{
	row?: boolean;
	smRow?: boolean;
	mdRow?: boolean;
	lgRow?: boolean;
	xlRow?: boolean;
	txlRow?: boolean;
	column?: boolean;
	smColumn?: boolean;
	mdColumn?: boolean;
	lgColumn?: boolean;
	xlColumn?: boolean;
	txlColumn?: boolean;
	wrap?: boolean;
	grow?: boolean;
	noGrow?: boolean;
	shrink?: boolean;
	noShrink?: boolean;
	router?: boolean;
	to?: string;
	is?: string;
	items?: "start" | "center" | "end";
	smItems?: "start" | "center" | "end";
	mdItems?: "start" | "center" | "end";
	lgItems?: "start" | "center" | "end";
	xlItems?: "start" | "center" | "end";
	txlItems?: "start" | "center" | "end";
	justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
	smJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
	mdJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
	lgJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
	xlJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
	txlJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
	gap?: GapSizes,
	smGap?: GapSizes,
	mdGap?: GapSizes,
	lgGap?: GapSizes,
	xlGap?: GapSizes,
	txlGap?: GapSizes,
	gapX?: GapSizes,
	smGapX?: GapSizes,
	mdGapX?: GapSizes,
	lgGapX?: GapSizes,
	xlGapX?: GapSizes,
	txlGapX?: GapSizes,
	gapY?: GapSizes,
	smGapY?: GapSizes,
	mdGapY?: GapSizes,
	lgGapY?: GapSizes,
	xlGapY?: GapSizes,
	txlGapY?: GapSizes,
}>();
</script>

<template>
	<NuxtLink
		v-if="router"
		:to="to"
		class="flex"
		:class="{
			'flex-row': row,
			'sm:flex-row': smRow,
			'md:flex-row': mdRow,
			'lg:flex-row': lgRow,
			'xl:flex-row': xlRow,
			'2xl:flex-row': txlRow,

			'flex-col': column,
			'sm:flex-col': smColumn,
			'md:flex-col': mdColumn,
			'lg:flex-col': lgColumn,
			'xl:flex-col': xlColumn,
			'2xl:flex-col': txlColumn,

			'flex-wrap': wrap,
			'justify-start': justify === 'start',
			'justify-center': justify === 'center',
			'justify-end': justify === 'end',
			'justify-between': justify === 'between',
			'justify-around': justify === 'around',
			'justify-evenly': justify === 'evenly',
			'flex-grow-0': noGrow,
			'flex-grow': grow,
			'flex-shrink-0': noShrink,
			'flex-shrink': shrink,

			'sm:justify-start': smJustify === 'start',
			'sm:justify-center': smJustify === 'center',
			'sm:justify-end': smJustify === 'end',
			'sm:justify-between': smJustify === 'between',
			'sm:justify-around': smJustify === 'around',
			'sm:justify-evenly': smJustify === 'evenly',

			'md:justify-start': mdJustify === 'start',
			'md:justify-center': mdJustify === 'center',
			'md:justify-end': mdJustify === 'end',
			'md:justify-between': mdJustify === 'between',
			'md:justify-around': mdJustify === 'around',
			'md:justify-evenly': mdJustify === 'evenly',

			'lg:justify-start': lgJustify === 'start',
			'lg:justify-center': lgJustify === 'center',
			'lg:justify-end': lgJustify === 'end',
			'lg:justify-between': lgJustify === 'between',
			'lg:justify-around': lgJustify === 'around',
			'lg:justify-evenly': lgJustify === 'evenly',

			'xl:justify-start': xlJustify === 'start',
			'xl:justify-center': xlJustify === 'center',
			'xl:justify-end': xlJustify === 'end',
			'xl:justify-between': xlJustify === 'between',
			'xl:justify-around': xlJustify === 'around',
			'xl:justify-evenly': xlJustify === 'evenly',

			'2xl:justify-start': txlJustify === 'start',
			'2xl:justify-center': txlJustify === 'center',
			'2xl:justify-end': txlJustify === 'end',
			'2xl:justify-between': txlJustify === 'between',
			'2xl:justify-around': txlJustify === 'around',
			'2xl:justify-evenly': txlJustify === 'evenly',

			'items-start': items === 'start',
			'items-center': items === 'center',
			'items-end': items === 'end',

			'sm:items-start': smItems === 'start',
			'sm:items-center': smItems === 'center',
			'sm:items-end': smItems === 'end',

			'md:items-start': mdItems === 'start',
			'md:items-center': mdItems === 'center',
			'md:items-end': mdItems === 'end',

			'lg:items-start': lgItems === 'start',
			'lg:items-center': lgItems === 'center',
			'lg:items-end': lgItems === 'end',

			'xl:items-start': xlItems === 'start',
			'xl:items-center': xlItems === 'center',
			'xl:items-end': xlItems === 'end',

			'2xl:items-start': txlItems === 'start',
			'2xl:items-center': txlItems === 'center',
			'2xl:items-end': txlItems === 'end',

			'gap-0': gap === '0',
			'gap-px': gap === 'px',
			'gap-0.5': gap === '0.5',
			'gap-1': gap === '1',
			'gap-1.5': gap === '1.5',
			'gap-2': gap === '2',
			'gap-2.5': gap === '2.5',
			'gap-3': gap === '3',
			'gap-3.5': gap === '3.5',
			'gap-4': gap === '4',
			'gap-5': gap === '5',
			'gap-6': gap === '6',
			'gap-7': gap === '7',
			'gap-8': gap === '8',
			'gap-9': gap === '9',
			'gap-10': gap === '10',
			'gap-11': gap === '11',
			'gap-12': gap === '12',
			'gap-14': gap === '14',
			'gap-16': gap === '16',

			'sm:gap-0': smGap === '0',
			'sm:gap-px': smGap === 'px',
			'sm:gap-0.5': smGap === '0.5',
			'sm:gap-1': smGap === '1',
			'sm:gap-1.5': smGap === '1.5',
			'sm:gap-2': smGap === '2',
			'sm:gap-2.5': smGap === '2.5',
			'sm:gap-3': smGap === '3',
			'sm:gap-3.5': smGap === '3.5',
			'sm:gap-4': smGap === '4',
			'sm:gap-5': smGap === '5',
			'sm:gap-6': smGap === '6',
			'sm:gap-7': smGap === '7',
			'sm:gap-8': smGap === '8',
			'sm:gap-9': smGap === '9',
			'sm:gap-10': smGap === '10',
			'sm:gap-11': smGap === '11',
			'sm:gap-12': smGap === '12',
			'sm:gap-14': smGap === '14',
			'sm:gap-16': smGap === '16',

			'md:gap-0': mdGap === '0',
			'md:gap-px': mdGap === 'px',
			'md:gap-0.5': mdGap === '0.5',
			'md:gap-1': mdGap === '1',
			'md:gap-1.5': mdGap === '1.5',
			'md:gap-2': mdGap === '2',
			'md:gap-2.5': mdGap === '2.5',
			'md:gap-3': mdGap === '3',
			'md:gap-3.5': mdGap === '3.5',
			'md:gap-4': mdGap === '4',
			'md:gap-5': mdGap === '5',
			'md:gap-6': mdGap === '6',
			'md:gap-7': mdGap === '7',
			'md:gap-8': mdGap === '8',
			'md:gap-9': mdGap === '9',
			'md:gap-10': mdGap === '10',
			'md:gap-11': mdGap === '11',
			'md:gap-12': mdGap === '12',
			'md:gap-14': mdGap === '14',
			'md:gap-16': mdGap === '16',

			'lg:gap-0': lgGap === '0',
			'lg:gap-px': lgGap === 'px',
			'lg:gap-0.5': lgGap === '0.5',
			'lg:gap-1': lgGap === '1',
			'lg:gap-1.5': lgGap === '1.5',
			'lg:gap-2': lgGap === '2',
			'lg:gap-2.5': lgGap === '2.5',
			'lg:gap-3': lgGap === '3',
			'lg:gap-3.5': lgGap === '3.5',
			'lg:gap-4': lgGap === '4',
			'lg:gap-5': lgGap === '5',
			'lg:gap-6': lgGap === '6',
			'lg:gap-7': lgGap === '7',
			'lg:gap-8': lgGap === '8',
			'lg:gap-9': lgGap === '9',
			'lg:gap-10': lgGap === '10',
			'lg:gap-11': lgGap === '11',
			'lg:gap-12': lgGap === '12',
			'lg:gap-14': lgGap === '14',
			'lg:gap-16': lgGap === '16',

			'xl:gap-0': xlGap === '0',
			'xl:gap-px': xlGap === 'px',
			'xl:gap-0.5': xlGap === '0.5',
			'xl:gap-1': xlGap === '1',
			'xl:gap-1.5': xlGap === '1.5',
			'xl:gap-2': xlGap === '2',
			'xl:gap-2.5': xlGap === '2.5',
			'xl:gap-3': xlGap === '3',
			'xl:gap-3.5': xlGap === '3.5',
			'xl:gap-4': xlGap === '4',
			'xl:gap-5': xlGap === '5',
			'xl:gap-6': xlGap === '6',
			'xl:gap-7': xlGap === '7',
			'xl:gap-8': xlGap === '8',
			'xl:gap-9': xlGap === '9',
			'xl:gap-10': xlGap === '10',
			'xl:gap-11': xlGap === '11',
			'xl:gap-12': xlGap === '12',
			'xl:gap-14': xlGap === '14',
			'xl:gap-16': xlGap === '16',

			'2xl:gap-0': txlGap === '0',
			'2xl:gap-px': txlGap === 'px',
			'2xl:gap-0.5': txlGap === '0.5',
			'2xl:gap-1': txlGap === '1',
			'2xl:gap-1.5': txlGap === '1.5',
			'2xl:gap-2': txlGap === '2',
			'2xl:gap-2.5': txlGap === '2.5',
			'2xl:gap-3': txlGap === '3',
			'2xl:gap-3.5': txlGap === '3.5',
			'2xl:gap-4': txlGap === '4',
			'2xl:gap-5': txlGap === '5',
			'2xl:gap-6': txlGap === '6',
			'2xl:gap-7': txlGap === '7',
			'2xl:gap-8': txlGap === '8',
			'2xl:gap-9': txlGap === '9',
			'2xl:gap-10': txlGap === '10',
			'2xl:gap-11': txlGap === '11',
			'2xl:gap-12': txlGap === '12',
			'2xl:gap-14': txlGap === '14',
			'2xl:gap-16': txlGap === '16',

			'gap-x-0': gapX === '0',
			'gap-x-px': gapX === 'px',
			'gap-x-0.5': gapX === '0.5',
			'gap-x-1': gapX === '1',
			'gap-x-1.5': gapX === '1.5',
			'gap-x-2': gapX === '2',
			'gap-x-2.5': gapX === '2.5',
			'gap-x-3': gapX === '3',
			'gap-x-3.5': gapX === '3.5',
			'gap-x-4': gapX === '4',
			'gap-x-5': gapX === '5',
			'gap-x-6': gapX === '6',
			'gap-x-7': gapX === '7',
			'gap-x-8': gapX === '8',
			'gap-x-9': gapX === '9',
			'gap-x-10': gapX === '10',
			'gap-x-11': gapX === '11',
			'gap-x-12': gapX === '12',
			'gap-x-14': gapX === '14',
			'gap-x-16': gapX === '16',

			'sm:gap-x-0': smGapX === '0',
			'sm:gap-x-px': smGapX === 'px',
			'sm:gap-x-0.5': smGapX === '0.5',
			'sm:gap-x-1': smGapX === '1',
			'sm:gap-x-1.5': smGapX === '1.5',
			'sm:gap-x-2': smGapX === '2',
			'sm:gap-x-2.5': smGapX === '2.5',
			'sm:gap-x-3': smGapX === '3',
			'sm:gap-x-3.5': smGapX === '3.5',
			'sm:gap-x-4': smGapX === '4',
			'sm:gap-x-5': smGapX === '5',
			'sm:gap-x-6': smGapX === '6',
			'sm:gap-x-7': smGapX === '7',
			'sm:gap-x-8': smGapX === '8',
			'sm:gap-x-9': smGapX === '9',
			'sm:gap-x-10': smGapX === '10',
			'sm:gap-x-11': smGapX === '11',
			'sm:gap-x-12': smGapX === '12',
			'sm:gap-x-14': smGapX === '14',
			'sm:gap-x-16': smGapX === '16',

			'md:gap-x-0': mdGapX === '0',
			'md:gap-x-px': mdGapX === 'px',
			'md:gap-x-0.5': mdGapX === '0.5',
			'md:gap-x-1': mdGapX === '1',
			'md:gap-x-1.5': mdGapX === '1.5',
			'md:gap-x-2': mdGapX === '2',
			'md:gap-x-2.5': mdGapX === '2.5',
			'md:gap-x-3': mdGapX === '3',
			'md:gap-x-3.5': mdGapX === '3.5',
			'md:gap-x-4': mdGapX === '4',
			'md:gap-x-5': mdGapX === '5',
			'md:gap-x-6': mdGapX === '6',
			'md:gap-x-7': mdGapX === '7',
			'md:gap-x-8': mdGapX === '8',
			'md:gap-x-9': mdGapX === '9',
			'md:gap-x-10': mdGapX === '10',
			'md:gap-x-11': mdGapX === '11',
			'md:gap-x-12': mdGapX === '12',
			'md:gap-x-14': mdGapX === '14',
			'md:gap-x-16': mdGapX === '16',

			'lg:gap-x-0': lgGapX === '0',
			'lg:gap-x-px': lgGapX === 'px',
			'lg:gap-x-0.5': lgGapX === '0.5',
			'lg:gap-x-1': lgGapX === '1',
			'lg:gap-x-1.5': lgGapX === '1.5',
			'lg:gap-x-2': lgGapX === '2',
			'lg:gap-x-2.5': lgGapX === '2.5',
			'lg:gap-x-3': lgGapX === '3',
			'lg:gap-x-3.5': lgGapX === '3.5',
			'lg:gap-x-4': lgGapX === '4',
			'lg:gap-x-5': lgGapX === '5',
			'lg:gap-x-6': lgGapX === '6',
			'lg:gap-x-7': lgGapX === '7',
			'lg:gap-x-8': lgGapX === '8',
			'lg:gap-x-9': lgGapX === '9',
			'lg:gap-x-10': lgGapX === '10',
			'lg:gap-x-11': lgGapX === '11',
			'lg:gap-x-12': lgGapX === '12',
			'lg:gap-x-14': lgGapX === '14',
			'lg:gap-x-16': lgGapX === '16',

			'xl:gap-x-0': xlGapX === '0',
			'xl:gap-x-px': xlGapX === 'px',
			'xl:gap-x-0.5': xlGapX === '0.5',
			'xl:gap-x-1': xlGapX === '1',
			'xl:gap-x-1.5': xlGapX === '1.5',
			'xl:gap-x-2': xlGapX === '2',
			'xl:gap-x-2.5': xlGapX === '2.5',
			'xl:gap-x-3': xlGapX === '3',
			'xl:gap-x-3.5': xlGapX === '3.5',
			'xl:gap-x-4': xlGapX === '4',
			'xl:gap-x-5': xlGapX === '5',
			'xl:gap-x-6': xlGapX === '6',
			'xl:gap-x-7': xlGapX === '7',
			'xl:gap-x-8': xlGapX === '8',
			'xl:gap-x-9': xlGapX === '9',
			'xl:gap-x-10': xlGapX === '10',
			'xl:gap-x-11': xlGapX === '11',
			'xl:gap-x-12': xlGapX === '12',
			'xl:gap-x-14': xlGapX === '14',
			'xl:gap-x-16': xlGapX === '16',

			'2xl:gap-x-0': txlGapX === '0',
			'2xl:gap-x-px': txlGapX === 'px',
			'2xl:gap-x-0.5': txlGapX === '0.5',
			'2xl:gap-x-1': txlGapX === '1',
			'2xl:gap-x-1.5': txlGapX === '1.5',
			'2xl:gap-x-2': txlGapX === '2',
			'2xl:gap-x-2.5': txlGapX === '2.5',
			'2xl:gap-x-3': txlGapX === '3',
			'2xl:gap-x-3.5': txlGapX === '3.5',
			'2xl:gap-x-4': txlGapX === '4',
			'2xl:gap-x-5': txlGapX === '5',
			'2xl:gap-x-6': txlGapX === '6',
			'2xl:gap-x-7': txlGapX === '7',
			'2xl:gap-x-8': txlGapX === '8',
			'2xl:gap-x-9': txlGapX === '9',
			'2xl:gap-x-10': txlGapX === '10',
			'2xl:gap-x-11': txlGapX === '11',
			'2xl:gap-x-12': txlGapX === '12',
			'2xl:gap-x-14': txlGapX === '14',
			'2xl:gap-x-16': txlGapX === '16',

			'gap-y-0': gapY === '0',
			'gap-y-px': gapY === 'px',
			'gap-y-0.5': gapY === '0.5',
			'gap-y-1': gapY === '1',
			'gap-y-1.5': gapY === '1.5',
			'gap-y-2': gapY === '2',
			'gap-y-2.5': gapY === '2.5',
			'gap-y-3': gapY === '3',
			'gap-y-3.5': gapY === '3.5',
			'gap-y-4': gapY === '4',
			'gap-y-5': gapY === '5',
			'gap-y-6': gapY === '6',
			'gap-y-7': gapY === '7',
			'gap-y-8': gapY === '8',
			'gap-y-9': gapY === '9',
			'gap-y-10': gapY === '10',
			'gap-y-11': gapY === '11',
			'gap-y-12': gapY === '12',
			'gap-y-14': gapY === '14',
			'gap-y-16': gapY === '16',

			'sm:gap-y-0': smGapY === '0',
			'sm:gap-y-px': smGapY === 'px',
			'sm:gap-y-0.5': smGapY === '0.5',
			'sm:gap-y-1': smGapY === '1',
			'sm:gap-y-1.5': smGapY === '1.5',
			'sm:gap-y-2': smGapY === '2',
			'sm:gap-y-2.5': smGapY === '2.5',
			'sm:gap-y-3': smGapY === '3',
			'sm:gap-y-3.5': smGapY === '3.5',
			'sm:gap-y-4': smGapY === '4',
			'sm:gap-y-5': smGapY === '5',
			'sm:gap-y-6': smGapY === '6',
			'sm:gap-y-7': smGapY === '7',
			'sm:gap-y-8': smGapY === '8',
			'sm:gap-y-9': smGapY === '9',
			'sm:gap-y-10': smGapY === '10',
			'sm:gap-y-11': smGapY === '11',
			'sm:gap-y-12': smGapY === '12',
			'sm:gap-y-14': smGapY === '14',
			'sm:gap-y-16': smGapY === '16',

			'md:gap-y-0': mdGapY === '0',
			'md:gap-y-px': mdGapY === 'px',
			'md:gap-y-0.5': mdGapY === '0.5',
			'md:gap-y-1': mdGapY === '1',
			'md:gap-y-1.5': mdGapY === '1.5',
			'md:gap-y-2': mdGapY === '2',
			'md:gap-y-2.5': mdGapY === '2.5',
			'md:gap-y-3': mdGapY === '3',
			'md:gap-y-3.5': mdGapY === '3.5',
			'md:gap-y-4': mdGapY === '4',
			'md:gap-y-5': mdGapY === '5',
			'md:gap-y-6': mdGapY === '6',
			'md:gap-y-7': mdGapY === '7',
			'md:gap-y-8': mdGapY === '8',
			'md:gap-y-9': mdGapY === '9',
			'md:gap-y-10': mdGapY === '10',
			'md:gap-y-11': mdGapY === '11',
			'md:gap-y-12': mdGapY === '12',
			'md:gap-y-14': mdGapY === '14',
			'md:gap-y-16': mdGapY === '16',

			'lg:gap-y-0': lgGapY === '0',
			'lg:gap-y-px': lgGapY === 'px',
			'lg:gap-y-0.5': lgGapY === '0.5',
			'lg:gap-y-1': lgGapY === '1',
			'lg:gap-y-1.5': lgGapY === '1.5',
			'lg:gap-y-2': lgGapY === '2',
			'lg:gap-y-2.5': lgGapY === '2.5',
			'lg:gap-y-3': lgGapY === '3',
			'lg:gap-y-3.5': lgGapY === '3.5',
			'lg:gap-y-4': lgGapY === '4',
			'lg:gap-y-5': lgGapY === '5',
			'lg:gap-y-6': lgGapY === '6',
			'lg:gap-y-7': lgGapY === '7',
			'lg:gap-y-8': lgGapY === '8',
			'lg:gap-y-9': lgGapY === '9',
			'lg:gap-y-10': lgGapY === '10',
			'lg:gap-y-11': lgGapY === '11',
			'lg:gap-y-12': lgGapY === '12',
			'lg:gap-y-14': lgGapY === '14',
			'lg:gap-y-16': lgGapY === '16',

			'xl:gap-y-0': xlGapY === '0',
			'xl:gap-y-px': xlGapY === 'px',
			'xl:gap-y-0.5': xlGapY === '0.5',
			'xl:gap-y-1': xlGapY === '1',
			'xl:gap-y-1.5': xlGapY === '1.5',
			'xl:gap-y-2': xlGapY === '2',
			'xl:gap-y-2.5': xlGapY === '2.5',
			'xl:gap-y-3': xlGapY === '3',
			'xl:gap-y-3.5': xlGapY === '3.5',
			'xl:gap-y-4': xlGapY === '4',
			'xl:gap-y-5': xlGapY === '5',
			'xl:gap-y-6': xlGapY === '6',
			'xl:gap-y-7': xlGapY === '7',
			'xl:gap-y-8': xlGapY === '8',
			'xl:gap-y-9': xlGapY === '9',
			'xl:gap-y-10': xlGapY === '10',
			'xl:gap-y-11': xlGapY === '11',
			'xl:gap-y-12': xlGapY === '12',
			'xl:gap-y-14': xlGapY === '14',
			'xl:gap-y-16': xlGapY === '16',

			'2xl:gap-y-0': txlGapY === '0',
			'2xl:gap-y-px': txlGapY === 'px',
			'2xl:gap-y-0.5': txlGapY === '0.5',
			'2xl:gap-y-1': txlGapY === '1',
			'2xl:gap-y-1.5': txlGapY === '1.5',
			'2xl:gap-y-2': txlGapY === '2',
			'2xl:gap-y-2.5': txlGapY === '2.5',
			'2xl:gap-y-3': txlGapY === '3',
			'2xl:gap-y-3.5': txlGapY === '3.5',
			'2xl:gap-y-4': txlGapY === '4',
			'2xl:gap-y-5': txlGapY === '5',
			'2xl:gap-y-6': txlGapY === '6',
			'2xl:gap-y-7': txlGapY === '7',
			'2xl:gap-y-8': txlGapY === '8',
			'2xl:gap-y-9': txlGapY === '9',
			'2xl:gap-y-10': txlGapY === '10',
			'2xl:gap-y-11': txlGapY === '11',
			'2xl:gap-y-12': txlGapY === '12',
			'2xl:gap-y-14': txlGapY === '14',
			'2xl:gap-y-16': txlGapY === '16',
		}"
	>
		<slot/>
	</NuxtLink>
	<Component
		v-else
		:is="is || 'div'"
		class="flex"
		:class="{
			'flex-row': row,
			'sm:flex-row': smRow,
			'md:flex-row': mdRow,
			'lg:flex-row': lgRow,
			'xl:flex-row': xlRow,
			'2xl:flex-row': txlRow,

			'flex-col': column,
			'sm:flex-col': smColumn,
			'md:flex-col': mdColumn,
			'lg:flex-col': lgColumn,
			'xl:flex-col': xlColumn,
			'2xl:flex-col': txlColumn,

			'flex-wrap': wrap,
			'justify-start': justify === 'start',
			'justify-center': justify === 'center',
			'justify-end': justify === 'end',
			'justify-between': justify === 'between',
			'justify-around': justify === 'around',
			'justify-evenly': justify === 'evenly',
			'flex-grow-0': noGrow,
			'flex-grow': grow,
			'flex-shrink-0': noShrink,
			'flex-shrink': shrink,

			'sm:justify-start': smJustify === 'start',
			'sm:justify-center': smJustify === 'center',
			'sm:justify-end': smJustify === 'end',
			'sm:justify-between': smJustify === 'between',
			'sm:justify-around': smJustify === 'around',
			'sm:justify-evenly': smJustify === 'evenly',

			'md:justify-start': mdJustify === 'start',
			'md:justify-center': mdJustify === 'center',
			'md:justify-end': mdJustify === 'end',
			'md:justify-between': mdJustify === 'between',
			'md:justify-around': mdJustify === 'around',
			'md:justify-evenly': mdJustify === 'evenly',

			'lg:justify-start': lgJustify === 'start',
			'lg:justify-center': lgJustify === 'center',
			'lg:justify-end': lgJustify === 'end',
			'lg:justify-between': lgJustify === 'between',
			'lg:justify-around': lgJustify === 'around',
			'lg:justify-evenly': lgJustify === 'evenly',

			'xl:justify-start': xlJustify === 'start',
			'xl:justify-center': xlJustify === 'center',
			'xl:justify-end': xlJustify === 'end',
			'xl:justify-between': xlJustify === 'between',
			'xl:justify-around': xlJustify === 'around',
			'xl:justify-evenly': xlJustify === 'evenly',

			'2xl:justify-start': txlJustify === 'start',
			'2xl:justify-center': txlJustify === 'center',
			'2xl:justify-end': txlJustify === 'end',
			'2xl:justify-between': txlJustify === 'between',
			'2xl:justify-around': txlJustify === 'around',
			'2xl:justify-evenly': txlJustify === 'evenly',

			'items-start': items === 'start',
			'items-center': items === 'center',
			'items-end': items === 'end',

			'sm:items-start': smItems === 'start',
			'sm:items-center': smItems === 'center',
			'sm:items-end': smItems === 'end',

			'md:items-start': mdItems === 'start',
			'md:items-center': mdItems === 'center',
			'md:items-end': mdItems === 'end',

			'lg:items-start': lgItems === 'start',
			'lg:items-center': lgItems === 'center',
			'lg:items-end': lgItems === 'end',

			'xl:items-start': xlItems === 'start',
			'xl:items-center': xlItems === 'center',
			'xl:items-end': xlItems === 'end',

			'2xl:items-start': txlItems === 'start',
			'2xl:items-center': txlItems === 'center',
			'2xl:items-end': txlItems === 'end',

			'gap-0': gap === '0',
			'gap-px': gap === 'px',
			'gap-0.5': gap === '0.5',
			'gap-1': gap === '1',
			'gap-1.5': gap === '1.5',
			'gap-2': gap === '2',
			'gap-2.5': gap === '2.5',
			'gap-3': gap === '3',
			'gap-3.5': gap === '3.5',
			'gap-4': gap === '4',
			'gap-5': gap === '5',
			'gap-6': gap === '6',
			'gap-7': gap === '7',
			'gap-8': gap === '8',
			'gap-9': gap === '9',
			'gap-10': gap === '10',
			'gap-11': gap === '11',
			'gap-12': gap === '12',
			'gap-14': gap === '14',
			'gap-16': gap === '16',

			'sm:gap-0': smGap === '0',
			'sm:gap-px': smGap === 'px',
			'sm:gap-0.5': smGap === '0.5',
			'sm:gap-1': smGap === '1',
			'sm:gap-1.5': smGap === '1.5',
			'sm:gap-2': smGap === '2',
			'sm:gap-2.5': smGap === '2.5',
			'sm:gap-3': smGap === '3',
			'sm:gap-3.5': smGap === '3.5',
			'sm:gap-4': smGap === '4',
			'sm:gap-5': smGap === '5',
			'sm:gap-6': smGap === '6',
			'sm:gap-7': smGap === '7',
			'sm:gap-8': smGap === '8',
			'sm:gap-9': smGap === '9',
			'sm:gap-10': smGap === '10',
			'sm:gap-11': smGap === '11',
			'sm:gap-12': smGap === '12',
			'sm:gap-14': smGap === '14',
			'sm:gap-16': smGap === '16',

			'md:gap-0': mdGap === '0',
			'md:gap-px': mdGap === 'px',
			'md:gap-0.5': mdGap === '0.5',
			'md:gap-1': mdGap === '1',
			'md:gap-1.5': mdGap === '1.5',
			'md:gap-2': mdGap === '2',
			'md:gap-2.5': mdGap === '2.5',
			'md:gap-3': mdGap === '3',
			'md:gap-3.5': mdGap === '3.5',
			'md:gap-4': mdGap === '4',
			'md:gap-5': mdGap === '5',
			'md:gap-6': mdGap === '6',
			'md:gap-7': mdGap === '7',
			'md:gap-8': mdGap === '8',
			'md:gap-9': mdGap === '9',
			'md:gap-10': mdGap === '10',
			'md:gap-11': mdGap === '11',
			'md:gap-12': mdGap === '12',
			'md:gap-14': mdGap === '14',
			'md:gap-16': mdGap === '16',

			'lg:gap-0': lgGap === '0',
			'lg:gap-px': lgGap === 'px',
			'lg:gap-0.5': lgGap === '0.5',
			'lg:gap-1': lgGap === '1',
			'lg:gap-1.5': lgGap === '1.5',
			'lg:gap-2': lgGap === '2',
			'lg:gap-2.5': lgGap === '2.5',
			'lg:gap-3': lgGap === '3',
			'lg:gap-3.5': lgGap === '3.5',
			'lg:gap-4': lgGap === '4',
			'lg:gap-5': lgGap === '5',
			'lg:gap-6': lgGap === '6',
			'lg:gap-7': lgGap === '7',
			'lg:gap-8': lgGap === '8',
			'lg:gap-9': lgGap === '9',
			'lg:gap-10': lgGap === '10',
			'lg:gap-11': lgGap === '11',
			'lg:gap-12': lgGap === '12',
			'lg:gap-14': lgGap === '14',
			'lg:gap-16': lgGap === '16',

			'xl:gap-0': xlGap === '0',
			'xl:gap-px': xlGap === 'px',
			'xl:gap-0.5': xlGap === '0.5',
			'xl:gap-1': xlGap === '1',
			'xl:gap-1.5': xlGap === '1.5',
			'xl:gap-2': xlGap === '2',
			'xl:gap-2.5': xlGap === '2.5',
			'xl:gap-3': xlGap === '3',
			'xl:gap-3.5': xlGap === '3.5',
			'xl:gap-4': xlGap === '4',
			'xl:gap-5': xlGap === '5',
			'xl:gap-6': xlGap === '6',
			'xl:gap-7': xlGap === '7',
			'xl:gap-8': xlGap === '8',
			'xl:gap-9': xlGap === '9',
			'xl:gap-10': xlGap === '10',
			'xl:gap-11': xlGap === '11',
			'xl:gap-12': xlGap === '12',
			'xl:gap-14': xlGap === '14',
			'xl:gap-16': xlGap === '16',

			'2xl:gap-0': txlGap === '0',
			'2xl:gap-px': txlGap === 'px',
			'2xl:gap-0.5': txlGap === '0.5',
			'2xl:gap-1': txlGap === '1',
			'2xl:gap-1.5': txlGap === '1.5',
			'2xl:gap-2': txlGap === '2',
			'2xl:gap-2.5': txlGap === '2.5',
			'2xl:gap-3': txlGap === '3',
			'2xl:gap-3.5': txlGap === '3.5',
			'2xl:gap-4': txlGap === '4',
			'2xl:gap-5': txlGap === '5',
			'2xl:gap-6': txlGap === '6',
			'2xl:gap-7': txlGap === '7',
			'2xl:gap-8': txlGap === '8',
			'2xl:gap-9': txlGap === '9',
			'2xl:gap-10': txlGap === '10',
			'2xl:gap-11': txlGap === '11',
			'2xl:gap-12': txlGap === '12',
			'2xl:gap-14': txlGap === '14',
			'2xl:gap-16': txlGap === '16',

			'gap-x-0': gapX === '0',
			'gap-x-px': gapX === 'px',
			'gap-x-0.5': gapX === '0.5',
			'gap-x-1': gapX === '1',
			'gap-x-1.5': gapX === '1.5',
			'gap-x-2': gapX === '2',
			'gap-x-2.5': gapX === '2.5',
			'gap-x-3': gapX === '3',
			'gap-x-3.5': gapX === '3.5',
			'gap-x-4': gapX === '4',
			'gap-x-5': gapX === '5',
			'gap-x-6': gapX === '6',
			'gap-x-7': gapX === '7',
			'gap-x-8': gapX === '8',
			'gap-x-9': gapX === '9',
			'gap-x-10': gapX === '10',
			'gap-x-11': gapX === '11',
			'gap-x-12': gapX === '12',
			'gap-x-14': gapX === '14',
			'gap-x-16': gapX === '16',

			'sm:gap-x-0': smGapX === '0',
			'sm:gap-x-px': smGapX === 'px',
			'sm:gap-x-0.5': smGapX === '0.5',
			'sm:gap-x-1': smGapX === '1',
			'sm:gap-x-1.5': smGapX === '1.5',
			'sm:gap-x-2': smGapX === '2',
			'sm:gap-x-2.5': smGapX === '2.5',
			'sm:gap-x-3': smGapX === '3',
			'sm:gap-x-3.5': smGapX === '3.5',
			'sm:gap-x-4': smGapX === '4',
			'sm:gap-x-5': smGapX === '5',
			'sm:gap-x-6': smGapX === '6',
			'sm:gap-x-7': smGapX === '7',
			'sm:gap-x-8': smGapX === '8',
			'sm:gap-x-9': smGapX === '9',
			'sm:gap-x-10': smGapX === '10',
			'sm:gap-x-11': smGapX === '11',
			'sm:gap-x-12': smGapX === '12',
			'sm:gap-x-14': smGapX === '14',
			'sm:gap-x-16': smGapX === '16',

			'md:gap-x-0': mdGapX === '0',
			'md:gap-x-px': mdGapX === 'px',
			'md:gap-x-0.5': mdGapX === '0.5',
			'md:gap-x-1': mdGapX === '1',
			'md:gap-x-1.5': mdGapX === '1.5',
			'md:gap-x-2': mdGapX === '2',
			'md:gap-x-2.5': mdGapX === '2.5',
			'md:gap-x-3': mdGapX === '3',
			'md:gap-x-3.5': mdGapX === '3.5',
			'md:gap-x-4': mdGapX === '4',
			'md:gap-x-5': mdGapX === '5',
			'md:gap-x-6': mdGapX === '6',
			'md:gap-x-7': mdGapX === '7',
			'md:gap-x-8': mdGapX === '8',
			'md:gap-x-9': mdGapX === '9',
			'md:gap-x-10': mdGapX === '10',
			'md:gap-x-11': mdGapX === '11',
			'md:gap-x-12': mdGapX === '12',
			'md:gap-x-14': mdGapX === '14',
			'md:gap-x-16': mdGapX === '16',

			'lg:gap-x-0': lgGapX === '0',
			'lg:gap-x-px': lgGapX === 'px',
			'lg:gap-x-0.5': lgGapX === '0.5',
			'lg:gap-x-1': lgGapX === '1',
			'lg:gap-x-1.5': lgGapX === '1.5',
			'lg:gap-x-2': lgGapX === '2',
			'lg:gap-x-2.5': lgGapX === '2.5',
			'lg:gap-x-3': lgGapX === '3',
			'lg:gap-x-3.5': lgGapX === '3.5',
			'lg:gap-x-4': lgGapX === '4',
			'lg:gap-x-5': lgGapX === '5',
			'lg:gap-x-6': lgGapX === '6',
			'lg:gap-x-7': lgGapX === '7',
			'lg:gap-x-8': lgGapX === '8',
			'lg:gap-x-9': lgGapX === '9',
			'lg:gap-x-10': lgGapX === '10',
			'lg:gap-x-11': lgGapX === '11',
			'lg:gap-x-12': lgGapX === '12',
			'lg:gap-x-14': lgGapX === '14',
			'lg:gap-x-16': lgGapX === '16',

			'xl:gap-x-0': xlGapX === '0',
			'xl:gap-x-px': xlGapX === 'px',
			'xl:gap-x-0.5': xlGapX === '0.5',
			'xl:gap-x-1': xlGapX === '1',
			'xl:gap-x-1.5': xlGapX === '1.5',
			'xl:gap-x-2': xlGapX === '2',
			'xl:gap-x-2.5': xlGapX === '2.5',
			'xl:gap-x-3': xlGapX === '3',
			'xl:gap-x-3.5': xlGapX === '3.5',
			'xl:gap-x-4': xlGapX === '4',
			'xl:gap-x-5': xlGapX === '5',
			'xl:gap-x-6': xlGapX === '6',
			'xl:gap-x-7': xlGapX === '7',
			'xl:gap-x-8': xlGapX === '8',
			'xl:gap-x-9': xlGapX === '9',
			'xl:gap-x-10': xlGapX === '10',
			'xl:gap-x-11': xlGapX === '11',
			'xl:gap-x-12': xlGapX === '12',
			'xl:gap-x-14': xlGapX === '14',
			'xl:gap-x-16': xlGapX === '16',

			'2xl:gap-x-0': txlGapX === '0',
			'2xl:gap-x-px': txlGapX === 'px',
			'2xl:gap-x-0.5': txlGapX === '0.5',
			'2xl:gap-x-1': txlGapX === '1',
			'2xl:gap-x-1.5': txlGapX === '1.5',
			'2xl:gap-x-2': txlGapX === '2',
			'2xl:gap-x-2.5': txlGapX === '2.5',
			'2xl:gap-x-3': txlGapX === '3',
			'2xl:gap-x-3.5': txlGapX === '3.5',
			'2xl:gap-x-4': txlGapX === '4',
			'2xl:gap-x-5': txlGapX === '5',
			'2xl:gap-x-6': txlGapX === '6',
			'2xl:gap-x-7': txlGapX === '7',
			'2xl:gap-x-8': txlGapX === '8',
			'2xl:gap-x-9': txlGapX === '9',
			'2xl:gap-x-10': txlGapX === '10',
			'2xl:gap-x-11': txlGapX === '11',
			'2xl:gap-x-12': txlGapX === '12',
			'2xl:gap-x-14': txlGapX === '14',
			'2xl:gap-x-16': txlGapX === '16',

			'gap-y-0': gapY === '0',
			'gap-y-px': gapY === 'px',
			'gap-y-0.5': gapY === '0.5',
			'gap-y-1': gapY === '1',
			'gap-y-1.5': gapY === '1.5',
			'gap-y-2': gapY === '2',
			'gap-y-2.5': gapY === '2.5',
			'gap-y-3': gapY === '3',
			'gap-y-3.5': gapY === '3.5',
			'gap-y-4': gapY === '4',
			'gap-y-5': gapY === '5',
			'gap-y-6': gapY === '6',
			'gap-y-7': gapY === '7',
			'gap-y-8': gapY === '8',
			'gap-y-9': gapY === '9',
			'gap-y-10': gapY === '10',
			'gap-y-11': gapY === '11',
			'gap-y-12': gapY === '12',
			'gap-y-14': gapY === '14',
			'gap-y-16': gapY === '16',

			'sm:gap-y-0': smGapY === '0',
			'sm:gap-y-px': smGapY === 'px',
			'sm:gap-y-0.5': smGapY === '0.5',
			'sm:gap-y-1': smGapY === '1',
			'sm:gap-y-1.5': smGapY === '1.5',
			'sm:gap-y-2': smGapY === '2',
			'sm:gap-y-2.5': smGapY === '2.5',
			'sm:gap-y-3': smGapY === '3',
			'sm:gap-y-3.5': smGapY === '3.5',
			'sm:gap-y-4': smGapY === '4',
			'sm:gap-y-5': smGapY === '5',
			'sm:gap-y-6': smGapY === '6',
			'sm:gap-y-7': smGapY === '7',
			'sm:gap-y-8': smGapY === '8',
			'sm:gap-y-9': smGapY === '9',
			'sm:gap-y-10': smGapY === '10',
			'sm:gap-y-11': smGapY === '11',
			'sm:gap-y-12': smGapY === '12',
			'sm:gap-y-14': smGapY === '14',
			'sm:gap-y-16': smGapY === '16',

			'md:gap-y-0': mdGapY === '0',
			'md:gap-y-px': mdGapY === 'px',
			'md:gap-y-0.5': mdGapY === '0.5',
			'md:gap-y-1': mdGapY === '1',
			'md:gap-y-1.5': mdGapY === '1.5',
			'md:gap-y-2': mdGapY === '2',
			'md:gap-y-2.5': mdGapY === '2.5',
			'md:gap-y-3': mdGapY === '3',
			'md:gap-y-3.5': mdGapY === '3.5',
			'md:gap-y-4': mdGapY === '4',
			'md:gap-y-5': mdGapY === '5',
			'md:gap-y-6': mdGapY === '6',
			'md:gap-y-7': mdGapY === '7',
			'md:gap-y-8': mdGapY === '8',
			'md:gap-y-9': mdGapY === '9',
			'md:gap-y-10': mdGapY === '10',
			'md:gap-y-11': mdGapY === '11',
			'md:gap-y-12': mdGapY === '12',
			'md:gap-y-14': mdGapY === '14',
			'md:gap-y-16': mdGapY === '16',

			'lg:gap-y-0': lgGapY === '0',
			'lg:gap-y-px': lgGapY === 'px',
			'lg:gap-y-0.5': lgGapY === '0.5',
			'lg:gap-y-1': lgGapY === '1',
			'lg:gap-y-1.5': lgGapY === '1.5',
			'lg:gap-y-2': lgGapY === '2',
			'lg:gap-y-2.5': lgGapY === '2.5',
			'lg:gap-y-3': lgGapY === '3',
			'lg:gap-y-3.5': lgGapY === '3.5',
			'lg:gap-y-4': lgGapY === '4',
			'lg:gap-y-5': lgGapY === '5',
			'lg:gap-y-6': lgGapY === '6',
			'lg:gap-y-7': lgGapY === '7',
			'lg:gap-y-8': lgGapY === '8',
			'lg:gap-y-9': lgGapY === '9',
			'lg:gap-y-10': lgGapY === '10',
			'lg:gap-y-11': lgGapY === '11',
			'lg:gap-y-12': lgGapY === '12',
			'lg:gap-y-14': lgGapY === '14',
			'lg:gap-y-16': lgGapY === '16',

			'xl:gap-y-0': xlGapY === '0',
			'xl:gap-y-px': xlGapY === 'px',
			'xl:gap-y-0.5': xlGapY === '0.5',
			'xl:gap-y-1': xlGapY === '1',
			'xl:gap-y-1.5': xlGapY === '1.5',
			'xl:gap-y-2': xlGapY === '2',
			'xl:gap-y-2.5': xlGapY === '2.5',
			'xl:gap-y-3': xlGapY === '3',
			'xl:gap-y-3.5': xlGapY === '3.5',
			'xl:gap-y-4': xlGapY === '4',
			'xl:gap-y-5': xlGapY === '5',
			'xl:gap-y-6': xlGapY === '6',
			'xl:gap-y-7': xlGapY === '7',
			'xl:gap-y-8': xlGapY === '8',
			'xl:gap-y-9': xlGapY === '9',
			'xl:gap-y-10': xlGapY === '10',
			'xl:gap-y-11': xlGapY === '11',
			'xl:gap-y-12': xlGapY === '12',
			'xl:gap-y-14': xlGapY === '14',
			'xl:gap-y-16': xlGapY === '16',

			'2xl:gap-y-0': txlGapY === '0',
			'2xl:gap-y-px': txlGapY === 'px',
			'2xl:gap-y-0.5': txlGapY === '0.5',
			'2xl:gap-y-1': txlGapY === '1',
			'2xl:gap-y-1.5': txlGapY === '1.5',
			'2xl:gap-y-2': txlGapY === '2',
			'2xl:gap-y-2.5': txlGapY === '2.5',
			'2xl:gap-y-3': txlGapY === '3',
			'2xl:gap-y-3.5': txlGapY === '3.5',
			'2xl:gap-y-4': txlGapY === '4',
			'2xl:gap-y-5': txlGapY === '5',
			'2xl:gap-y-6': txlGapY === '6',
			'2xl:gap-y-7': txlGapY === '7',
			'2xl:gap-y-8': txlGapY === '8',
			'2xl:gap-y-9': txlGapY === '9',
			'2xl:gap-y-10': txlGapY === '10',
			'2xl:gap-y-11': txlGapY === '11',
			'2xl:gap-y-12': txlGapY === '12',
			'2xl:gap-y-14': txlGapY === '14',
			'2xl:gap-y-16': txlGapY === '16',
		}"
	>
		<slot/>
	</Component>
</template>