Grid.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<{
	is?: string;
	columns?: number | string;
	smColumns?: number | string;
	mdColumns?: number | string;
	lgColumns?: number | string;
	xlColumns?: number | string;
	txlColumns?: number | string;
	rows?: number | string;
	smRows?: number | string;
	mdRows?: number | string;
	lgRows?: number | string;
	xlRows?: number | string;
	txlRows?: number | string;
	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>
	<Component
		:is="is || 'div'"
		class="grid grid-cols-1"
		:class="{
			'grid-cols-1': Number(columns) === 1,
			'grid-cols-2': Number(columns) === 2,
			'grid-cols-3': Number(columns) === 3,
			'grid-cols-4': Number(columns) === 4,
			'grid-cols-5': Number(columns) === 5,
			'grid-cols-6': Number(columns) === 6,
			'grid-cols-7': Number(columns) === 7,
			'grid-cols-8': Number(columns) === 8,
			'grid-cols-9': Number(columns) === 9,
			'grid-cols-10': Number(columns) === 10,
			'grid-cols-11': Number(columns) === 11,
			'grid-cols-12': Number(columns) === 12,

			'sm:grid-cols-1': Number(smColumns) === 1,
			'sm:grid-cols-2': Number(smColumns) === 2,
			'sm:grid-cols-3': Number(smColumns) === 3,
			'sm:grid-cols-4': Number(smColumns) === 4,
			'sm:grid-cols-5': Number(smColumns) === 5,
			'sm:grid-cols-6': Number(smColumns) === 6,
			'sm:grid-cols-7': Number(smColumns) === 7,
			'sm:grid-cols-8': Number(smColumns) === 8,
			'sm:grid-cols-9': Number(smColumns) === 9,
			'sm:grid-cols-10': Number(smColumns) === 10,
			'sm:grid-cols-11': Number(smColumns) === 11,
			'sm:grid-cols-12': Number(smColumns) === 12,

			'md:grid-cols-1': Number(mdColumns) === 1,
			'md:grid-cols-2': Number(mdColumns) === 2,
			'md:grid-cols-3': Number(mdColumns) === 3,
			'md:grid-cols-4': Number(mdColumns) === 4,
			'md:grid-cols-5': Number(mdColumns) === 5,
			'md:grid-cols-6': Number(mdColumns) === 6,
			'md:grid-cols-7': Number(mdColumns) === 7,
			'md:grid-cols-8': Number(mdColumns) === 8,
			'md:grid-cols-9': Number(mdColumns) === 9,
			'md:grid-cols-10': Number(mdColumns) === 10,
			'md:grid-cols-11': Number(mdColumns) === 11,
			'md:grid-cols-12': Number(mdColumns) === 12,

			'lg:grid-cols-1': Number(lgColumns) === 1,
			'lg:grid-cols-2': Number(lgColumns) === 2,
			'lg:grid-cols-3': Number(lgColumns) === 3,
			'lg:grid-cols-4': Number(lgColumns) === 4,
			'lg:grid-cols-5': Number(lgColumns) === 5,
			'lg:grid-cols-6': Number(lgColumns) === 6,
			'lg:grid-cols-7': Number(lgColumns) === 7,
			'lg:grid-cols-8': Number(lgColumns) === 8,
			'lg:grid-cols-9': Number(lgColumns) === 9,
			'lg:grid-cols-10': Number(lgColumns) === 10,
			'lg:grid-cols-11': Number(lgColumns) === 11,
			'lg:grid-cols-12': Number(lgColumns) === 12,

			'xl:grid-cols-1': Number(xlColumns) === 1,
			'xl:grid-cols-2': Number(xlColumns) === 2,
			'xl:grid-cols-3': Number(xlColumns) === 3,
			'xl:grid-cols-4': Number(xlColumns) === 4,
			'xl:grid-cols-5': Number(xlColumns) === 5,
			'xl:grid-cols-6': Number(xlColumns) === 6,
			'xl:grid-cols-7': Number(xlColumns) === 7,
			'xl:grid-cols-8': Number(xlColumns) === 8,
			'xl:grid-cols-9': Number(xlColumns) === 9,
			'xl:grid-cols-10': Number(xlColumns) === 10,
			'xl:grid-cols-11': Number(xlColumns) === 11,
			'xl:grid-cols-12': Number(xlColumns) === 12,

			'2xl:grid-cols-1': Number(txlColumns) === 1,
			'2xl:grid-cols-2': Number(txlColumns) === 2,
			'2xl:grid-cols-3': Number(txlColumns) === 3,
			'2xl:grid-cols-4': Number(txlColumns) === 4,
			'2xl:grid-cols-5': Number(txlColumns) === 5,
			'2xl:grid-cols-6': Number(txlColumns) === 6,
			'2xl:grid-cols-7': Number(txlColumns) === 7,
			'2xl:grid-cols-8': Number(txlColumns) === 8,
			'2xl:grid-cols-9': Number(txlColumns) === 9,
			'2xl:grid-cols-10': Number(txlColumns) === 10,
			'2xl:grid-cols-11': Number(txlColumns) === 11,
			'2xl:grid-cols-12': Number(txlColumns) === 12,

			'grid-rows-1': Number(rows) === 1,
			'grid-rows-2': Number(rows) === 2,
			'grid-rows-3': Number(rows) === 3,
			'grid-rows-4': Number(rows) === 4,
			'grid-rows-5': Number(rows) === 5,
			'grid-rows-6': Number(rows) === 6,
			'grid-rows-7': Number(rows) === 7,
			'grid-rows-8': Number(rows) === 8,
			'grid-rows-9': Number(rows) === 9,
			'grid-rows-10': Number(rows) === 10,
			'grid-rows-11': Number(rows) === 11,
			'grid-rows-12': Number(rows) === 12,

			'sm:grid-rows-1': Number(smRows) === 1,
			'sm:grid-rows-2': Number(smRows) === 2,
			'sm:grid-rows-3': Number(smRows) === 3,
			'sm:grid-rows-4': Number(smRows) === 4,
			'sm:grid-rows-5': Number(smRows) === 5,
			'sm:grid-rows-6': Number(smRows) === 6,
			'sm:grid-rows-7': Number(smRows) === 7,
			'sm:grid-rows-8': Number(smRows) === 8,
			'sm:grid-rows-9': Number(smRows) === 9,
			'sm:grid-rows-10': Number(smRows) === 10,
			'sm:grid-rows-11': Number(smRows) === 11,
			'sm:grid-rows-12': Number(smRows) === 12,

			'md:grid-rows-1': Number(mdRows) === 1,
			'md:grid-rows-2': Number(mdRows) === 2,
			'md:grid-rows-3': Number(mdRows) === 3,
			'md:grid-rows-4': Number(mdRows) === 4,
			'md:grid-rows-5': Number(mdRows) === 5,
			'md:grid-rows-6': Number(mdRows) === 6,
			'md:grid-rows-7': Number(mdRows) === 7,
			'md:grid-rows-8': Number(mdRows) === 8,
			'md:grid-rows-9': Number(mdRows) === 9,
			'md:grid-rows-10': Number(mdRows) === 10,
			'md:grid-rows-11': Number(mdRows) === 11,
			'md:grid-rows-12': Number(mdRows) === 12,

			'lg:grid-rows-1': Number(lgRows) === 1,
			'lg:grid-rows-2': Number(lgRows) === 2,
			'lg:grid-rows-3': Number(lgRows) === 3,
			'lg:grid-rows-4': Number(lgRows) === 4,
			'lg:grid-rows-5': Number(lgRows) === 5,
			'lg:grid-rows-6': Number(lgRows) === 6,
			'lg:grid-rows-7': Number(lgRows) === 7,
			'lg:grid-rows-8': Number(lgRows) === 8,
			'lg:grid-rows-9': Number(lgRows) === 9,
			'lg:grid-rows-10': Number(lgRows) === 10,
			'lg:grid-rows-11': Number(lgRows) === 11,
			'lg:grid-rows-12': Number(lgRows) === 12,

			'xl:grid-rows-1': Number(xlRows) === 1,
			'xl:grid-rows-2': Number(xlRows) === 2,
			'xl:grid-rows-3': Number(xlRows) === 3,
			'xl:grid-rows-4': Number(xlRows) === 4,
			'xl:grid-rows-5': Number(xlRows) === 5,
			'xl:grid-rows-6': Number(xlRows) === 6,
			'xl:grid-rows-7': Number(xlRows) === 7,
			'xl:grid-rows-8': Number(xlRows) === 8,
			'xl:grid-rows-9': Number(xlRows) === 9,
			'xl:grid-rows-10': Number(xlRows) === 10,
			'xl:grid-rows-11': Number(xlRows) === 11,
			'xl:grid-rows-12': Number(xlRows) === 12,

			'2xl:grid-rows-1': Number(txlRows) === 1,
			'2xl:grid-rows-2': Number(txlRows) === 2,
			'2xl:grid-rows-3': Number(txlRows) === 3,
			'2xl:grid-rows-4': Number(txlRows) === 4,
			'2xl:grid-rows-5': Number(txlRows) === 5,
			'2xl:grid-rows-6': Number(txlRows) === 6,
			'2xl:grid-rows-7': Number(txlRows) === 7,
			'2xl:grid-rows-8': Number(txlRows) === 8,
			'2xl:grid-rows-9': Number(txlRows) === 9,
			'2xl:grid-rows-10': Number(txlRows) === 10,
			'2xl:grid-rows-11': Number(txlRows) === 11,
			'2xl:grid-rows-12': Number(txlRows) === 12,

			'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>