Horizontal and vertical

// apps/docs/examples/ui/separator.tsx'use client';
import {Separator} from '@workspace/active-ui/components/primitives/separator';
/** * A line between two parts: horizontal between a heading block and what * follows, vertical between links in a row. */export default function SeparatorExample() {  return (    <div className="w-full max-w-sm">      <div className="flex flex-col gap-1">        <h4 className="text-sm font-semibold">Pension scheme 2026</h4>        <p className="text-muted-foreground text-sm">          Defined contribution, since 2019        </p>      </div>      <Separator className="my-4" />      <div className="flex h-5 items-center gap-4 text-sm">        <a href="#separator-rules">Rules</a>        <Separator orientation="vertical" />        <a href="#separator-participants">Participants</a>        <Separator orientation="vertical" />        <a href="#separator-documents">Documents</a>      </div>    </div>  );}