@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.3

package/src/components/Breadcrumb.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-/** Renders a breadcrumb trail where ancestors are links or emit-based buttons and the last item is the current page. */
-import { computed } from 'vue'
-import type { BreadcrumbItem, BreadcrumbItemInput } from '../types'
-import { normalizeLabelItemInput } from '../utils/items'
-
-interface Props {
-  items: BreadcrumbItemInput[]
-  separator?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  separator: '/',
-})
-
-const emit = defineEmits<{
-  navigate: [item: BreadcrumbItem]
-}>()
-
-const normalizedItems = computed<BreadcrumbItem[]>(() =>
-  props.items.map(normalizeLabelItemInput)
-)
-
-function handleClick(item: BreadcrumbItem) {
-  if (!item.href) {
-    emit('navigate', item)
-  }
-}
-</script>
-
-<template>
-  <nav class="mint-breadcrumb" aria-label="Breadcrumb">
-    <ol class="mint-breadcrumb__list">
-      <li
-        v-for="(item, index) in normalizedItems"
-        :key="index"
-        class="mint-breadcrumb__item"
-      >
-        <slot name="item" :item="item" :index="index" :is-last="index === normalizedItems.length - 1">
-          <a
-            v-if="item.href && index !== normalizedItems.length - 1"
-            :href="item.href"
-            class="mint-breadcrumb__link"
-          >
-            {{ item.label }}
-          </a>
-          <button
-            v-else-if="index !== normalizedItems.length - 1"
-            class="mint-breadcrumb__link"
-            @click="handleClick(item)"
-          >
-            {{ item.label }}
-          </button>
-          <span
-            v-else
-            class="mint-breadcrumb__current"
-            aria-current="page"
-          >
-            {{ item.label }}
-          </span>
-        </slot>
-        <span
-          v-if="index !== normalizedItems.length - 1"
-          class="mint-breadcrumb__separator"
-          aria-hidden="true"
-        >
-          <slot name="separator">
-            <svg v-if="separator === '/'" class="mint-breadcrumb__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="m9 18 6-6-6-6" />
-            </svg>
-            <template v-else>{{ separator }}</template>
-          </slot>
-        </span>
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<style>
-@import '../styles/components/breadcrumb.css';
-</style>

package/src/components/Calendar.story.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import Calendar from './Calendar.vue'
-import type { CalendarSelectionMode } from '../types'
-
-const selectionModes: CalendarSelectionMode[] = ['none', 'single', 'range', 'multiple']
-
-const selectedDate = ref<Date | null>(null)
-const selectedDates = ref<Date[]>([])
-const dateRange = ref<{ start: Date; end: Date } | null>(null)
-
-const markers = [
-  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 5), color: '#3B82F6', label: 'Experiment start', type: 'dot' as const },
-  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 10), color: '#10B981', label: 'QC review', type: 'dot' as const },
-  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 15), color: '#F97316', label: 'Plate reading', type: 'dot' as const },
-  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 20), color: '#EC4899', label: 'Analysis due', type: 'dot' as const },
-  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 25), color: '#8B5CF6', label: 'Report submission', type: 'bar' as const },
-]
-</script>
-
-<template>
-  <Story title="Data Display/Calendar">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; justify-content: center;">
-          <Calendar
-            v-model="selectedDate"
-            :selection-mode="state.selectionMode"
-            :show-navigation="state.showNavigation"
-            :show-outside-days="state.showOutsideDays"
-            :fixed-weeks="state.fixedWeeks"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.selectionMode"
-          title="Selection Mode"
-          :options="selectionModes.map(m => ({ label: m, value: m }))"
-        />
-        <HstCheckbox v-model="state.showNavigation" title="Show Navigation" />
-        <HstCheckbox v-model="state.showOutsideDays" title="Show Outside Days" />
-        <HstCheckbox v-model="state.fixedWeeks" title="Fixed Weeks (6 rows)" />
-      </template>
-    </Variant>
-
-    <Variant title="Single Selection">
-      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <Calendar v-model="selectedDate" selection-mode="single" />
-        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          Selected: {{ selectedDate ? selectedDate.toLocaleDateString() : 'none' }}
-        </p>
-      </div>
-    </Variant>
-
-    <Variant title="Multiple Selection">
-      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <Calendar v-model="selectedDates" selection-mode="multiple" />
-        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          Selected {{ selectedDates.length }} date(s)
-        </p>
-      </div>
-    </Variant>
-
-    <Variant title="Range Selection">
-      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <Calendar v-model="dateRange" selection-mode="range" />
-        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          {{ dateRange ? `${dateRange.start.toLocaleDateString()} - ${dateRange.end.toLocaleDateString()}` : 'Click two dates to select a range' }}
-        </p>
-      </div>
-    </Variant>
-
-    <Variant title="With Markers">
-      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <Calendar :markers="markers" selection-mode="single" />
-        <div style="display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-primary, #1e293b);">
-          <span v-for="marker in markers" :key="marker.label" style="display: flex; align-items: center; gap: 0.375rem;">
-            <span :style="{ width: '8px', height: '8px', borderRadius: '50%', background: marker.color }" />
-            {{ marker.label }}
-          </span>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="With Min/Max Date">
-      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <Calendar
-          selection-mode="single"
-          :min-date="new Date(new Date().getFullYear(), new Date().getMonth(), 5)"
-          :max-date="new Date(new Date().getFullYear(), new Date().getMonth(), 25)"
-        />
-        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          Only dates between the 5th and 25th of this month are selectable
-        </p>
-      </div>
-    </Variant>
-
-    <Variant title="Week Starts on Sunday">
-      <div style="padding: 2rem; display: flex; justify-content: center;">
-        <Calendar selection-mode="single" :week-starts-on="0" />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/Calendar.vue

