@softize/opus 18.4.0 → 19.0.0

package/src/ui/components/patterns/surface-anatomy.ts

@@ -0,0 +1,219 @@
+/**
+ * Anatomia de superfície (interno): as medidas que Card, Dialog, Drawer e Pane
+ * compartilham — ADR 0023.
+ *
+ * Aqui mora o que antes era escrito seis vezes: recuo de cada região, ritmo vertical,
+ * escala do título, posição das ações e a regra dos divisores. As famílias públicas
+ * consomem estas tabelas; nenhuma reescreve as classes.
+ *
+ * Dois layouts, e cada um é um pacote indivisível:
+ *
+ * - `continuous` — sem divisores. O ritmo separa: o header se aproxima do corpo e a
+ *   última região fecha o espaço de baixo. É o card de leitura.
+ * - `sectioned` — regiões simétricas, com divisor entre as que forem adjacentes. É o
+ *   modal, o drawer e o painel.
+ *
+ * O recuo lateral é o mesmo nas três regiões da mesma superfície; é isso que a suíte
+ * transversal verifica. Entre famílias diferentes ele pode divergir: o card de leitura
+ * é mais folgado que um painel de operação.
+ */
+
+import { createContext, useContext } from "react";
+
+export type SurfaceFamily = "card" | "dialog" | "drawer" | "pane";
+export type SurfaceLayout = "continuous" | "sectioned";
+export type SurfaceRegion = "header" | "body" | "footer";
+
+/**
+ * Divisores: a região desenha a própria linha quando existe uma vizinha do outro lado.
+ * Um header sozinho não fecha nada; um footer que é a única região também não.
+ *
+ * O header suprime a própria linha quando o vizinho imediato é um footer — os dois
+ * juntos desenhariam duas bordas encostadas, uma sobre a outra.
+ */
+const headerDivider = [
+  "[&:not(:last-child)]:border-b",
+  "[&:not(:last-child)]:border-border",
+  // A supressão precisa VENCER a regra acima na cascata, e não só vir depois dela: as
+  // duas nascem com a mesma especificidade e a ordem na folha é do Tailwind, não nossa.
+  // Repetir o `:not(:last-child)` aqui acrescenta uma pseudoclasse e desempata.
+  "[&:not(:last-child):has(+[data-slot$=-footer])]:border-b-0",
+].join(" ");
+const footerDivider =
+  "[&:not(:first-child)]:border-t [&:not(:first-child)]:border-border";
+
+interface RegionAnatomy {
+  header: string;
+  body: string;
+  footer: string;
+}
+
+interface FamilyAnatomy {
+  /** Recuo e ritmo por layout. O recuo lateral é comum às três regiões. */
+  regions: Record<SurfaceLayout, RegionAnatomy>;
+  /** Escala visual do título. O nível semântico do heading é escolhido à parte. */
+  title: Record<SurfaceLayout, string>;
+  /** Descrição no header, quando a família a oferece (ADRs 0014 e 0018 excluem modais). */
+  description: string;
+  /** Espaço entre mídia, título e ações na linha do header. */
+  headerGap: string;
+  /** Faixa do rodapé no layout seccionado, quando a família declara uma. */
+  footerBand: string;
+}
+
+/**
+ * O recuo seccionado de Card, Dialog e Drawer: 1rem, a densidade das superfícies de
+ * operação, e o que permite um card seccionado conviver com um drawer sem degrau
+ * visível. O pane tem a sua (`px-3`, a do chrome), declarada na tabela abaixo.
+ */
+const sectionedRegions: RegionAnatomy = {
+  header: "p-4",
+  body: "p-4",
+  footer: "p-4",
+};
+
+export const surfaceAnatomy: Record<SurfaceFamily, FamilyAnatomy> = {
+  card: {
+    regions: {
+      // O `pb-3` do header e do body encurtam a distância até a região seguinte; quando
+      // o body é a última região, ele reassume o respiro de baixo (`[&:last-child]:pb-5`).
+      continuous: {
+        header: "px-5 pt-5 pb-3",
+        body: "px-5 py-3 [&:last-child]:pb-5 [&:first-child]:pt-5",
+        footer: "px-5 pt-3 pb-5",
+      },
+      sectioned: sectionedRegions,
+    },
+    title: {
+      continuous: "text-base font-semibold leading-none",
+      sectioned: "text-sm font-semibold leading-none",
+    },
+    description: "text-sm text-muted-foreground",
+    headerGap: "gap-3",
+    footerBand: "",
+  },
+  dialog: {
+    regions: {
+      continuous: {
+        header: "p-4 pb-2",
+        body: "p-4 py-2 [&:last-child]:pb-4 [&:first-child]:pt-4",
+        footer: "p-4 pt-2",
+      },
+      sectioned: sectionedRegions,
+    },
+    title: {
+      continuous: "text-lg font-semibold leading-none",
+      sectioned: "text-lg font-semibold leading-none",
+    },
+    description: "text-sm text-muted-foreground",
+    headerGap: "gap-4",
+    footerBand: "bg-muted/20 dark:bg-input/20",
+  },
+  drawer: {
+    regions: {
+      continuous: {
+        header: "p-4 pb-2",
+        body: "p-4 py-2 [&:last-child]:pb-4 [&:first-child]:pt-4",
+        footer: "p-4 pt-2",
+      },
+      sectioned: sectionedRegions,
+    },
+    title: {
+      continuous: "text-lg font-semibold leading-none",
+      sectioned: "text-lg font-semibold leading-none",
+    },
+    description: "text-sm text-muted-foreground",
+    headerGap: "gap-4",
+    footerBand: "bg-muted/20 dark:bg-input/20",
+  },
+  pane: {
+    regions: {
+      continuous: {
+        header: "flex shrink-0 items-center px-3 pt-3 pb-2",
+        body: "p-3 [&:first-child]:pt-3",
+        footer: "px-3 pt-2 pb-3",
+      },
+      sectioned: {
+        // A faixa tem a altura da barra do shell; `flex items-center` centraliza a linha
+        // dentro dela, e `shrink-0` impede que um corpo longo comprima a faixa.
+        header: "flex h-[3.75rem] shrink-0 items-center px-3",
+        body: "p-3",
+        footer: "px-3 py-2",
+      },
+    },
+    title: {
+      continuous: "text-sm font-semibold leading-none",
+      sectioned: "text-sm font-semibold leading-none",
+    },
+    description: "text-xs text-muted-foreground",
+    headerGap: "gap-2",
+    footerBand: "",
+  },
+};
+
+/** Classes da região, já com o divisor que o layout deriva da vizinhança. */
+export function surfaceRegionClasses(
+  family: SurfaceFamily,
+  layout: SurfaceLayout,
+  region: SurfaceRegion,
+): string {
+  const anatomy = surfaceAnatomy[family];
+  const base = anatomy.regions[layout][region];
+  if (layout !== "sectioned") return base;
+  if (region === "header") return `${base} ${headerDivider}`;
+  if (region === "footer")
+    return [base, footerDivider, anatomy.footerBand].filter(Boolean).join(" ");
+  return base;
+}
+
+/** Escala visual do título — o nível do heading vem da composição, nunca daqui. */
+export function surfaceTitleClasses(
+  family: SurfaceFamily,
+  layout: SurfaceLayout,
+): string {
+  return surfaceAnatomy[family].title[layout];
+}
+
+export function surfaceDescriptionClasses(family: SurfaceFamily): string {
+  return surfaceAnatomy[family].description;
+}
+
+/**
+ * A linha do header: mídia, heading que absorve a folga, ações no extremo oposto.
+ *
+ * `flex-1` não é decoração: quando a própria região é flex — o pane, que tem altura de
+ * barra —, a linha vira um item que se mede pelo conteúdo e as ações param no meio.
+ */
+export function surfaceHeaderRowClasses(family: SurfaceFamily): string {
+  return `flex min-w-0 flex-1 items-center ${surfaceAnatomy[family].headerGap}`;
+}
+
+/** Ações do header e do footer: fora do fluxo de compressão, na escala densa. */
+export const surfaceActionsClasses = "flex shrink-0 items-center gap-2";
+
+/**
+ * O layout é do root e chega aos slots por contexto — ADR 0023. Slot não recebe
+ * `layout`: o divisor depende de quem está do outro lado, então a decisão precisa valer
+ * para a superfície inteira.
+ *
+ * O default por família preserva o que ela já entregava antes desta ADR.
+ */
+const SurfaceLayoutContext = createContext<SurfaceLayout | null>(null);
+
+export const SurfaceLayoutProvider = SurfaceLayoutContext.Provider;
+
+const familyDefaultLayout: Record<SurfaceFamily, SurfaceLayout> = {
+  card: "continuous",
+  dialog: "sectioned",
+  drawer: "sectioned",
+  pane: "sectioned",
+};
+
+/** O layout vigente: o declarado pelo root da superfície, ou o default da família. */
+export function useSurfaceLayout(family: SurfaceFamily): SurfaceLayout {
+  return useContext(SurfaceLayoutContext) ?? familyDefaultLayout[family];
+}
+
+export function defaultSurfaceLayout(family: SurfaceFamily): SurfaceLayout {
+  return familyDefaultLayout[family];
+}

