sanity 6.4.0 → 6.4.1-next.2

package/lib/_chunks-es/VariantsTool.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useRouter, StateLink } from "sanity/router";
+import { useRouter, IntentLink, StateLink } from "sanity/router";
 import { Autocomplete, Stack, Flex, Box, Text, TextInput, TextArea, useToast, Card, Menu, Badge, Container, rem, Skeleton } from "@sanity/ui";
-import { useId, useState, memo, forwardRef } from "react";
-import { Button, Dialog, MenuButton, MenuItem } from "./index.js";
-import { getVariantId, variantsClient, useClient, VARIANTS_STUDIO_CLIENT_OPTIONS, VARIANT_DOCUMENTS_PATH, useTranslation, variantsLocaleNamespace, useAllVariants, TextWithTone, useBundleDocuments, ContextMenuButton, RelativeTime, useSchema, useReleasesStore, SanityDefaultPreview, getReleaseTitleDetails, getReleaseIdFromReleaseDocumentId, getReleaseTone, decodeVariantIdFromRoute, LoadingBlock, getVariantDescription, getVariantConditionsText, getVariantTitle, filterVariantsForSearch } from "./index2.js";
+import { useId, useState, forwardRef, memo } from "react";
+import { Button, Dialog, MenuButton, MenuItem, Tooltip } from "./index.js";
+import { getVariantId, variantsClient, useClient, VARIANTS_STUDIO_CLIENT_OPTIONS, VARIANT_DOCUMENTS_PATH, useTranslation, variantsLocaleNamespace, useAllVariants, TextWithTone, DOCUMENT_SYSTEM_FIELD, useBundleDocuments, isPublishedBundleId, ContextMenuButton, RelativeTime, isReleaseBundle, getReleaseDocumentIdFromReleaseId, getReleaseIdFromReleaseDocumentId, ReleaseTitle, RELEASES_INTENT, useDocumentPresence, DocumentPreviewPresence, useDocumentPreviewValues, SanityDefaultPreview, useSchema, ToneIcon, useActiveReleases, decodeVariantIdFromRoute, LoadingBlock, getVariantDescription, getVariantConditionsText, getVariantTitle, filterVariantsForSearch } from "./index2.js";
 import "history";
 import "sanity/_singletons";
 import "@sanity/icons/ArrowLeft";
@@ -12,9 +12,9 @@ import "@sanity/icons/Launch";
 import "styled-components";
 import "react-i18next";
 import "rxjs/operators";
-import { useObservable } from "react-rx";
+import "react-rx";
 import "rxjs";
-import "@sanity/client/csm";
+import { getPublishedId } from "@sanity/client/csm";
 import "quick-lru";
 import "lodash-es/throttle.js";
 import "lodash-es/isEqual.js";
@@ -59,7 +59,7 @@ import "@sanity/icons/ArrowDown";
 import "@sanity/icons/ArrowRight";
 import "@sanity/util/legacyDateFormat";
 import "@sanity/diff-patch";
-import "@sanity/icons/ErrorOutline";
+import { ErrorOutlineIcon } from "@sanity/icons/ErrorOutline";
 import "@sanity/diff";
 import "mendoza";
 import "@sanity/icons/InfoOutline";
@@ -207,7 +207,7 @@ import { isPortableTextBlock, toPlainText } from "@portabletext/toolkit";
 import { at, set } from "@sanity/mutate";
 import { applyPatches } from "@sanity/mutate/_unstable_apply";
 import { DiamondIcon } from "@sanity/icons/Diamond";
