@antify/ui-module 1.6.0 → 1.7.2

package/dist/module.mjs

@@ -189,6 +189,9 @@ const tailwindcss = {
       ...fontColors
     },
     extend: {
+      fontSize: {
+        "2xs": ["0.625rem", "0.75rem"]
+      },
       animation: {
         skeleton: "skeleton 2s ease-out infinite"
       },
@@ -202,24 +205,11 @@ const tailwindcss = {
   }
 };
 
-var ColorType = /* @__PURE__ */ ((ColorType2) => {
-  ColorType2["base"] = "base";
-  ColorType2["primary"] = "primary";
-  ColorType2["secondary"] = "secondary";
-  ColorType2["danger"] = "danger";
-  ColorType2["info"] = "info";
-  ColorType2["success"] = "success";
-  ColorType2["warning"] = "warning";
-  return ColorType2;
-})(ColorType || {});
-var InputColorType = /* @__PURE__ */ ((InputColorType2) => {
-  InputColorType2["base"] = "base";
-  InputColorType2["danger"] = "danger";
-  InputColorType2["info"] = "info";
-  InputColorType2["success"] = "success";
-  InputColorType2["warning"] = "warning";
-  return InputColorType2;
-})(InputColorType || {});
+var Direction = /* @__PURE__ */ ((Direction2) => {
+  Direction2["column"] = "column";
+  Direction2["row"] = "row";
+  return Direction2;
+})(Direction || {});
 
 var Grouped = /* @__PURE__ */ ((Grouped2) => {
   Grouped2["none"] = "none";
@@ -245,11 +235,33 @@ var CornerPosition = /* @__PURE__ */ ((CornerPosition2) => {
 })(CornerPosition || {});
 
 var Size = /* @__PURE__ */ ((Size2) => {
-  Size2["sm"] = "sm";
+  Size2["lg"] = "lg";
   Size2["md"] = "md";
+  Size2["sm"] = "sm";
+  Size2["xs"] = "xs";
+  Size2["xs2"] = "2xs";
   return Size2;
 })(Size || {});
 
+var State = /* @__PURE__ */ ((State2) => {
+  State2["base"] = "base";
+  State2["primary"] = "primary";
+  State2["secondary"] = "secondary";
+  State2["danger"] = "danger";
+  State2["info"] = "info";
+  State2["success"] = "success";
+  State2["warning"] = "warning";
+  return State2;
+})(State || {});
+var InputState = /* @__PURE__ */ ((InputState2) => {
+  InputState2["base"] = "base";
+  InputState2["danger"] = "danger";
+  InputState2["info"] = "info";
+  InputState2["success"] = "success";
+  InputState2["warning"] = "warning";
+  return InputState2;
+})(InputState || {});
+
 var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
   CollapseStrategy2["single"] = "single";
   CollapseStrategy2["multiple"] = "multiple";
@@ -257,48 +269,106 @@ var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
 })(CollapseStrategy || {});
 
 var IconSize = /* @__PURE__ */ ((IconSize2) => {
-  IconSize2["xs"] = "xs";
-  IconSize2["sm"] = "sm";
-  IconSize2["md"] = "md";
   IconSize2["xl3"] = "3xl";
+  IconSize2["lg"] = "lg";
+  IconSize2["md"] = "md";
+  IconSize2["sm"] = "sm";
+  IconSize2["xs"] = "xs";
+  IconSize2["xs2"] = "2xs";
   return IconSize2;
 })(IconSize || {});
 
