adata-ui 3.1.80 → 3.1.82

package/dist/runtime/components/accordion/Accordion.vue.d.ts

@@ -1,20 +1,9 @@
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'reka-ui';
-import ui from './ui.config.js';
 import type { Props } from './types.js';
-declare const attrs: {
-    [x: string]: unknown;
-};
-declare const buttonClass: import("vue").ComputedRef<string>;
-declare const contClass: import("vue").ComputedRef<string>;
-declare const bodyClassCompute: import("vue").ComputedRef<string>;
-declare const accordion: import("vue").Ref<any, any>;
-declare const isOpen: import("vue").Ref<any, any>;
 declare function emulateButtonClick(): void;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_20: {}, __VLS_22: {}, __VLS_28: {}, __VLS_35: any, __VLS_36: {
+declare var __VLS_20: {}, __VLS_22: {}, __VLS_28: {}, __VLS_35: string, __VLS_36: {
     content: any;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_35>]?: (props: typeof __VLS_36) => any;
 } & {
     head?: (props: typeof __VLS_20) => any;
@@ -22,36 +11,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
     additional?: (props: typeof __VLS_22) => any;
 } & {
     closedToShow?: (props: typeof __VLS_28) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<Props, {
-    AccordionContent: typeof AccordionContent;
-    AccordionHeader: typeof AccordionHeader;
-    AccordionItem: typeof AccordionItem;
-    AccordionRoot: typeof AccordionRoot;
-    AccordionTrigger: typeof AccordionTrigger;
-    ui: typeof ui;
-    attrs: typeof attrs;
-    buttonClass: typeof buttonClass;
-    contClass: typeof contClass;
-    bodyClassCompute: typeof bodyClassCompute;
-    accordion: typeof accordion;
-    isOpen: typeof isOpen;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    close: () => any;
-    toggle: (isOpen: boolean) => any;
-    open: () => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onToggle?: ((isOpen: boolean) => any) | undefined;
-    onOpen?: (() => any) | undefined;
-}>, {
-    size: import("./types.js").Size;
-    color: import("./types.js").Color;
-    disabled: boolean;
-    defaultOpen: boolean;
-    slot: string;
-    divider: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<Props, {
     ontoggle: typeof emulateButtonClick;
     handelOpen: () => void;
@@ -67,9 +27,9 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
 }>, {
     size: import("./types.js").Size;
     color: import("./types.js").Color;
+    slot: string;
     disabled: boolean;
     defaultOpen: boolean;
-    slot: string;
     divider: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/button/Button.vue

@@ -105,29 +105,29 @@ const buttonClasses = computed(
 </script>
 
 <template>
-  <component
-    :is="to ? NuxtLink : 'button'"
-    :class="[buttonClasses, 'relative h-fit transition flex items-center justify-center']"
-    :disabled="disabled"
-    :to="to"
-  >
-    <span
+  <component
+    :is="to ? NuxtLink : 'button'"
+    :class="[buttonClasses, 'relative h-fit transition flex items-center justify-center']"
+    :disabled="disabled"
+    :to="to"
+  >
+    <span
       :class="[
   { 'opacity-0': loading },
   'flex items-center justify-center gap-2 whitespace-nowrap'
-]"
-    >
-      <component
-        :is="icon"
-        :class="[`${iconClass}`]"
-      />
-      <slot />
-    </span>
-    <span
-      v-if="loading"
-      class="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
-    >
-      <i-loader-circle class="animate-spin" />
-    </span>
-  </component>
+]"
+    >
+      <component
+        :is="icon"
+        :class="[`${iconClass}`]"
+      />
+      <slot />
+    </span>
+    <span
+      v-if="loading"
+      class="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+    >
+      <i-loader-circle class="animate-spin" />
+    </span>
+  </component>
 </template>

package/dist/runtime/components/button/Button.vue.d.ts

@@ -1,5 +1,4 @@
 import type { Component } from 'vue';
-import { NuxtLink } from '#components';
 interface Props {
     variant?: 'primary' | 'success' | 'danger' | 'gray' | 'ghost';
     view?: 'default' | 'outline' | 'transparent';
@@ -13,38 +12,21 @@ interface Props {
     active?: boolean;
     to?: string;
 }
-declare const buttonClasses: import("vue").ComputedRef<string>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_10: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<Props, {
-    NuxtLink: typeof NuxtLink;
-    buttonClasses: typeof buttonClasses;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    size: "sm" | "md" | "lg" | "xl";
-    view: "default" | "outline" | "transparent";
-    disabled: boolean;
-    to: string;
-    variant: "primary" | "success" | "danger" | "gray" | "ghost";
-    form: "icon" | "button";
-    iconClass: string;
-    loading: boolean;
-    block: boolean;
-    active: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: "sm" | "md" | "lg" | "xl";
     view: "default" | "outline" | "transparent";
+    form: "icon" | "button";
     disabled: boolean;
-    to: string;
     variant: "primary" | "success" | "danger" | "gray" | "ghost";
-    form: "icon" | "button";
     iconClass: string;
     loading: boolean;
     block: boolean;
     active: boolean;
+    to: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/checkbox/Checkbox.vue

@@ -63,62 +63,62 @@ const hasSlotContent = computed(() => {
 </script>
 
 <template>
-  <div
-    class="flex items-center"
-    :class="[disabled ? 'opacity-20' : '']"
-  >
-    <input
-      :id="name"
-      type="checkbox"
-      class="hidden"
-      :checked="isChecked"
-      :disabled="disabled"
-      :value="value"
-      @change="updateInput"
-    >
-    <label
-      v-if="viewType === 'checkbox'"
-      :for="name"
-      class="flex items-center text-deepblue-900 dark:text-gray-200"
-      :class="twMerge(textSizeOptions[size], disabled ? 'cursor-default' : 'cursor-pointer', labelClass)"
-    >
-      <span
-        v-if="side === 'left' && hasSlotContent"
-        class="select-none"
-      >
-        <slot />
-      </span>
-      <span :class="[sizeOptions[size]]">
-        <i-checkbox-intermediate
-          v-if="isIntermediate"
-          class="w-full h-full"
-          :class="twMerge('text-blue-700 dark:text-blue-500', intermediateCheckboxClass)"
-        />
-        <i-checkbox-active
-          v-else-if="isChecked"
-          class="w-full h-full"
-          :class="twMerge('text-blue-700 dark:text-blue-500', checkboxClass)"
-        />
-        <i-checkbox-empty
-          v-else
-          class="w-full h-full"
-          :class="twMerge('text-deepblue-900 dark:text-gray-200', emptyCheckboxClass)"
-        />
-      </span>
-      <span
-        v-if="side === 'right' && hasSlotContent"
-        class="select-none"
-      >
-        <slot />
-      </span>
-    </label>
-    <label
-      v-else-if="viewType === 'chip'"
-      :for="name"
-      class="px-[10px] py-[3.5px] text-deepblue-900 border border-gray-500 rounded-full  dark:text-gray-200 text-xs"
-      :class="[{ 'bg-blue-700 text-white dark:bg-blue-500 dark:border-blue-500 dark:text-gray-900 font-medium': isChecked }]"
-    >
-      <slot />
-    </label>
-  </div>
+  <div
+    class="flex items-center"
+    :class="[disabled ? 'opacity-20' : '']"
+  >
+    <input
+      :id="name"
+      type="checkbox"
+      class="hidden"
+      :checked="isChecked"
+      :disabled="disabled"
+      :value="value"
+      @change="updateInput"
+    >
+    <label
+      v-if="viewType === 'checkbox'"
+      :for="name"
+      class="flex items-center text-deepblue-900 dark:text-gray-200"
+      :class="twMerge(textSizeOptions[size], disabled ? 'cursor-default' : 'cursor-pointer', labelClass)"
+    >
+      <span
+        v-if="side === 'left' && hasSlotContent"
+        class="select-none"
+      >
+        <slot />
+      </span>
+      <span :class="[sizeOptions[size]]">
+        <i-checkbox-intermediate
+          v-if="isIntermediate"
+          class="w-full h-full"
+          :class="twMerge('text-blue-700 dark:text-blue-500', intermediateCheckboxClass)"
+        />
+        <i-checkbox-active
+          v-else-if="isChecked"
+          class="w-full h-full"
+          :class="twMerge('text-blue-700 dark:text-blue-500', checkboxClass)"
+        />
+        <i-checkbox-empty
+          v-else
+          class="w-full h-full"
+          :class="twMerge('text-deepblue-900 dark:text-gray-200', emptyCheckboxClass)"
+        />
+      </span>
+      <span
+        v-if="side === 'right' && hasSlotContent"
+        class="select-none"
+      >
+        <slot />
+      </span>
+    </label>
+    <label
+      v-else-if="viewType === 'chip'"
+      :for="name"
+      class="px-[10px] py-[3.5px] text-deepblue-900 border border-gray-500 rounded-full  dark:text-gray-200 text-xs"
+      :class="[{ 'bg-blue-700 text-white dark:bg-blue-500 dark:border-blue-500 dark:text-gray-900 font-medium': isChecked }]"
+    >
+      <slot />
+    </label>
+  </div>
 </template>

package/dist/runtime/components/checkbox/Checkbox.vue.d.ts

@@ -1,4 +1,3 @@
-import { twMerge } from 'tailwind-merge';
 interface Props {
     size?: 'lg' | 'sm';
     name?: string;
@@ -15,55 +14,24 @@ interface Props {
     labelClass?: string;
     viewType?: 'checkbox' | 'chip';
 }
-declare const isChecked: import("vue").ComputedRef<boolean>;
-declare const isIntermediate: import("vue").ComputedRef<boolean>;
-declare const updateInput: (e: any) => void;
-declare const sizeOptions: {
-    lg: string;
-    sm: string;
-};
-declare const textSizeOptions: {
-    lg: string;
-    sm: string;
-};
-declare const hasSlotContent: import("vue").ComputedRef<boolean>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_15: {}, __VLS_17: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     default?: (props: typeof __VLS_15) => any;
 } & {
     default?: (props: typeof __VLS_17) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<Props, {
-    twMerge: typeof twMerge;
-    isChecked: typeof isChecked;
-    isIntermediate: typeof isIntermediate;
-    updateInput: typeof updateInput;
-    sizeOptions: typeof sizeOptions;
-    textSizeOptions: typeof textSizeOptions;
-    hasSlotContent: typeof hasSlotContent;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
     name: string;
     size: "lg" | "sm";
-    value: string | number | object | null;
-    side: "right" | "left" | null;
     modelValue: string | number | Array<any> | object | boolean | null;
-    masterControl: boolean;
-    emptyCheckboxClass: string;
-    intermediateCheckboxClass: string;
-    alwaysIntermediate: boolean;
-    checkboxClass: string;
-    labelClass: string;
-    viewType: "checkbox" | "chip";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    name: string;
-    size: "lg" | "sm";
     value: string | number | object | null;
     side: "right" | "left" | null;
-    modelValue: string | number | Array<any> | object | boolean | null;
     masterControl: boolean;
     emptyCheckboxClass: string;
     intermediateCheckboxClass: string;

package/dist/runtime/components/date-picker/DatePicker.vue

@@ -34,48 +34,48 @@ function menuOpened() {
 </script>
 
 <template>
-  <vue-date-picker
-    ref="datePicker"
-    v-model="date"
-    v-bind="$attrs"
-    :enable-time-picker="false"
-    :format="format"
-    :format-locale="currentLocale"
-    :placeholder="placeholder || t('reuse.date')"
-    :year-picker="yearPicker"
+  <vue-date-picker
+    ref="datePicker"
+    v-model="date"
+    v-bind="$attrs"
+    :enable-time-picker="false"
+    :format="format"
+    :format-locale="currentLocale"
+    :placeholder="placeholder || t('reuse.date')"
+    :year-picker="yearPicker"
     :ui="{
   navBtnNext: 'hidden',
   navBtnPrev: 'hidden',
   menu: 'p-2'
-}"
-    model-type="format"
-    class="custom-date-picker"
-    auto-apply
-    @open="menuOpened"
-  >
-    <template #top-extra>
-      <div
-        class="flex items-center justify-between"
-        :class="{ 'mb-2': yearPicker }"
-      >
-        <p class="text-base font-semibold">
-          {{ menuTitle || t("reuse.selectDate") }}
-        </p>
-        <i-x-mark
-          class="cursor-pointer size-6 shrink-0"
-          @click="closeDatePicker"
-        />
-      </div>
-    </template>
-    <template #calendar-header="{ index, day }">
-      <p class="text-gray-600 dark:text-gray-200 text-sm font-normal">
-        {{ day }}
-      </p>
-    </template>
-    <template #action-row />
-    <template #action-preview />
-    <template #action-buttons />
-  </vue-date-picker>
+}"
+    model-type="format"
+    class="custom-date-picker"
+    auto-apply
+    @open="menuOpened"
+  >
+    <template #top-extra>
+      <div
+        class="flex items-center justify-between"
+        :class="{ 'mb-2': yearPicker }"
+      >
+        <p class="text-base font-semibold">
+          {{ menuTitle || t("reuse.selectDate") }}
+        </p>
+        <i-x-mark
+          class="cursor-pointer size-6 shrink-0"
+          @click="closeDatePicker"
+        />
+      </div>
+    </template>
+    <template #calendar-header="{ index, day }">
+      <p class="text-gray-600 dark:text-gray-200 text-sm font-normal">
+        {{ day }}
+      </p>
+    </template>
+    <template #action-row />
+    <template #action-preview />
+    <template #action-buttons />
+  </vue-date-picker>
 </template>
 
 <style>

package/dist/runtime/components/error-template/index.vue

@@ -5,36 +5,36 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex items-center justify-center gap-14">
-    <slot name="icon">
-      <div class="hidden lg:block max-w-[600px]">
-        <img
-          :src="error.icon"
-          class="hidden lg:block"
-          alt="error-icon"
-        >
-      </div>
-    </slot>
-    <div class="flex min-h-screen flex-col lg:min-h-0">
-      <div class="flex-1 px-4 py-8 lg:p-0">
-        <slot name="status">
-          <p class="mb-6 text-4xl font-bold">
-            {{ error.statusCode }}
-          </p>
-        </slot>
-        <slot name="title">
-          <h2 class="lg:heading-03 text-2xl font-bold ">
-            {{ error.title }}
-          </h2>
-        </slot>
-        <slot
-          name="content"
-          :data="error"
-        />
-      </div>
-      <div class="sticky bottom-0 z-[10000] lg:static lg:flex">
-        <slot name="default" />
-      </div>
-    </div>
-  </div>
+  <div class="flex items-center justify-center gap-14">
+    <slot name="icon">
+      <div class="hidden lg:block max-w-[600px]">
+        <img
+          :src="error.icon"
+          class="hidden lg:block"
+          alt="error-icon"
+        >
+      </div>
+    </slot>
+    <div class="flex min-h-screen flex-col lg:min-h-0">
+      <div class="flex-1 px-4 py-8 lg:p-0">
+        <slot name="status">
+          <p class="mb-6 text-4xl font-bold">
+            {{ error.statusCode }}
+          </p>
+        </slot>
+        <slot name="title">
+          <h2 class="lg:heading-03 text-2xl font-bold ">
+            {{ error.title }}
+          </h2>
+        </slot>
+        <slot
+          name="content"
+          :data="error"
+        />
+      </div>
+      <div class="sticky bottom-0 z-[10000] lg:static lg:flex">
+        <slot name="default" />
+      </div>
+    </div>
+  </div>
 </template>

package/dist/runtime/components/error-template/index.vue.d.ts

@@ -2,11 +2,10 @@ import type { ErrorTemplateData } from './types.js';
 interface Props {
     error: ErrorTemplateData;
 }
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {
-    data: any;
+    data: ErrorTemplateData;
 }, __VLS_9: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 } & {
     status?: (props: typeof __VLS_3) => any;
@@ -16,8 +15,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
     content?: (props: typeof __VLS_7) => any;
 } & {
     default?: (props: typeof __VLS_9) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/feature-description/FeatureDescription.vue

@@ -31,58 +31,58 @@ onUnmounted(() => clearTimer());
 </script>
 
 <template>
-  <div
-    v-for="(item, idx) in features"
-    :key="idx"
-    class="relative flex flex-col pl-3 cursor-pointer"
-    @click="selectFeature(idx)"
-  >
-    <div
-      v-if="selected === idx"
-      class="absolute left-0 top-0 w-[2px] bg-blue-700 dark:bg-blue-500 z-20 h-full rounded-full"
-      :class="{ 'fill-animation': selected === idx }"
-    />
-
-    <div
-      class="absolute left-0 top-0 w-[2px] bg-gray-500/50 z-10 h-full rounded-full"
-    />
-
-    <div class="flex items-center gap-2 relative z-10">
-      <div
+  <div
+    v-for="(item, idx) in features"
+    :key="idx"
+    class="relative flex flex-col pl-3 cursor-pointer"
+    @click="selectFeature(idx)"
+  >
+    <div
+      v-if="selected === idx"
+      class="absolute left-0 top-0 w-[2px] bg-blue-700 dark:bg-blue-500 z-20 h-full rounded-full"
+      :class="{ 'fill-animation': selected === idx }"
+    />
+
+    <div
+      class="absolute left-0 top-0 w-[2px] bg-gray-500/50 z-10 h-full rounded-full"
+    />
+
+    <div class="flex items-center gap-2 relative z-10">
+      <div
         :class="[
   'transition-all duration-300 ease-in-out',
   selected === idx ? 'rounded-md bg-blue-700 dark:bg-blue-500 p-2 icon-bg' : 'size-fit'
-]"
-      >
-        <component
-          :is="item.icon"
-          class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
-          :class="selected === idx ? 'text-white dark:text-gray-900' : 'text-gray-600 dark:text-[#9DA3AC]'"
-        />
-      </div>
-      <p
-        class="font-semibold text-base lg:text-xl transition-colors duration-300 ease-in-out"
-        :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-[#9DA3AC]'"
-      >
-        {{ item.title }}
-      </p>
-    </div>
-
-    <adt-transitions-transition-height
+]"
+      >
+        <component
+          :is="item.icon"
+          class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
+          :class="selected === idx ? 'text-white dark:text-gray-900' : 'text-gray-600 dark:text-[#9DA3AC]'"
+        />
+      </div>
+      <p
+        class="font-semibold text-base lg:text-xl transition-colors duration-300 ease-in-out"
+        :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-[#9DA3AC]'"
+      >
+        {{ item.title }}
+      </p>
+    </div>
+
+    <adt-transitions-transition-height
       :transition="{
   enterActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out',
   leaveActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out'
-}"
-    >
-      <div
-        v-if="selected === idx"
-      >
-        <p class="text-xs lg:text-sm pt-3">
-          {{ item.description }}
-        </p>
-      </div>
-    </adt-transitions-transition-height>
-  </div>
+}"
+    >
+      <div
+        v-if="selected === idx"
+      >
+        <p class="text-xs lg:text-sm pt-3">
+          {{ item.description }}
+        </p>
+      </div>
+    </adt-transitions-transition-height>
+  </div>
 </template>
 
 <style scoped>