-import { Table, Headers } from "./Table.js";
+import { Headers, Table, searchDocumentRelease } from "./searchDocumentRelease.js";
 function createVariantOperationsStore(options) {
   const client = variantsClient(options.client);
   return {
@@ -685,22 +685,93 @@ function EditVariantDialog(props) {
   let t5;
   return $[11] !== handleSubmit || $[12] !== initialValue || $[13] !== onCancel || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 ? (t5 = /* @__PURE__ */ jsx(VariantDialog, { confirmDataTestId: "save-variant-button", confirmText: t2, errorTitle: t3, header: t4, id: "edit-variant-dialog", initialValue, onCancel, onSubmit: handleSubmit, renderCancelButton: !0 }), $[11] = handleSubmit, $[12] = initialValue, $[13] = onCancel, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5) : t5 = $[17], t5;
 }
-function useVariantDocuments(variantDocumentId) {
-  const $ = c(7);
-  let t0;
-  $[0] !== variantDocumentId ? (t0 = getVariantId(variantDocumentId), $[0] = variantDocumentId, $[1] = t0) : t0 = $[1];
-  const variantId = t0;
+function toVariantDocumentVersion(document) {
+  const system = document[DOCUMENT_SYSTEM_FIELD];
+  return system?.group?._ref ? {
+    documentId: document._id,
+    bundleId: system.bundleId ?? void 0,
+    releaseRef: system.release?._ref ?? null,
+    updatedAt: document._updatedAt ?? ""
+  } : null;
+}
+function useVariantDocuments(variantId) {
+  const $ = c(13), enabled = !!variantId, t0 = variantId ?? "";
   let t1;
-  $[2] !== variantId ? (t1 = {
-    variantId
-  }, $[2] = variantId, $[3] = t1) : t1 = $[3];
-  const params = t1, t2 = `variant-${variantId}`;
+  $[0] !== t0 ? (t1 = {
+    variantId: t0
+  }, $[0] = t0, $[1] = t1) : t1 = $[1];
+  const params = t1, t2 = enabled ? `variant-${variantId}` : "variant-disabled";
   let t3;
-  return $[4] !== params || $[5] !== t2 ? (t3 = {
+  $[2] !== enabled || $[3] !== params || $[4] !== t2 ? (t3 = {
     groqFilter: "sanity::partOfVariant($variantId)",
     params,
-    cacheKey: t2
-  }, $[4] = params, $[5] = t2, $[6] = t3) : t3 = $[6], useBundleDocuments(t3);
+    cacheKey: t2,
+    enabled
+  }, $[2] = enabled, $[3] = params, $[4] = t2, $[5] = t3) : t3 = $[5];
+  const {
+    loading,
+    results,
+    error
+  } = useBundleDocuments(t3);
+  let t4;
+  $[6] !== enabled || $[7] !== results ? (t4 = enabled ? toDocumentInVariants(results) : [], $[6] = enabled, $[7] = results, $[8] = t4) : t4 = $[8];
+  const variantResults = t4, t5 = enabled && loading, t6 = enabled ? error : null;
+  let t7;
+  return $[9] !== t5 || $[10] !== t6 || $[11] !== variantResults ? (t7 = {
+    loading: t5,
+    results: variantResults,
+    error: t6
+  }, $[9] = t5, $[10] = t6, $[11] = variantResults, $[12] = t7) : t7 = $[12], t7;
+}
+function toDocumentInVariants(results) {
+  return results.flatMap((result) => {
+    const version = toVariantDocumentVersion(result.document);
+    return version ? [{
+      ...result,
+      version
+    }] : [];
+  });
+}
+function getBundleSortOrder(bundleId) {
+  return isPublishedBundleId(bundleId) ? 0 : bundleId === "drafts" ? 1 : 2;
+}
+function compareVariantDocumentVersions(left, right) {
+  const leftOrder = getBundleSortOrder(left.bundleId), rightOrder = getBundleSortOrder(right.bundleId);
+  return leftOrder !== rightOrder ? leftOrder - rightOrder : left.documentId.localeCompare(right.documentId);
+}
+function pickRepresentativeDocument(documents) {
+  return documents.reduce((latest, current) => {
+    const latestUpdatedAt = latest.document._updatedAt ?? "";
+    return (current.document._updatedAt ?? "") > latestUpdatedAt ? current : latest;
+  });
+}
+function aggregateValidation(documents) {
+  const representative = pickRepresentativeDocument(documents);
+  return {
+    isValidating: documents.some((document) => document.validation.isValidating),
+    validation: documents.flatMap((document) => document.validation.validation),
+    revision: representative.validation.revision,
+    hasError: documents.some((document) => document.validation.hasError)
+  };
+}
+function groupVariantDocumentsByGroup(documents) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const document of documents) {
+    const groupId = document.document._system?.group?._ref;
+    if (!groupId)
+      continue;
+    const existingGroup = groups.get(groupId);
+    existingGroup ? existingGroup.push(document) : groups.set(groupId, [document]);
+  }
+  return Array.from(groups.entries()).map(([groupId, groupDocuments]) => {
+    const representative = pickRepresentativeDocument(groupDocuments), versions = groupDocuments.map((item) => item.version).toSorted(compareVariantDocumentVersions);
+    return {
+      ...representative,
+      groupId,
+      versions,
+      validation: aggregateValidation(groupDocuments)
+    };
+  });
 }
 function VariantDetailMenuButton(t0) {
   const $ = c(21), {
@@ -777,45 +848,156 @@ function VariantDetailFooter(t0) {
     ] })
   ] }), $[11] = t5, $[12] = t6, $[13] = t7) : t7 = $[13], t7;
 }
