bonkers-ui 1.0.53 → 1.0.55

package/.eslintrc.js

@@ -1,51 +1,92 @@
 module.exports = {
-	"root": true,
-	"env": {
-		"browser": true,
-		"es2021": true,
-		"node": true
+	root: true,
+	env: {
+		browser: true,
+		es2021: true,
+		node: true,
 	},
-	"extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "plugin:storybook/recommended"],
-	"parserOptions": {
-		"ecmaVersion": 2021
+	extends: [
+		"plugin:vue/vue3-recommended",
+		"eslint:recommended",
+		"@vue/typescript/recommended",
+		"plugin:storybook/recommended",
+		"plugin:tailwindcss/recommended"
+	],
+	parserOptions: {
+		ecmaVersion: 2021,
 	},
-	"parser": "vue-eslint-parser",
-	"plugins": [],
-	"overrides": [{
-		"files": ["*.vue"],
-		"rules": {
-			"indent": "off"
-		}
-	}],
-	"rules": {
-		"indent": ["error", "tab", {
-			"VariableDeclarator": "first",
-			"MemberExpression": 1,
-			"ObjectExpression": 1
-		}],
-		"vue/html-indent": ["error", "tab", {
-			"attribute": 1,
-			"baseIndent": 1,
-			"closeBracket": 0,
-			"alignAttributesVertically": true
-		}],
-		"vue/script-indent": ["error", "tab", {
-			"baseIndent": 1,
-			"switchCase": 1
-		}],
+	parser: "vue-eslint-parser",
+	plugins: [
+		"tailwindcss",
+	],
+	overrides: [
+		{
+			files: ["*.vue"],
+			rules: {
+				indent: "off",
+			},
+		},
+	],
+	rules: {
+		indent: [
+			"error",
+			"tab",
+			{
+				VariableDeclarator: "first",
+				MemberExpression: 1,
+				ObjectExpression: 1,
+			},
+		],
+		"vue/html-indent": [
+			"error",
+			"tab",
+			{
+				attribute: 1,
+				baseIndent: 1,
+				closeBracket: 0,
+				alignAttributesVertically: true,
+			},
+		],
+		"vue/script-indent": [
+			"error",
+			"tab",
+			{
+				baseIndent: 1,
+				switchCase: 1,
+			},
+		],
 		"eol-last": ["error", "always"],
 		"no-console": "warn",
 		"no-debugger": "warn",
 		"vue/multi-word-component-names": 0,
 		"object-curly-spacing": ["error", "always"],
-		"quotes": ["error", "double", {
-			"avoidEscape": true,
-			"allowTemplateLiterals": true
+		quotes: [
+			"error",
+			"double",
+			{
+				avoidEscape: true,
+				allowTemplateLiterals: true,
+			},
+		],
+		"no-multiple-empty-lines": [
+			"error",
+			{
+				max: 1,
+				maxEOF: 0,
+			},
+		],
+		semi: ["error", "always"],
+		"max-len": ["error", {
+			"code": 120,
+			"tabWidth": 4,
+			"ignoreStrings": true,
+			"ignoreTemplateLiterals": true,
+			"ignoreRegExpLiterals": true,
+			"ignoreUrls": true,
+			"ignoreComments": true,
+			"ignoreTrailingComments": true,
+			ignorePattern: 'd="([\\s\\S]*?)"',
 		}],
-		"no-multiple-empty-lines": ["error", {
-			"max": 1,
-			"maxEOF": 0
-		}],
-		semi: ["error", "always"]
-	}
+		"tailwindcss/no-custom-classname": "off",
+	},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.53",
+    "version": "v1.0.55",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",
@@ -19,50 +19,51 @@
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
+        "eslint-plugin-tailwindcss": "^3.13.0",
         "storybook-addon-designs": "^6.3.1",
         "vue": "^3.3.4",
-        "vue-router": "^4.2.2"
+        "vue-router": "^4.2.4"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.0.20",
-        "@storybook/addon-links": "^7.0.20",
-        "@storybook/addon-mdx-gfm": "^7.0.20",
-        "@storybook/vue3": "^7.0.20",
-        "@storybook/vue3-vite": "^7.0.20",
+        "@storybook/addon-essentials": "^7.0.27",
+        "@storybook/addon-links": "^7.0.27",
+        "@storybook/addon-mdx-gfm": "^7.0.27",
+        "@storybook/vue3": "^7.0.27",
+        "@storybook/vue3-vite": "^7.0.27",
         "@typescript-eslint/eslint-plugin": "^5.59.9",
         "@typescript-eslint/parser": "^5.59.9",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vue/eslint-config-typescript": "^11.0.3",
-        "@vue/test-utils": "^2.3.2",
-        "eslint": "8.42.0",
+        "@vue/test-utils": "^2.4.0",
+        "eslint": "8.44.0",
         "eslint-plugin-storybook": "^0.6.12",
-        "eslint-plugin-vue": "^9.14.1",
+        "eslint-plugin-vue": "^9.15.1",
         "gh-pages": "^5.0.0",
         "husky": "4.3.8",
         "jsdom": "^22.1.0",
-        "lint-staged": "^13.2.2",
-        "postcss": "^8.4.24",
+        "lint-staged": "^13.2.3",
+        "postcss": "^8.4.26",
         "postcss-html": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.0.20",
+        "storybook": "^7.0.27",
         "storybook-tailwind-dark-mode": "^1.0.22",
-        "stylelint": "^15.7.0",
-        "stylelint-config-recommended": "^12.0.0",
-        "stylelint-config-recommended-vue": "^1.4.0",
-        "stylelint-config-standard": "^33.0.0",
-        "tailwindcss": "^3.3.2",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-recommended-vue": "^1.5.0",
+        "stylelint-config-standard": "^34.0.0",
+        "tailwindcss": "^3.3.3",
         "ts-node": "^10.9.1",
-        "typescript": "^5.1.3",
-        "vite": "^4.3.9",
-        "vitest": "^0.32.0",
-        "vue-eslint-parser": "^9.3.0",
+        "typescript": "^5.1.6",
+        "vite": "^4.4.4",
+        "vitest": "^0.33.0",
+        "vue-eslint-parser": "^9.3.1",
         "vue-loader": "^17.2.2",
-        "vue-tsc": "^1.6.5"
+        "vue-tsc": "^1.8.4"
     },
     "lint-staged": {
         "*.{ts,tsx,vue}": [
-            "eslint --fix",
+            "yarn eslint --fix",
             "bash -c 'yarn typecheck'"
         ],
         "*.{css,vue,tsx}": "stylelint --fix"

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

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-alert flex gap-sm p-sm border rounded-lg bg-white"
+		class="ui-alert flex gap-sm rounded-lg border bg-white p-sm"
 		:class="[
 			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
 			kind === EAlertTypes.WARNING && 'border-warning',

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

@@ -16,16 +16,11 @@ export default {
 			options: Object.values(EBadgeSize),
 			description: "The Element size",
 		},
-		more: {
-			control: { type: "boolean" },
-			description: "The Element more",
-		}
 	},
 	args: {
 		slot: "default text",
 		kind: EBadgeKind.PRIMARY,
 		size: EBadgeSize.SMALL,
-		more: false,
 	},
 };
 

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

@@ -1,11 +1,8 @@
 <template>
 	<div
-		class="ui-badge relative text-white overflow-hidden"
-		:class="[
-			more && 'mr-sm',
-		]"
+		class="ui-badge relative overflow-hidden text-white"
 	>
-		<div class="relative z-[1] flex items-center content-center gap-xxs px-xs py-xxs">
+		<div class="relative z-[1] flex content-center items-center gap-xxs px-xs py-xxs">
 			<ui-icon
 				v-if="icon"
 				:size="ESize.XS"
@@ -19,7 +16,7 @@
 				class="whitespace-nowrap"
 				line-height
 				:class="[
-					elipsis && 'overflow-hidden overflow-ellipsis',
+					elipsis && 'overflow-hidden text-ellipsis',
 				]"
 			>
 				<slot />
@@ -27,24 +24,13 @@
 		</div>
 
 		<div
-			v-if="more"
-			class="absolute top-0 left-[15px] w-full h-full bg-primary-300 rounded-full border border-white"
-		/>
-
-		<div
-			v-if="more"
-			class="absolute top-0 left-xs w-full h-full bg-primary-400 rounded-full border border-white"
-		/>
-
-		<div
-			class="absolute rounded-full top-0 left-0 w-full h-full"
+			class="absolute left-0 top-0 h-full w-full rounded-full"
 			:class="[
 				(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-600',
 
 				kind === EBadgeKind.ERROR && 'bg-error-600',
 				kind === EBadgeKind.ACCENT && 'bg-accent-600',
 				elipsis && 'max-w-full',
-				more && 'border border-white',
 			]"
 		/>
 	</div>
@@ -62,7 +48,6 @@
 		kind?: EBadgeKind;
 		icon?: TIconName;
 		elipsis?: boolean;
-		more?: boolean;
 	}>();
 
 	const slots = useSlots();

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

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

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

