@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-alpha.9

package/src/components/CollapsibleCard.vue

@@ -43,8 +43,8 @@ const handleToggleClick = (event: Event) => {
 }
 
 const headerClasses = computed(() => [
-  'mld-collapsible-card__header',
-  props.disabled ? 'mld-collapsible-card__header--disabled' : '',
+  'mint-collapsible-card__header',
+  props.disabled ? 'mint-collapsible-card__header--disabled' : '',
 ])
 
 const iconBgStyle = computed(() => ({
@@ -70,7 +70,7 @@ const toggleTrackStyle = computed(() => {
 </script>
 
 <template>
-  <div :class="['mld-collapsible-card', dense ? 'mld-collapsible-card--dense' : '']">
+  <div :class="['mint-collapsible-card', dense ? 'mint-collapsible-card--dense' : '']">
     <button
       type="button"
       :class="headerClasses"
@@ -78,12 +78,12 @@ const toggleTrackStyle = computed(() => {
       :aria-expanded="isOpen"
       @click="toggle"
     >
-      <div class="mld-collapsible-card__title-section">
+      <div class="mint-collapsible-card__title-section">
         <!-- Icon badge -->
-        <div v-if="icon" class="mld-collapsible-card__icon-badge" :style="iconBgStyle">
+        <div v-if="icon" class="mint-collapsible-card__icon-badge" :style="iconBgStyle">
           <svg
             v-if="isSvgIcon"
-            class="mld-collapsible-card__icon"
+            class="mint-collapsible-card__icon"
             :style="iconColorStyle"
             viewBox="0 0 24 24"
             fill="none"
@@ -97,20 +97,20 @@ const toggleTrackStyle = computed(() => {
             </template>
             <path v-else :d="icon" />
           </svg>
-          <span v-else class="mld-collapsible-card__icon-text" :style="iconColorStyle">{{ icon }}</span>
+          <span v-else class="mint-collapsible-card__icon-text" :style="iconColorStyle">{{ icon }}</span>
         </div>
 
-        <div class="mld-collapsible-card__titles">
-          <h3 class="mld-collapsible-card__title">{{ title }}</h3>
-          <p v-if="subtitle" class="mld-collapsible-card__subtitle">{{ subtitle }}</p>
+        <div class="mint-collapsible-card__titles">
+          <h3 class="mint-collapsible-card__title">{{ title }}</h3>
+          <p v-if="subtitle" class="mint-collapsible-card__subtitle">{{ subtitle }}</p>
         </div>
       </div>
 
-      <div class="mld-collapsible-card__actions">
+      <div class="mint-collapsible-card__actions">
         <!-- Toggle switch -->
         <div
           v-if="showToggle"
-          class="mld-collapsible-card__toggle"
+          class="mint-collapsible-card__toggle"
           @click="handleToggleClick"
         >
           <div
@@ -118,8 +118,8 @@ const toggleTrackStyle = computed(() => {
             tabindex="0"
             :aria-checked="toggleValue"
             :class="[
-              'mld-collapsible-card__toggle-track',
-              toggleValue ? 'mld-collapsible-card__toggle-track--on' : '',
+              'mint-collapsible-card__toggle-track',
+              toggleValue ? 'mint-collapsible-card__toggle-track--on' : '',
             ]"
             :style="toggleTrackStyle"
             @keydown.enter.prevent="handleToggleClick"
@@ -127,8 +127,8 @@ const toggleTrackStyle = computed(() => {
           >
             <span
               :class="[
-                'mld-collapsible-card__toggle-knob',
-                toggleValue ? 'mld-collapsible-card__toggle-knob--on' : '',
+                'mint-collapsible-card__toggle-knob',
+                toggleValue ? 'mint-collapsible-card__toggle-knob--on' : '',
               ]"
             />
           </div>
@@ -137,8 +137,8 @@ const toggleTrackStyle = computed(() => {
         <!-- Chevron -->
         <svg
           :class="[
-            'mld-collapsible-card__chevron',
-            isOpen ? 'mld-collapsible-card__chevron--open' : '',
+            'mint-collapsible-card__chevron',
+            isOpen ? 'mint-collapsible-card__chevron--open' : '',
           ]"
           fill="none"
           stroke="currentColor"
@@ -153,8 +153,8 @@ const toggleTrackStyle = computed(() => {
     </button>
 
     <Transition name="collapse">
-      <div v-show="isOpen" class="mld-collapsible-card__body">
-        <div class="mld-collapsible-card__content">
+      <div v-show="isOpen" class="mint-collapsible-card__body">
+        <div class="mint-collapsible-card__content">
           <slot />
         </div>
       </div>

package/src/components/ColorSlider.vue

@@ -108,10 +108,10 @@ function handleInput(event: Event) {
 </script>
 
 <template>
-  <div :class="['mld-color-slider', { 'mld-color-slider--disabled': disabled }]">
-    <div class="mld-color-slider__row">
+  <div :class="['mint-color-slider', { 'mint-color-slider--disabled': disabled }]">
+    <div class="mint-color-slider__row">
       <!-- Slider track with gradient -->
-      <div class="mld-color-slider__track">
+      <div class="mint-color-slider__track">
         <input
           type="range"
           :value="currentValue"
@@ -123,7 +123,7 @@ function handleInput(event: Event) {
           :aria-valuemin="min"
           :aria-valuemax="max"
           :aria-valuenow="currentValue"
-          class="color-slider mld-color-slider__input"
+          class="color-slider mint-color-slider__input"
           :style="{
             '--slider-gradient': gradientStyle,
             '--thumb-size': `${sizeConfig.thumb}px`,
@@ -135,7 +135,7 @@ function handleInput(event: Event) {
       <!-- Value badge -->
       <div
         v-if="showValue"
-        class="mld-color-slider__badge"
+        class="mint-color-slider__badge"
         :style="{
           ...valueBadgeStyle,
           minWidth: sizeConfig.badgeSize,
@@ -150,7 +150,7 @@ function handleInput(event: Event) {
     <!-- Min/Max labels -->
     <div
       v-if="showLabels"
-      class="mld-color-slider__labels"
+      class="mint-color-slider__labels"
       :style="{ fontSize: sizeConfig.labelFontSize }"
     >
       <span>{{ minLabel ?? min }}</span>

package/src/components/ConcentrationInput.vue

@@ -110,12 +110,12 @@ watch(availableUnits, (units) => {
 <template>
   <div
     :class="[
-      'mld-concentration-input',
-      error ? 'mld-concentration-input--error' : '',
-      disabled ? 'mld-concentration-input--disabled' : '',
+      'mint-concentration-input',
+      error ? 'mint-concentration-input--error' : '',
+      disabled ? 'mint-concentration-input--disabled' : '',
     ]"
   >
-    <div :class="['mld-concentration-input__controls', `mld-concentration-input__controls--${size}`]">
+    <div :class="['mint-concentration-input__controls', `mint-concentration-input__controls--${size}`]">
       <input
         type="number"
         :value="currentValue"
@@ -124,21 +124,21 @@ watch(availableUnits, (units) => {
         :disabled="disabled"
         :placeholder="placeholder"
         :class="[
-          'mld-concentration-input__value',
-          `mld-concentration-input__value--${size}`,
-          disabled ? 'mld-concentration-input__value--disabled' : '',
+          'mint-concentration-input__value',
+          `mint-concentration-input__value--${size}`,
+          disabled ? 'mint-concentration-input__value--disabled' : '',
         ]"
         aria-label="Concentration value"
         @input="handleValueInput"
       />
 
-      <div class="mld-concentration-input__unit">
+      <div class="mint-concentration-input__unit">
         <select
           :value="currentUnit"
           :disabled="disabled"
           :class="[
-            'mld-concentration-input__unit-select',
-            `mld-concentration-input__unit-select--${size}`,
+            'mint-concentration-input__unit-select',
+            `mint-concentration-input__unit-select--${size}`,
           ]"
           aria-label="Concentration unit"
           @change="handleUnitChange"
@@ -147,7 +147,7 @@ watch(availableUnits, (units) => {
             <optgroup
               v-if="filteredCategories.length > 1"
               :label="category.label"
-              class="mld-concentration-input__unit-group"
+              class="mint-concentration-input__unit-group"
             >
               <option
                 v-for="unit in category.units"
@@ -173,7 +173,7 @@ watch(availableUnits, (units) => {
 
     <div
       v-if="showConversion && conversionHint"
-      class="mld-concentration-input__conversion"
+      class="mint-concentration-input__conversion"
     >
       {{ conversionHint }}
     </div>

package/src/components/ConfirmDialog.story.vue

@@ -89,7 +89,7 @@ function initPlayground() {
         <ConfirmDialog
           v-model="uninstallOpen"
           title="Confirm uninstall"
-          subtitle="mld-plugin-metabolomics · v2.4.1"
+          subtitle="mint-plugin-metabolomics · v2.4.1"
           message="Removing this plugin will delete its routes from the platform on next restart. Plugin data and registered experiment types will be preserved."
           variant="danger"
           confirm-label="Uninstall"

package/src/components/ConfirmDialog.vue

@@ -48,24 +48,24 @@ function handleConfirm() {
     :close-on-escape="!loading"
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <div class="mld-confirm">
+    <div class="mint-confirm">
       <!-- Icon is now opt-in via slot. Refresh design keeps the body focused on
            the message; variant intent is carried by the confirm button's color. -->
       <div
         v-if="$slots.icon"
-        :class="['mld-confirm__icon', `mld-confirm__icon--${variant}`]"
+        :class="['mint-confirm__icon', `mint-confirm__icon--${variant}`]"
       >
         <slot name="icon" />
       </div>
-      <p v-if="message" class="mld-confirm__message">{{ message }}</p>
+      <p v-if="message" class="mint-confirm__message">{{ message }}</p>
       <slot />
     </div>
 
     <template #footer>
-      <div class="mld-confirm__footer">
+      <div class="mint-confirm__footer">
         <button
           type="button"
-          class="mld-confirm__btn-cancel"
+          class="mint-confirm__btn-cancel"
           :disabled="loading"
           @click="handleCancel"
         >
@@ -73,11 +73,11 @@ function handleConfirm() {
         </button>
         <button
           type="button"
-          :class="['mld-confirm__btn-confirm', `mld-confirm__btn-confirm--${variant}`]"
+          :class="['mint-confirm__btn-confirm', `mint-confirm__btn-confirm--${variant}`]"
           :disabled="loading"
           @click="handleConfirm"
         >
-          <svg v-if="loading" class="mld-confirm__btn-spinner" fill="none" viewBox="0 0 24 24">
+          <svg v-if="loading" class="mint-confirm__btn-spinner" fill="none" viewBox="0 0 24 24">
             <circle style="opacity: 0.25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
             <path style="opacity: 0.75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
           </svg>

package/src/components/DataFrame.vue

@@ -239,36 +239,36 @@ const wrapperStyle = computed(() => {
 <template>
   <div
     :class="[
-      'mld-dataframe',
-      { 'mld-dataframe--bordered': bordered },
+      'mint-dataframe',
+      { 'mint-dataframe--bordered': bordered },
     ]"
   >
     <!-- Search header -->
-    <div v-if="searchable" class="mld-dataframe__header">
-      <div class="mld-dataframe__search-wrapper">
-        <svg class="mld-dataframe__search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <div v-if="searchable" class="mint-dataframe__header">
+      <div class="mint-dataframe__search-wrapper">
+        <svg class="mint-dataframe__search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="11" cy="11" r="8" /><path d="m21 21-4.34-4.34" />
         </svg>
         <input
           v-model="searchQuery"
           type="text"
-          class="mld-dataframe__search"
+          class="mint-dataframe__search"
           :placeholder="searchPlaceholder"
         />
       </div>
     </div>
 
     <!-- Table wrapper -->
-    <div class="mld-dataframe__table-wrapper" :style="wrapperStyle">
-      <table class="mld-dataframe__table">
-        <thead :class="['mld-dataframe__thead', { 'mld-dataframe__thead--sticky': stickyHeader }]">
+    <div class="mint-dataframe__table-wrapper" :style="wrapperStyle">
+      <table class="mint-dataframe__table">
+        <thead :class="['mint-dataframe__thead', { 'mint-dataframe__thead--sticky': stickyHeader }]">
           <tr>
-            <th v-if="selectable" class="mld-dataframe__th mld-dataframe__th--checkbox">
+            <th v-if="selectable" class="mint-dataframe__th mint-dataframe__th--checkbox">
               <input
                 type="checkbox"
                 :checked="allSelected"
                 :indeterminate="selectIndeterminate"
-                class="mld-dataframe__checkbox"
+                class="mint-dataframe__checkbox"
                 @change="toggleSelectAll"
               />
             </th>
@@ -276,12 +276,12 @@ const wrapperStyle = computed(() => {
               v-for="col in columns"
               :key="col.key"
               :class="[
-                'mld-dataframe__th',
-                `mld-dataframe__th--${size}`,
-                `mld-dataframe__th--align-${col.align ?? 'left'}`,
+                'mint-dataframe__th',
+                `mint-dataframe__th--${size}`,
+                `mint-dataframe__th--align-${col.align ?? 'left'}`,
                 {
-                  'mld-dataframe__th--sortable': isColumnSortable(col),
-                  'mld-dataframe__th--sorted': activeSort?.key === col.key && activeSort?.direction,
+                  'mint-dataframe__th--sortable': isColumnSortable(col),
+                  'mint-dataframe__th--sorted': activeSort?.key === col.key && activeSort?.direction,
                 },
               ]"
               :style="{
@@ -291,15 +291,15 @@ const wrapperStyle = computed(() => {
               @click="isColumnSortable(col) ? handleSort(col) : undefined"
             >
               <slot :name="`header-${col.key}`" :column="col">
-                <div class="mld-dataframe__th-content">
+                <div class="mint-dataframe__th-content">
                   <span>{{ col.label }}</span>
                   <svg
                     v-if="isColumnSortable(col)"
                     :class="[
-                      'mld-dataframe__sort-icon',
+                      'mint-dataframe__sort-icon',
                       {
-                        'mld-dataframe__sort-icon--asc': activeSort?.key === col.key && activeSort?.direction === 'asc',
-                        'mld-dataframe__sort-icon--desc': activeSort?.key === col.key && activeSort?.direction === 'desc',
+                        'mint-dataframe__sort-icon--asc': activeSort?.key === col.key && activeSort?.direction === 'asc',
+                        'mint-dataframe__sort-icon--desc': activeSort?.key === col.key && activeSort?.direction === 'desc',
                       },
                     ]"
                     viewBox="0 0 24 24"
@@ -322,19 +322,19 @@ const wrapperStyle = computed(() => {
             v-for="(row, rowIndex) in paginatedData"
             :key="getRowKey(row, rowIndex)"
             :class="[
-              'mld-dataframe__row',
+              'mint-dataframe__row',
               {
-                'mld-dataframe__row--striped': striped && rowIndex % 2 === 1,
-                'mld-dataframe__row--selected': selectedKeys.includes(getRowKey(row, rowIndex)),
+                'mint-dataframe__row--striped': striped && rowIndex % 2 === 1,
+                'mint-dataframe__row--selected': selectedKeys.includes(getRowKey(row, rowIndex)),
               },
             ]"
             @click="emit('row-click', row, rowIndex)"
           >
-            <td v-if="selectable" class="mld-dataframe__td mld-dataframe__td--checkbox">
+            <td v-if="selectable" class="mint-dataframe__td mint-dataframe__td--checkbox">
               <input
                 type="checkbox"
                 :checked="selectedKeys.includes(getRowKey(row, rowIndex))"
-                class="mld-dataframe__checkbox"
+                class="mint-dataframe__checkbox"
                 @click.stop
                 @change="toggleRowSelect(getRowKey(row, rowIndex))"
               />
@@ -343,10 +343,10 @@ const wrapperStyle = computed(() => {
               v-for="col in columns"
               :key="col.key"
               :class="[
-                'mld-dataframe__td',
-                `mld-dataframe__td--${size}`,
-                `mld-dataframe__td--align-${col.align ?? 'left'}`,
-                { 'mld-dataframe__td--ellipsis': col.ellipsis },
+                'mint-dataframe__td',
+                `mint-dataframe__td--${size}`,
+                `mint-dataframe__td--align-${col.align ?? 'left'}`,
+                { 'mint-dataframe__td--ellipsis': col.ellipsis },
               ]"
               @click.stop="emit('cell-click', getCellValue(row, col.key), col, row)"
             >
@@ -359,19 +359,19 @@ const wrapperStyle = computed(() => {
       </table>
 
       <!-- Empty state -->
-      <div v-if="paginatedData.length === 0 && !loading" class="mld-dataframe__empty">
+      <div v-if="paginatedData.length === 0 && !loading" class="mint-dataframe__empty">
         <slot name="empty">
-          <svg class="mld-dataframe__empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg class="mint-dataframe__empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
           </svg>
-          <p class="mld-dataframe__empty-text">{{ emptyText }}</p>
+          <p class="mint-dataframe__empty-text">{{ emptyText }}</p>
         </slot>
       </div>
 
       <!-- Loading overlay -->
-      <div v-if="loading" class="mld-dataframe__loading">
+      <div v-if="loading" class="mint-dataframe__loading">
         <slot name="loading">
-          <svg class="mld-dataframe__loading-spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <svg class="mint-dataframe__loading-spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
             <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
           </svg>
@@ -380,16 +380,16 @@ const wrapperStyle = computed(() => {
     </div>
 
     <!-- Footer / Pagination -->
-    <div v-if="pagination" class="mld-dataframe__footer">
+    <div v-if="pagination" class="mint-dataframe__footer">
       <slot name="footer">
-        <span class="mld-dataframe__page-info">
+        <span class="mint-dataframe__page-info">
           {{ (pagination.page - 1) * pagination.pageSize + 1 }}&ndash;{{ Math.min(pagination.page * pagination.pageSize, sortedData.length) }}
           of {{ sortedData.length }}
         </span>
-        <div class="mld-dataframe__page-controls">
+        <div class="mint-dataframe__page-controls">
           <button
             type="button"
-            class="mld-dataframe__page-btn"
+            class="mint-dataframe__page-btn"
             :disabled="pagination.page <= 1"
             @click="handlePageChange(pagination.page - 1)"
           >
@@ -397,10 +397,10 @@ const wrapperStyle = computed(() => {
               <path d="m15 18-6-6 6-6" />
             </svg>
           </button>
-          <span class="mld-dataframe__page-number">{{ pagination.page }} / {{ totalPages }}</span>
+          <span class="mint-dataframe__page-number">{{ pagination.page }} / {{ totalPages }}</span>
           <button
             type="button"
-            class="mld-dataframe__page-btn"
+            class="mint-dataframe__page-btn"
             :disabled="pagination.page >= totalPages"
             @click="handlePageChange(pagination.page + 1)"
           >

package/src/components/DatePicker.vue

@@ -206,8 +206,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="containerRef" class="mld-date-picker">
-    <div ref="inputRef" class="mld-date-picker__input-wrapper">
+  <div ref="containerRef" class="mint-date-picker">
+    <div ref="inputRef" class="mint-date-picker__input-wrapper">
       <input
         type="text"
         readonly
@@ -215,14 +215,14 @@ onUnmounted(() => {
         :placeholder="placeholder || 'Select date'"
         :disabled="disabled"
         :class="[
-          'mld-date-picker__input',
-          `mld-date-picker__input--${size}`,
-          error ? 'mld-date-picker__input--error' : '',
-          disabled ? 'mld-date-picker__input--disabled' : '',
+          'mint-date-picker__input',
+          `mint-date-picker__input--${size}`,
+          error ? 'mint-date-picker__input--error' : '',
+          disabled ? 'mint-date-picker__input--disabled' : '',
         ]"
         @click="toggleCalendar"
       />
-      <div class="mld-date-picker__icon">
+      <div class="mint-date-picker__icon">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
         </svg>
@@ -231,38 +231,38 @@ onUnmounted(() => {
 
     <Teleport to="body">
       <Transition
-        enter-active-class="mld-date-picker__dropdown-enter-active"
-        enter-from-class="mld-date-picker__dropdown-enter-from"
-        enter-to-class="mld-date-picker__dropdown-enter-to"
-        leave-active-class="mld-date-picker__dropdown-leave-active"
-        leave-from-class="mld-date-picker__dropdown-leave-from"
-        leave-to-class="mld-date-picker__dropdown-leave-to"
+        enter-active-class="mint-date-picker__dropdown-enter-active"
+        enter-from-class="mint-date-picker__dropdown-enter-from"
+        enter-to-class="mint-date-picker__dropdown-enter-to"
+        leave-active-class="mint-date-picker__dropdown-leave-active"
+        leave-from-class="mint-date-picker__dropdown-leave-from"
+        leave-to-class="mint-date-picker__dropdown-leave-to"
       >
         <div
           v-if="isOpen"
           ref="dropdownRef"
-          class="mld-date-picker__dropdown"
+          class="mint-date-picker__dropdown"
           :style="dropdownStyle"
           role="dialog"
           aria-modal="true"
           aria-label="Date picker"
         >
-        <div class="mld-date-picker__header">
+        <div class="mint-date-picker__header">
           <button
             type="button"
             aria-label="Previous month"
-            class="mld-date-picker__nav-btn"
+            class="mint-date-picker__nav-btn"
             @click="prevMonth"
           >
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="m15 18-6-6 6-6" />
             </svg>
           </button>
-          <span class="mld-date-picker__month-year">{{ monthYear }}</span>
+          <span class="mint-date-picker__month-year">{{ monthYear }}</span>
           <button
             type="button"
             aria-label="Next month"
-            class="mld-date-picker__nav-btn"
+            class="mint-date-picker__nav-btn"
             @click="nextMonth"
           >
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -271,17 +271,17 @@ onUnmounted(() => {
           </button>
         </div>
 
-        <div class="mld-date-picker__weekdays">
+        <div class="mint-date-picker__weekdays">
           <div
             v-for="day in weekDays"
             :key="day"
-            class="mld-date-picker__weekday"
+            class="mint-date-picker__weekday"
           >
             {{ day }}
           </div>
         </div>
 
-        <div class="mld-date-picker__grid">
+        <div class="mint-date-picker__grid">
           <button
             v-for="(day, index) in calendarDays"
             :key="index"
@@ -290,11 +290,11 @@ onUnmounted(() => {
             :aria-label="day.date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })"
             :aria-selected="isSameDay(day.date, selectedDate)"
             :class="[
-              'mld-date-picker__day',
-              !day.isCurrentMonth ? 'mld-date-picker__day--other-month' : '',
-              day.isDisabled ? 'mld-date-picker__day--disabled' : '',
-              isSameDay(day.date, selectedDate) ? 'mld-date-picker__day--selected' : '',
-              isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mld-date-picker__day--today' : '',
+              'mint-date-picker__day',
+              !day.isCurrentMonth ? 'mint-date-picker__day--other-month' : '',
+              day.isDisabled ? 'mint-date-picker__day--disabled' : '',
+              isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--selected' : '',
+              isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--today' : '',
             ]"
             @click="selectDate(day)"
           >
@@ -302,10 +302,10 @@ onUnmounted(() => {
           </button>
         </div>
 
-        <div class="mld-date-picker__footer">
+        <div class="mint-date-picker__footer">
           <button
             type="button"
-            class="mld-date-picker__footer-btn mld-date-picker__today-btn"
+            class="mint-date-picker__footer-btn mint-date-picker__today-btn"
             @click="goToToday"
           >
             Today
@@ -313,7 +313,7 @@ onUnmounted(() => {
           <button
             v-if="clearable && modelValue"
             type="button"
-            class="mld-date-picker__footer-btn mld-date-picker__clear-btn"
+            class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
             @click="clear"
           >
             Clear