-function getVariantDocumentVersion({
-  document,
-  releasesById,
-  t
-}) {
-  const system = document._system, releaseRef = system?.release?._ref;
-  if (releaseRef) {
-    const release = releasesById?.get(releaseRef);
-    if (release) {
-      const {
-        displayTitle
-      } = getReleaseTitleDetails(release.metadata?.title, getReleaseIdFromReleaseDocumentId(release._id));
-      return {
-        label: displayTitle,
-        tone: getReleaseTone(release)
-      };
-    }
-    return {
-      label: getReleaseIdFromReleaseDocumentId(releaseRef),
-      tone: "default"
-    };
+function getDocumentPreviewTitle(document) {
+  const title = document.title || document.name;
+  return typeof title == "string" && title.trim() ? title : document._id;
+}
+function getReleaseDocumentForVersion(version, releasesById) {
+  if (version.releaseRef)
+    return releasesById.get(version.releaseRef);
+  if (isReleaseBundle(version.bundleId)) {
+    const releaseDocumentId = getReleaseDocumentIdFromReleaseId(version.bundleId);
+    return releasesById.get(releaseDocumentId);
   }
-  return system?.bundleId === "drafts" ? {
-    label: t("detail.documents.table.version.drafts"),
-    tone: getReleaseTone("drafts")
+}
+function ReleaseBundleChip(t0) {
+  const $ = c(10), {
+    release
+  } = t0, {
+    t
+  } = useTranslation();
+  let t1;
+  $[0] !== release._id ? (t1 = getReleaseIdFromReleaseDocumentId(release._id), $[0] = release._id, $[1] = t1) : t1 = $[1];
+  const releaseId = t1, t2 = release.metadata?.title;
+  let t3;
+  $[2] !== t ? (t3 = t("release.placeholder-untitled-release"), $[2] = t, $[3] = t3) : t3 = $[3];
+  let t4;
+  $[4] !== releaseId ? (t4 = (t52) => {
+    const {
+      displayTitle
+    } = t52;
+    return /* @__PURE__ */ jsx(IntentLink, { intent: RELEASES_INTENT, params: {
+      id: releaseId
+    }, children: /* @__PURE__ */ jsx(Badge, { radius: 2, tone: "primary", children: displayTitle }) });
+  }, $[4] = releaseId, $[5] = t4) : t4 = $[5];
+  let t5;
+  return $[6] !== t2 || $[7] !== t3 || $[8] !== t4 ? (t5 = /* @__PURE__ */ jsx(ReleaseTitle, { title: t2, fallback: t3, children: t4 }), $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5) : t5 = $[9], t5;
+}
+function StaticBundleChip(t0) {
+  const $ = c(3), {
+    label,
+    tone
+  } = t0;
+  let t1;
+  return $[0] !== label || $[1] !== tone ? (t1 = /* @__PURE__ */ jsx(Badge, { radius: 2, tone, children: label }), $[0] = label, $[1] = tone, $[2] = t1) : t1 = $[2], t1;
+}
+function VariantDocumentBundleChips(t0) {
+  const $ = c(11), {
+    versions,
+    releasesById
+  } = t0, {
+    t
+  } = useTranslation();
+  let t1;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = {
+    minWidth: 0,
+    width: "100%",
+    overflowX: "auto",
+    overflowY: "hidden"
+  }, $[0] = t1) : t1 = $[0];
+  let t2;
+  $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = {
+    width: "max-content"
+  }, $[1] = t2) : t2 = $[1];
+  let t3;
+  if ($[2] !== releasesById || $[3] !== t || $[4] !== versions) {
+    let t42;
+    $[6] !== releasesById || $[7] !== t ? (t42 = (version) => {
+      if (isPublishedBundleId(version.bundleId))
+        return /* @__PURE__ */ jsx(StaticBundleChip, { label: t("release.chip.published"), tone: "positive" }, version.documentId);
+      if (version.bundleId === "drafts")
+        return /* @__PURE__ */ jsx(StaticBundleChip, { label: t("release.chip.draft"), tone: "default" }, version.documentId);
+      const release = getReleaseDocumentForVersion(version, releasesById);
+      return release ? /* @__PURE__ */ jsx(ReleaseBundleChip, { release }, version.documentId) : /* @__PURE__ */ jsx(StaticBundleChip, { label: t("release.placeholder-untitled-release"), tone: "default" }, version.documentId);
+    }, $[6] = releasesById, $[7] = t, $[8] = t42) : t42 = $[8], t3 = versions.map(t42), $[2] = releasesById, $[3] = t, $[4] = versions, $[5] = t3;
+  } else
+    t3 = $[5];
+  let t4;
+  return $[9] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { style: t1, children: /* @__PURE__ */ jsx(Flex, { align: "center", gap: 1, wrap: "nowrap", style: t2, children: t3 }) }), $[9] = t3, $[10] = t4) : t4 = $[10], t4;
+}
+const VariantDocumentPreviewLink = forwardRef(function(t0, ref) {
+  const $ = c(13);
+  let documentType, linkProps, publishedId, searchParams;
+  $[0] !== t0 ? ({
+    publishedId,
+    documentType,
+    searchParams,
+    ...linkProps
+  } = t0, $[0] = t0, $[1] = documentType, $[2] = linkProps, $[3] = publishedId, $[4] = searchParams) : (documentType = $[1], linkProps = $[2], publishedId = $[3], searchParams = $[4]);
+  let t1;
+  $[5] !== documentType || $[6] !== publishedId ? (t1 = {
+    id: publishedId,
+    type: documentType
+  }, $[5] = documentType, $[6] = publishedId, $[7] = t1) : t1 = $[7];
+  let t2;
+  return $[8] !== linkProps || $[9] !== ref || $[10] !== searchParams || $[11] !== t1 ? (t2 = /* @__PURE__ */ jsx(IntentLink, { ...linkProps, intent: "edit", params: t1, searchParams, ref }), $[8] = linkProps, $[9] = ref, $[10] = searchParams, $[11] = t1, $[12] = t2) : t2 = $[12], t2;
+});
+function getVersionPerspectiveNavigation(bundleId, variantId) {
+  const searchParams = variantId ? [["variant", variantId]] : [];
+  return isPublishedBundleId(bundleId) ? {
+    perspectiveStack: ["published"],
+    searchParams: [...searchParams, ["perspective", "published"]]
+  } : bundleId === "drafts" ? {
+    perspectiveStack: ["drafts"],
+    searchParams: searchParams.length > 0 ? searchParams : void 0
   } : {
-    label: t("detail.documents.table.version.published"),
-    tone: getReleaseTone("published")
+    perspectiveStack: [bundleId ?? "", "drafts"],
+    searchParams: [...searchParams, ["perspective", bundleId ?? ""]]
   };
 }