-var AntTableRowTypes = /* @__PURE__ */ ((AntTableRowTypes2) => {
-  AntTableRowTypes2["text"] = "text";
-  AntTableRowTypes2["html"] = "html";
-  AntTableRowTypes2["link"] = "link";
-  AntTableRowTypes2["slot"] = "slot";
-  return AntTableRowTypes2;
-})(AntTableRowTypes || {});
-var AntTableAlign = /* @__PURE__ */ ((AntTableAlign2) => {
-  AntTableAlign2["left"] = "left";
-  AntTableAlign2["center"] = "center";
-  AntTableAlign2["right"] = "right";
-  return AntTableAlign2;
-})(AntTableAlign || {});
-var AntTableSortDirection = /* @__PURE__ */ ((AntTableSortDirection2) => {
-  AntTableSortDirection2["asc"] = "asc";
-  AntTableSortDirection2["desc"] = "desc";
-  AntTableSortDirection2["neutral"] = "neutral";
-  return AntTableSortDirection2;
-})(AntTableSortDirection || {});
+var AntKeycapSize = /* @__PURE__ */ ((AntKeycapSize2) => {
+  AntKeycapSize2["sm"] = "sm";
+  AntKeycapSize2["xs"] = "xs";
+  return AntKeycapSize2;
+})(AntKeycapSize || {});
+
+var ListGroupItemState = /* @__PURE__ */ ((ListGroupItemState2) => {
+  ListGroupItemState2["base"] = "base";
+  ListGroupItemState2["primary"] = "primary";
+  ListGroupItemState2["secondary"] = "secondary";
+  ListGroupItemState2["info"] = "info";
+  ListGroupItemState2["success"] = "success";
+  ListGroupItemState2["warning"] = "warning";
+  ListGroupItemState2["danger"] = "danger";
+  return ListGroupItemState2;
+})(ListGroupItemState || {});
+
+var AntSpinnerSize = /* @__PURE__ */ ((AntSpinnerSize2) => {
+  AntSpinnerSize2["xl4"] = "4xl";
+  AntSpinnerSize2["xl3"] = "3xl";
+  AntSpinnerSize2["xl2"] = "2xl";
+  AntSpinnerSize2["lg"] = "lg";
+  AntSpinnerSize2["md"] = "md";
+  AntSpinnerSize2["sm"] = "sm";
+  AntSpinnerSize2["xs"] = "xs";
+  AntSpinnerSize2["xs2"] = "2xs";
+  return AntSpinnerSize2;
+})(AntSpinnerSize || {});
+
+var TagState = /* @__PURE__ */ ((TagState2) => {
+  TagState2["base"] = "base";
+  TagState2["primary"] = "primary";
+  TagState2["secondary"] = "secondary";
+  TagState2["info"] = "info";
+  TagState2["success"] = "success";
+  TagState2["warning"] = "warning";
+  TagState2["danger"] = "danger";
+  return TagState2;
+})(TagState || {});
+var AntTagSize = /* @__PURE__ */ ((AntTagSize2) => {
+  AntTagSize2["lg"] = "lg";
+  AntTagSize2["md"] = "md";
+  AntTagSize2["sm"] = "sm";
+  AntTagSize2["xs"] = "xs";
+  AntTagSize2["xs2"] = "2xs";
+  AntTagSize2["xs3"] = "3xs";
+  return AntTagSize2;
+})(AntTagSize || {});
+
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  return ButtonType2;
+})(ButtonType || {});
+
+var AntCheckboxSize = /* @__PURE__ */ ((AntCheckboxSize2) => {
+  AntCheckboxSize2["md"] = "md";
+  AntCheckboxSize2["sm"] = "sm";
+  return AntCheckboxSize2;
+})(AntCheckboxSize || {});
+
+var AntDateInputTypes = /* @__PURE__ */ ((AntDateInputTypes2) => {
+  AntDateInputTypes2["date"] = "date";
+  AntDateInputTypes2["datetimeLocal"] = "datetime-local";
+  AntDateInputTypes2["month"] = "month";
+  AntDateInputTypes2["time"] = "time";
+  AntDateInputTypes2["week"] = "week";
+  return AntDateInputTypes2;
+})(AntDateInputTypes || {});
+
+var AntRadioSize = /* @__PURE__ */ ((AntRadioSize2) => {
+  AntRadioSize2["md"] = "md";
+  AntRadioSize2["sm"] = "sm";
+  return AntRadioSize2;
+})(AntRadioSize || {});
+
+var AntTagInputSize = /* @__PURE__ */ ((AntTagInputSize2) => {
+  AntTagInputSize2["lg"] = "lg";
+  AntTagInputSize2["md"] = "md";
+  AntTagInputSize2["sm"] = "sm";
+  return AntTagInputSize2;
+})(AntTagInputSize || {});
 
 var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
   TextInputType2["email"] = "email";