@@ -1,367 +0,0 @@
-<script setup lang="ts">
-/** Month calendar for single date, multi-date, or range selection with markers and navigation. */
-import { ref, computed, watch } from 'vue'
-import type { CalendarSelectionMode, CalendarMarker, CalendarDayContext } from '../types'
-
-/**
- * Calendar - Month calendar with date selection, range selection, and custom markers.
- *
- * @example
- * ```vue
- * <!-- Single date selection -->
- * <Calendar v-model="selectedDate" />
- *
- * <!-- Range selection -->
- * <Calendar v-model="dateRange" selection-mode="range" />
- *
- * <!-- With markers -->
- * <Calendar :markers="[{ date: '2024-01-15', color: '#ff0000', label: 'Event' }]" />
- * ```
- */
-interface Props {
-  /** Selected date(s) - type depends on selectionMode */
-  modelValue?: Date | Date[] | { start: Date; end: Date } | null
-  /** Selection behavior mode */
-  selectionMode?: CalendarSelectionMode
-  /** Display month (0-11) */
-  month?: number
-  /** Display year */
-  year?: number
-  /** Always show 6 weeks (42 days) */
-  fixedWeeks?: boolean
-  /** First day of week (0=Sunday, 1=Monday, etc.) */
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
-  /** Show days from adjacent months */
-  showOutsideDays?: boolean
-  /** Show month navigation buttons */
-  showNavigation?: boolean
-  /** Visual markers on specific dates */
-  markers?: CalendarMarker[]
-  /** Earliest selectable date */
-  minDate?: Date | string
-  /** Latest selectable date */
-  maxDate?: Date | string
-  /** Explicitly disabled dates */
-  disabledDates?: Array<Date | string>
-  /** Custom disabled date logic */
-  isDateDisabled?: (date: Date) => boolean
-  /** Locale for date formatting */
-  locale?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  selectionMode: 'single',
-  fixedWeeks: true,
-  weekStartsOn: 1,
-  showOutsideDays: true,
-  showNavigation: true,
-  markers: () => [],
-  disabledDates: () => [],
-  locale: 'en-US',
-})
-
-/**
- * @event update:modelValue - Emitted when date selection changes (v-model support)
- * @event update:month - Emitted when displayed month changes
- * @event update:year - Emitted when displayed year changes
- * @event day-click - Emitted when a day is clicked, includes day context
- * @event navigate - Emitted when month navigation occurs
- */
-const emit = defineEmits<{
-  'update:modelValue': [value: Date | Date[] | { start: Date; end: Date } | null]
-  'update:month': [month: number]
-  'update:year': [year: number]
-  'day-click': [context: CalendarDayContext]
-  navigate: [direction: 'prev' | 'next', month: number, year: number]
-}>()
-
-const today = new Date()
-today.setHours(0, 0, 0, 0)
-
-const currentMonth = ref(props.month ?? today.getMonth())
-const currentYear = ref(props.year ?? today.getFullYear())
-
-// Range hover tracking
-const hoveredDate = ref<Date | null>(null)
-
-watch(() => props.month, (val) => { if (val !== undefined) currentMonth.value = val })
-watch(() => props.year, (val) => { if (val !== undefined) currentYear.value = val })
-
-const monthLabel = computed(() => {
-  const date = new Date(currentYear.value, currentMonth.value, 1)
-  return date.toLocaleDateString(props.locale, { month: 'long', year: 'numeric' })
-})
-
-const weekDayLabels = computed(() => {
-  const labels: string[] = []
-  // Use Jan 7, 2024 (Sunday) as reference, then offset by weekStartsOn
-  const base = new Date(2024, 0, 7 + props.weekStartsOn)
-  for (let i = 0; i < 7; i++) {
-    const d = new Date(base)
-    d.setDate(d.getDate() + i)
-    labels.push(d.toLocaleDateString(props.locale, { weekday: 'short' }))
-  }
-  return labels
-})
-
-function toDateKey(d: Date): string {
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
-}
-
-function parseDate(val: Date | string): Date {
-  if (val instanceof Date) return val
-  const d = new Date(val + 'T00:00:00')
-  return d
-}
-
-function isSameDay(a: Date, b: Date): boolean {
-  return a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate()
-}
-
-const disabledDateSet = computed(() => {
-  const set = new Set<string>()
-  for (const d of props.disabledDates) {
-    const parsed = parseDate(d)
-    set.add(toDateKey(parsed))
-  }
-  return set
-})
-
-const markerMap = computed(() => {
-  const map = new Map<string, CalendarMarker[]>()
-  for (const marker of props.markers) {
-    const date = parseDate(marker.date)
-    const key = toDateKey(date)
-    const markers = map.get(key)
-    if (markers) {
-      markers.push(marker)
-    } else {
-      map.set(key, [marker])
-    }
-  }
-  return map
-})
-
-function isDateSelected(date: Date): boolean {
-  const val = props.modelValue
-  if (!val) return false
-  if (val instanceof Date) return isSameDay(date, val)
-  if (Array.isArray(val)) return val.some(d => isSameDay(date, d))
-  if ('start' in val && 'end' in val) {
-    return isSameDay(date, val.start) || isSameDay(date, val.end)
-  }
-  return false
-}
-
-function isInRange(date: Date): boolean {
-  if (props.selectionMode !== 'range') return false
-  const val = props.modelValue
-  if (!val || !('start' in (val as object))) return false
-  const range = val as { start: Date; end: Date }
-
-  const t = date.getTime()
-  const start = range.start?.getTime()
-  if (!start) return false
-
-  // If hovering during selection (before end is set)
-  if (!range.end && hoveredDate.value) {
-    const hov = hoveredDate.value.getTime()
-    const [lo, hi] = start <= hov ? [start, hov] : [hov, start]
-    return t > lo && t < hi
-  }
-
-  // Complete range
-  if (range.end) {
-    const end = range.end.getTime()
-    return t > start && t < end
-  }
-
-  return false
-}
-
-function isDisabled(date: Date): boolean {
-  if (disabledDateSet.value.has(toDateKey(date))) return true
-  if (props.isDateDisabled?.(date)) return true
-  if (props.minDate) {
-    const min = parseDate(props.minDate)
-    if (date < min) return true
-  }
-  if (props.maxDate) {
-    const max = parseDate(props.maxDate)
-    if (date > max) return true
-  }
-  return false
-}
-
-const calendarDays = computed<CalendarDayContext[]>(() => {
-  const first = new Date(currentYear.value, currentMonth.value, 1)
-  const startDow = first.getDay()
-  const offset = (startDow - props.weekStartsOn + 7) % 7
-
-  const totalCells = props.fixedWeeks ? 42 : (() => {
-    const daysInMonth = new Date(currentYear.value, currentMonth.value + 1, 0).getDate()
-    const needed = offset + daysInMonth
-    return Math.ceil(needed / 7) * 7
-  })()
-
-  const days: CalendarDayContext[] = []
-  for (let i = 0; i < totalCells; i++) {
-    const date = new Date(currentYear.value, currentMonth.value, 1 - offset + i)
-    date.setHours(0, 0, 0, 0)
-    const key = toDateKey(date)
-    days.push({
-      date,
-      dayOfMonth: date.getDate(),
-      isToday: isSameDay(date, today),
-      isSelected: isDateSelected(date),
-      isInRange: isInRange(date),
-      isDisabled: isDisabled(date),
-      isOutsideMonth: date.getMonth() !== currentMonth.value,
-      markers: markerMap.value.get(key) ?? [],
-    })
-  }
-  return days
-})
-
-// Range selection state
-const rangeStart = ref<Date | null>(null)
-
-function handleDayClick(day: CalendarDayContext) {
-  if (day.isDisabled) return
-  if (!props.showOutsideDays && day.isOutsideMonth) return
-
-  emit('day-click', day)
-
-  if (props.selectionMode === 'none') return
-
-  if (props.selectionMode === 'single') {
-    emit('update:modelValue', day.date)
-  } else if (props.selectionMode === 'multiple') {
-    const current = (props.modelValue as Date[] | undefined) ?? []
-    const idx = current.findIndex(d => isSameDay(d, day.date))
-    if (idx >= 0) {
-      const next = [...current]
-      next.splice(idx, 1)
-      emit('update:modelValue', next)
-    } else {
-      emit('update:modelValue', [...current, day.date])
-    }
-  } else if (props.selectionMode === 'range') {
-    if (!rangeStart.value) {
-      rangeStart.value = day.date
-    } else {
-      const start = rangeStart.value
-      const end = day.date
-      rangeStart.value = null
-      const ordered = start.getTime() <= end.getTime()
-        ? { start, end }
-        : { start: end, end: start }
-      emit('update:modelValue', ordered)
-    }
-  }
-}
-
-function handleDayHover(day: CalendarDayContext) {
-  if (props.selectionMode === 'range' && rangeStart.value) {
-    hoveredDate.value = day.date
-  }
-}
-
-function prevMonth() {
-  if (currentMonth.value === 0) {
-    currentMonth.value = 11
-    currentYear.value--
-    emit('update:year', currentYear.value)
-  } else {
-    currentMonth.value--
-  }
-  emit('update:month', currentMonth.value)
-  emit('navigate', 'prev', currentMonth.value, currentYear.value)
-}
-
-function nextMonth() {
-  if (currentMonth.value === 11) {
-    currentMonth.value = 0
-    currentYear.value++
-    emit('update:year', currentYear.value)
-  } else {
-    currentMonth.value++
-  }
-  emit('update:month', currentMonth.value)
-  emit('navigate', 'next', currentMonth.value, currentYear.value)
-}
-</script>
-
-<template>
-  <div class="mint-calendar">
-    <div v-if="showNavigation" class="mint-calendar__header">
-      <button type="button" class="mint-calendar__nav-btn" aria-label="Previous month" @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>
-      <slot name="header" :month="currentMonth" :year="currentYear" :prev-month="prevMonth" :next-month="nextMonth">
-        <span class="mint-calendar__title">{{ monthLabel }}</span>
-      </slot>
-      <button type="button" class="mint-calendar__nav-btn" aria-label="Next month" @click="nextMonth">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="m9 18 6-6-6-6" />
-        </svg>
-      </button>
-    </div>
-
-    <div class="mint-calendar__weekdays">
-      <span
-        v-for="(label, i) in weekDayLabels"
-        :key="i"
-        class="mint-calendar__weekday"
-      >
-        <slot name="week-day" :day-name="label" :index="i">{{ label }}</slot>
-      </span>
-    </div>
-
-    <div class="mint-calendar__grid">
-      <button
-        v-for="(day, i) in calendarDays"
-        :key="i"
-        type="button"
-        :disabled="day.isDisabled"
-        :class="[
-          'mint-calendar__day',
-          {
-            'mint-calendar__day--today': day.isToday,
-            'mint-calendar__day--selected': day.isSelected,
-            'mint-calendar__day--in-range': day.isInRange,
-            'mint-calendar__day--disabled': day.isDisabled,
-            'mint-calendar__day--outside': day.isOutsideMonth,
-            'mint-calendar__day--interactive': selectionMode !== 'none' && !day.isDisabled,
-          },
-        ]"
-        @click="handleDayClick(day)"
-        @mouseenter="handleDayHover(day)"
-      >
-        <slot name="day-content" :day="day">
-          <span class="mint-calendar__day-number">{{ day.dayOfMonth }}</span>
-          <div v-if="day.markers.length > 0" class="mint-calendar__markers">
-            <span
-              v-for="(marker, mi) in day.markers.slice(0, 3)"
-              :key="mi"
-              :class="[
-                'mint-calendar__marker',
-                `mint-calendar__marker--${marker.type ?? 'dot'}`,
-              ]"
-              :style="marker.color ? { '--marker-color': marker.color } : {}"
-              :title="marker.label"
-            />
-          </div>
-        </slot>
-      </button>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/calendar.css';
-</style>