@@ -4,6 +4,6 @@ import UiButton from "./ui-button.vue";
 test("VButton.test.ts", () => {
 	expect(UiButton).toBeTruthy();
 
-	const container = mount(UiButton as any);
+	const container = mount(UiButton);
 	expect(container).toBeTruthy();
 });

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

@@ -1,26 +1,48 @@
 <template>
 	<button
-		class="ui-button grid justify-center items-center grid-flow-col text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation "
+		class="ui-button
+			text-base
+			grid
+			touch-manipulation
+			grid-flow-col
+			items-center
+			justify-center
+			whitespace-nowrap
+			rounded-lg
+			font-bold
+			leading-none
+			"
 		:disabled="disabled"
 		:class="[
 			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
 			kind === EButtonTypes.SECONDARY
-				&& 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
-			kind === EButtonTypes.WARNING && 'text-white bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
-			kind === EButtonTypes.ERROR && 'text-white bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
+				&& 'bg-secondary text-white hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
+			kind === EButtonTypes.WARNING
+				&& 'bg-warning text-white hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
+			kind === EButtonTypes.ERROR
+				&& 'bg-error text-white hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
 			kind === EButtonTypes.PRIMARY_OVERLAY
-				&& 'text-primary border border-primary hover:bg-primary-600 hover:border-transparent hover:text-white active:bg-primary-700 active:border-transparent active:text-white disabled:text-primary-300 disabled:border-primary-300',
+				&& 'border border-primary text-primary hover:border-transparent hover:bg-primary-600'
+					+ 'hover:text-white active:border-transparent active:bg-primary-700'
+					+ 'active:text-white disabled:border-primary-300 disabled:text-primary-300',
 			kind === EButtonTypes.SECONDARY_OVERLAY