-const TABLE_CARD_STYLE = {
-  height: "100%",
-  overflow: "auto"
-};
-function getDocumentPreviewTitle(document) {
-  const title = document.title || document.name;
-  return typeof title == "string" && title.trim() ? title : document._id;
+function VariantDocumentPreview(t0) {
+  const $ = c(23), {
+    row,
+    layout,
+    variantId
+  } = t0;
+  let t1;
+  $[0] !== row.groupId ? (t1 = getPublishedId(row.groupId), $[0] = row.groupId, $[1] = t1) : t1 = $[1];
+  const publishedId = t1, documentPresence = useDocumentPresence(row.document._id);
+  let t2;
+  $[2] !== row.version.bundleId || $[3] !== variantId ? (t2 = getVersionPerspectiveNavigation(row.version.bundleId, variantId), $[2] = row.version.bundleId, $[3] = variantId, $[4] = t2) : t2 = $[4];
+  const {
+    perspectiveStack,
+    searchParams
+  } = t2;
+  let t3;
+  $[5] !== documentPresence ? (t3 = documentPresence?.length > 0 && /* @__PURE__ */ jsx(DocumentPreviewPresence, { presence: documentPresence }), $[5] = documentPresence, $[6] = t3) : t3 = $[6];
+  const previewPresence = t3;
+  let t4;
+  $[7] !== perspectiveStack || $[8] !== row.document._id || $[9] !== row.document._type ? (t4 = {
+    documentId: row.document._id,
+    documentType: row.document._type,
+    perspectiveStack
+  }, $[7] = perspectiveStack, $[8] = row.document._id, $[9] = row.document._type, $[10] = t4) : t4 = $[10];
+  const {
+    isLoading: previewLoading,
+    value: resolvedPreview
+  } = useDocumentPreviewValues(t4);
+  let t5;
+  $[11] !== resolvedPreview ? (t5 = resolvedPreview || {}, $[11] = resolvedPreview, $[12] = t5) : t5 = $[12];
+  let t6;
+  $[13] !== layout || $[14] !== previewLoading || $[15] !== previewPresence || $[16] !== t5 ? (t6 = /* @__PURE__ */ jsx(SanityDefaultPreview, { ...t5, status: previewPresence, isPlaceholder: previewLoading, layout }), $[13] = layout, $[14] = previewLoading, $[15] = previewPresence, $[16] = t5, $[17] = t6) : t6 = $[17];
+  let t7;
+  return $[18] !== publishedId || $[19] !== row.document._type || $[20] !== searchParams || $[21] !== t6 ? (t7 = /* @__PURE__ */ jsx(Card, { tone: "inherit", as: VariantDocumentPreviewLink, publishedId, documentType: row.document._type, searchParams, radius: 2, "data-as": "a", children: t6 }), $[18] = publishedId, $[19] = row.document._type, $[20] = searchParams, $[21] = t6, $[22] = t7) : t7 = $[22], t7;
 }
-const MemoDocumentType = memo(function(t0) {
+const MemoVariantDocumentPreview = memo(function(t0) {
+  const $ = c(3), {
+    row,
+    variantId
+  } = t0;
+  let t1;
+  return $[0] !== row || $[1] !== variantId ? (t1 = /* @__PURE__ */ jsx(VariantDocumentPreview, { row, variantId }), $[0] = row, $[1] = variantId, $[2] = t1) : t1 = $[2], t1;
+}, (prev, next) => prev.row.memoKey === next.row.memoKey && prev.variantId === next.variantId), MemoDocumentType = memo(function(t0) {
   const $ = c(5), {
     type
   } = t0, schema = useSchema();
@@ -824,149 +1006,160 @@ const MemoDocumentType = memo(function(t0) {
   const t2 = t1?.title || type;
   let t3;
   return $[3] !== t2 ? (t3 = /* @__PURE__ */ jsx(Text, { size: 1, children: t2 }), $[3] = t2, $[4] = t3) : t3 = $[4], t3;
-}, (prev, next) => prev.type === next.type);
-function getVariantDocumentVersionSortRank(document) {
-  const system = document._system;
-  return system?.release?._ref ? 2 : system?.bundleId === "drafts" ? 1 : 0;
-}
-function getVariantDocumentGroupSortKey({
-  document,
-  version
-}) {
-  const groupRef = document._system?.group._ref ?? document._id, versionRank = getVariantDocumentVersionSortRank(document);
-  return `${groupRef}\0${versionRank}\0${version.label}\0${document._id}`;
-}
-function getVariantDocumentColumnDefs(t) {
-  return [{
-    id: "documentGroup",
-    hidden: !0,
-    width: null,
-    sorting: !0,
-    sortTransform: getVariantDocumentGroupSortKey
-  }, {
-    id: "version",
-    width: null,
-    style: {
-      minWidth: 100
-    },
-    sorting: !1,
-    header: (props) => /* @__PURE__ */ jsx(Flex, { ...props.headerProps, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsx(Headers.BasicHeader, { text: t("detail.documents.table.version") }) }),
-    cell: ({
-      cellProps,
-      datum
-    }) => /* @__PURE__ */ jsx(Flex, { align: "center", ...cellProps, children: /* @__PURE__ */ jsx(Box, { paddingX: 2, children: !datum.isLoading && datum.version && /* @__PURE__ */ jsx(Badge, { fontSize: 1, mode: "outline", radius: 2, tone: datum.version.tone, children: datum.version.label }) }) })
-  }, {
-    id: "document._type",
-    width: null,
-    style: {
-      minWidth: 100
-    },
-    sorting: !0,
-    header: (props) => /* @__PURE__ */ jsx(Flex, { ...props.headerProps, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsx(Headers.SortHeaderButton, { text: t("detail.documents.table.type"), ...props }) }),
-    cell: ({
-      cellProps,
-      datum
-    }) => /* @__PURE__ */ jsx(Flex, { align: "center", ...cellProps, children: /* @__PURE__ */ jsx(Box, { paddingX: 2, children: !datum.isLoading && /* @__PURE__ */ jsx(MemoDocumentType, { type: datum.document._type }) }) })
-  }, {
-    id: "search",
-    width: null,
-    style: {
-      minWidth: "min(50%, calc(100vw - 80px))",
-      maxWidth: "min(50%, calc(100vw - 80px))"
-    },
-    sortTransform: ({
-      document
-    }) => getDocumentPreviewTitle(document).toLowerCase(),
-    header: (props) => /* @__PURE__ */ jsx(Headers.TableHeaderSearch, { ...props, placeholder: t("detail.documents.table.search-placeholder") }),
-    cell: ({
-      cellProps,
-      datum
-    }) => /* @__PURE__ */ jsx(Box, { ...cellProps, flex: 1, padding: 1, paddingRight: 2, sizing: "border", children: datum.isLoading ? /* @__PURE__ */ jsx(SanityDefaultPreview, { isPlaceholder: !0 }) : /* @__PURE__ */ jsx(SanityDefaultPreview, { title: getDocumentPreviewTitle(datum.document), subtitle: datum.document._id }) })
-  }, {
-    id: "document._updatedAt",
-    sorting: !0,
-    width: 130,
-    header: (props) => /* @__PURE__ */ jsx(Flex, { ...props.headerProps, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsx(Headers.SortHeaderButton, { text: t("detail.documents.table.edited"), ...props }) }),
-    cell: ({
-      cellProps,
-      datum
-    }) => /* @__PURE__ */ jsx(Flex, { ...cellProps, align: "center", paddingX: 2, paddingY: 3, style: {
-      minWidth: 130
-    }, children: !datum.isLoading && datum.document._updatedAt && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx(RelativeTime, { time: datum.document._updatedAt, useTemporalPhrase: !0, minimal: !0 }) }) })
-  }];
-}
+}, (prev, next) => prev.type === next.type), getVariantDocumentTableColumnDefs = (t, variantId, releasesById) => [{
+  id: "documentGroup",
+  hidden: !0,
+  width: null,
+  sorting: !0,
+  sortTransform: (row) => row.groupId
+}, {
+  id: "bundle",
+  width: 140,
+  style: {
+    minWidth: 100,
+    maxWidth: 140
+  },
+  sorting: !1,
+  header: (props) => /* @__PURE__ */ jsx(Flex, { ...props.headerProps, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsx(Headers.BasicHeader, { text: t("detail.documents.table.bundle") }) }),
+  cell: ({
+    cellProps,
+    datum
+  }) => /* @__PURE__ */ jsx(Flex, { align: "center", ...cellProps, style: {
+    ...cellProps.style,
+    flex: "0 1 auto",
+    minWidth: 0,
+    overflow: "hidden"
+  }, children: /* @__PURE__ */ jsx(Box, { flex: 1, paddingX: 2, style: {
+    minWidth: 0,
+    overflow: "hidden"
+  }, children: !datum.isLoading && /* @__PURE__ */ jsx(VariantDocumentBundleChips, { versions: datum.versions, releasesById }) }) })
+}, {
+  id: "document._type",
+  width: null,
+  style: {
+    minWidth: 100
+  },
+  sorting: !0,
+  header: (props) => /* @__PURE__ */ jsx(Flex, { ...props.headerProps, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsx(Headers.SortHeaderButton, { text: t("detail.documents.table.type"), ...props }) }),
+  cell: ({
+    cellProps,
+    datum
+  }) => /* @__PURE__ */ jsx(Flex, { align: "center", ...cellProps, children: /* @__PURE__ */ jsx(Box, { paddingX: 2, children: !datum.isLoading && /* @__PURE__ */ jsx(MemoDocumentType, { type: datum.document._type }) }) })
+}, {
+  id: "search",
+  width: null,
+  style: {
+    minWidth: "min(50%, calc(100vw - 80px))",
+    maxWidth: "min(50%, calc(100vw - 80px))"
+  },
+  sortTransform: ({
+    document
+  }) => getDocumentPreviewTitle(document).toLowerCase(),
+  header: (props) => /* @__PURE__ */ jsx(Headers.TableHeaderSearch, { ...props, placeholder: t("detail.documents.table.search-placeholder") }),
+  cell: ({
+    cellProps,
+    datum
+  }) => /* @__PURE__ */ jsx(Box, { ...cellProps, flex: 1, padding: 1, paddingRight: 2, sizing: "border", children: datum.isLoading ? /* @__PURE__ */ jsx(SanityDefaultPreview, { isPlaceholder: !0 }) : /* @__PURE__ */ jsx(MemoVariantDocumentPreview, { row: datum, variantId }) })
+}, {
+  id: "document._updatedAt",
+  sorting: !0,
+  width: 130,
+  header: (props) => /* @__PURE__ */ jsx(Flex, { ...props.headerProps, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsx(Headers.SortHeaderButton, { text: t("detail.documents.table.edited"), ...props }) }),
+  cell: ({
+    cellProps,
+    datum
+  }) => /* @__PURE__ */ jsx(Flex, { ...cellProps, align: "center", paddingX: 2, paddingY: 3, style: {
+    minWidth: 130
+  }, children: !datum.isLoading && datum.document._updatedAt && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx(RelativeTime, { time: datum.document._updatedAt, useTemporalPhrase: !0, minimal: !0 }) }) })
+}, {
+  id: "validation",
+  sorting: !1,
+  width: 50,
+  header: ({
+    headerProps
+  }) => /* @__PURE__ */ jsx(Flex, { ...headerProps, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsx(Headers.BasicHeader, { text: "" }) }),
+  cell: ({
+    cellProps,
+    datum
+  }) => {
+    if (datum.isLoading) return null;
+    const validationErrorCount = datum.validation.validation.filter((validation) => validation.level === "error").length;
+    return /* @__PURE__ */ jsx(Flex, { ...cellProps, flex: 1, padding: 1, justify: "center", align: "center", sizing: "border", children: datum.validation.hasError && /* @__PURE__ */ jsx(Tooltip, { portal: !0, placement: "bottom-end", content: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, padding: 1, children: [
+      /* @__PURE__ */ jsx(ToneIcon, { icon: ErrorOutlineIcon, tone: "critical" }),
+      t(validationErrorCount === 1 ? "detail.documents.table.validation.error_one" : "detail.documents.table.validation.error_other", {
+        count: validationErrorCount
+      })
+    ] }) }), children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(ToneIcon, { icon: ErrorOutlineIcon, tone: "critical" }) }) }) });
+  }
+}], TABLE_CARD_STYLE = {
+  height: "100%",
+  overflow: "auto"
+};
 function filterDocuments(rows, searchTerm) {
-  const normalizedSearchTerm = searchTerm.trim().toLowerCase();
-  return normalizedSearchTerm ? rows.filter(({
+  return searchTerm.trim() ? rows.filter(({
     document
-  }) => [getDocumentPreviewTitle(document), document._id, document._type].some((value) => value.toLowerCase().includes(normalizedSearchTerm))) : rows;
+  }) => searchDocumentRelease(document, searchTerm)) : rows;
 }
 function VariantDocumentsTable(t0) {
-  const $ = c(18), {
-    documents,
-    loading: t1
+  const $ = c(15), {
+    rows,
+    loading: t1,
+    variantId
   } = t0, loading = t1 === void 0 ? !1 : t1, {
     t
   } = useTranslation(variantsLocaleNamespace), [scrollContainerRef, setScrollContainerRef] = useState(null), {
-    state$
-  } = useReleasesStore(), releasesById = useObservable(state$)?.releases;
+    data: releases
+  } = useActiveReleases();
   let t2;
-  $[0] !== t ? (t2 = getVariantDocumentColumnDefs(t), $[0] = t, $[1] = t2) : t2 = $[1];
-  const columnDefs = t2;
+  $[0] !== releases ? (t2 = new Map(releases.map(_temp$2)), $[0] = releases, $[1] = t2) : t2 = $[1];
+  const releasesById = t2;
   let t3;
-  if ($[2] !== documents || $[3] !== releasesById || $[4] !== t) {
-    let t42;
-    $[6] !== releasesById || $[7] !== t ? (t42 = (document) => ({
-      document,
-      version: getVariantDocumentVersion({
-        document,
-        releasesById,
-        t
-      })
-    }), $[6] = releasesById, $[7] = t, $[8] = t42) : t42 = $[8], t3 = documents.map(t42), $[2] = documents, $[3] = releasesById, $[4] = t, $[5] = t3;
-  } else
-    t3 = $[5];
-  const rows = t3;
+  $[2] !== releasesById || $[3] !== t || $[4] !== variantId ? (t3 = getVariantDocumentTableColumnDefs(t, variantId, releasesById), $[2] = releasesById, $[3] = t, $[4] = variantId, $[5] = t3) : t3 = $[5];
+  const columnDefs = t3;
   let t4;
-  $[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t4 = {
+  $[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t4 = {
     column: "documentGroup",
     direction: "asc"
-  }, $[9] = t4) : t4 = $[9];
+  }, $[6] = t4) : t4 = $[6];
   let t5;
-  $[10] !== t ? (t5 = t("detail.documents.no-documents"), $[10] = t, $[11] = t5) : t5 = $[11];
+  $[7] !== t ? (t5 = t("detail.documents.no-documents"), $[7] = t, $[8] = t5) : t5 = $[8];
   let t6;
-  return $[12] !== columnDefs || $[13] !== loading || $[14] !== rows || $[15] !== scrollContainerRef || $[16] !== t5 ? (t6 = /* @__PURE__ */ jsx(Card, { flex: 1, ref: setScrollContainerRef, style: TABLE_CARD_STYLE, children: /* @__PURE__ */ jsx(Table, { columnDefs, data: rows, defaultSort: t4, emptyState: t5, loading, rowId: "document._id", scrollContainerRef, searchFilter: filterDocuments }) }), $[12] = columnDefs, $[13] = loading, $[14] = rows, $[15] = scrollContainerRef, $[16] = t5, $[17] = t6) : t6 = $[17], t6;
+  return $[9] !== columnDefs || $[10] !== loading || $[11] !== rows || $[12] !== scrollContainerRef || $[13] !== t5 ? (t6 = /* @__PURE__ */ jsx(Card, { flex: 1, ref: setScrollContainerRef, style: TABLE_CARD_STYLE, children: /* @__PURE__ */ jsx(Table, { columnDefs, data: rows, defaultSort: t4, emptyState: t5, loading, rowId: "groupId", scrollContainerRef, searchFilter: filterDocuments }) }), $[9] = columnDefs, $[10] = loading, $[11] = rows, $[12] = scrollContainerRef, $[13] = t5, $[14] = t6) : t6 = $[14], t6;
+}
+function _temp$2(release) {
+  return [release._id, release];
 }
 function VariantDetail() {
-  const $ = c(98), router = useRouter(), {
+  const $ = c(54), router = useRouter(), {
     t
   } = useTranslation(variantsLocaleNamespace), [editDialogOpen, setEditDialogOpen] = useState(!1), variantIdRaw = typeof router.state.variantId == "string" ? router.state.variantId : void 0, variantId = decodeVariantIdFromRoute(variantIdRaw), {
     byId,
     loading
   } = useAllVariants(), variant = variantId ? byId.get(variantId) : void 0, {
+    loading: documentsLoading,
     results: variantDocuments,
-    loading: documentsLoading
-  } = useVariantDocuments(variantId ?? "");
+    error: variantDocumentsError
+  } = useVariantDocuments(variant?._id);
   let t0;
-  $[0] !== variantDocuments ? (t0 = variantDocuments.map(_temp$2), $[0] = variantDocuments, $[1] = t0) : t0 = $[1];
-  const documents = t0;
+  $[0] !== variantDocuments ? (t0 = groupVariantDocumentsByGroup(variantDocuments), $[0] = variantDocuments, $[1] = t0) : t0 = $[1];
+  const tableRows = t0;
   if (loading) {
-    let t110;
-    $[2] !== t ? (t110 = t("detail.loading"), $[2] = t, $[3] = t110) : t110 = $[3];
-    let t210;
-    return $[4] !== t110 ? (t210 = /* @__PURE__ */ jsx(LoadingBlock, { fill: !0, title: t110 }), $[4] = t110, $[5] = t210) : t210 = $[5], t210;
+    let t18;
+    $[2] !== t ? (t18 = t("detail.loading"), $[2] = t, $[3] = t18) : t18 = $[3];
+    let t22;
+    return $[4] !== t18 ? (t22 = /* @__PURE__ */ jsx(LoadingBlock, { fill: !0, title: t18 }), $[4] = t18, $[5] = t22) : t22 = $[5], t22;
   }
   if (!variant) {
-    let t110;
-    $[6] !== router ? (t110 = () => router.navigate({}), $[6] = router, $[7] = t110) : t110 = $[7];
-    let t210;
-    $[8] !== t ? (t210 = t("detail.back"), $[8] = t, $[9] = t210) : t210 = $[9];
-    let t310;
-    $[10] !== t110 || $[11] !== t210 ? (t310 = /* @__PURE__ */ jsx(Card, { borderBottom: !0, flex: "none", padding: 3, children: /* @__PURE__ */ jsx(Button, { mode: "bleed", onClick: t110, text: t210 }) }), $[10] = t110, $[11] = t210, $[12] = t310) : t310 = $[12];
-    let t48;
-    $[13] !== t ? (t48 = t("detail.not-found.title"), $[13] = t, $[14] = t48) : t48 = $[14];
+    let t18;
+    $[6] !== router ? (t18 = () => router.navigate({}), $[6] = router, $[7] = t18) : t18 = $[7];
+    let t22;
+    $[8] !== t ? (t22 = t("detail.back"), $[8] = t, $[9] = t22) : t22 = $[9];
+    let t32;
+    $[10] !== t18 || $[11] !== t22 ? (t32 = /* @__PURE__ */ jsx(Card, { borderBottom: !0, flex: "none", padding: 3, children: /* @__PURE__ */ jsx(Button, { mode: "bleed", onClick: t18, text: t22 }) }), $[10] = t18, $[11] = t22, $[12] = t32) : t32 = $[12];
+    let t42;
+    $[13] !== t ? (t42 = t("detail.not-found.title"), $[13] = t, $[14] = t42) : t42 = $[14];
     let t52;
-    $[15] !== t48 ? (t52 = /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: t48 }), $[15] = t48, $[16] = t52) : t52 = $[16];
+    $[15] !== t42 ? (t52 = /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: t42 }), $[15] = t42, $[16] = t52) : t52 = $[16];
     let t62;
     $[17] !== t ? (t62 = t("detail.not-found.description"), $[17] = t, $[18] = t62) : t62 = $[18];
     let t72;