package/src/components/ChartContainer.story.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import ChartContainer from './ChartContainer.vue'
-</script>
-
-<template>
-  <Story title="Data Display/ChartContainer">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
-          <ChartContainer
-            :title="state.showTitle ? state.title : undefined"
-            :description="state.showDescription ? state.description : undefined"
-            :loading="state.loading"
-            :empty="state.empty"
-            :empty-message="state.emptyMessage"
-          >
-            <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
-              Chart content goes here (e.g. Chart.js, D3, etc.)
-            </div>
-          </ChartContainer>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.showTitle" title="Show Title" />
-        <HstText v-model="state.title" title="Title" />
-        <HstCheckbox v-model="state.showDescription" title="Show Description" />
-        <HstText v-model="state.description" title="Description" />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-        <HstCheckbox v-model="state.empty" title="Empty" />
-        <HstText v-model="state.emptyMessage" title="Empty Message" />
-      </template>
-    </Variant>
-
-    <Variant title="With Title and Description">
-      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
-        <ChartContainer
-          title="Dose-Response Curve"
-          description="IC50 analysis for compound MINT-2847 across 8-point dilution series"
-        >
-          <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
-            Sigmoidal dose-response chart placeholder
-          </div>
-        </ChartContainer>
-      </div>
-    </Variant>
-
-    <Variant title="Loading State">
-      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
-        <ChartContainer
-          title="Cell Viability Heatmap"
-          description="Processing 96-well plate data..."
-          loading
-        >
-          <div style="height: 300px;" />
-        </ChartContainer>
-      </div>
-    </Variant>
-
-    <Variant title="Empty State">
-      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
-        <ChartContainer
-          title="Experiment Results"
-          empty
-          empty-message="No results found. Run an analysis to see data here."
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Toolbar Slot">
-      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
-        <ChartContainer title="Proliferation Assay">
-          <template #toolbar>
-            <div style="display: flex; gap: 0.5rem;">
-              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer;">
-                Linear
-              </button>
-              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--mint-primary, #3B82F6); border-radius: 0.375rem; background: var(--mint-primary, #3B82F6); color: #fff; cursor: pointer;">
-                Log
-              </button>
-            </div>
-          </template>
-          <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
-            Chart with toolbar controls
-          </div>
-        </ChartContainer>
-      </div>
-    </Variant>
-
-    <Variant title="With Legend Slot">
-      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
-        <ChartContainer title="Multi-Compound Comparison">
-          <div style="height: 250px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
-            Overlay chart placeholder
-          </div>
-          <template #legend>
-            <div style="display: flex; gap: 1.5rem; justify-content: center; font-size: 0.8125rem; color: var(--text-primary, #1e293b);">
-              <span style="display: flex; align-items: center; gap: 0.375rem;">
-                <span style="width: 12px; height: 12px; border-radius: 50%; background: #3B82F6;" /> MINT-2847
-              </span>
-              <span style="display: flex; align-items: center; gap: 0.375rem;">
-                <span style="width: 12px; height: 12px; border-radius: 50%; background: #EC4899;" /> MINT-3192
-              </span>
-              <span style="display: flex; align-items: center; gap: 0.375rem;">
-                <span style="width: 12px; height: 12px; border-radius: 50%; background: #10B981;" /> Vehicle
-              </span>
-            </div>
-          </template>
-        </ChartContainer>
-      </div>
-    </Variant>
-  </Story>
-</template>