bonkers-ui 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",

package/src/_styles/variables/shadow.css

@@ -1,7 +1,7 @@
 @layer base {
 	:root {
 		/* shadow sizes */
-		--shadow-size-m: 0 2px 4px 0 rgb(180 184 205 / 50%);
+		--shadow-size-md: 0 2px 4px 0 rgb(180 184 205 / 50%);
 		--shadow-border-primary: 0 0 0 4px rgb(69 158 74 / 50%);
 		--shadow-border-secondary: 0 0 0 4px rgb(223 225 233 / 50%);
 	}

package/src/components/ui-badge/ui-badge.stories.ts

@@ -6,10 +6,6 @@ export default {
 	title: "Components/ui-badge",
 	component: UiBadge,
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		kind: {
 			control: { type: "select" },
 			options: Object.values(EBadgeKind),

package/src/components/ui-badge/ui-badge.vue

@@ -2,7 +2,6 @@
 	<span
 		class="ui-badge rounded-full inline-flex items-center"
 		:class="[
-			className,
 			(!size || size === EBadgeSize.SMALL) && 'px-xs py-xxs',
 			(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-alt-300 text-primary-alt-700',
 
@@ -15,7 +14,7 @@
 	>
 		<ui-icon
 			v-if="icon"
-			class-name="mr-xxs"
+			class="mr-xxs"
 			:size="ESize.SM"
 			:icon-name="icon"
 		/>
@@ -24,7 +23,7 @@
 			is="span"
 			:size="getBadgeSize"
 			:weight="ETextWeight.SEMI_BOLD"
-			class-name="whitespace-nowrap"
+			class="whitespace-nowrap"
 		>
 			<slot />
 		</ui-typography>
@@ -39,7 +38,6 @@
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 
 	const props = defineProps<{
-		className?: string;
 		size?: EBadgeSize;
 		kind?: EBadgeKind;
 		icon?: TIconName;

package/src/components/ui-ber-rank/ui-ber-rank.stories.ts

@@ -5,10 +5,6 @@ export default {
 	title: "Components/ui-ber-rank",
 	component: UiBerRank,
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		rank:{
 			control: { type: "number" },
 			description: "The Element rank from 0 to 15",

package/src/components/ui-ber-rank/ui-ber-rank.vue

@@ -18,7 +18,7 @@
 				:weight="ETextWeight.BOLD"
 				:size="ETypographySizes.XXXL"
 				:text-transform="ETextTransform.UPPERCASE"
-				class-name="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+				class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
 			>
 				ber
 			</ui-typography>
@@ -45,7 +45,7 @@
 				:weight="ETextWeight.BOLD"
 				:size="ETypographySizes.XXXL"
 				:text-transform="ETextTransform.UPPERCASE"
-				class-name="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+				class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
 			>
 				{{ berRankDictionary[+rank]?.text || berRankDictionary[0].text }}
 			</ui-typography>

package/src/components/ui-button/ui-button.stories.ts

@@ -8,11 +8,6 @@ export default {
 	component: UiButton,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		className: {
-			control: { type: "select" },
-			options: ["small", "medium", "large"],
-			description: "The button size",
-		},
 		kind: {
 			control: { type: "select" },
 			options: Object.values(EButtonTypes),
@@ -60,8 +55,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `
-		<ui-button :className="args.className"
-				   :kind="args.kind"
+		<ui-button :kind="args.kind"
 				   :size="args.size"
 				   :fullWidth="args.fullWidth"
 				   :disabled="args.disabled"
@@ -115,7 +109,6 @@ export const Primary = Template.bind({});
 
 Primary.args = {
 	...Primary,
-	className: "medium",
 	kind: EButtonTypes.PRIMARY,
 	size: EButtonSizes.MEDIUM,
 	fullWidth: false,

package/src/components/ui-button/ui-button.test.ts

@@ -5,9 +5,11 @@ describe("VButton.test.ts", () => {
 	it("renders props.msg when passed", () => {
 		const className = "message";
 		const wrapper = mount(UiButton, {
-			props: { className },
+			propsData: {
+				class: className
+			}
 		});
 
 		expect(wrapper.classes()).toContain(className);
-	},);
-},);
+	});
+});

package/src/components/ui-button/ui-button.vue

@@ -21,7 +21,6 @@
 			size === EButtonSizes.LARGE && 'py-md px-md',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',
-			className
 		]"
 	>
 		<span
@@ -50,7 +49,6 @@
 	import { EButtonSizes, EButtonTypes } from "./_typings";
 	import { useSlots } from "vue";
 	type TProps = {
-		className?: string;
 		kind?: EButtonTypes;
 		size?: EButtonSizes;
 		fullWidth?: boolean;

package/src/components/ui-card-cta/ui-card-cta.stories.ts

@@ -9,11 +9,6 @@ export default {
 	component: UiCardCta,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-
 		invertOrder: {
 			control: { type: "boolean" },
 			description: "The Element order",
@@ -40,7 +35,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	template: `
 		<ui-card-cta v-bind="args">
 			<template v-slot:icon>
-				<ui-icon :size="ESize.MD" has-wrapper class-name="text-white" :icon-name="['far', 'fa-face-smile']" />
+				<ui-icon :size="ESize.MD" has-wrapper class="text-white" :icon-name="['far', 'fa-face-smile']" />
 			</template>
 
 			<template v-slot:title>

package/src/components/ui-card-cta/ui-card-cta.vue

@@ -2,7 +2,6 @@
 	<button
 		class="ui-card-cta outline-0 border border-secondary-alt-500 rounded-2xl p-sm shadow-md hover:border-secondary-700 focus:shadow-border-primary active:bg-secondary-alt-200 disabled:bg-secondary-alt-200"
 		:disabled="disabled"
-		:class="[className]"
 	>
 		<span
 			class="ui-card-cta__wrapper grid gap-sm items-center"
@@ -19,7 +18,7 @@
 				<ui-typography
 					:kind="EColors.SECONDARY"
 					:weight="ETextWeight.SEMI_BOLD"
-					class-name="mb-xxs"
+					class="mb-xxs"
 				>
 					<slot name="title" />
 				</ui-typography>
@@ -44,7 +43,6 @@
 	const slots = useSlots();
 
 	defineProps<{
-		className?: string;
 		invertOrder?: boolean;
 		disabled?: boolean;
 	}>();

package/src/components/ui-card-result/ui-card-result.stories.ts

@@ -11,10 +11,6 @@ export default {
 	title: "Components/ui-card-result",
 	component: UiCardResult,
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		exclusiveText: {
 			control: { type: "boolean" },
 			description: "Whether to show the exclusive text",
@@ -69,7 +65,7 @@ const Template: Story<TComponentProps> = (args) => ({
 				<ul>
 					<ui-list-item
 						v-for="item in 5"
-						class-name="mb-xs"
+						class="mb-xs"
 						:key="item"
 						:icon="['far', 'face-smile']"
 					>
@@ -81,7 +77,7 @@ const Template: Story<TComponentProps> = (args) => ({
 					:weight="ETextWeight.BOLD"
 					:size="ETypographySizes.LG"
 					:align="ETextAlign.RIGHT"
-					class-name="mb-xs"
+					class="mb-xs"
 				>
 					€1004.63 p/m
 				</ui-typography>

package/src/components/ui-card-result/ui-card-result.vue

@@ -5,7 +5,7 @@
 			class="ui-card-result__exclusive bg-primary rounded-2xl px-sm pb-lg -mb-lg"
 		>
 			<ui-typography
-				class-name="py-xs"
+				class="py-xs"
 				line-height
 				:size="ETypographySizes.XXS"
 				:kind="EColors.WHITE"
@@ -27,7 +27,7 @@
 			<main class="p-sm bg-white w-full">
 				<ui-typography
 					v-if="header"
-					class-name="mb-xs"
+					class="mb-xs"
 					:size="ETypographySizes.SM"
 					:weight="ETextWeight.SEMI_BOLD"
 				>
@@ -42,7 +42,7 @@
 			class="ui-card-result__exclusive_bottom bg-secondary rounded-2xl px-sm pt-lg -mt-lg"
 		>
 			<ui-typography
-				class-name="py-xs"
+				class="py-xs"
 				:size="ETypographySizes.XXS"
 				:kind="EColors.WHITE"
 				:align="ETextAlign.CENTER"

package/src/components/ui-card-simple/ui-card-simple.stories.ts

@@ -4,13 +4,7 @@ import type { Story } from "@storybook/vue3";
 export default {
 	title: "Components/ui-card-simple",
 	component: UiCardSimple,
-	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-
-	},
+	argTypes: {},
 	args: {
 		slot: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
 	},

package/src/components/ui-card-simple/ui-card-simple.vue

@@ -1,7 +1,6 @@
 <template>
 	<div
-		class="ui-card-simple rounded-3xl shadow-md py-md px-sm"
-		:class="className"
+		class="ui-card-simple rounded-3xl shadow-md py-md px-sm bg-white"
 	>
 		<ui-typography
 			v-if="slots.title"
@@ -28,8 +27,4 @@
 	import { useSlots } from "vue";
 
 	const slots = useSlots();
-
-	defineProps<{
-		className? : string;
-	}>();
 </script>

package/src/components/ui-checkbox/ui-checkbox.stories.ts

@@ -8,10 +8,6 @@ export default {
 	component: UiCheckbox,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		justify: {
 			control: { type: "select" },
 			options: Object.values(EJustify),

package/src/components/ui-checkbox/ui-checkbox.vue

@@ -10,7 +10,6 @@
 			justify === EJustify.EVENLY && 'justify-evenly',
 			justify === EJustify.CENTER && 'justify-center',
 			disabled && 'ui-checkbox_disabled',
-			className
 		]"
 	>
 		<input
@@ -58,7 +57,6 @@
 
 	defineProps<{
 		modelValue: boolean;
-		className?: string;
 		justify?: EJustify;
 		invertOrder?: boolean;
 		disabled?: boolean;

package/src/components/ui-icon/_typings.ts

@@ -1,3 +1,10 @@
-export type TIconPrefix = "fab" | "far" | "fas" | "fal" | "fad" | "fat";
+export enum EIconType {
+	FAR = "far",
+	FAS = "fas",
+	FAB = "fab",
+	FAL = "fal",
+	FAD = "fad",
+	FAT = "fat",
+}
 
-export type TIconName = [TIconPrefix, string];
+export type TIconName = [EIconType, string];

package/src/components/ui-icon/ui-icon.stories.ts

@@ -7,10 +7,6 @@ export default {
 	component: UiIcon,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		hasWrapper:{
 			control: { type: "boolean" },
 			description: "The Icon show wrapper",

package/src/components/ui-icon/ui-icon.vue

@@ -11,7 +11,6 @@
 			size === ESize.XL && 'h-xl w-xl',
 			size === ESize.XXL && 'h-xxl w-xxl',
 			hasWrapper && 'p-sm bg-primary rounded-2xl',
-			className
 		]"
 	/>
 </template>
@@ -21,7 +20,6 @@
 	import type { TIconName } from "./_typings";
 
 	defineProps<{
-		className?: string;
 		hasWrapper?: boolean;
 		size: ESize;
 		iconName: TIconName;

package/src/components/ui-input/ui-input.stories.ts

@@ -9,10 +9,6 @@ export default {
 	component: UiInput,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "Custom class",
-		},
 		placeholder: {
 			control: { type: "text" },
 			description: "Placeholder",

package/src/components/ui-input/ui-input.vue

@@ -3,7 +3,7 @@
 		<ui-typography
 			v-if="heading"
 			:weight="ETextWeight.BOLD"
-			class-name="mb-sm"
+			class="mb-sm"
 		>
 			{{ heading }}
 		</ui-typography>
@@ -17,7 +17,6 @@
 				disabled && 'border-secondary-alt-300 bg-secondary-alt-200',
 
 				fullWidth && 'max-w-full',
-				className,
 			]"
 		>
 			<div class="icon-wrapper">
@@ -37,7 +36,7 @@
 		<ui-typography
 			v-if="subLabel"
 			:size="ETypographySizes.SM"
-			class-name="mt-sm"
+			class="mt-sm"
 		>
 			{{ subLabel }}
 		</ui-typography>
@@ -54,7 +53,6 @@
 		disabled?: boolean;
 		fullWidth?: boolean;
 		kind?: EInputTypes;
-		className?: string;
 		heading?: string;
 		subLabel?: string;
 	}>();

package/src/components/ui-input-range/ui-input-range.stories.ts

@@ -6,10 +6,6 @@ export default {
 	title: "Components/ui-input-range",
 	component: UiInputRange,
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		min:{
 			control: { type: "number" },
 			description: "The Element min value",

package/src/components/ui-input-range/ui-input-range.vue

@@ -1,7 +1,6 @@
 <template>
 	<div
 		class="ui-input-range relative h-lg"
-		:class="className"
 	>
 		<input
 			class="appearance-none cursor-pointer bg-transparent w-full h-full"
@@ -30,7 +29,6 @@
 		min: string | number;
 		max: string | number;
 		step: string | number;
-		className?: string;
 	}>();
 
 	defineEmits<{

package/src/components/ui-list-item/ui-list-item.stories.ts

@@ -4,12 +4,7 @@ import type { Story } from "@storybook/vue3";
 export default {
 	title: "Components/ui-list-item",
 	component: UiIconList,
-	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-	},
+	argTypes: {},
 	args: {
 		slot: "default text",
 	}

package/src/components/ui-list-item/ui-list-item.vue

@@ -2,7 +2,7 @@
 	<li class="ui-icon-list">
 		<ui-icon
 			v-if="icon"
-			class-name="mr-xs"
+			class="mr-xs"
 			:size="ESize.SM"
 			:icon-name="icon"
 		/>

package/src/components/ui-radio/ui-radio.stories.ts

@@ -8,10 +8,6 @@ export default {
 	component: UiRadio,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		justify: {
 			control: { type: "select" },
 			options: Object.values(EJustify),

package/src/components/ui-radio/ui-radio.vue

@@ -10,7 +10,6 @@
 			justify === EJustify.EVENLY && 'justify-evenly',
 			justify === EJustify.CENTER && 'justify-center',
 			disabled && 'pointer-events-none',
-			className
 		]"
 	>
 		<input
@@ -39,7 +38,6 @@
 	const slots = useSlots();
 	const props = defineProps<{
 		modelValue: string;
-		className?: string;
 		name: string;
 		value: string;
 		justify?: EJustify;

package/src/components/ui-radio-list-fancy/ui-radio-item/ui-radio-item.vue

@@ -18,7 +18,7 @@
 		<ui-icon
 			:icon-name="iconName"
 			:size="ESize.MD"
-			class-name="mb-md"
+			class="mb-md"
 		/>
 		<ui-typography
 			:size="ETypographySizes.SM"
@@ -38,7 +38,6 @@
 	import { EColors } from "../../../_types/colors";
 
 	const props = defineProps<{
-		className?: string;
 		modelValue: string;
 		name: string;
 		value: string;

package/src/components/ui-radio-list-fancy/ui-radio-list-fancy.stories.ts

@@ -6,13 +6,7 @@ export default {
 	title: "Components/ui-radio-list-fancy",
 	component: UiRadioFancy,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-
-	},
+	argTypes: {},
 	args: {},
 };
 

package/src/components/ui-radio-list-fancy/ui-radio-list-fancy.vue

@@ -1,7 +1,6 @@
 <template>
 	<div
 		class="ui-radio-fancy grid gap-sm"
-		:class="className"
 	>
 		<ui-radio-item
 			v-for="(item, index) in items"
@@ -10,7 +9,7 @@
 			:title="item.title"
 			:value="String(index)"
 			:name="name"
-			:icon-name="['far','face-smile']"
+			:icon-name="[EIconType.FAR,'face-smile']"
 			@update:model-value="$emit('update:modelValue', $event)"
 		/>
 	</div>
@@ -19,9 +18,9 @@
 <script lang="ts" setup>
 	import UiRadioItem from "./ui-radio-item";
 	import { ref, watch } from "vue";
+	import { EIconType } from "../ui-icon/_typings";
 
 	const props = defineProps< {
-		className? : string;
 		name: string;
 		modelValue: string;
 	}>();
@@ -31,15 +30,15 @@
 	const items = [
 		{
 			title: "title",
-			iconName: ["far", "face-smile"],
+			iconName: [EIconType.FAR, "face-smile"],
 		},
 		{
 			title: "title",
-			iconName: ["far", "face-smile"],
+			iconName: [EIconType.FAR, "face-smile"],
 		},
 		{
 			title: "title",
-			iconName: ["far", "face-smile"],
+			iconName: [EIconType.FAR, "face-smile"],
 		},
 	];
 

package/src/components/ui-ripple/ui-ripple.stories.ts

@@ -8,12 +8,7 @@ export default {
 	title: "Components/ui-ripple",
 	component: UiRipple,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-	},
+	argTypes: {},
 	args: {
 		// slot: "Some text",
 	},
@@ -45,7 +40,7 @@ const Template2: Story<TComponentProps> = (args) => ({
 	},
 	template: `
 		<div class="flex">
-		<ui-button class-name="relative">
+		<ui-button class="relative">
 			<ui-typography is="div">
 				<ui-ripple v-bind="args" />
 				hello world

package/src/components/ui-ripple/ui-ripple.vue

@@ -2,7 +2,6 @@
 	<div
 		ref="tiBtn"
 		class="ui-ripple"
-		:class="className"
 		@click="animateRipple"
 	>
 		<slot />
@@ -36,10 +35,6 @@
 	const tiBtn = ref<HTMLDivElement>();
 	const inputsRefs = ref<VNodeRef>();
 
-	defineProps<{
-		className?: string;
-	}>();
-
 	const animateRipple = (e:MouseEvent)=> {
 		if(tiBtn.value){
 			const pos = tiBtn.value.getBoundingClientRect();

package/src/components/ui-select/ui-select.stories.ts

@@ -6,10 +6,6 @@ export default {
 	title: "Components/ui-select",
 	component: UiSelect,
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		disabled: {
 			control: { type: "boolean" },
 			description: "The Element disabled state",

package/src/components/ui-select/ui-select.vue

@@ -3,7 +3,7 @@
 		<ui-typography
 			v-if="heading"
 			:weight="ETextWeight.SEMI_BOLD"
-			class-name="mb-sm"
+			class="mb-sm"
 		>
 			{{ heading }}
 		</ui-typography>
@@ -32,7 +32,7 @@
 		<ui-typography
 			v-if="subLabel"
 			:size="ETypographySizes.SM"
-			class-name="mt-sm"
+			class="mt-sm"
 		>
 			{{ subLabel }}
 		</ui-typography>

package/src/components/ui-tabs/ui-tabs.stories.ts

@@ -5,12 +5,7 @@ import type { Story } from "@storybook/vue3";
 export default {
 	title: "Components/ui-tabs",
 	component: UiTabs,
-	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-	},
+	argTypes: {},
 };
 
 type TComponentProps = InstanceType<typeof UiTabs>["$props"];

package/src/components/ui-toggle/ui-toggle.stories.ts

@@ -6,10 +6,6 @@ export default {
 	title: "Components/ui-toggle",
 	component: UiToggle,
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		disabled: {
 			control: { type: "boolean" },
 			description: "The Element disabled state",

package/src/components/ui-toggle/ui-toggle.vue

@@ -1,11 +1,10 @@
 <template>
 	<div
 		class="ui-toggle"
-		:class="className"
 	>
 		<ui-typography
 			:weight="ETextWeight.BOLD"
-			class-name="mb-sm"
+			class="mb-sm"
 		>
 			{{ header }}
 		</ui-typography>
@@ -49,7 +48,7 @@
 
 			<ui-typography
 				:size="ETypographySizes.SM"
-				class-name="w-full"
+				class="w-full"
 				line-height
 			>{{ title }}</ui-typography>
 		</label>
@@ -60,7 +59,6 @@
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 
 	defineProps<{
-		className?: string;
 		header?: string;
 		title?: string;
 		modelValue: boolean;

package/src/components/ui-typography/ui-typography.stories.ts

@@ -8,10 +8,6 @@ export default {
 	component: UiTypography,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
 		is: {
 			control: { type: "text" },
 			description: "The Element component or tag",

package/src/components/ui-typography/ui-typography.vue

@@ -86,8 +86,6 @@
 
 			lineHeight && 'ui-typography_line-height',
 			underline && 'underline',
-
-			className
 		]"
 	>
 		<slot />
@@ -99,7 +97,6 @@
 	import { EColors } from "../../_types/colors";
 
 	defineProps<{
-		className?: string;
 		align?: ETextAlign;
 		size?: ETypographySizes;
 		kind?: EColors;

package/src/components/ui-verification-input/ui-verification-input.stories.ts

@@ -5,10 +5,6 @@ export default {
 	component: UiVerificationInput,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "Inputs custom classes",
-		},
 		inputsCount: {
 			control: { type: "number" },
 			description: "Number of inputs",

package/src/components/ui-verification-input/ui-verification-input.vue

@@ -1,7 +1,6 @@
 <template>
 	<div
 		class="inputs grid"
-		:class="className"
 	>
 		<div
 			v-for="(_, index) in inputsCount"
@@ -27,7 +26,6 @@
 	import { ref } from "vue";
 
 	type TProps = {
-		className?: string;
 		inputsCount: number;
 		type?: "text";
 	}