-				&& 'text-secondary border border-secondary hover:bg-secondary-600 hover:border-transparent hover:text-white active:bg-secondary-700 active:border-transparent active:text-white disabled:text-secondary-300 disabled:border-secondary-300',
+				&& 'border border-secondary text-secondary hover:border-transparent hover:bg-secondary-600'
+					+ 'hover:text-white active:border-transparent active:bg-secondary-700'
+					+ 'active:text-white disabled:border-secondary-300 disabled:text-secondary-300',
 			kind === EButtonTypes.WARNING_OVERLAY
-				&& 'text-warning border border-warning hover:bg-warning-600 hover:border-transparent hover:text-white active:bg-warning-700 active:border-transparent active:text-white disabled:text-warning-300 disabled:border-warning-300',
+				&& 'border border-warning text-warning hover:border-transparent hover:bg-warning-600'
+					+ 'hover:text-white active:border-transparent active:bg-warning-700'
+					+ 'active:text-white disabled:border-warning-300 disabled:text-warning-300',
 			kind === EButtonTypes.ERROR_OVERLAY
-				&& 'text-error border border-error hover:bg-error-600 hover:border-transparent hover:text-white active:bg-error-700 active:border-transparent active:text-white disabled:text-error-300 disabled:border-error-300',
-			kind === EButtonTypes.LINK && 'text-accent-alt hover:text-accent-alt-600 active:text-accent-alt-700 disabled:text-accent-alt-300',
-			(!size || size === EButtonSizes.DEFAULT) && 'py-sm px-md',
-			size === EButtonSizes.SMALL && 'py-xs px-md',
-			size === EButtonSizes.MEDIUM && 'py-sm px-sm',
-			size === EButtonSizes.LARGE && 'py-md px-md',
+				&& 'border border-error text-error hover:border-transparent hover:bg-error-600'
+					+'hover:text-white active:border-transparent active:bg-error-700'
+					+'active:text-white disabled:border-error-300 disabled:text-error-300',
+			kind === EButtonTypes.LINK && 'hover:text-accent-alt-600 active:text-accent-alt-700'
+				+'disabled:text-accent-alt-300 text-accent-alt',
+			(!size || size === EButtonSizes.DEFAULT) && 'px-md py-sm',
+			size === EButtonSizes.SMALL && 'px-md py-xs',
+			size === EButtonSizes.MEDIUM && 'p-sm',
+			size === EButtonSizes.LARGE && 'p-md',
 			($slots.default || $slots.postfix) && 'gap-sm',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',

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