@@ -977,93 +1170,64 @@ function VariantDetail() {
       t72
     ] }) }) }), $[21] = t52, $[22] = t72, $[23] = t82) : t82 = $[23];
     let t92;
-    return $[24] !== t310 || $[25] !== t82 ? (t92 = /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, height: "fill", children: [
-      t310,
+    return $[24] !== t32 || $[25] !== t82 ? (t92 = /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, height: "fill", children: [
+      t32,
       t82
-    ] }), $[24] = t310, $[25] = t82, $[26] = t92) : t92 = $[26], t92;
+    ] }), $[24] = t32, $[25] = t82, $[26] = t92) : t92 = $[26], t92;
   }
-  const description = getVariantDescription(variant), conditionsText = getVariantConditionsText(variant.conditions), T0 = Flex, t1 = "column", t2 = 1, t3 = "fill", t4 = "hidden";
+  const description = getVariantDescription(variant), conditionsText = getVariantConditionsText(variant.conditions);
+  let t1;
+  $[27] !== router ? (t1 = () => router.navigate({}), $[27] = router, $[28] = t1) : t1 = $[28];
+  let t2;
+  $[29] !== t ? (t2 = t("detail.back"), $[29] = t, $[30] = t2) : t2 = $[30];
+  let t3;
+  $[31] !== t1 || $[32] !== t2 ? (t3 = /* @__PURE__ */ jsx(Card, { borderBottom: !0, flex: "none", padding: 3, children: /* @__PURE__ */ jsx(Button, { mode: "bleed", onClick: t1, text: t2 }) }), $[31] = t1, $[32] = t2, $[33] = t3) : t3 = $[33];
+  let t4;
+  $[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t4 = {
+    minHeight: 0
+  }, $[34] = t4) : t4 = $[34];
   let t5;
