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

package/src/components/AutoGroupModal.vue

@@ -1,294 +0,0 @@
-<script setup lang="ts">
-/**
- * Smart Group modal. Parses sample naming patterns into candidate grouping
- * fields (auto / "Field Recipe") or lets you assign cohorts by hand (manual),
- * staying wired to the `useAutoGroup` engine. The UI is the Smart Group design
- * (`SmartGroupFieldRecipe` / `SmartGroupManual`) driven in controlled mode; this
- * component is the adapter that maps engine state ↔ that UI and emits the
- * resulting `AutoGroupResult`. Public props/emits are unchanged so existing
- * consumers (`SampleSelector`, template catalog) keep working.
- */
-import { ref, computed, watch } from 'vue'
-import BaseModal from './BaseModal.vue'
-import AlertBox from './AlertBox.vue'
-import SmartGroupFieldRecipe from './SmartGroupFieldRecipe.vue'
-import SmartGroupManual from './SmartGroupManual.vue'
-import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
-import { useApi } from '../composables/useApi'
-import { readFileAsText } from '../composables/useFileImport'
-import {
-  engineGroupsToRail,
-  engineSchemasToCards,
-  engineToQcRoute,
-  manualSamplesToResult,
-  qcRouteToEngine,
-  seedFromGroups,
-} from './AutoGroupModal.adapter'
-import { SAMPLE_GROUP_COLOR_OPTIONS } from './SampleSelector.colors'
-import type { QcRoute } from './SmartGroupFieldRecipe.groups'
-import type { ManualSample } from './SmartGroupManual.cohorts'
-import type { ManualPaletteEntry } from './SmartGroup.types'
-import type { AutoGroupResult } from '../types/auto-group'
-import type { SampleGroup } from '../types'
-
-type GroupingWorkflow = 'auto' | 'manual'
-
-export interface Props {
-  modelValue: boolean
-  samples?: string[]
-  groups?: SampleGroup[]
-  initialMode?: GroupingWorkflow
-  experimentId?: number
-  /** Pre-fetched design data — bypasses API fetch when provided */
-  designData?: Record<string, unknown>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  samples: () => [],
-  groups: () => [],
-  initialMode: 'auto',
-  experimentId: undefined,
-  designData: undefined,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'apply': [result: AutoGroupResult]
-}>()
-
-const autoGroup = useAutoGroup()
-const api = useApi()
-const activeWorkflow = ref<GroupingWorkflow>(props.initialMode)
-const experimentError = ref<string | null>(null)
-const experimentLoading = ref(false)
-
-// QC routing — a 3-way state stored as two booleans so downstream engine
-// dispositions stay stable; the UI presents it as overlay / exclude / mix.
-const qcAsOverlay = ref(true)
-const excludeQc = ref(false)
-type QcRouting = 'overlay' | 'exclude' | 'mix'
-const qcRouting = computed<QcRouting>(() => {
-  if (excludeQc.value) return 'exclude'
-  if (qcAsOverlay.value) return 'overlay'
-  return 'mix'
-})
-function setQcRouting(value: QcRouting) {
-  qcAsOverlay.value = value === 'overlay'
-  excludeQc.value = value === 'exclude'
-  autoGroup.setClassDispositions(
-    c => c.kind !== 'biological' && c.kind !== 'unknown',
-    value === 'exclude' ? 'exclude' : value === 'overlay' ? 'overlay' : 'group',
-  )
-}
-
-// ── Auto mode (Field Recipe) ─────────────────────────────────────────
-// The recipe represents the whole batch, including fields that only exist in
-// another class or token-length schema split.
-const fieldCards = computed(() =>
-  engineSchemasToCards(autoGroup.schemas.value, autoGroup.activeClassKey.value),
-)
-const railGroups = computed(() =>
-  engineGroupsToRail(autoGroup.result.value.experimentalGroups ?? autoGroup.groups.value),
-)
-const qcSampleCount = computed(() =>
-  autoGroup.classes.value
-    .filter(c => c.kind !== 'biological' && c.kind !== 'unknown')
-    .reduce((acc, c) => acc + c.members.length, 0),
-)
-const qcChip = computed(() =>
-  qcRouting.value !== 'mix' && qcSampleCount.value > 0
-    ? { name: 'QC_Pool', count: qcSampleCount.value }
-    : null,
-)
-const fieldRecipeRoute = computed<QcRoute>(() => engineToQcRoute(qcRouting.value))
-const headerCount = computed(() => autoGroup.samples.value.length)
-
-// The cards describe the batch, not one class, so edits fan out to every class
-// exposing the field — otherwise a multi-class batch (e.g. a Liver class and a
-// Kidney class) ends up with only half its groups reordered.
-function onToggleField(cardIndex: number) {
-  const field = fieldCards.value.fields[cardIndex]
-  if (!field) return
-  autoGroup.toggleGroupByField(field.key)
-}
-function onMoveField(cardIndex: number, direction: 'up' | 'down') {
-  const field = fieldCards.value.fields[cardIndex]
-  if (!field) return
-  autoGroup.moveGroupByField(field.key, direction)
-}
-function onRouteChange(route: QcRoute) {
-  setQcRouting(qcRouteToEngine(route))
-}
-function applyAuto() {
-  emit('apply', autoGroup.result.value)
-  close()
-}
-
-// CSV upload from the Field Recipe header: parse the file into the engine's CSV
-// path. `samples` derives reactively from csvData and `parseInput()` builds the
-// classes/fields/groups; re-apply the current QC routing like the open watcher.
-async function onCsvFile(file: File) {
-  experimentError.value = null
-  try {
-    // Parse BEFORE mutating engine state so a malformed/empty/header-only CSV
-    // (parseCSV throws) leaves the engine untouched instead of half-set.
-    const text = await readFileAsText(file)
-    const parsed = parseCSV(text)
-    autoGroup.csvData.value = parsed
-    autoGroup.inputMode.value = 'csv'
-    autoGroup.parseInput()
-    setQcRouting(qcRouting.value)
-  } catch (e) {
-    experimentError.value = e instanceof Error ? e.message : 'Could not read that CSV file.'
-  }
-}
-
-// Template downloads via the engine. `downloadTemplate(mode, format)` defaults to
-// ('prefilled', 'csv'); pass the explicit mode for each menu action.
-function onDownloadTemplate() {
-  autoGroup.downloadTemplate('blank', 'csv')
-}
-function onDownloadPrefilled() {
-  autoGroup.downloadTemplate('prefilled', 'csv')
-}
-
-// ── Manual mode ──────────────────────────────────────────────────────
-// Hex swatches (the SDK's existing manual palette) rather than SmartGroupManual's
-// var(--grp-*) story default: SampleSelector tints group colours via hex8 string
-// concatenation (`group.color + '20'`), so an emitted cohort colour must be a
-// concrete hex value — matching the colours the previous manual modal produced.
-const MANUAL_SWATCH_LABELS = ['Blue', 'Green', 'Amber', 'Red', 'Violet']
-const manualPalette: ManualPaletteEntry[] = SAMPLE_GROUP_COLOR_OPTIONS.map((c, i) => ({
-  c,
-  k: MANUAL_SWATCH_LABELS[i] ?? c,
-}))
-// Source from the engine once input is parsed (paste of props.samples, an
-// experiment fetch, OR an uploaded CSV) so CSV-loaded samples reach manual mode
-// too; fall back to the raw prop before the engine has parsed anything.
-const manualSampleNames = computed(() =>
-  autoGroup.samples.value.length > 0 ? autoGroup.samples.value : props.samples,
-)
-const manualSeed = computed(() => seedFromGroups(props.groups))
-// Remount the manual builder when the sample set changes so it re-seeds from
-// freshly-loaded experiment data rather than a stale snapshot.
-const manualKey = computed(() => manualSampleNames.value.join('\n'))
-function applyManual(payload: { samples: ManualSample[] }) {
-  emit('apply', manualSamplesToResult(payload.samples, props.groups))
-  close()
-}
-
-function close() {
-  emit('update:modelValue', false)
-}
-
-async function fetchExperimentData() {
-  if (!props.experimentId && !props.designData) return
-  autoGroup.inputMode.value = 'experiment'
-  experimentError.value = null
-  experimentLoading.value = true
-  try {
-    let pluginData: Record<string, unknown> | undefined
-    if (props.designData) {
-      pluginData = props.designData
-    } else {
-      const result = await api.get<Record<string, unknown>>(`/experiments/${props.experimentId}/data`)
-      pluginData = result.data as Record<string, unknown> | undefined
-    }
-    if (!pluginData || typeof pluginData !== 'object') {
-      experimentError.value = 'No design data found for this experiment'
-      return
-    }
-    if (!autoGroup.loadExperimentData(pluginData, { samples: props.samples })) {
-      experimentError.value = 'No sample metadata found in this experiment'
-      return
-    }
-    setQcRouting(qcRouting.value)
-  } catch (e) {
-    experimentError.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'
-  } finally {
-    experimentLoading.value = false
-  }
-}
-
-// Populate the engine from props when the modal opens. Sample ingestion still
-// comes from the `samples` / `designData` / `experimentId` props exactly as
-// before — the redesign just drops the multi-step input/schema/merge UI.
-watch(
-  () => props.modelValue,
-  (open) => {
-    if (!open) return
-    activeWorkflow.value = props.initialMode
-    experimentError.value = null
-    qcAsOverlay.value = true
-    excludeQc.value = false
-    autoGroup.reset()
-    if (props.experimentId || props.designData) {
-      fetchExperimentData()
-    } else if (props.samples.length > 0) {
-      autoGroup.rawText.value = props.samples.join('\n')
-      autoGroup.inputMode.value = 'paste'
-      autoGroup.parseInput()
-      setQcRouting(qcRouting.value)
-    } else {
-      autoGroup.inputMode.value = 'paste'
-    }
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <BaseModal
-    class="sg-host"
-    :model-value="modelValue"
-    :closable="false"
-    :close-on-overlay="false"
-    :close-on-escape="false"
-    size="lg"
-    @update:model-value="emit('update:modelValue', $event)"
-  >
-    <AlertBox v-if="experimentError" type="error" class="sg-host__error">
-      {{ experimentError }}
-    </AlertBox>
-
-    <SmartGroupFieldRecipe
-      v-if="activeWorkflow === 'auto'"
-      :fields="fieldCards.fields"
-      :enabled="fieldCards.enabled"
-      :layers="fieldCards.layers"
-      :groups="railGroups"
-      :qc-chip="qcChip"
-      :route="fieldRecipeRoute"
-      :header-count="headerCount"
-      :qc-count="qcSampleCount"
-      :can-download-template="autoGroup.canDownloadTemplate.value"
-      :loading="experimentLoading"
-      experiment-label=""
-      @toggle="onToggleField"
-      @move="onMoveField"
-      @update:route="onRouteChange"
-      @csv-file="onCsvFile"
-      @download-template="onDownloadTemplate"
-      @download-prefilled="onDownloadPrefilled"
-      @apply="applyAuto"
-      @manual="activeWorkflow = 'manual'"
-      @cancel="close"
-      @close="close"
-    />
-    <SmartGroupManual
-      v-else
-      :key="manualKey"
-      :sample-names="manualSampleNames"
-      :seed="manualSeed"
-      :palette="manualPalette"
-      @done="applyManual"
-      @auto="activeWorkflow = 'auto'"
-      @cancel="close"
-      @close="close"
-    />
-  </BaseModal>
-</template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/Avatar.story.vue

@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import Avatar from './Avatar.vue'
-
-const sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl')[] = ['xs', 'sm', 'md', 'lg', 'xl']
-
-const users = [
-  { name: 'Alice Morscher', color: undefined },
-  { name: 'Bob Chen', color: undefined },
-  { name: 'Clara Diaz', color: undefined },
-  { name: 'David Kim', color: undefined },
-  { name: 'Elena Rossi', color: undefined },
-]
-</script>
-
-<template>
-  <Story title="Data Display/Avatar">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <Avatar
-            :name="state.name"
-            :initials="state.initials || undefined"
-            :src="state.src || undefined"
-            :size="state.size"
-            :color="state.color || undefined"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.name" title="Name" />
-        <HstText v-model="state.initials" title="Initials (override)" />
-        <HstText v-model="state.src" title="Image URL" />
-        <HstText v-model="state.color" title="Color (hex)" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="All Sizes">
-      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; justify-content: center;">
-        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <Avatar name="Alice Morscher" :size="size" />
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ size }}
-          </span>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Name-based Colors">
-      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
-        <div v-for="user in users" :key="user.name" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <Avatar :name="user.name" size="lg" />
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">{{ user.name.split(' ')[0] }}</span>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Default vs explicit initials">
-      <!-- Default: single letter from `name` (matches the platform's
-           getAvatarInitial helper). Pass `:initials="'XX'"` to override
-           with two letters or any other label. -->
-      <div style="padding: 2rem; display: flex; gap: 2rem; align-items: center; justify-content: center;">
-        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <Avatar name="Estrella Pan" size="lg" />
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">name="Estrella Pan" → "E"</span>
-        </div>
-        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <Avatar name="Estrella Pan" initials="EP" size="lg" />
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">initials="EP" → "EP"</span>
-        </div>
-        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <Avatar initials="QC" name="Quality Control" size="lg" color="#10B981" />
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">role badge "QC"</span>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="With Image">
-      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
-        <Avatar
-          src="https://api.dicebear.com/7.x/initials/svg?seed=AM&backgroundColor=3B82F6"
-          name="Alice Morscher"
-          size="lg"
-        />
-        <Avatar
-          src="https://api.dicebear.com/7.x/initials/svg?seed=BC&backgroundColor=8B5CF6"
-          name="Bob Chen"
-          size="lg"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Fallback (No Name)">
-      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
-        <Avatar v-for="size in sizes" :key="size" :size="size" />
-      </div>
-    </Variant>
-
-    <Variant title="With status dot">
-      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;">
-        <Avatar name="Sarah Chen" size="md" status="online" />
-        <Avatar name="Alex Morgan" size="md" status="away" />
-        <Avatar name="Jordan Park" size="md" status="busy" />
-        <Avatar name="Riley Wu" size="md" status="offline" />
-        <Avatar name="Sam Lee" size="lg" src="https://i.pravatar.cc/80?img=11" status="online" />
-        <Avatar name="Taylor Kim" size="xl" status="online" />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/Avatar.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-/** Displays a user avatar as an image, a single derived initial, or a fallback icon, with a deterministic background color and optional status dot. */
-import { computed } from 'vue'
-
-interface Props {
-  name?: string
-  initials?: string
-  src?: string
-  alt?: string
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  color?: string
-  status?: 'online' | 'away' | 'busy' | 'offline'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  alt: '',
-  size: 'md',
-})
-
-const PALETTE = ['#3B82F6', '#8B5CF6', '#EC4899', '#F97316', '#10B981', '#F59E0B', '#06B6D4', '#6366F1']
-
-// Default: first letter of `name`, uppercased — matches the platform's
-// canonical `getAvatarInitial(user)` helper. Consumers wanting two letters
-// (e.g. role badges like "PI", "QC") pass `:initials="'XX'"` explicitly.
-const computedInitials = computed(() =>
-  props.initials || props.name?.charAt(0).toUpperCase() || ''
-)
-
-const backgroundColor = computed(() => {
-  if (props.color) return props.color
-  if (!props.name) return undefined
-
-  let hash = 0
-  for (let i = 0; i < props.name.length; i++) {
-    hash = props.name.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  return PALETTE[Math.abs(hash) % PALETTE.length]
-})
-</script>
-
-<template>
-  <span
-    :class="['mint-avatar', `mint-avatar--${size}`]"
-    role="img"
-    :aria-label="alt || name || 'User avatar'"
-  >
-    <span
-      class="mint-avatar__face"
-      :style="backgroundColor ? { backgroundColor } : undefined"
-    >
-      <img
-        v-if="src"
-        :src="src"
-        :alt="alt || name || ''"
-        class="mint-avatar__image"
-      >
-      <span v-else-if="computedInitials" class="mint-avatar__initials">
-        {{ computedInitials }}
-      </span>
-      <svg
-        v-else
-        class="mint-avatar__fallback"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-      >
-        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-      </svg>
-    </span>
-    <span
-      v-if="status"
-      :class="['mint-avatar__status', `mint-avatar__status--${status}`]"
-      aria-hidden="true"
-    />
-  </span>
-</template>
-
-<style>
-@import '../styles/components/avatar.css';
-</style>

package/src/components/BaseButton.story.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import BaseButton from './BaseButton.vue'
-import type { ButtonVariant, ButtonSize } from '../types'
-
-const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
-const sizes: ButtonSize[] = ['sm', 'md', 'lg']
-
-function handleClick() {
-  console.log('Button clicked')
-}
-</script>
-
-<template>
-  <Story title="Base Inputs/BaseButton">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <BaseButton
-            :variant="state.variant"
-            :size="state.size"
-            :disabled="state.disabled"
-            :loading="state.loading"
-            :full-width="state.fullWidth"
-            @click="handleClick"
-          >
-            {{ state.label }}
-          </BaseButton>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.label" title="Label" />
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
-        />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-        <HstCheckbox v-model="state.fullWidth" title="Full Width" />
-      </template>
-    </Variant>
-
-    <Variant title="All Variants">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem;">
-        <div v-for="size in sizes" :key="size">
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ size }}
-          </p>
-          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-            <BaseButton
-              v-for="variant in variants"
-              :key="variant"
-              :variant="variant"
-              :size="size"
-              @click="handleClick"
-            >
-              {{ variant }}
-            </BaseButton>
-          </div>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Loading States">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-        <BaseButton
-          v-for="variant in variants"
-          :key="variant"
-          :variant="variant"
-          loading
-        >
-          {{ variant }}
-        </BaseButton>
-      </div>
-    </Variant>
-
-    <Variant title="Disabled States">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-        <BaseButton
-          v-for="variant in variants"
-          :key="variant"
-          :variant="variant"
-          disabled
-        >
-          {{ variant }}
-        </BaseButton>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/BaseButton.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-/** Renders a styled `<button>` with variant, size, loading spinner, and full-width options. */
-import type { ButtonVariant, ButtonSize } from '../types'
-
-interface Props {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  disabled?: boolean
-  loading?: boolean
-  type?: 'button' | 'submit' | 'reset'
-  fullWidth?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'primary',
-  size: 'md',
-  disabled: false,
-  loading: false,
-  type: 'button',
-  fullWidth: false,
-})
-
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-function handleClick(event: MouseEvent) {
-  if (!props.disabled && !props.loading) {
-    emit('click', event)
-  }
-}
-</script>
-
-<template>
-  <button
-    :type="type"
-    :disabled="disabled || loading"
-    :class="[
-      'mint-button',
-      `mint-button--${variant}`,
-      `mint-button--${size}`,
-      fullWidth ? 'mint-button--full-width' : '',
-      (disabled || loading) ? 'mint-button--disabled' : '',
-    ]"
-    @click="handleClick"
-  >
-    <svg
-      v-if="loading"
-      class="mint-button__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>
-    <slot name="icon-left" />
-    <slot />
-    <slot name="icon-right" />
-  </button>
-</template>
-
-<style>
-@import '../styles/components/button.css';
-</style>