adata-ui 2.1.40-beta.10 → 2.1.40-beta.12

package/components/features/payment/process/PaymentKaspiRedirectSidePanel.vue

@@ -2,12 +2,12 @@
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 
 const props = defineProps<{
-    requestId: number
+  requestId: number
 }>()
 
 const emit = defineEmits<{
   (e: 'back', type: 'kaspi'): void
-  (e:  'updateUserRate'): void
+  (e: 'updateUserRate'): void
 }>()
 
 const isOpen = defineModel({ default: false })
@@ -78,35 +78,46 @@ watch(isOpen, async (value) => {
     v-model="isOpen"
     width="484px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="text-center text-2xl font-bold whitespace-pre-wrap">
+    <div class="flex flex-col gap-6">
+      <p class="whitespace-pre-wrap text-center text-xl font-bold text-deepblue-900 dark:text-gray-100">
         {{ t('payment.redirect.title') }}
       </p>
-      <a-button block @click="goKaspi">
-        {{ t('payment.redirect.goKaspi') }}
-      </a-button>
-      <div class="flex flex-col gap-2">
-        <p class="text-center text-sm">
+
+      <div class="flex flex-col items-center gap-1 rounded-xl bg-gray-50 p-5 text-center dark:bg-white/[0.03]">
+        <span class="text-xs text-gray-500 dark:text-gray-400">
           {{ t('payment.redirect.paymentId') }}
-        </p>
-        <p class="text-center text-xl	font-semibold">
+        </span>
+        <span class="text-2xl font-bold text-deepblue-900 dark:text-gray-100">
           {{ requestId }}
-        </p>
+        </span>
       </div>
-      <p class="text-center text-sm">
+
+      <p class="text-center text-sm text-gray-600 dark:text-gray-300">
         {{ t('payment.redirect.description') }}
       </p>
-      <a-button
-        view="outline"
-        block
-        @click="onBack"
-      >
-        {{ t('payment.redirect.changeMethod') }}
-      </a-button>
     </div>
+
+    <template #footer>
+      <div class="flex flex-col gap-2">
+        <a-button-v2
+          size="lg"
+          block
+          @click="goKaspi"
+        >
+          {{ t('payment.redirect.goKaspi') }}
+        </a-button-v2>
+        <a-button-v2
+          view="outline"
+          color="gray"
+          size="lg"
+          block
+          @click="onBack"
+        >
+          {{ t('payment.redirect.changeMethod') }}
+        </a-button-v2>
+      </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/features/payment/process/PaymentMethodSidePanel.vue

@@ -16,24 +16,16 @@ const isOpen = defineModel({ default: false })
 
 const { t } = useI18n()
 
-const checkbox = ref<IBank>('kaspi')
+const selected = ref<IBank>('kaspi')
 const cards = [
-  {
-    id: 'kaspi',
-    name: 'payment.method.kaspi',
-    sum: 10000,
-    img: AIconPaymentKaspi,
-  },
-  {
-    id: 'other',
-    name: 'payment.method.other',
-    sum: 10000,
-    img: AIconPaymentCard,
-  },
-]
+  { id: 'kaspi', name: 'payment.method.kaspi', img: AIconPaymentKaspi },
+  { id: 'other', name: 'payment.method.other', img: AIconPaymentCard },
+] as const
+
+const formattedSum = computed(() => Math.round(props.sum).toLocaleString('ru-RU'))
 
 function confirm() {
-  emit('nextBank', checkbox.value, props.sum)
+  emit('nextBank', selected.value, props.sum)
 }
 
 function cancel() {
@@ -52,70 +44,90 @@ function onBack() {
   >
     <template #header>
       <div class="flex items-center gap-2">
-        <button @click="onBack">
+        <button
+          type="button"
+          class="rounded-md p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          @click="onBack"
+        >
           <a-icon-chevron-left class="size-6" />
         </button>
-        <p class="text-xl font-semibold">
+        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
           {{ t('payment.method.title') }}
         </p>
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4">
+      <div class="flex flex-col items-center gap-4 rounded-xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
         <a-ill-phone-check class="size-[120px]" />
-        <p class="text-center text-sm font-semibold">
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
           {{ t('payment.method.description') }}
         </p>
       </div>
 
-      <div class="font-semibold">
-        {{ t('payment.method.note') }}
-      </div>
-
       <div class="flex flex-col gap-2">
-        <a-radio-button
-          v-for="(item) in cards"
+        <p class="text-sm font-semibold text-deepblue-900 dark:text-gray-100">
+          {{ t('payment.method.note') }}
+        </p>
+
+        <button
+          v-for="item in cards"
           :key="item.id"
-          v-model="checkbox"
-          :name="`${item.name}`"
-          side="right"
-          size="lg"
-          :value="item.id"
-          class="flex items-center justify-between gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
+          type="button"
+          class="flex items-center gap-3 rounded-xl border p-4 text-left transition-colors"
+          :class="selected === item.id
+            ? 'border-blue-500 bg-blue-50/60 dark:border-blue-400 dark:bg-blue-950/30'
+            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800'"
+          @click="selected = item.id"
         >
-          <div class="flex w-full items-center gap-2">
-            <component :is="item.img" />
-            <div class="flex w-full items-center justify-between">
+          <component
+            :is="item.img"
+            class="h-7 w-auto shrink-0"
+          />
+          <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
+            <span class="text-sm font-semibold text-deepblue-900 dark:text-gray-100">
               {{ t(item.name) }}
-              <p class="body-600">
-                {{ Math.round(sum).toLocaleString('RU-ru') }} ₸
-              </p>
-            </div>
+            </span>
+            <span class="text-sm font-semibold text-gray-600 dark:text-gray-300">
+              {{ formattedSum }} ₸
+            </span>
           </div>
-        </a-radio-button>
+          <span
+            class="flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors"
+            :class="selected === item.id
+              ? 'border-blue-600 dark:border-blue-400'
+              : 'border-gray-300 dark:border-gray-600'"
+          >
+            <span
+              v-if="selected === item.id"
+              class="size-2.5 rounded-full bg-blue-600 dark:bg-blue-400"
+            />
+          </span>
+        </button>
       </div>
+    </div>
 
-      <div class="flex flex-col gap-2 ">
-        <a-button
-          :disabled="!checkbox"
+    <template #footer>
+      <div class="flex flex-col gap-2">
+        <a-button-v2
+          size="lg"
           block
           @click="confirm"
         >
           {{ t('actions.topUp') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           view="outline"
+          color="gray"
+          size="lg"
           block
           @click="cancel"
         >
           {{ t('actions.close') }}
-        </a-button>
+        </a-button-v2>
       </div>
-    </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/features/payment/process/PaymentProcess.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import PaymentTopUpSidePanel from '#adata-ui/components/features/payment/process/PaymentTopUpSidePanel.vue'
-import PaymentMethodSidePanel from '#adata-ui/components/features/payment/process/PaymentMethodSidePanel.vue'
 import PaymentKaspiQrSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiQrSidePanel.vue'
 import PaymentKaspiRedirectSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiRedirectSidePanel.vue'
+import PaymentMethodSidePanel from '#adata-ui/components/features/payment/process/PaymentMethodSidePanel.vue'
+import PaymentTopUpSidePanel from '#adata-ui/components/features/payment/process/PaymentTopUpSidePanel.vue'
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 
 const { $toast } = useNuxtApp()
@@ -16,7 +16,7 @@ const {
   methodSidePanel,
   kaspiQRSidePanel,
   kaspiRedirectSidePanel,
-  payByCard
+  payByCard,
 } = usePayment()
 
 const userApiURL = commonAuth.userApiURL
@@ -132,23 +132,23 @@ async function updateUserRate() {
 
   <payment-method-side-panel
     v-model="methodSidePanel"
-    @back="onBack"
     :sum="paymentSum"
+    @back="onBack"
     @next-bank="directionsBanks"
   />
 
   <payment-kaspi-qr-side-panel
     v-model="kaspiQRSidePanel"
-    @back="onBack"
     :request-url="requestUrl"
     :request-id="requestId as number"
+    @back="onBack"
     @update-user-rate="updateUserRate"
   />
 
   <payment-kaspi-redirect-side-panel
     v-model="kaspiRedirectSidePanel"
-    @back="onBack"
     :request-id="requestId as number"
+    @back="onBack"
     @update-user-rate="updateUserRate"
   />
 </template>

package/components/features/payment/process/PaymentTopUpSidePanel.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import ASidePanel from "#adata-ui/components/overlays/side-panel/ASidePanel.vue";
-
 const emit = defineEmits<{
   (e: 'next', sum: number): void
 }>()
@@ -9,35 +7,18 @@ const isOpen = defineModel({ default: false })
 
 const { t } = useI18n()
 
-const money = ref(0)
+const money = ref<number | string>(0)
 const errorAlert = ref(false)
 
-const sumArr = ref([
-  {
-    id: 1,
-    value: 2000,
-    label: '2 000 ₸',
-  },
-  {
-    id: 2,
-    value: 5000,
-    label: '5 000 ₸',
-  },
-  {
-    id: 3,
-    value: 10000,
-    label: '10 000 ₸',
-  },
-  {
-    id: 4,
-    value: 20000,
-    label: '20 000 ₸',
-  },
-])
+const sumArr = [
+  { id: 1, value: 2000, label: '2 000 ₸' },
+  { id: 2, value: 5000, label: '5 000 ₸' },
+  { id: 3, value: 10000, label: '10 000 ₸' },
+  { id: 4, value: 20000, label: '20 000 ₸' },
+]
 
-const filterMoney = computed(() => {
-  return money.value >= 1
-})
+const amount = computed(() => Number(money.value) || 0)
+const filterMoney = computed(() => amount.value >= 1)
 
 function onSelectAmount(value: number) {
   money.value = value
@@ -50,10 +31,11 @@ function onClose() {
 }
 
 function handlePayment() {
-  if (money.value <= 1000000) {
-    emit('next', money.value)
+  if (amount.value <= 1000000) {
+    emit('next', amount.value)
     errorAlert.value = false
-  } else {
+  }
+  else {
     errorAlert.value = true
   }
 }
@@ -65,69 +47,68 @@ function handlePayment() {
     width="484px"
   >
     <template #header>
-      <div class="text-xl font-semibold">
+      <div class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
         {{ t('payment.topUp.title') }}
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4 ">
+      <div class="flex flex-col items-center gap-4 rounded-xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
         <a-ill-bill class="size-[120px]" />
-        <p class="text-center text-sm font-semibold">
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
           {{ t('payment.topUp.info') }}
         </p>
       </div>
 
-      <div class="flex flex-col gap-4">
-        <a-input-standard
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="money"
-          :label="`${t('payment.topUp.enterAmount')}`"
+          :label="t('payment.topUp.enterAmount')"
           type="number"
-          pattern="[0-9]*"
+          size="md"
           clearable
+          :error="errorAlert ? t('modals.replenish_modal.error') : undefined"
         />
-        <a-alert
-          v-if="errorAlert"
-          color="red"
-        >
-          {{ t('modals.replenish_modal.error') }}
-        </a-alert>
-        <div class="flex gap-4">
-          <a-chips
+
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          <button
             v-for="item in sumArr"
             :key="item.id"
-            view="standard"
-            size="lg"
-            :class="[
-              money === item.value
-                ? 'bg-blue-700 text-white hover:bg-blue-700 dark:border-blue-500 dark:bg-transparent dark:text-blue-500 dark:hover:bg-transparent'
-                : '',
-            ]"
+            type="button"
+            class="rounded-lg border px-3 py-2.5 text-sm font-semibold transition-colors"
+            :class="amount === item.value
+              ? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-950/40 dark:text-blue-300'
+              : 'border-gray-200 bg-white text-deepblue-900 hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800'"
             @click.stop="onSelectAmount(item.value)"
           >
-            <span>{{ item.label }}</span>
-          </a-chips>
+            {{ item.label }}
+          </button>
         </div>
       </div>
+    </div>
 
+    <template #footer>
       <div class="flex flex-col gap-2">
-        <a-button
+        <a-button-v2
+          size="lg"
+          block
           :disabled="!filterMoney"
           @click="handlePayment"
         >
           {{ t('actions.topUp') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           view="outline"
+          color="gray"
+          size="lg"
+          block
           @click="onClose"
         >
           {{ t('actions.back') }}
-        </a-button>
+        </a-button-v2>
       </div>
-    </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/features/pk-mobile-services/APkMobileServices.vue

@@ -29,7 +29,7 @@ const blockStyles = [
       :class="['flex flex-col items-center gap-2 p-2', blockStyles[index]]"
     >
       <div
-        class="size-10 p-2 rounded-lg"
+        class="size-10 p-2 rounded-md"
         :class="[
           'bg-deepblue-900/5 dark:bg-gray-200/5',
           {'!bg-blue-700 text-white dark:!bg-blue-500 ': isActiveService(service.to)}

package/components/features//321/201hange-version/AChangeVersion.vue

@@ -10,9 +10,9 @@ const { t } = useI18n()
   <nuxt-link
     :to="url"
     target="_blank"
-    class="flex cursor-pointer items-center justify-center gap-1 rounded-md bg-blue-700/10 px-3 py-2 text-blue-700 transition-colors duration-150 hover:bg-blue-700/15 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
+    class="flex cursor-pointer items-center justify-center gap-1 rounded-sm bg-blue-700/10 px-3 py-2 text-blue-700 transition-colors duration-150 hover:bg-blue-700/15 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
   >
-    <span class="body-400">{{ t('header.oldVersion') }}</span>
+    <span class="text-body-md">{{ t('header.oldVersion') }}</span>
     <a-icon-arrow-bottom-left-on-square class="rotate-180" />
   </nuxt-link>
 </template>

package/components/forms/checkbox/ACheckbox.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 
 
 defineOptions({ name: 'ACheckbox' })

package/components/forms/checkbox/ACheckboxV2.vue

@@ -64,9 +64,9 @@ const gapClass = computed(() => {
 
 const textClass = computed(() => {
   switch (props.size) {
-    case 'sm': return 'text-xs'
-    case 'lg': return 'text-base'
-    default: return 'text-sm'
+    case 'sm': return 'text-body-sm'
+    case 'lg': return 'text-body-lg'
+    default: return 'text-body-md'
   }
 })
 
@@ -82,7 +82,7 @@ const isActive = computed(() => isChecked.value || props.intermediate)
 
 const squareClass = computed(() => {
   const base = [
-    'checkbox-square inline-flex shrink-0 items-center justify-center rounded-md border transition-colors duration-150',
+    'checkbox-square inline-flex shrink-0 items-center justify-center rounded-sm border transition-colors duration-150',
     squareSizeClass.value,
   ]
 
@@ -101,7 +101,7 @@ const squareClass = computed(() => {
 
 const chipClass = computed(() => {
   const base = [
-    'inline-flex items-center rounded-full border px-3 py-1 text-xs transition-colors duration-150',
+    'inline-flex items-center rounded-full border px-3 py-1 text-body-sm transition-colors duration-150',
   ]
 
   if (isActive.value) {

package/components/forms/input/AInputV2.vue

@@ -303,7 +303,7 @@ function rowDisplay(item: T): unknown {
 <template>
   <div
     ref="wrapperRef"
-    class="input-v2 relative w-full text-sm"
+    class="input-v2 relative w-full text-body-md"
     v-bind="wrapperAttrs"
   >
     <div
@@ -395,7 +395,7 @@ function rowDisplay(item: T): unknown {
       <div
         v-if="isDropdownOpen"
         ref="floatingRef"
-        class="input-v2__dropdown z-[10000] flex flex-col gap-2 rounded-xl border border-gray-200 bg-white p-1.5 shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        class="input-v2__dropdown z-[10000] flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-1.5 shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
         :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',
@@ -406,7 +406,7 @@ function rowDisplay(item: T): unknown {
           <li
             v-for="(item, idx) in autocompleteList"
             :key="idx"
-            class="cursor-pointer rounded-lg px-3 py-2 text-sm transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
+            class="cursor-pointer rounded-md px-3 py-2 text-body-md transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
             :class="{ 'input-v2__option--active': currentItemIndex === idx }"
             @mousedown.prevent="onSelectOption(item)"
             @touchend.prevent="onTouchEndOption(item)"
@@ -430,7 +430,7 @@ function rowDisplay(item: T): unknown {
       leave-from-class="input-v2__error-leave-from"
       leave-to-class="input-v2__error-leave-to"
     >
-      <p v-if="hasError" class="mt-1 flex flex-col text-xs text-red-500 dark:text-red-400">
+      <p v-if="hasError" class="mt-1 flex flex-col text-body-sm text-red-500 dark:text-red-400">
         <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
       </p>
     </transition>

package/components/forms/input/date/AInputDate.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { twJoin, twMerge } from 'tailwind-merge'
 import ACalendar from "#adata-ui/components/elements/calendar/ACalendar.vue";
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 
 
 interface Props {
@@ -48,7 +48,7 @@ const uiConfig = {
   "input-wrapper": {
     base: 'relative inline-block w-full text-sm sm:min-w-full'
   },
-  base: 'w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 hover:outline hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
+  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 hover:outline hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[18px] md'

package/components/forms/input/password/AInputPassword.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import AInputStandard from "#adata-ui/components/forms/input/standard/AInputStandard.vue";
 
-
 interface Props {
   disabled?: boolean
   label?: string
   size?: 'sm' | 'md'
   error?: string
   required?: boolean
+  iconEyeTestId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,19 +19,25 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const isOpened = ref<boolean>(false)
+
+const inputProps = computed(() => {
+  const { iconEyeTestId, ...rest } = props
+  return rest
+})
 </script>
 
 <template>
   <a-input-standard
     v-bind="$attrs"
     :type="isOpened ? 'text' : 'password'"
-    v-bind.prop="props"
+    v-bind.prop="inputProps"
   >
     <template #endButton>
       <button
         class="absolute top-1/2 right-4 text-gray-500 fill-gray-500 pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 disabled:pointer-events-none"
         :disabled="disabled"
         type="button"
+        :data-test-id="iconEyeTestId"
         @click="isOpened = !isOpened"
       >
         <a-icon-eye-closed

package/components/forms/input/standard/AInputStandard.vue

@@ -1,6 +1,6 @@
 <script generic="T, K extends keyof T" lang="ts" setup>
-import {twMerge, twJoin} from 'tailwind-merge'
 import AAlert from '#adata-ui/components/elements/alert/AAlert.vue'
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge'
 
 interface Props {
   disabled?: boolean
@@ -44,11 +44,11 @@ const {t} = useI18n()
 const uiConfig = {
   wrapper: 'transition duration-500 w-full',
   'input-wrapper': {
-    base: 'relative inline-block w-full text-sm sm:min-w-full',
+    base: 'relative inline-block w-full text-body-md sm:min-w-full',
     readonly: 'pointer-events-none user-select-none',
     disabled: 'pointer-events-none user-select-none opacity-40'
   },
-  base: 'w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 hover:outline outline-offset-[-1px] hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
+  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 hover:outline outline-offset-[-1px] hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[18px] md',

package/components/forms/input/textarea/ATextarea.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { twMerge, twJoin } from 'tailwind-merge'
 import AAlert from '#adata-ui/components/elements/alert/AAlert.vue'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 
 interface Props {
   disabled?: boolean
@@ -38,7 +38,7 @@ const uiConfig = {
     disabled: 'pointer-events-none user-select-none opacity-40',
     color: 'bg-deepblue-900/5 dark:bg-gray-200/5'
   },
-  base: 'w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 outline-none mt-0',
+  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 outline-none mt-0',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[8px] md'