-  $[27] !== router ? (t5 = () => router.navigate({}), $[27] = router, $[28] = t5) : t5 = $[28];
+  $[35] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t5 = () => setEditDialogOpen(!0), $[35] = t5) : t5 = $[35];
   let t6;
-  $[29] !== t ? (t6 = t("detail.back"), $[29] = t, $[30] = t6) : t6 = $[30];
+  $[36] !== t ? (t6 = t("detail.action.edit-variant"), $[36] = t, $[37] = t6) : t6 = $[37];
   let t7;
-  $[31] !== t5 || $[32] !== t6 ? (t7 = /* @__PURE__ */ jsx(Card, { borderBottom: !0, flex: "none", padding: 3, children: /* @__PURE__ */ jsx(Button, { mode: "bleed", onClick: t5, text: t6 }) }), $[31] = t5, $[32] = t6, $[33] = t7) : t7 = $[33];
-  const T1 = Flex, t8 = "column", t9 = 1, t10 = "fill", t11 = "hidden";
-  let t12;
-  $[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t12 = {
-    minHeight: 0
-  }, $[34] = t12) : t12 = $[34];
-  const T2 = Container, t13 = "none", t14 = 3, T3 = Flex, t15 = "column", t16 = 3, T4 = Card, t17 = 5, T5 = Flex, t18 = "flex-start", t19 = 4, t20 = "space-between", T6 = Stack, t21 = 3, T7 = Text, t22 = "h1", t23 = 4, t24 = "bold", t25 = getVariantTitle(variant);
-  let t26;
-  $[35] !== T7 || $[36] !== t25 ? (t26 = /* @__PURE__ */ jsx(T7, { as: t22, size: t23, weight: t24, children: t25 }), $[35] = T7, $[36] = t25, $[37] = t26) : t26 = $[37];
-  let t27;
-  $[38] !== description || $[39] !== t ? (t27 = description || t("detail.no-description"), $[38] = description, $[39] = t, $[40] = t27) : t27 = $[40];
-  let t28;
-  $[41] !== t27 ? (t28 = /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: t27 }), $[41] = t27, $[42] = t28) : t28 = $[42];
-  let t29;
-  $[43] !== T6 || $[44] !== t26 || $[45] !== t28 ? (t29 = /* @__PURE__ */ jsxs(T6, { space: t21, children: [
-    t26,
-    t28
-  ] }), $[43] = T6, $[44] = t26, $[45] = t28, $[46] = t29) : t29 = $[46];
-  let t30;
-  $[47] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t30 = () => setEditDialogOpen(!0), $[47] = t30) : t30 = $[47];
-  let t31;
-  $[48] !== t ? (t31 = t("detail.action.edit-variant"), $[48] = t, $[49] = t31) : t31 = $[49];
-  let t32;
-  $[50] !== t31 ? (t32 = /* @__PURE__ */ jsx(Button, { onClick: t30, text: t31 }), $[50] = t31, $[51] = t32) : t32 = $[51];
-  let t33;
-  $[52] !== T5 || $[53] !== t29 || $[54] !== t32 ? (t33 = /* @__PURE__ */ jsxs(T5, { align: t18, gap: t19, justify: t20, children: [
-    t29,
-    t32
-  ] }), $[52] = T5, $[53] = t29, $[54] = t32, $[55] = t33) : t33 = $[55];
-  let t34;
-  $[56] !== t ? (t34 = t("dialog.create.conditions.title"), $[56] = t, $[57] = t34) : t34 = $[57];
-  let t35;
-  $[58] !== t34 ? (t35 = /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: t34 }), $[58] = t34, $[59] = t35) : t35 = $[59];
-  let t36;
-  $[60] !== conditionsText || $[61] !== t ? (t36 = conditionsText || t("overview.table.no-conditions"), $[60] = conditionsText, $[61] = t, $[62] = t36) : t36 = $[62];
-  let t37;
-  $[63] !== t36 ? (t37 = /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: t36 }), $[63] = t36, $[64] = t37) : t37 = $[64];
-  let t38;
-  $[65] !== t35 || $[66] !== t37 ? (t38 = /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-    t35,
-    t37
-  ] }) }), $[65] = t35, $[66] = t37, $[67] = t38) : t38 = $[67];
-  let t39;
-  $[68] !== T4 || $[69] !== t33 || $[70] !== t38 ? (t39 = /* @__PURE__ */ jsxs(T4, { paddingY: t17, children: [
-    t33,
-    t38
-  ] }), $[68] = T4, $[69] = t33, $[70] = t38, $[71] = t39) : t39 = $[71];
-  let t40;
-  $[72] !== T3 || $[73] !== t39 ? (t40 = /* @__PURE__ */ jsx(T3, { direction: t15, paddingX: t16, children: t39 }), $[72] = T3, $[73] = t39, $[74] = t40) : t40 = $[74];
-  let t41;
-  $[75] !== T2 || $[76] !== t40 ? (t41 = /* @__PURE__ */ jsx(T2, { flex: t13, width: t14, children: t40 }), $[75] = T2, $[76] = t40, $[77] = t41) : t41 = $[77];
-  let t42;
-  $[78] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t42 = {
+  $[38] !== t6 ? (t7 = /* @__PURE__ */ jsx(Button, { onClick: t5, text: t6 }), $[38] = t6, $[39] = t7) : t7 = $[39];
+  let t8;
+  $[40] !== t ? (t8 = t("dialog.create.conditions.title"), $[40] = t, $[41] = t8) : t8 = $[41];
+  let t9;
+  $[42] !== t8 ? (t9 = /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: t8 }), $[42] = t8, $[43] = t9) : t9 = $[43];
+  const T0 = Flex, t10 = "column", t11 = 1, t12 = "hidden";
+  let t13;
+  $[44] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t13 = {
     minHeight: 0
-  }, $[78] = t42) : t42 = $[78];
-  let t43;
-  $[79] !== documents || $[80] !== documentsLoading ? (t43 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, overflow: "hidden", style: t42, children: /* @__PURE__ */ jsx(VariantDocumentsTable, { documents, loading: documentsLoading }) }), $[79] = documents, $[80] = documentsLoading, $[81] = t43) : t43 = $[81];
-  let t44;
-  $[82] !== T1 || $[83] !== t12 || $[84] !== t41 || $[85] !== t43 ? (t44 = /* @__PURE__ */ jsxs(T1, { direction: t8, flex: t9, height: t10, overflow: t11, style: t12, children: [
-    t41,
-    t43
-  ] }), $[82] = T1, $[83] = t12, $[84] = t41, $[85] = t43, $[86] = t44) : t44 = $[86];
-  let t45;
-  $[87] !== variant ? (t45 = /* @__PURE__ */ jsx(VariantDetailFooter, { variant }), $[87] = variant, $[88] = t45) : t45 = $[88];
-  let t46;
-  $[89] !== editDialogOpen || $[90] !== variant ? (t46 = editDialogOpen && /* @__PURE__ */ jsx(EditVariantDialog, { onCancel: () => setEditDialogOpen(!1), onSubmit: () => setEditDialogOpen(!1), variant }), $[89] = editDialogOpen, $[90] = variant, $[91] = t46) : t46 = $[91];
-  let t47;
-  return $[92] !== T0 || $[93] !== t44 || $[94] !== t45 || $[95] !== t46 || $[96] !== t7 ? (t47 = /* @__PURE__ */ jsxs(T0, { direction: t1, flex: t2, height: t3, overflow: t4, children: [
-    t7,
-    t44,
-    t45,
-    t46
-  ] }), $[92] = T0, $[93] = t44, $[94] = t45, $[95] = t46, $[96] = t7, $[97] = t47) : t47 = $[97], t47;
-}
-function _temp$2(result) {
-  return result.document;
+  }, $[44] = t13) : t13 = $[44];
+  const t14 = variantDocumentsError ? /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: t("detail.documents.error") }) }) : /* @__PURE__ */ jsx(VariantDocumentsTable, { loading: documentsLoading, rows: tableRows, variantId: getVariantId(variant._id) });
+  let t15;
+  $[45] !== T0 || $[46] !== t13 || $[47] !== t14 ? (t15 = /* @__PURE__ */ jsx(T0, { direction: t10, flex: t11, overflow: t12, style: t13, children: t14 }), $[45] = T0, $[46] = t13, $[47] = t14, $[48] = t15) : t15 = $[48];
+  let t16;
+  $[49] !== variant ? (t16 = /* @__PURE__ */ jsx(VariantDetailFooter, { variant }), $[49] = variant, $[50] = t16) : t16 = $[50];
+  let t17;
+  return $[51] !== editDialogOpen || $[52] !== variant ? (t17 = editDialogOpen && /* @__PURE__ */ jsx(EditVariantDialog, { onCancel: () => setEditDialogOpen(!1), onSubmit: () => setEditDialogOpen(!1), variant }), $[51] = editDialogOpen, $[52] = variant, $[53] = t17) : t17 = $[53], /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, height: "fill", overflow: "hidden", children: [
+    t3,
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, height: "fill", overflow: "hidden", style: t4, children: [
+      /* @__PURE__ */ jsx(Container, { flex: "none", width: 3, children: /* @__PURE__ */ jsx(Flex, { direction: "column", paddingX: 3, children: /* @__PURE__ */ jsxs(Card, { paddingY: 5, children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "flex-start", gap: 4, justify: "space-between", children: [
+          /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            /* @__PURE__ */ jsx(Text, { as: "h1", size: 4, weight: "bold", children: getVariantTitle(variant) }),
+            /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: description || t("detail.no-description") })
+          ] }),
+          t7
+        ] }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          t9,
+          /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: conditionsText || t("overview.table.no-conditions") })
+        ] }) })
+      ] }) }) }),
+      t15
+    ] }),
+    t16,
+    t17
+  ] });
 }
 function CreateVariantDialog(props) {
   const $ = c(16), {