package/src/ui/components/patterns/surface-header.tsx

@@ -40,6 +40,8 @@ export const surfaceHeaderClasses: Record<
 
 interface SurfaceHeaderSlots {
   leading?: ElementType | readonly ElementType[];
+  /** Ícone ou imagem que abre a linha, antes do heading (ADR 0023). */
+  media?: ElementType;
   title: ElementType;
   count?: ElementType;
   description?: ElementType;
@@ -59,6 +61,16 @@ export interface SurfaceHeaderProps extends HTMLAttributes<HTMLDivElement> {
   contentClassName?: string;
   /** Permite uma superfície composta apenas pelas regiões leading/actions. */
   titleRequired?: boolean;
+  /** Classes da linha `inline` — as famílias com anatomia própria trazem a sua (ADR 0023). */
+  rowClassName?: string;
+  /** Nó interno acrescentado ao fim da linha, depois das ações (o botão de fechar). */
+  trailing?: ReactNode;
+  /**
+   * Aceita conteúdo livre além dos slots. Vale para a superfície genérica — um pane
+   * hospeda marca, busca ou chrome que não são título nem ação. As famílias que sempre
+   * NOMEIAM algo (Card, Dialog, Drawer, Page, Content) continuam estritas.
+   */
+  allowFreeContent?: boolean;
 }
 
 /** Expande fragments de primeiro nível: o shorthand monta os slots dentro de um `<>`. */
@@ -77,6 +89,9 @@ export function SurfaceHeader({
   leadingPlacement = "above",
   contentClassName,
   titleRequired = true,
+  rowClassName,
+  trailing,
+  allowFreeContent = false,
   className,
   children,
   ...props
@@ -91,13 +106,30 @@ export function SurfaceHeader({
         ? slots.leading
         : [slots.leading as ElementType];
   const leading = leadingTypes.flatMap(of);
+  const medias = slots.media === undefined ? [] : of(slots.media);
   const titles = of(slots.title);
   const counts = slots.count === undefined ? [] : of(slots.count);
   const descriptions =
     slots.description === undefined ? [] : of(slots.description);
   const actionSlots = of(slots.actions);
+  const slotTypes = [
+    ...leadingTypes,
+    slots.media,
+    slots.title,
+    slots.count,
+    slots.description,
+    slots.actions,
+  ].filter((type): type is ElementType => type !== undefined);
+  const free = allowFreeContent
+    ? nodes.filter(
+        (node) =>
+          !(isValidElement(node) && slotTypes.includes(node.type as ElementType)),
+      )
+    : [];
   const recognized =
+    free.length +
     leading.length +
+    medias.length +
     titles.length +
     counts.length +
     descriptions.length +
@@ -106,6 +138,7 @@ export function SurfaceHeader({
   if (
     (titleRequired ? titles.length !== 1 : titles.length > 1) ||
     leading.length > 1 ||
+    medias.length > 1 ||
     counts.length > 1 ||
     descriptions.length > 1 ||
     actionSlots.length > 1 ||
@@ -117,6 +150,7 @@ export function SurfaceHeader({
         : ((type as { name?: string }).name ?? "");
     const optionalSlots = [
       ...leadingTypes,
+      slots.media,
       slots.description,
       slots.count,
       slots.actions,
@@ -140,16 +174,23 @@ export function SurfaceHeader({
     );
   }
 
-  const heading = titles.length + counts.length + descriptions.length > 0 && (
+  const heading = titles.length +
+    counts.length +
+    descriptions.length +
+    free.length >
+    0 && (
     <div
       data-slot={`${slot}-heading`}
       className={cn("min-w-0", leadingPlacement === "inline" && "flex-1")}
     >
-      <div className="flex items-baseline gap-2">
-        {titles}
-        {counts}
-      </div>
+      {titles.length + counts.length > 0 && (
+        <div className="flex items-baseline gap-2">
+          {titles}
+          {counts}
+        </div>
+      )}
       {descriptions}
+      {free}
     </div>
   );
   // A região introdutória carrega o mesmo `data-slot` nas duas apresentações: seletor de teste
@@ -166,13 +207,17 @@ export function SurfaceHeader({
           {leading}
         </div>
       )}
+      {medias}
       {heading}
       {actionSlots}
+      {trailing}
     </>
   );
   const layout =
     leadingPlacement === "inline" ? (
-      <div className="flex min-w-0 items-center gap-3">{row}</div>
+      <div className={cn("flex min-w-0 items-center gap-3", rowClassName)}>
+        {row}
+      </div>
     ) : leading.length > 0 ? (
       <>
         <div data-slot={`${slot}-navigation`} className="mb-4">

package/src/ui/components/patterns/surface-media.tsx

@@ -0,0 +1,69 @@
+/**
+ * Mídia de superfície (interno): a moldura que abre a linha do header — ADR 0023.
+ *
+ * Reusa `IconTile`; nenhuma família cria outra escala de molduras. O slot público de
+ * cada família (`CardMedia`, `DialogMedia`, …) delega para cá, escolhendo apenas o
+ * `data-slot` e a escala default.
+ */
+import type { ReactElement } from "react";
+
+import { Slot } from "@radix-ui/react-slot";
+
+import {
+  IconTile,
+  iconTileVariants,
+  type IconTileContext,
+  type IconTileSize,
+  type IconTileVariant,
+} from "../primitives/icon-tile.tsx";
+import { cn } from "../../lib/cn.ts";
+
+export interface SurfaceMediaProps
+  extends Omit<React.ComponentProps<"span">, "children"> {
+  /** Escala da moldura; a família define o default. */
+  size?: IconTileSize;
+  context?: IconTileContext;
+  variant?: IconTileVariant;
+  /**
+   * Renderiza como o filho: para a marca que já tem visual próprio — um orbe, um
+   * logotipo — ocupar o slot sem ganhar a moldura por cima.
+   */
+  asChild?: boolean;
+  children?: React.ReactNode;
+}
+
+export function SurfaceMedia({
+  slot,
+  size = "sm",
+  context,
+  variant,
+  asChild = false,
+  className,
+  ...props
+}: SurfaceMediaProps & { slot: string }): ReactElement {
+  if (asChild) {
+    return (
+      <Slot
+        data-slot={slot}
+        className={cn(
+          iconTileVariants({ size, context: null, variant: null }),
+          // Sem fundo nem borda: quem compõe traz o próprio visual.
+          "bg-transparent",
+          "shrink-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+  return (
+    <IconTile
+      data-slot={slot}
+      size={size}
+      {...(context !== undefined ? { context } : {})}
+      {...(variant !== undefined ? { variant } : {})}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  );
+}

package/src/ui/components/primitives/card.tsx

@@ -1,61 +1,116 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/cn.ts";
+import {
+  SurfaceLayoutProvider,
+  surfaceActionsClasses,
+  surfaceDescriptionClasses,
+  surfaceHeaderRowClasses,
+  surfaceRegionClasses,
+  surfaceTitleClasses,
+  useSurfaceLayout,
+  type SurfaceLayout,
+} from "../patterns/surface-anatomy.ts";
+import { SurfaceHeader } from "../patterns/surface-header.tsx";
+import {
+  SurfaceMedia,
+  type SurfaceMediaProps,
+} from "../patterns/surface-media.tsx";
+import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
 
 /**
  * Card — a superfície da casa: SÓ a casca (borda + raio + bg). Divergência DECLARADA vs
- * shadcn: FLAT (sem `shadow-sm`) e SEM `flex/gap/py` forçados. O upstream embute
- * `py-6 gap-6` + slots `px-6`, o que briga com card-box
- * simples (o `gap-6` do Card + o `space-y` do consumidor = espaçamento dobrado) — por isso
- * a casa hand-rollava. Aqui o padding mora no SLOT (Header/Body/Footer) ou no `className`
- * do consumidor (box simples) — mesmo modelo do Dialog.
+ * shadcn: FLAT (sem `shadow-sm`) e SEM `flex/gap/py` forçados. O padding mora no SLOT
+ * (Header/Body/Footer) ou no `className` do consumidor (box simples).
  *
  *   Box simples:   <Card className="p-4">…</Card>
- *   Estruturado:   <Card><CardHeader>…</CardHeader><CardBody>…</CardBody><CardFooter>…</CardFooter></Card>
+ *   Estruturado:   <Card><CardHeader>…</CardHeader><CardBody>…</CardBody></Card>
+ *
+ * `layout` é o pacote de anatomia da ADR 0023 e vale para a superfície inteira:
+ *
+ *   contínuo (default): sem divisores; o ritmo separa as regiões.
+ *   seccionado:         regiões simétricas, com divisor entre as adjacentes.
+ *
+ * O divisor é derivado da presença das regiões — o consumidor não escreve `border-b`.
  */
 export function Card({
   className,
   asChild = false,
+  layout = "continuous",
   ...props
 }: React.ComponentProps<"div"> & {
   /** Renderiza como o filho (Radix Slot) — pra card CLICÁVEL manter a semântica do filho
    *  (ex.: <button>) com a superfície do Card: `<Card asChild><button onClick>…</button></Card>`. */
   asChild?: boolean;
+  /** Anatomia da superfície: `continuous` (default) ou `sectioned`. */
+  layout?: SurfaceLayout;
 }): React.ReactElement {
   const Comp = asChild ? Slot : "div";
   return (
-    <Comp
-      data-slot="card"
-      className={cn(
-        "rounded-xl border border-border bg-card text-card-foreground",
-        className,
-      )}
-      {...props}
-    />
+    <SurfaceLayoutProvider value={layout}>
+      <Comp
+        data-slot="card"
+        data-layout={layout}
+        className={cn(
+          "rounded-xl border border-border bg-card text-card-foreground",
+          // Seccionado: o divisor encosta na borda, então o raio precisa recortar.
+          layout === "sectioned" && "overflow-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </SurfaceLayoutProvider>
   );
 }
 
 export function CardHeader({
   className,
+  children,
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
+  const layout = useSurfaceLayout("card");
   return (
-    <div
-      data-slot="card-header"
-      className={cn("flex flex-col gap-1.5 px-5 pt-5 pb-3", className)}
+    <SurfaceHeader
+      name="CardHeader"
+      slot="card"
+      slots={{
+        media: CardMedia,
+        title: CardTitle,
+        description: CardDescription,
+        actions: CardAction,
+      }}
+      leadingPlacement="inline"
+      titleRequired={false}
+      rowClassName={surfaceHeaderRowClasses("card")}
+      className={cn(surfaceRegionClasses("card", layout, "header"), className)}
       {...props}
-    />
+    >
+      {children}
+    </SurfaceHeader>
   );
 }
 
+/** Moldura de ícone ou imagem que abre a linha do header. */
+export function CardMedia(props: SurfaceMediaProps): React.ReactElement {
+  return <SurfaceMedia slot="card-media" {...props} />;
+}
+
 export function CardTitle({
   className,
+  level = 3,
+  asChild = false,
   ...props
-}: React.ComponentProps<"div">): React.ReactElement {
+}: React.ComponentProps<"h3"> & {
+  /** Hierarquia do documento (`h1`–`h6`). O tamanho vem do layout, nunca do nível. */
+  level?: HeadingLevel;
+  asChild?: boolean;
+}): React.ReactElement {
+  const layout = useSurfaceLayout("card");
+  const Comp = asChild ? Slot : headingTags[level];
   return (
-    <div
+    <Comp
       data-slot="card-title"
-      className={cn("font-semibold leading-none", className)}
+      className={cn(surfaceTitleClasses("card", layout), className)}
       {...props}
     />
   );
@@ -64,17 +119,17 @@ export function CardTitle({
 export function CardDescription({
   className,
   ...props
-}: React.ComponentProps<"div">): React.ReactElement {
+}: React.ComponentProps<"p">): React.ReactElement {
   return (
-    <div
+    <p
       data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn(surfaceDescriptionClasses("card"), className)}
       {...props}
     />
   );
 }
 
-/** Slot de ação no header (botão/menu) — o consumidor posiciona (ex.: header em flex-row). */
+/** Ações do header — a família posiciona no extremo oposto ao título. */
 export function CardAction({
   className,
   ...props
@@ -82,7 +137,7 @@ export function CardAction({
   return (
     <div
       data-slot="card-action"
-      className={cn("shrink-0", className)}
+      className={cn(surfaceActionsClasses, className)}
       {...props}
     />
   );
@@ -92,10 +147,11 @@ export function CardBody({
   className,
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
+  const layout = useSurfaceLayout("card");
   return (
     <div
       data-slot="card-body"
-      className={cn("px-5 py-3", className)}
+      className={cn(surfaceRegionClasses("card", layout, "body"), className)}
       {...props}
     />
   );
@@ -106,10 +162,11 @@ export function CardContent({
   className,
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
+  const layout = useSurfaceLayout("card");
   return (
     <div
       data-slot="card-content"
-      className={cn("px-5 py-3", className)}
+      className={cn(surfaceRegionClasses("card", layout, "body"), className)}
       {...props}
     />
   );
@@ -119,10 +176,15 @@ export function CardFooter({
   className,
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
+  const layout = useSurfaceLayout("card");
   return (
     <div
       data-slot="card-footer"
-      className={cn("flex items-center px-5 pt-3 pb-5", className)}
+      className={cn(
+        "flex items-center justify-end gap-2",
+        surfaceRegionClasses("card", layout, "footer"),
+        className,
+      )}
       {...props}
     />
   );

package/src/ui/components/primitives/command.tsx

@@ -38,15 +38,23 @@ function CommandDialog({
   return (
     <Dialog {...props}>
       <DialogContent
+        // A paleta é uma superfície contínua: a lista já separa os grupos, e uma faixa
+        // sob o cabeçalho competiria com ela.
+        layout="continuous"
         className={cn("overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
         aria-describedby={descriptionId}
       >
-        <DialogHeader className="border-b-0 px-3 py-2">
+        {/* A descrição só existe para o `aria-describedby`; fora do header, que só
+            nomeia a superfície (ADRs 0018 e 0023). */}
+        <p id={descriptionId} className="sr-only">
+          {description}
+        </p>
+        {/* O recuo e a escala são os da paleta, não os da família: a caixa de busca
+            manda na densidade, e o título aqui é um rótulo acima dela. É a única
+            superfície do SDK que diverge nos dois, e por isso está escrito aqui. */}
+        <DialogHeader className="px-3 py-2">
           <DialogTitle className="text-sm">{title}</DialogTitle>
-          <p id={descriptionId} className="sr-only">
-            {description}
-          </p>
         </DialogHeader>
         <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}