-  TextInputType2["password"] = "password";
   TextInputType2["tel"] = "tel";
   TextInputType2["text"] = "text";
   TextInputType2["url"] = "url";
   return TextInputType2;
 })(TextInputType || {});
 
-var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
-  ButtonType2["button"] = "button";
-  ButtonType2["submit"] = "submit";
-  return ButtonType2;
-})(ButtonType || {});
-
 var BaseInputType = /* @__PURE__ */ ((BaseInputType2) => {
   BaseInputType2["date"] = "date";
   BaseInputType2["datetime"] = "datetime";
@@ -318,6 +388,39 @@ var BaseInputType = /* @__PURE__ */ ((BaseInputType2) => {
   return BaseInputType2;
 })(BaseInputType || {});
 
+var AntTableRowTypes = /* @__PURE__ */ ((AntTableRowTypes2) => {
+  AntTableRowTypes2["text"] = "text";
+  AntTableRowTypes2["html"] = "html";
+  AntTableRowTypes2["link"] = "link";
+  AntTableRowTypes2["slot"] = "slot";
+  return AntTableRowTypes2;
+})(AntTableRowTypes || {});
+var AntTableAlign = /* @__PURE__ */ ((AntTableAlign2) => {
+  AntTableAlign2["left"] = "left";
+  AntTableAlign2["center"] = "center";
+  AntTableAlign2["right"] = "right";
+  return AntTableAlign2;
+})(AntTableAlign || {});
+var AntTableSortDirection = /* @__PURE__ */ ((AntTableSortDirection2) => {
+  AntTableSortDirection2["asc"] = "asc";
+  AntTableSortDirection2["desc"] = "desc";
+  AntTableSortDirection2["neutral"] = "neutral";
+  return AntTableSortDirection2;
+})(AntTableSortDirection || {});
+var AntTableSize = /* @__PURE__ */ ((AntTableSize2) => {
+  AntTableSize2["lg"] = "lg";
+  AntTableSize2["md"] = "md";
+  AntTableSize2["sm"] = "sm";
+  return AntTableSize2;
+})(AntTableSize || {});
+
+var TabItemState = /* @__PURE__ */ ((TabItemState2) => {
+  TabItemState2["base"] = "base";
+  TabItemState2["warning"] = "warning";
+  TabItemState2["danger"] = "danger";
+  return TabItemState2;
+})(TabItemState || {});
+
 const moduleKey = "uiModule";
 const module = defineNuxtModule({
   meta: {
@@ -344,4 +447,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { AntTableAlign, AntTableRowTypes, AntTableSortDirection, BaseInputType, ButtonType, CollapseStrategy, ColorType, CornerPosition, Grouped, IconSize, InputColorType, Position, Size, TextInputType, module as default };
+export { AntCheckboxSize, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, Position, Size, State, TabItemState, TagState, TextInputType, module as default };

package/dist/runtime/components/AntAccordion.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import AntAccordionItem from './AntAccordionItem.vue';
 import {onMounted, ref} from 'vue';
-import {CollapseStrategy} from './__types/Accordion.types';
+import {CollapseStrategy} from './__types/AntAccordion.types';
 
 const props = withDefaults(defineProps<{
   items: {
     label?: string;
     content?: string;
     isOpen?: boolean;
+    iconLeft?: boolean;
   }[];
   collapseStrategy?: CollapseStrategy;
 }>(), {
@@ -20,7 +21,7 @@ onMounted(() => {
   openItems.value = props.items
     .map((item, index) => item.isOpen ? index : -1)
     .filter((index) => index !== -1);
-})
+});
 
 function onOpen(index: number) {
   if (props.collapseStrategy === CollapseStrategy.single) {
@@ -44,14 +45,18 @@ function onClose(index: number) {
     <slot>
       <AntAccordionItem
         v-for="(item, index) in items"
+        :key="`accordion-item-${index}`"
         :label="item.label"
         :is-open="openItems.includes(index)"
-        :key="`accordion-item-${index}`"
+        :icon-left="item.iconLeft"
         @open="() => onOpen(index)"
         @close="() => onClose(index)"
       >
-        <slot name="item-content" v-bind="{item, index}">
-          <div v-html="item.content"/>
+        <slot
+          name="item-content"
+          v-bind="{item, index}"
+        >
+          <div v-html="item.content" />
         </slot>
       </AntAccordionItem>
     </slot>

package/dist/runtime/components/AntAccordionItem.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
-import {faAngleDown, faAngleUp} from '@fortawesome/free-solid-svg-icons';
+import {faAngleDown, faAngleUp, faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 import AntIcon from './AntIcon.vue';
 import AntTransitionCollapseHeight from './transitions/AntTransitionCollapseHeight.vue';
+import {IconSize} from './__types/AntIcon.types';
 
 const props = withDefaults(defineProps<{
   isOpen: boolean;
   label?: string;
   collapseTransition?: string;
+  iconLeft: boolean;
 }>(), {
-  collapseTransition: 'slide'
+  collapseTransition: 'slide',
+  iconLeft: false,
 });
 const emit = defineEmits(['close', 'open']);
 
@@ -24,7 +27,7 @@ function onClick() {
 
 <template>
   <div
-    class="p-2.5 select-none cursor-pointer transition-colors"
+    class="p-2 select-none cursor-pointer transition-colors"
     :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-white text-for-white-bg-font': !isOpen}"
     @click="onClick"
   >
@@ -35,9 +38,18 @@ function onClick() {
       <div
         class="hover:text-gray-800 flex justify-between items-center"
       >
-        <span class="text-sm font-semibold">
-          {{ label }}
-        </span>
+        <div class="flex items-center gap-2">
+          <AntIcon
+            v-if="iconLeft"
+            :size="IconSize.sm"
+            :icon="faQuestionCircle"
+            :color="isOpen ? 'text-primary-500-font' : 'text-for-white-bg-font'"
+          />
+
+          <span class="text-sm font-semibold">
+            {{ label }}
+          </span>
+        </div>
 
         <AntIcon
           :icon="isOpen ? faAngleUp : faAngleDown"
@@ -55,7 +67,7 @@ function onClick() {
       <Transition name="bounce">
         <div
           v-show="isOpen"
-          class="p-2.5 bg-white"
+          class="p-2 text-sm bg-white text-for-white-bg-font"
         >
           <slot />
         </div>

package/dist/runtime/components/AntAlert.vue

@@ -12,14 +12,14 @@ import {
 import AntIcon from './AntIcon.vue';
 import AntTooltip from './AntTooltip.vue';
 import AntSkeleton from './AntSkeleton.vue';
-import {InputColorType, Position} from '../enums';
+import {InputState, Position} from '../enums';
 import {IconSize} from './__types';
 
 defineEmits(['close']);
 
 const props = withDefaults(defineProps<{
   title?: string | null,
-  colorType?: InputColorType,
+  state?: InputState,
   icon?: boolean,
   expanded?: boolean,
   questionMarkText?: string | null,
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<{
   dismissBtn?: boolean,
 }>(), {
 	title: null,
-  colorType: InputColorType.base,
+  state: InputState.base,
   icon: true,
   expanded: false,
 	questionMarkText: null,
@@ -36,45 +36,45 @@ const props = withDefaults(defineProps<{
 });
 
 const icons = {
-  [InputColorType.base]: faInfoCircle,
-  [InputColorType.info]: faInfoCircle,
-  [InputColorType.danger]: faExclamationCircle,
-  [InputColorType.warning]: faExclamationTriangle,
-  [InputColorType.success]: faCheckCircle,
+  [InputState.base]: faInfoCircle,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
 };
 
-const _icon = computed(() => icons[props.colorType]);
+const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.danger]: 'bg-danger-100 text-danger-500',
-    [InputColorType.info]: 'bg-info-100 text-info-500',
-    [InputColorType.base]: 'bg-neutral-100 text-neutral-500',
-    [InputColorType.success]: 'bg-success-100 text-success-500',
-    [InputColorType.warning]: 'bg-warning-100 text-warning-500',
+  const variants: Record<InputState, string> = {
+    [InputState.danger]: 'bg-danger-100 text-danger-700',
+    [InputState.info]: 'bg-info-100 text-info-700',
+    [InputState.base]: 'bg-neutral-100 text-neutral-100-font',
+    [InputState.success]: 'bg-success-100 text-success-700',
+    [InputState.warning]: 'bg-warning-100 text-warning-700',
   };
 
   return {
-    'inline-flex flex-col gap-2.5 rounded-md p-2.5 transition-colors text-sm relative': true,
+    'inline-flex flex-col gap-2 rounded-md p-2 transition-colors text-sm relative': true,
     'w-full': props.expanded,
-    [variants[props.colorType]]: true,
+    [variants[props.state]]: true,
   };
 });
 const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const hasQuestionMark = computed(() => (useSlots()['question-mark-text'] || false) || props.questionMarkText);
 const iconColor = computed(() => {
   const variants = {
-    [InputColorType.base]: 'text-neutral-100-font',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
+    [InputState.base]: 'text-neutral-100-font',
+    [InputState.danger]: 'text-danger-700',
+    [InputState.info]: 'text-info-700',
+    [InputState.success]: 'text-success-700',
+    [InputState.warning]: 'text-warning-700',
   };
 
-  return variants[props.colorType];
+  return variants[props.state];
 });
 
 onMounted(() => {
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 </script>
 
@@ -91,10 +91,10 @@ onMounted(() => {
 
     <div
       v-if="icon || hasQuestionMark || dismissBtn || title"
-      class="inline-flex items-center justify-between w-content gap-2.5"
+      class="inline-flex items-center justify-between w-content gap-2"
       :class="{'invisible': skeleton}"
     >
-      <div class="inline-flex items-center gap-2.5">
+      <div class="inline-flex items-center gap-2">
         <AntIcon
           v-if="icon"
           :icon="_icon"
@@ -111,7 +111,7 @@ onMounted(() => {
         </div>
       </div>
 
-      <div class="flex gap-2.5">
+      <div class="flex gap-2">
         <div v-if="hasQuestionMark">
           <slot name="questionMarkText">
             <AntTooltip :position="Position.bottom">

package/dist/runtime/components/AntCard.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {computed} from 'vue';
+import {Size} from '../enums/Size.enum';
+
+const props = withDefaults(defineProps<{
+  size?: Size;
+  padding?: boolean;
+  expanded?: boolean;
+}>(), {
+  size: Size.md,
+  padding: true,
+  expanded: false
+});
+
+const cardClass = computed(() => ({
+    'inline-block': true,
+    'w-full': props.expanded,
+    'p-0': !props.padding,
+    'p-2.5': props.size === Size.lg && props.padding,
+    'p-2': props.size === Size.md && props.padding,
+    'p-1.5': props.size === Size.sm || props.size === Size.xs && props.padding,
+    'p-1': props.size === Size.xs2 && props.padding,
+  })
+);
+</script>
+
+<template>
+  <div
+    :class="cardClass"
+    class="bg-white border border-neutral-300 rounded-md"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/AntDropdown.vue

@@ -36,7 +36,7 @@ const _dropdownClasses = computed(() => ({
 }));
 
 onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position')
+  handleEnumValidation(props.position, Position, 'Position');
 });
 onKeyStroke('Escape', (e: KeyboardEvent) => {
   if (props.showDropdown) {
@@ -65,7 +65,7 @@ function onClickOutside() {
       >
         <div
           class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative bg-white text-for-white-bg-font w-full"
-          :class="{'p-2.5': contentPadding}"
+          :class="{'p-2': contentPadding}"
         >
           <slot name="content" />
         </div>

package/dist/runtime/components/AntIcon.vue

@@ -13,24 +13,29 @@ const props = withDefaults(defineProps<{
    */
   color?: string;
 }>(), {
-  size: IconSize.md,
+  size: IconSize.sm,
   color: 'text-for-white-bg-font'
 });
 
 const containerClasses = computed(() => ({
-  'inline-flex items-center justify-center': true,
-  'w-4 h-4': props.size === IconSize.sm,
-  'w-5 h-5': props.size === IconSize.md,
-  'w-9 h-9': props.size === IconSize.xl3,
-  [props.color]: true,
+	'inline-flex items-center justify-center': true,
+	'w-3 h-3': props.size === IconSize.xs2,
+	'w-4 h-4': props.size === IconSize.xs,
+	'w-5 h-5': props.size === IconSize.sm,
+	'w-6 h-6': props.size === IconSize.md,
+	'w-7 h-7': props.size === IconSize.lg,
+	'w-9 h-9': props.size === IconSize.xl3,
+	[props.color]: true,
 }));
 
-// TODO:: replace with/height with font-size
 const iconClasses = computed(() => ({
-  'transition-colors': true,
-  'h-3 w-3': props.size === IconSize.sm,
-  'h-4 w-4': props.size === IconSize.md,
-  'text-3xl': props.size === IconSize.xl3,
+	'transition-colors': true,
+	'text-2xs': props.size === IconSize.xs2,
+	'text-xs': props.size === IconSize.xs,
+	'text-sm': props.size === IconSize.sm,
+	'text-md': props.size === IconSize.md,
+	'text-lg': props.size === IconSize.lg,
+	'text-3xl': props.size === IconSize.xl3,
 }));
 
 onMounted(() => {
@@ -40,12 +45,12 @@ onMounted(() => {
 
 <template>
   <span
-      v-if="icon"
-      :class="containerClasses"
+    v-if="icon"
+    :class="containerClasses"
   >
-    <fa-icon
-        :icon="icon"
-        :class="iconClasses"
+    <FaIcon
+      :icon="icon"
+      :class="iconClasses"
     />
   </span>
 </template>

package/dist/runtime/components/AntKeycap.vue

@@ -3,22 +3,43 @@
 import AntIcon from './AntIcon.vue';
 import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {IconSize} from './__types';
+import {AntKeycapSize} from './__types/AntKeycap.types';
+import {computed} from 'vue';
 
-defineProps<{
+const props = withDefaults(defineProps<{
   icon?: IconDefinition
-}>();
+  size: AntKeycapSize
+
+}>(),{
+  size: AntKeycapSize.sm
+});
+
+const classes = computed(() => {
+  return {
+    'text-sm px-px min-w-5': props.size === AntKeycapSize.sm,
+    'text-2xs px-px py-0.5 min-w-[18px]': props.size === AntKeycapSize.xs,
+  };
+});
+const iconClasses = computed(() => {
+  if(props.size === AntKeycapSize.sm) {
+    return IconSize.sm;
+  } else {
+    return IconSize.xs2;
+  }
+});
 </script>
 
 <template>
   <span
-    class="inline-block py-0.5 px-1.5 bg-neutral-300 rounded-md text-sm min-w-[1.5rem] text-center text-neutral-500-font font-medium"
+    class="inline-block bg-neutral-300 rounded-md text-center text-neutral-500-font font-medium"
+    :class="classes"
   >
     <AntIcon
       v-if="icon"
       :icon="icon"
-      :size="IconSize.sm"
+      :size="iconClasses"
     />
 
-    <slot v-else/>
+    <slot v-else />
   </span>
 </template>