@@ -3,22 +3,22 @@
 		class="
 			ui-card-cta
 			w-full
-			outline-0
+			rounded-2xl
 			border
 			border-secondary-alt-500
-			rounded-2xl
+			bg-white
 			p-sm
 			shadow-md
-			bg-white
+			outline-0
 			hover:border-secondary-700
 			focus:shadow-border-primary
 			active:bg-secondary-alt-200
-			disabled:bg-secondary-alt-200
-			disabled:pointer-events-none"
+			disabled:pointer-events-none
+			disabled:bg-secondary-alt-200"
 		:disabled="disabled"
 	>
 		<span
-			class="ui-card-cta__wrapper w-full grid gap-sm items-center"
+			class="ui-card-cta__wrapper grid w-full items-center gap-sm"
 			:class="[
 				invertOrder && 'ui-card-cta_inverted',
 			]"

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

@@ -60,6 +60,29 @@ const Template: Story<TComponentProps> = (args) => ({
 			</template>
 
 			<template #default>
+
+				<div
+					class="flex gap-xs items-center mb-xs"
+				>
+					<ui-icon
+						class="text-primary"
+						:size="ESize.SM"
+						:icon-name="['far', 'face-smile']"
+					/>
+
+					<ui-icon
+						class="text-primary"
+						:size="ESize.SM"
+						:icon-name="['far', 'face-smile']"
+					/>
+
+					<ui-icon
+						class="text-secondary-alt-300"
+						:size="ESize.SM"
+						:icon-name="['far', 'face-smile']"
+					/>
+				</div>
+
 				<div class="flex flex-wrap gap-xs mb-sm">
 					<ui-badge
 						v-for="item in ['Free bank tranfers']"
@@ -75,29 +98,6 @@ const Template: Story<TComponentProps> = (args) => ({
 					>
 						more...
 					</ui-badge>
-
-					<div
-						class="flex gap-xs items-center justify-center"
-						:style="{marginLeft: 'auto'}"
-					>
-						<ui-icon
-							class="text-primary"
-							:size="ESize.SM"
-							:icon-name="['far', 'face-smile']"
-						/>
-
-						<ui-icon
-							class="text-primary"
-							:size="ESize.SM"
-							:icon-name="['far', 'face-smile']"
-						/>
-
-						<ui-icon
-							class="text-secondary-alt-300"
-							:size="ESize.SM"
-							:icon-name="['far', 'face-smile']"
-						/>
-					</div>
 				</div>
 
 				<ul>
@@ -118,12 +118,13 @@ const Template: Story<TComponentProps> = (args) => ({
 					</ui-list-item>
 				</ul>
 
-				<ui-typography class="mb-sm" underline :size="ETypographySizes.SM" :kind="EColors.SECONDARY">
-					Some link
-				</ui-typography>
+				<div :style="{display: 'grid', gridTemplateColumns: '1fr 1fr'}" class="items-center gap-sm mb-sm">
+					<ui-typography underline :size="ETypographySizes.SM" :kind="EColors.ACCENT">
+						Full Details
+					</ui-typography>
 
-				<div :style="{display: 'grid', gridTemplateColumns: '1fr 1fr'}" class="items-center gap-sm">
 					<ui-typography
+						class="text-right"
 						:weight="ETextWeight.BOLD"
 						:size="ETypographySizes.XL"
 						:kind="EColors.SECONDARY"
@@ -136,9 +137,8 @@ const Template: Story<TComponentProps> = (args) => ({
 							Monthly fee
 						</ui-typography>
 					</ui-typography>
-
-					<ui-button full-width>Some text</ui-button>
 				</div>
+				<ui-button full-width>Some text</ui-button>
 			</template>
 		</ui-card-result>
 

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

@@ -2,7 +2,7 @@
 	<div class="ui-card-result">
 		<div
 			v-if="exclusiveText"
-			class="bg-primary rounded-2xl px-sm pb-lg -mb-lg"
+			class="-mb-lg rounded-2xl bg-primary px-sm pb-lg"
 			@click="exclusiveClickAction"
 		>
 			<ui-typography
@@ -11,18 +11,31 @@
 				:size="ETypographySizes.XXS"
 				:kind="EColors.WHITE"
 				:align="ETextAlign.CENTER"
-				:weight="ETextWeight.SEMI_BOLD"
+				:weight="ETextWeight.BOLD"
 			>
 				{{ exclusiveText }}
 			</ui-typography>
 		</div>
 
-		<div class="grid relative border border-secondary-alt-400 rounded-2xl overflow-hidden bg-white">
-			<div class="ui-card-result__header grid gap-xs justify-between items-center rounded-lg bg-secondary-alt-200 p-xs m-xs mb-sm">
+		<div class="relative grid overflow-hidden rounded-2xl border border-secondary-alt-400 bg-white">
+			<div
+				class="
+				ui-card-result__header
+				m-xs
+				mb-sm
+				grid
+				items-center
+				justify-between
+				gap-xs
+				rounded-lg
+				bg-secondary-alt-200
+				p-xs
+			"
+			>
 				<ui-typography
 					v-if="header"
 					line-height
-					class="flex-1 line-clamp"
+					class="line-clamp flex-1"
 					:size="ETypographySizes.SM"
 					:weight="ETextWeight.SEMI_BOLD"
 					:kind="EColors.SECONDARY"
@@ -33,14 +46,14 @@
 				<slot name="sidebar" />
 			</div>
 
-			<main class="p-sm pt-0 w-full overflow-hidden bg-white">
+			<main class="w-full overflow-hidden bg-white p-sm pt-0">
 				<slot />
 			</main>
 		</div>
 
 		<div
 			v-if="exclusiveTextBottom"
-			class="bg-secondary-alt-200 rounded-2xl px-sm pt-lg -mt-lg border border-secondary-alt-400"
+			class="-mt-lg rounded-2xl border border-secondary-alt-400 bg-secondary-alt-200 px-sm pt-lg"
 			@click="exclusiveBottomClickAction"
 		>
 			<ui-typography

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

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-card-simple rounded-3xl shadow-md py-md px-sm bg-white"
+		class="ui-card-simple rounded-3xl bg-white px-sm py-md shadow-md"
 	>
 		<ui-typography
 			v-if="slots.title"

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

@@ -14,13 +14,25 @@
 	>
 		<input
 			v-model="checkboxModel"
-			class="appearance-none absolute"
+			class="absolute appearance-none"
 			type="checkbox"
 			:value="value"
 			:disabled="disabled"
 		>
 		<span
-			class="ui-checkbox_custom w-md h-md flex items-center justify-center border border-secondary-alt-500 rounded relative hover:border-secondary-alt-700"
+			class="
+				ui-checkbox_custom
+				relative
+				flex
+				h-md
+				w-md
+				items-center
+				justify-center
+				rounded
+				border
+				border-secondary-alt-500
+				hover:border-secondary-alt-700
+				"
 			:class="invertOrder && 'order-last'"
 		>
 			<svg
@@ -64,7 +76,7 @@
 	}>();
 
 	const emit = defineEmits<{
-		(e: "update:modelValue", state: unknown): void
+		(e: "update:modelValue", state: typeof props.modelValue): void
 	}>();
 
 	const checkboxModel = computed({

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

@@ -1,15 +1,15 @@
 <template>
 	<div
-		class="icon-wrapper w-fit h-fit grid place-items-center relative rounded-2xl"
+		class="icon-wrapper relative grid h-fit w-fit place-items-center rounded-2xl"
 		:class="[
-			kind === EIconWrapperTypes.PRIMARY && 'text-white bg-primary',
-			kind === EIconWrapperTypes.SECONDARY && 'text-black bg-secondary-alt-200',
-			kind === EIconWrapperTypes.DEFAULT && 'text-primary bg-white border-2 border-primary ',
+			kind === EIconWrapperTypes.PRIMARY && 'bg-primary text-white',
+			kind === EIconWrapperTypes.SECONDARY && 'bg-secondary-alt-200 text-black',
+			kind === EIconWrapperTypes.DEFAULT && 'border-2 border-primary bg-white text-primary ',
 
-			size === EIconWrapperSizes.DEFAULT && 'py-sm px-sm',
-			size === EIconWrapperSizes.SMALL && 'py-xs px-xs',
-			size === EIconWrapperSizes.MEDIUM && 'py-md px-md icon-wrapper_offset-md',
-			size === EIconWrapperSizes.LARGE && 'py-lg px-lg icon-wrapper_offset-lg',
+			size === EIconWrapperSizes.DEFAULT && 'p-sm',
+			size === EIconWrapperSizes.SMALL && 'p-xs',
+			size === EIconWrapperSizes.MEDIUM && 'icon-wrapper_offset-md p-md',
+			size === EIconWrapperSizes.LARGE && 'icon-wrapper_offset-lg p-lg',
 		]"
 	>
 		<slot />