@mercurjs/admin 2.2.0-canary.20 → 2.2.0-canary.21

package/dist/{chunk-Z3SUMFDT.js → chunk-R2UDZINP.js}

@@ -1,21 +1,32 @@
-import {
-  useOrderTableColumns
-} from "./chunk-DBYUB2YI.js";
-import {
-  useOrderTableFilters
-} from "./chunk-J3AMUGGZ.js";
 import {
   useCustomerGroupTableColumns
 } from "./chunk-54EPH67T.js";
 import {
   useCustomerGroupTableFilters
-} from "./chunk-CMHI2RPL.js";
+} from "./chunk-AKSUGT5I.js";
 import {
   useOrderTableQuery
 } from "./chunk-QUHSHIAC.js";
 import {
   useCustomerGroupTableQuery
-} from "./chunk-VKOE5J66.js";
+} from "./chunk-3XOE4NV5.js";
+import {
+  FulfillmentStatusCell,
+  FulfillmentStatusHeader,
+  PaymentStatusCell,
+  PaymentStatusHeader
+} from "./chunk-TZSOL34K.js";
+import {
+  DateCell,
+  DateHeader
+} from "./chunk-25LYVP3C.js";
+import {
+  getStylizedAmount
+} from "./chunk-PXYDR7WQ.js";
+import {
+  TextCell,
+  TextHeader
+} from "./chunk-JHIMVLB2.js";
 import {
   _DataTable,
   useDataTable
@@ -27,8 +38,8 @@ import {
   TwoColumnPage
 } from "./chunk-E74OUNA3.js";
 import {
-  useOrders
-} from "./chunk-RMAQKNBA.js";
+  useOrderGroups
+} from "./chunk-VYMODH6P.js";
 import {
   useBatchCustomerCustomerGroups,
   useCustomer,
@@ -36,7 +47,7 @@ import {
   useDeleteCustomer,
   useDeleteCustomerAddress,
   useRemoveCustomersFromGroup
-} from "./chunk-PRBE5CM3.js";
+} from "./chunk-QYDWMBEX.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
@@ -49,9 +60,9 @@ import { Children } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
 
 // src/pages/customers/customer-detail/components/customer-address-section/customer-address-section.tsx
-import { clx, Container, Heading, toast, usePrompt } from "@medusajs/ui";
+import { Button, clx, Container, Heading, toast, usePrompt } from "@medusajs/ui";
 import { useTranslation } from "react-i18next";
-import { Trash } from "@medusajs/icons";
+import { PencilSquare, Trash } from "@medusajs/icons";
 import { Link, useNavigate } from "react-router-dom";
 
 // src/components/common/listicle/listicle.tsx
