<script setup>
import { cn } from "../../../utils/cn";
import { Separator } from "../separator";
const props = defineProps({
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
</script>

<template>
  <div
    data-slot="field-separator"
    :data-content="!!$slots.default"
    :class="cn(
  'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
  props.class
)"
  >
    <Separator class="absolute inset-0 top-1/2" />
    <span
      v-if="$slots.default"
      class="bg-zinc-50 text-zinc-400 relative mx-auto block w-fit px-2"
      data-slot="field-separator-content"
    >
      <slot />
    </span>
  </div>
</template>