@@ -111,7 +122,7 @@ var CustomerAddressSection = ({
   return /* @__PURE__ */ jsxs2(Container, { className: "p-0", "data-testid": "customer-address-section", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "customer-address-section-header", children: [
       /* @__PURE__ */ jsx2(Heading, { level: "h2", "data-testid": "customer-address-section-heading", children: t2("addresses.title") }),
-      /* @__PURE__ */ jsx2(Link, { to: `create-address`, className: "text-ui-fg-muted text-xs", "data-testid": "customer-address-section-add-link", children: "Add" })
+      /* @__PURE__ */ jsx2(Link, { to: `create-address`, "data-testid": "customer-address-section-add-link", children: /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "small", "data-testid": "customer-address-section-create-button", children: t2("actions.create") }) })
     ] }),
     addresses.length === 0 && /* @__PURE__ */ jsx2("div", { "data-testid": "customer-address-section-no-records", children: /* @__PURE__ */ jsx2(
       NoRecords,
@@ -135,6 +146,15 @@ var CustomerAddressSection = ({
             {
               "data-testid": `customer-address-section-address-${address.id}-actions`,
               groups: [
+                {
+                  actions: [
+                    {
+                      icon: /* @__PURE__ */ jsx2(PencilSquare, {}),
+                      label: t2("actions.edit"),
+                      to: `edit-address/${address.id}`
+                    }
+                  ]
+                },
                 {
                   actions: [
                     {
@@ -156,7 +176,7 @@ var CustomerAddressSection = ({
 };
 
 // src/pages/customers/customer-detail/components/customer-general-section/customer-general-section.tsx
-import { PencilSquare, Trash as Trash2 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare2, Trash as Trash2 } from "@medusajs/icons";
 import {
   Container as Container2,
   Heading as Heading2,
@@ -220,7 +240,7 @@ var CustomerGeneralSection = ({
                 actions: [
                   {
                     label: t2("actions.edit"),
-                    icon: /* @__PURE__ */ jsx3(PencilSquare, {}),
+                    icon: /* @__PURE__ */ jsx3(PencilSquare2, {}),
                     to: "edit"
                   }
                 ]
@@ -256,7 +276,7 @@ var CustomerGeneralSection = ({
 
 // src/pages/customers/customer-detail/components/customer-group-section/customer-group-section.tsx
 import {
-  Button,
+  Button as Button2,
   Checkbox,
   Container as Container3,
   Heading as Heading3,
@@ -266,7 +286,7 @@ import {
 import { createColumnHelper } from "@tanstack/react-table";
 import { t } from "i18next";
 import { useMemo, useState } from "react";
-import { PencilSquare as PencilSquare2, Trash as Trash3 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare3, Trash as Trash3 } from "@medusajs/icons";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { Link as Link2 } from "react-router-dom";
@@ -285,7 +305,7 @@ var CustomerGroupSection = ({
   const { customer_groups, count, isLoading, isError, error } = useCustomerGroups(
     {
       ...searchParams,
-      fields: "+customers.id",
+      fields: "+customers.id,+seller.id,+seller.name",
       customers: { id: customer.id }
     },
     {
@@ -344,7 +364,7 @@ var CustomerGroupSection = ({
   return /* @__PURE__ */ jsxs4(Container3, { className: "divide-y p-0", "data-testid": "customer-group-section", children: [
     /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "customer-group-section-header", children: [
       /* @__PURE__ */ jsx4(Heading3, { level: "h2", "data-testid": "customer-group-section-heading", children: t("customerGroups.domain") }),
-      /* @__PURE__ */ jsx4(Link2, { to: `/customers/${customer.id}/add-customer-groups`, "data-testid": "customer-group-section-add-link", children: /* @__PURE__ */ jsx4(Button, { variant: "secondary", size: "small", "data-testid": "customer-group-section-add-button", children: t("general.add") }) })
+      /* @__PURE__ */ jsx4(Link2, { to: `/customers/${customer.id}/add-customer-groups`, "data-testid": "customer-group-section-add-link", children: /* @__PURE__ */ jsx4(Button2, { variant: "secondary", size: "small", "data-testid": "customer-group-section-add-button", children: t("general.add") }) })
     ] }),
     /* @__PURE__ */ jsx4(
       _DataTable,
@@ -413,7 +433,7 @@ var CustomerGroupRowActions = ({
           actions: [
             {
               label: t2("actions.edit"),
-              icon: /* @__PURE__ */ jsx4(PencilSquare2, {}),
+              icon: /* @__PURE__ */ jsx4(PencilSquare3, {}),
               to: `/customer-groups/${group.id}/edit`
             },
             {
@@ -457,6 +477,14 @@ var useColumns = (customerId) => {
         }
       }),
       ...columns,
+      columnHelper.display({
+        id: "owner",
+        header: t("fields.owner"),
+        cell: ({ row }) => {
+          const seller = row.original.seller;
+          return /* @__PURE__ */ jsx4("span", { "data-testid": `customer-group-section-owner-${row.original.id}`, children: seller?.name ?? "-" });
+        }
+      }),
       columnHelper.display({
         id: "actions",
         cell: ({ row }) => /* @__PURE__ */ jsx4(
@@ -473,8 +501,8 @@ var useColumns = (customerId) => {
 };
 
 // src/pages/customers/customer-detail/components/customer-order-section/customer-order-section.tsx
-import { ArrowPath } from "@medusajs/icons";
-import { Container as Container4, Heading as Heading4 } from "@medusajs/ui";
+import { ArrowPath, TriangleRightMini } from "@medusajs/icons";
+import { Container as Container4, Heading as Heading4, IconButton, clx as clx2 } from "@medusajs/ui";
 import { keepPreviousData as keepPreviousData2 } from "@tanstack/react-query";
 import { createColumnHelper as createColumnHelper2 } from "@tanstack/react-table";
 import { useMemo as useMemo2 } from "react";
@@ -482,8 +510,59 @@ import { useTranslation as useTranslation4 } from "react-i18next";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var PREFIX2 = "cusord";
 var PAGE_SIZE2 = 10;
-var DEFAULT_RELATIONS = "*customer,*items,*sales_channel";
-var DEFAULT_FIELDS = "id,status,display_id,created_at,email,fulfillment_status,payment_status,total,currency_code";
+var DEFAULT_FIELDS = [
+  "id",
+  "display_id",
+  "customer_id",
+  "seller_count",
+  "total",
+  "created_at",
+  "updated_at",
+  "orders.id",
+  "orders.display_id",
+  "orders.created_at",
+  "orders.updated_at",
+  "orders.payment_status",
+  "orders.fulfillment_status",
+  "orders.total",
+  "orders.currency_code",
+  "*orders.seller"
+].join(",");
+function transformOrderGroups(orderGroups, t2) {
+  return orderGroups.map((group) => {
+    const orders = group.orders ?? [];
+    const orderIds = orders.map((o) => `#${o.display_id}`).join(", ");
+    const currencyCode = orders[0]?.currency_code ?? "usd";
+    const children = orders.map((order) => ({
+      _type: "order",
+      id: order.id,
+      display_id: `#${order.display_id}`,
+      order_ids: "",
+      store: order.seller?.name ?? "-",
+      created_at: new Date(order.created_at),
+      updated_at: new Date(order.updated_at),
+      payment_status: order.payment_status ?? null,
+      fulfillment_status: order.fulfillment_status ?? null,
+      total: order.total ?? null,
+      currency_code: order.currency_code ?? "usd",
+      children: []
+    }));
+    return {
+      _type: "group",
+      id: group.id,
+      display_id: `#G${group.display_id}`,
+      order_ids: orderIds,
+      store: t2("orders.fields.vendorsCount", { count: group.seller_count }),
+      created_at: new Date(group.created_at),
+      updated_at: new Date(group.updated_at),
+      payment_status: null,
+      fulfillment_status: null,
+      total: group.total ?? null,
+      currency_code: currencyCode,
+      children
+    };
+  });
+}
 var CustomerOrderSection = ({
   customer
 }) => {
@@ -492,22 +571,28 @@ var CustomerOrderSection = ({
     pageSize: PAGE_SIZE2,
     prefix: PREFIX2
   });
-  const { orders, count, isLoading, isError, error } = useOrders(
+  const { order_groups, count, isLoading, isError, error } = useOrderGroups(
     {
       ...searchParams,
       customer_id: customer.id,
-      fields: DEFAULT_FIELDS + "," + DEFAULT_RELATIONS
+      fields: DEFAULT_FIELDS
     },
     {
       placeholderData: keepPreviousData2
     }
   );
+  const rows = useMemo2(
+    () => transformOrderGroups(order_groups ?? [], t2),
+    [order_groups, t2]
+  );
   const columns = useColumns2();
-  const filters = useOrderTableFilters();
   const { table } = useDataTable({
-    data: orders ?? [],
+    data: rows,
     columns,
     enablePagination: true,
+    enableExpandableRows: true,
+    getSubRows: (row) => row.children,
+    getRowId: (row) => row.id,
     count,
     pageSize: PAGE_SIZE2,
     prefix: PREFIX2
@@ -523,8 +608,7 @@ var CustomerOrderSection = ({
         columns,
         table,
         pagination: true,
-        navigateTo: (row) => `/orders/${row.original.id}`,
-        filters,
+        navigateTo: (row) => row.original._type === "order" ? `/orders/${row.original.id}` : "",
         count,
         isLoading,
         pageSize: PAGE_SIZE2,
@@ -540,18 +624,18 @@ var CustomerOrderSection = ({
     )
   ] });
 };
-var CustomerOrderActions = ({ order }) => {
+var CustomerOrderActions = ({ orderId }) => {
   const { t: t2 } = useTranslation4();
   return /* @__PURE__ */ jsx5(
     ActionMenu,
     {
-      "data-testid": `customer-order-section-row-actions-${order.id}`,
+      "data-testid": `customer-order-section-row-actions-${orderId}`,
       groups: [
         {
           actions: [
             {
               label: t2("transferOwnership.label"),
-              to: `${order.id}/transfer`,
+              to: `${orderId}/transfer`,
               icon: /* @__PURE__ */ jsx5(ArrowPath, {})
             }
           ]
@@ -562,16 +646,108 @@ var CustomerOrderActions = ({ order }) => {
 };
 var columnHelper2 = createColumnHelper2();
 var useColumns2 = () => {
-  const base = useOrderTableColumns({ exclude: ["customer"] });
+  const { t: t2 } = useTranslation4();
   return useMemo2(
     () => [
-      ...base,
+      columnHelper2.accessor("display_id", {
+        header: () => /* @__PURE__ */ jsx5(TextHeader, { text: t2("orders.fields.groupId") }),
+        cell: ({ row, getValue }) => {
+          if (row.original._type === "order") {
+            return null;
+          }
+          const expandHandler = row.getToggleExpandedHandler();
+          return /* @__PURE__ */ jsxs5("div", { className: "flex size-full items-center gap-x-2 overflow-hidden", children: [
+            /* @__PURE__ */ jsx5("div", { className: "flex size-7 items-center justify-center", children: row.getCanExpand() ? /* @__PURE__ */ jsx5(
+              IconButton,
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  expandHandler();
+                },
+                size: "small",
+                variant: "transparent",
+                className: "text-ui-fg-subtle",
+                "data-testid": `customer-order-group-expand-${row.original.id}`,
+                children: /* @__PURE__ */ jsx5(
+                  TriangleRightMini,
+                  {
+                    className: clx2({
+                      "rotate-90 transition-transform will-change-transform": row.getIsExpanded()
+                    })
+                  }
+                )
+              }
+            ) : null }),
+            /* @__PURE__ */ jsx5("span", { className: "truncate", children: getValue() })
+          ] });
+        }
+      }),
+      columnHelper2.accessor("order_ids", {
+        header: () => /* @__PURE__ */ jsx5(TextHeader, { text: t2("orders.fields.orderIds") }),
+        cell: ({ row, getValue }) => {
+          if (row.original._type === "group") {
+            return /* @__PURE__ */ jsx5(TextCell, { text: getValue() });
+          }
+          return /* @__PURE__ */ jsx5(TextCell, { text: row.original.display_id });
+        }
+      }),
+      columnHelper2.accessor("store", {
+        header: () => /* @__PURE__ */ jsx5(TextHeader, { text: t2("fields.store") }),
+        cell: ({ getValue }) => /* @__PURE__ */ jsx5(TextCell, { text: getValue() })
+      }),
+      columnHelper2.accessor("created_at", {
+        header: () => /* @__PURE__ */ jsx5(DateHeader, {}),
+        cell: ({ getValue }) => /* @__PURE__ */ jsx5(DateCell, { date: getValue() })
+      }),
+      columnHelper2.accessor("payment_status", {
+        header: () => /* @__PURE__ */ jsx5(PaymentStatusHeader, {}),
+        cell: ({ row, getValue }) => {
+          if (row.original._type === "group") {
+            return null;
+          }
+          const status = getValue();
+          if (!status) {
+            return "-";
+          }
+          return /* @__PURE__ */ jsx5(PaymentStatusCell, { status });
+        }
+      }),
+      columnHelper2.accessor("fulfillment_status", {
+        header: () => /* @__PURE__ */ jsx5(FulfillmentStatusHeader, {}),
+        cell: ({ row, getValue }) => {
+          if (row.original._type === "group") {
+            return null;
+          }
+          const status = getValue();
+          if (!status) {
+            return "-";
+          }
+          return /* @__PURE__ */ jsx5(FulfillmentStatusCell, { status });
+        }
+      }),
+      columnHelper2.accessor("total", {
+        header: () => /* @__PURE__ */ jsx5(TextHeader, { text: t2("fields.total") }),
+        cell: ({ row, getValue }) => {
+          const total = getValue();
+          if (total == null) {
+            return "-";
+          }
+          return /* @__PURE__ */ jsx5(
+            TextCell,
+            {
+              text: getStylizedAmount(total, row.original.currency_code)
+            }
+          );
+        }
+      }),
       columnHelper2.display({
         id: "actions",
-        cell: ({ row }) => /* @__PURE__ */ jsx5(CustomerOrderActions, { order: row.original })
+        cell: ({ row }) => row.original._type === "order" ? /* @__PURE__ */ jsx5(CustomerOrderActions, { orderId: row.original.id }) : null
       })
     ],
-    [base]
+    [t2]
   );
 };
 

package/dist/{chunk-Z2UBJXTU.js → chunk-RDTFLHYO.js}

@@ -1,6 +1,6 @@
 import {
   customerGroupsQueryKeys
-} from "./chunk-PRBE5CM3.js";
+} from "./chunk-QYDWMBEX.js";
 import {
   productsQueryKeys
 } from "./chunk-M2E3PKA4.js";

package/dist/{chunk-BGQ7H2KL.js → chunk-SMQM5N45.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-QG6PLWNH.js";
 import {
   useCustomerTableFilters
-} from "./chunk-I5THQVYP.js";
+} from "./chunk-XIFE4VUR.js";
 import {
   useCustomerTableQuery
 } from "./chunk-PVZBDWLK.js";
@@ -16,7 +16,7 @@ import {
 } from "./chunk-H6MYB7GB.js";
 import {
   useCustomers
-} from "./chunk-PRBE5CM3.js";
+} from "./chunk-QYDWMBEX.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";

package/dist/{chunk-I5THQVYP.js → chunk-XIFE4VUR.js}

@@ -1,6 +1,6 @@
 import {
   useCustomerGroups
-} from "./chunk-PRBE5CM3.js";
+} from "./chunk-QYDWMBEX.js";
 
 // src/hooks/table/filters/use-customer-table-filters.tsx
 import { useTranslation } from "react-i18next";

package/dist/{chunk-7XBB24GO.js → chunk-YUECTKEY.js}

@@ -10,7 +10,7 @@ import {
   decorateVariantsWithDefaultValues,
   generateVariantsFromAttributes,
   normalizeProductFormValues
-} from "./chunk-AGXO2H4E.js";
+} from "./chunk-2KPITPB7.js";
 import {
   HandleInput
 } from "./chunk-HJ56YXBU.js";

package/dist/{chunk-4VXYPZMT.js → chunk-Z7AXFQPD.js}

@@ -1,6 +1,6 @@
 import {
   PriceListCustomerGroupRuleForm
-} from "./chunk-HR7TFO2X.js";
+} from "./chunk-A3IFGUDD.js";
 import {
   PriceListCreateProductsSchema,
   PriceListRulesSchema,
@@ -43,7 +43,7 @@ import {
 } from "./chunk-3QSRE5LS.js";
 import {
   useCreatePriceList
-} from "./chunk-Z2UBJXTU.js";
+} from "./chunk-RDTFLHYO.js";
 import {
   useDocumentDirection
 } from "./chunk-Y7QKP6QU.js";

package/dist/{collection-add-products-PBCIG33C.js → collection-add-products-CKF2VFVK.js}

@@ -33,25 +33,25 @@ import "./chunk-THHRRYRS.js";
 import "./chunk-6FLSBL4Q.js";
 import "./chunk-PJR6W35H.js";
 import "./chunk-OH4AABUT.js";
+import "./chunk-FJHAAROU.js";
 import "./chunk-AEMDNTW5.js";
 import "./chunk-LYD3C73Z.js";
-import "./chunk-FJHAAROU.js";
 import "./chunk-533GMKEG.js";
 import "./chunk-YFRC6GEN.js";
 import "./chunk-N6SI4IIT.js";
-import "./chunk-46M463BR.js";
-import "./chunk-ZIFHQXP3.js";
 import "./chunk-JPNPTILP.js";
 import "./chunk-DAXXLQKB.js";
-import "./chunk-GKGLVDDV.js";
+import "./chunk-46M463BR.js";
+import "./chunk-ZIFHQXP3.js";
 import "./chunk-ESPLVOFC.js";
+import "./chunk-GKGLVDDV.js";
 import "./chunk-WJJXUXSO.js";
 import "./chunk-LAPEZATU.js";
+import "./chunk-RDTFLHYO.js";
 import {
   useCollection,
   useUpdateCollectionProducts
 } from "./chunk-QKJGSZI2.js";
-import "./chunk-Z2UBJXTU.js";
 import "./chunk-FXWKGNRV.js";
 import "./chunk-VDKOJ5WD.js";
 import "./chunk-ZN7LWXVC.js";
@@ -61,7 +61,7 @@ import "./chunk-XGUUM3S6.js";
 import "./chunk-RMAQKNBA.js";
 import "./chunk-VYMODH6P.js";
 import "./chunk-LEG67A2R.js";
-import "./chunk-PRBE5CM3.js";
+import "./chunk-QYDWMBEX.js";
 import "./chunk-OKWGPKVK.js";
 import "./chunk-KYFWVLWO.js";
 import "./chunk-Y7QKP6QU.js";

package/dist/{collection-create-7G3MHBVQ.js → collection-create-UNGPKT7H.js}

@@ -1,6 +1,13 @@
+import {
+  CollectionIconInput,
+  CollectionIconTip,
+  CollectionMediaInput,
+  uploadCollectionImages
+} from "./chunk-BN6OOLJA.js";
 import {
   HandleInput
 } from "./chunk-HJ56YXBU.js";
+import "./chunk-VSLHL2AZ.js";
 import "./chunk-TKGWSUEI.js";
 import {
   KeyboundForm
@@ -28,9 +35,22 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import * as zod from "zod";
 import { jsx, jsxs } from "react/jsx-runtime";
+var CollectionMediaSchema = zod.object({
+  url: zod.string(),
+  file: zod.any().nullable(),
+  is_thumbnail: zod.boolean(),
+  is_banner: zod.boolean(),
+  field_id: zod.string().optional()
+});
+var CollectionIconSchema = zod.object({
+  url: zod.string(),
+  file: zod.any().nullable()
+});
 var CreateCollectionSchema = zod.object({
   title: zod.string().min(1),
-  handle: zod.string().optional()
+  handle: zod.string().optional(),
+  media: zod.array(CollectionMediaSchema).optional(),
+  icon: CollectionIconSchema.nullable().optional()
 });
 var CreateCollectionForm = () => {
   const { t } = useTranslation();
@@ -38,21 +58,31 @@ var CreateCollectionForm = () => {
   const form = useForm({
     defaultValues: {
       title: "",
-      handle: ""
+      handle: "",
+      media: [],
+      icon: null
     },
     resolver: zodResolver(CreateCollectionSchema)
   });
   const { mutateAsync, isPending } = useCreateCollection();
   const handleSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(data, {
-      onSuccess: ({ collection }) => {
-        handleSuccess(`/collections/${collection.id}`);
-        toast.success(t("collections.createSuccess"));
-      },
-      onError: (error) => {
-        toast.error(error.message);
-      }
+    const { media, icon, ...rest } = data;
+    const images = await uploadCollectionImages({
+      media: media ?? [],
+      icon: icon ?? null
     });
+    await mutateAsync(
+      { ...rest, ...images },
+      {
+        onSuccess: ({ collection }) => {
+          handleSuccess(`/collections/${collection.id}`);
+          toast.success(t("collections.createSuccess"));
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
   });
   return /* @__PURE__ */ jsx(RouteFocusModal.Form, { form, "data-testid": "collection-create-form", children: /* @__PURE__ */ jsxs(
     KeyboundForm,
@@ -61,7 +91,7 @@ var CreateCollectionForm = () => {
       className: "flex h-full flex-col overflow-hidden",
       children: [
         /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
-        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex size-full flex-col items-center p-16", "data-testid": "collection-create-form-body", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", "data-testid": "collection-create-form-content", children: [
+        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex size-full flex-col items-center overflow-auto p-16", "data-testid": "collection-create-form-body", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", "data-testid": "collection-create-form-content", children: [
           /* @__PURE__ */ jsxs("div", { "data-testid": "collection-create-form-header", children: [
             /* @__PURE__ */ jsx(Heading, { "data-testid": "collection-create-form-heading", children: t("collections.createCollection") }),
             /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", "data-testid": "collection-create-form-hint", children: t("collections.createCollectionHint") })
@@ -103,7 +133,48 @@ var CreateCollectionForm = () => {
                 }
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Form.Field,
+            {
+              control: form.control,
+              name: "media",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "collection-create-form-media-item", children: [
+                /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("collections.media.label") }),
+                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                  CollectionMediaInput,
+                  {
+                    value: value ?? [],
+                    onChange,
+                    hasError: !!form.formState.errors.media
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Form.Field,
+            {
+              control: form.control,
+              name: "icon",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "collection-create-form-icon-item", children: [
+                /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("collections.icon.label") }),
+                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+                  /* @__PURE__ */ jsx(
+                    CollectionIconInput,
+                    {
+                      value: value ?? null,
+                      onChange,
+                      hasError: !!form.formState.errors.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(CollectionIconTip, {})
+                ] }) }),
+                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+              ] })
+            }
+          )
         ] }) }),
         /* @__PURE__ */ jsxs(RouteFocusModal.Footer, { "data-testid": "collection-create-form-footer", children: [
           /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", "data-testid": "collection-create-form-cancel-button", children: t("actions.cancel") }) }),