@firecms/core 3.0.0-canary.144 → 3.0.0-canary.146

package/dist/index.es.js

@@ -613,7 +613,7 @@ function PropertyIdCopyTooltipContent({ propertyKey }) {
         Typography,
         {
           variant: "caption",
-          className: "min-w-20 text-slate-400",
+          className: "min-w-20 text-surface-accent-400",
           color: "disabled",
           children: copied ? "Copied" : "Property ID"
         }
@@ -2790,22 +2790,23 @@ function hashString(str) {
   }
   return Math.abs(hash2);
 }
-function getIcon(iconKey, className) {
+function getIcon(iconKey, className, color) {
   if (!iconKey) return void 0;
   iconKey = slugify(iconKey);
   if (!(iconKey in iconKeysMap)) {
     return void 0;
   }
-  return iconKey in iconKeysMap ? /* @__PURE__ */ jsx(Icon, { iconKey, size: "medium", className }) : void 0;
+  return iconKey in iconKeysMap ? /* @__PURE__ */ jsx(Icon, { iconKey, size: "medium", className, color }) : void 0;
 }
 const IconForView = React__default.memo(
   function IconForView2({
     collectionOrView,
     className,
+    color,
     size = "medium"
   }) {
     if (!collectionOrView) return /* @__PURE__ */ jsx(Fragment, {});
-    const icon = getIcon(collectionOrView.icon, className);
+    const icon = getIcon(collectionOrView.icon, className, color);
     if (collectionOrView?.icon && icon)
       return icon;
     let slugName = slugify(("singularName" in collectionOrView ? collectionOrView.singularName : void 0) ?? collectionOrView.name);
@@ -2820,10 +2821,10 @@ const IconForView = React__default.memo(
     const iconsCount = coolIconKeys.length;
     if (!key)
       key = coolIconKeys[hashString(collectionOrView.path) % iconsCount];
-    return /* @__PURE__ */ jsx(Icon, { iconKey: key, size, className });
+    return /* @__PURE__ */ jsx(Icon, { iconKey: key, size, className, color });
   },
   (prevProps, nextProps) => {
-    return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon);
+    return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon) && equal(prevProps.color, nextProps.color);
   }
 );
 const iconKeysMap = iconKeys.reduce((acc, key) => {
@@ -4053,11 +4054,11 @@ function EntityView({
   const properties = resolvedCollection.properties;
   return /* @__PURE__ */ jsx("div", { className: "w-full " + className, children: /* @__PURE__ */ jsxs("div", { className: "w-full mb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0"), children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-gray-600", children: "Id" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-surface-600", children: "Id" }) }),
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center",
+          className: "flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center",
           children: [
             /* @__PURE__ */ jsx("span", { className: "flex-grow mr-2", children: entity.id }),
             customizationController?.entityLinkBuilder && /* @__PURE__ */ jsx(
@@ -4085,11 +4086,11 @@ function EntityView({
         {
           className: cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0"),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-gray-600", children: property.name }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-surface-600", children: property.name }) }),
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: "flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center",
+                className: "flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center",
                 children: /* @__PURE__ */ jsx(
                   PropertyPreview,
                   {
@@ -4960,7 +4961,7 @@ function StorageUpload$1({
             children: /* @__PURE__ */ jsx(
               Typography,
               {
-                className: "text-gray-400 dark:text-gray-600",
+                className: "text-surface-400 dark:text-surface-600",
                 variant: "body2",
                 align: "center",
                 children: helpText
@@ -4982,7 +4983,7 @@ function StorageUpload$1({
                 color: "inherit",
                 size: "small",
                 onClick: open,
-                children: /* @__PURE__ */ jsx(EditIcon, { size: "small", className: "text-gray-500" })
+                children: /* @__PURE__ */ jsx(EditIcon, { size: "small", className: "text-surface-500" })
               }
             )
           }
@@ -5054,7 +5055,7 @@ function EntityPreview({
       hover: disabled ? void 0 : hover,
       size,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cls("flex w-10 h-10 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: [
           imageProperty && /* @__PURE__ */ jsx(
             PropertyPreview,
             {
@@ -5064,7 +5065,15 @@ function EntityPreview({
               value: getValueInPath(entity.values, imagePropertyKey)
             }
           ),
-          !imageProperty && /* @__PURE__ */ jsx(IconForView, { collectionOrView: collection, size, className: "m-auto" })
+          !imageProperty && /* @__PURE__ */ jsx(
+            IconForView,
+            {
+              collectionOrView: collection,
+              color: "primary",
+              size,
+              className: "m-auto p-1"
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col grow-1 w-full max-w-full m-1", children: [
           size !== "smallest" && includeId && (entity ? /* @__PURE__ */ jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsx(
@@ -5165,11 +5174,11 @@ const EntityPreviewContainer = React.forwardRef(({
         tabindex: 0
       },
       className: cls(
-        "bg-white dark:bg-gray-900",
+        "bg-white dark:bg-surface-900",
         "min-h-[42px]",
         fullwidth ? "w-full" : "",
         "items-center",
-        hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
+        hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
         size === "smallest" ? "p-1" : "px-2 py-1",
         "flex border rounded-lg",
         onClick ? "cursor-pointer" : "",
@@ -5303,22 +5312,20 @@ const TableReferenceFieldInternal = React__default.memo(
         EntityPreviewContainer,
         {
           className: cls(
-            "px-4 py-2 text-sm font-medium flex items-center uppercase",
+            "px-3 py-2 text-sm font-medium flex items-center",
             multiselect ? "gap-4" : "gap-6",
-            disabled ? "text-slate-500" : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800"
+            disabled ? "text-surface-accent-500" : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"
           ),
           onClick: handleOpen,
           size: "medium",
           children: [
             /* @__PURE__ */ jsx(
-              IconForView,
+              EditIcon,
               {
                 size: "small",
-                collectionOrView: collection,
-                className: "text-gray-300 dark:text-gray-600"
+                className: "ml-2 mr-1 text-surface-300 dark:text-surface-600"
               }
             ),
-            "Edit ",
             title
           ]
         }
@@ -5799,10 +5806,10 @@ const EntityTableCell = React__default.memo(
         className: cls(
           "transition-colors duration-100 ease-in-out",
           `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
-          onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",
-          saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
+          onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "",
+          saved ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "",
           hideOverflow ? "overflow-hidden" : "",
-          isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
+          isSelected ? "bg-surface-50 dark:bg-surface-900" : "",
           borderClass
         ),
         ref,
@@ -5844,7 +5851,7 @@ const EntityTableCell = React__default.memo(
             )
           ] }),
           actions,
-          disabled && onHover && disabledTooltip && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsx(Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsx(RemoveCircleIcon, { size: "smallest", color: "disabled", className: "text-gray-500" }) }) })
+          disabled && onHover && disabledTooltip && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsx(Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsx(RemoveCircleIcon, { size: "smallest", color: "disabled", className: "text-surface-500" }) }) })
         ]
       }
     );
@@ -6325,7 +6332,7 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
     "div",
     {
       className: cls(
-        "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+        "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
         frozen ? "sticky left-0" : ""
       ),
       style: {
@@ -6456,7 +6463,7 @@ function CollectionTableToolbar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full"),
+      className: cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full"),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 md:mr-4 mr-2", children: [
           title && /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: title }),
@@ -6702,7 +6709,7 @@ function CircularProgressCenter({ text, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "flex w-full h-screen max-h-full max-w-full bg-gray-50 dark:bg-gray-900 gap-4",
+      className: "flex w-full h-screen max-h-full max-w-full bg-surface-50 dark:bg-surface-900 gap-4",
       children: /* @__PURE__ */ jsxs("div", { className: "m-auto flex flex-col gap-2 items-center", children: [
         /* @__PURE__ */ jsx(CircularProgress, { ...props }),
         text && /* @__PURE__ */ jsx(
@@ -6750,9 +6757,9 @@ const VirtualTableHeader = React__default.memo(
       "div",
       {
         className: cls(
-          "flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
-          "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 ",
-          "hover:bg-gray-100 dark:hover:bg-gray-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
+          "flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
+          "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
+          "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
           column.frozen ? "sticky left-0 z-10" : "relative z-0"
         ),
         style: {
@@ -6798,7 +6805,7 @@ const VirtualTableHeader = React__default.memo(
                   IconButton,
                   {
                     size: "small",
-                    className: onHover || openFilter ? "bg-white dark:bg-gray-950" : void 0,
+                    className: onHover || openFilter ? "bg-white dark:bg-surface-950" : void 0,
                     onClick: () => {
                       onColumnSort(column.key);
                     },
@@ -6827,7 +6834,7 @@ const VirtualTableHeader = React__default.memo(
                   trigger: /* @__PURE__ */ jsx(
                     IconButton,
                     {
-                      className: onHover || openFilter ? "bg-white dark:bg-gray-950" : void 0,
+                      className: onHover || openFilter ? "bg-white dark:bg-surface-950" : void 0,
                       size: "small",
                       onClick: handleSettingsClick,
                       children: /* @__PURE__ */ jsx(FilterListIcon, { size: "small" })
@@ -6855,7 +6862,7 @@ const VirtualTableHeader = React__default.memo(
               ref: resizeHandleRef,
               className: cls(
                 "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
-                hovered && "bg-gray-300 dark:bg-gray-700"
+                hovered && "bg-surface-300 dark:bg-surface-700"
               ),
               onMouseDown: onClickResizeColumn ? () => onClickResizeColumn(columnIndex, column) : void 0
             }
@@ -6906,12 +6913,12 @@ function FilterForm({
         e.preventDefault();
         submit();
       },
-      className: "text-gray-900 dark:text-white",
+      className: "text-surface-900 dark:text-white",
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cls(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b"),
+            className: cls(defaultBorderMixin, "py-4 px-6 typography-label border-b"),
             children: column.title ?? id
           }
         ),
@@ -7028,7 +7035,7 @@ const VirtualTableHeaderRow = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900"),
+      className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900"),
       children: [
         columns.map((c, columnIndex) => {
           const column = columns[columnIndex];
@@ -7078,7 +7085,7 @@ const VirtualTableRow = React__default.memo(
       "div",
       {
         className: cls(
-          "flex min-w-full text-sm border-b border-gray-200 dark:border-gray-800 border-opacity-40 dark:border-opacity-40",
+          "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
           rowClassName ? rowClassName(rowData) : "",
           {
             "hover:bg-opacity-95": hoverRow,
@@ -7585,7 +7592,7 @@ function ReferenceFilterField({
       !isArray && /* @__PURE__ */ jsxs(
         Label,
         {
-          className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800",
+          className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800",
           htmlFor: "null-filter",
           children: [
             /* @__PURE__ */ jsx(
@@ -7777,7 +7784,7 @@ function StringNumberFilterField({
       !isArray && /* @__PURE__ */ jsxs(
         Label,
         {
-          className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800",
+          className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800",
           htmlFor: "null-filter",
           children: [
             /* @__PURE__ */ jsx(
@@ -7904,7 +7911,7 @@ function DateTimeFilterField({
       /* @__PURE__ */ jsxs(
         Label,
         {
-          className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800",
+          className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800",
           htmlFor: "null-filter",
           children: [
             /* @__PURE__ */ jsx(
@@ -8018,7 +8025,7 @@ const SelectableTable = React__default.memo(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-full w-full flex flex-col bg-white dark:bg-gray-950",
+            className: "h-full w-full flex flex-col bg-white dark:bg-surface-950",
             ref,
             children: /* @__PURE__ */ jsx(
               VirtualTable,
@@ -8041,7 +8048,7 @@ const SelectableTable = React__default.memo(
                 checkFilterCombination,
                 createFilterField: filterable ? createFilterField : void 0,
                 rowClassName: useCallback((entity) => {
-                  return highlightedRow?.(entity) ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "";
+                  return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
                 }, [highlightedRow]),
                 className: "flex-grow",
                 emptyComponent,
@@ -8341,7 +8348,7 @@ const EntityCollectionTable = function EntityCollectionTable2({
     {
       ref,
       style,
-      className: cls("h-full w-full flex flex-col bg-white dark:bg-gray-950", className),
+      className: cls("h-full w-full flex flex-col bg-white dark:bg-surface-950", className),
       children: [
         /* @__PURE__ */ jsx(
           CollectionTableToolbar,
@@ -9158,7 +9165,7 @@ function ReferenceSelectionTable({
             {
               size: "small",
               collectionOrView: collection,
-              className: "text-gray-300 dark:text-gray-600"
+              className: "text-surface-300 dark:text-surface-600"
             }
           ),
           collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`
@@ -9258,7 +9265,7 @@ function NavigationGroup({
     ExpandablePanel,
     {
       invisible: true,
-      titleClassName: "font-medium text-sm text-gray-600 dark:text-gray-400",
+      titleClassName: "font-medium text-sm text-surface-600 dark:text-surface-400",
       innerClassName: "py-4",
       initiallyExpanded: !(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped"),
       onExpandedChange: (expanded) => {
@@ -9306,7 +9313,7 @@ function NavigationCard({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600",
+                  className: "h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600",
                   children: [
                     icon,
                     /* @__PURE__ */ jsx(
@@ -9426,7 +9433,7 @@ function NavigationCardBinding({
           StarBorderIcon,
           {
             size: 18,
-            className: "text-gray-400 dark:text-gray-500"
+            className: "text-surface-400 dark:text-surface-500"
           }
         )
       },
@@ -9515,7 +9522,7 @@ function NavigationChip({ entry }) {
         {
           onClick: onIconClick,
           size: 18,
-          className: "text-gray-400 dark:text-gray-500"
+          className: "text-surface-400 dark:text-surface-500"
         }
       ),
       children: entry.name
@@ -10754,7 +10761,7 @@ function EntityEditViewInner({
       pluginActions.length > 0 && /* @__PURE__ */ jsx(
         "div",
         {
-          className: cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md"),
+          className: cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-surface-accent-200 dark:bg-opacity-60 dark:bg-surface-accent-800 backdrop-blur-md"),
           children: pluginActions
         }
       ),
@@ -10879,7 +10886,7 @@ function EntityEditViewInner({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cls(defaultBorderMixin, "no-scrollbar h-16 border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950"),
+        className: cls(defaultBorderMixin, "no-scrollbar h-16 border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-surface-50 dark:bg-surface-950"),
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -11249,7 +11256,7 @@ function PopupFormFieldInternal({
   const form = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`,
+      className: `text-surface-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-surface-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`,
       children: [
         internalForm,
         savingError && /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message })
@@ -11262,7 +11269,7 @@ function PopupFormFieldInternal({
       style: {
         boxShadow: "0 0 0 2px rgba(128,128,128,0.2)"
       },
-      className: `inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-gray-950 ${!open ? "invisible" : "visible"} cursor-grab overflow-visible`,
+      className: `inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-950 ${!open ? "invisible" : "visible"} cursor-grab overflow-visible`,
       ref: draggableRef,
       children: [
         /* @__PURE__ */ jsx(ElementResizeListener, { onResize: adaptResize }),
@@ -11275,7 +11282,7 @@ function PopupFormFieldInternal({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute -top-3.5 -right-3.5 bg-gray-500 rounded-full",
+                  className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full",
                   style: {
                     width: "32px",
                     height: "32px"
@@ -11736,7 +11743,7 @@ const EntityCollectionView = React__default.memo(
             }
           )
         ] }),
-        children: collection.description && /* @__PURE__ */ jsx("div", { className: "m-4 text-gray-900 dark:text-white", children: /* @__PURE__ */ jsx(Markdown, { source: collection.description }) })
+        children: collection.description && /* @__PURE__ */ jsx("div", { className: "m-4 text-surface-900 dark:text-white", children: /* @__PURE__ */ jsx(Markdown, { source: collection.description }) })
       }
     );
     const buildAdditionalHeaderWidget = useCallback(({
@@ -11978,7 +11985,7 @@ function EntityIdHeaderWidget({
       align: "start",
       alignOffset: -117,
       trigger: /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(SearchIcon, { size: "small" }) }),
-      children: /* @__PURE__ */ jsxs("div", { className: cls("my-2 rounded-lg bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-white"), children: [
+      children: /* @__PURE__ */ jsxs("div", { className: cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white"), children: [
         /* @__PURE__ */ jsx(
           "form",
           {
@@ -12006,7 +12013,7 @@ function EntityIdHeaderWidget({
                     setSearchString(e.target.value);
                   },
                   value: searchString,
-                  className: "rounded-lg bg-white dark:bg-gray-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled
+                  className: "rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -12048,7 +12055,7 @@ function PropertyConfigBadge({
   propertyConfig,
   disabled
 }) {
-  const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-gray-400 dark:bg-gray-600" : "");
+  const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
   const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : void 0;
   return /* @__PURE__ */ jsx(
     "div",
@@ -12578,7 +12585,7 @@ function ArrayContainerItem({
       ref: provided.innerRef,
       ...provided.draggableProps,
       style: provided.draggableProps.style,
-      className: `${!isDragging ? "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20" : ""} rounded-md opacity-100`,
+      className: `${!isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""} rounded-md opacity-100`,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -13532,7 +13539,7 @@ function EmptyValue() {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "rounded-full bg-gray-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"
+      className: "rounded-full bg-surface-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"
     }
   );
 }
@@ -13599,7 +13606,7 @@ function ImagePreview({
                   children: /* @__PURE__ */ jsx(
                     ContentCopyIcon,
                     {
-                      className: "text-gray-700 dark:text-gray-300",
+                      className: "text-surface-700 dark:text-surface-300",
                       size: "smallest"
                     }
                   )
@@ -13621,7 +13628,7 @@ function ImagePreview({
               children: /* @__PURE__ */ jsx(
                 OpenInNewIcon,
                 {
-                  className: "text-gray-700 dark:text-gray-300",
+                  className: "text-surface-700 dark:text-surface-300",
                   size: "smallest"
                 }
               )
@@ -13697,7 +13704,7 @@ function UrlComponentPreview({
           height: getThumbnailMeasure(size)
         },
         children: [
-          /* @__PURE__ */ jsx(DescriptionIcon, { className: "text-gray-700 dark:text-gray-300" }),
+          /* @__PURE__ */ jsx(DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" }),
           hint && /* @__PURE__ */ jsx(Tooltip, { title: hint, children: /* @__PURE__ */ jsx(
             Typography,
             {
@@ -15365,7 +15372,7 @@ function StorageItemPreview({
     !placeholder && !disabled && /* @__PURE__ */ jsx(
       "div",
       {
-        className: "absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900",
+        className: "absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900",
         children: /* @__PURE__ */ jsx(
           Tooltip,
           {
@@ -15401,7 +15408,7 @@ function StorageItemPreview({
       {
         onClick: (e) => e.stopPropagation(),
         className: "flex flex-col items-center justify-center w-full h-full",
-        children: /* @__PURE__ */ jsx(DescriptionIcon, { className: "text-gray-700 dark:text-gray-300" })
+        children: /* @__PURE__ */ jsx(DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" })
       }
     )
   ] });
@@ -16111,7 +16118,7 @@ function ReferenceFieldBindingInternal({
         {
           className: cls(
             "px-6 h-16 text-sm font-medium flex items-center gap-6",
-            disabled || isSubmitting ? "text-slate-500" : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800"
+            disabled || isSubmitting ? "text-surface-accent-500" : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"
           ),
           onClick: onEntryClick,
           size: "medium",
@@ -16120,7 +16127,7 @@ function ReferenceFieldBindingInternal({
               IconForView,
               {
                 collectionOrView: collection,
-                className: "text-gray-300 dark:text-gray-600"
+                className: "text-surface-300 dark:text-surface-600"
               }
             ),
             `Edit ${property.name}`.toUpperCase()
@@ -16452,7 +16459,7 @@ function MapFieldBinding({
             expanded: expanded2
           });
         },
-        innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-gray-900",
+        innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900",
         title,
         children: mapFormView
       }
@@ -17709,7 +17716,7 @@ const DEFAULT_FIELD_CONFIGS = {
   },
   multi_select: {
     key: "multi_select",
-    name: "Multi select",
+    name: "Multi select (enum)",
     description: "Select multiple text values from within an enumeration",
     Icon: ListAltIcon,
     color: "#4223c9",
@@ -18483,7 +18490,7 @@ function SideDialogView({
               panel && /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-gray-900 ",
+                  className: "transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 ",
                   style: {
                     width: panel.width,
                     transform: `translateX(-${offsetPosition * 200}px)`
@@ -19364,7 +19371,7 @@ const Scaffold = React__default.memo(
     }, children: /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cls("flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden", className),
+        className: cls("flex h-screen w-screen bg-surface-50 dark:bg-surface-900 text-surface-900 dark:text-white overflow-hidden", className),
         style: {
           paddingTop: "env(safe-area-inset-top)",
           paddingLeft: "env(safe-area-inset-left)",
@@ -19436,7 +19443,7 @@ function DrawerWrapper(props) {
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: "ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20",
+                className: "ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20",
                 children: /* @__PURE__ */ jsx(
                   IconButton,
                   {
@@ -19526,7 +19533,7 @@ function DrawerNavigationItem({
   const iconWrap = /* @__PURE__ */ jsx(
     "div",
     {
-      className: "text-gray-600 dark:text-gray-500",
+      className: "text-text-secondary dark:text-text-secondary-dark",
       children: icon
     }
   );
@@ -19540,13 +19547,13 @@ function DrawerNavigationItem({
       },
       className: ({ isActive }) => cls(
         "rounded-lg truncate",
-        "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-slate-800 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
+        "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-secondary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
         "flex flex-row items-center mr-8",
         // "transition-all ease-in-out delay-100 duration-300",
         // drawerOpen ? "w-full" : "w-18",
         drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
         "font-medium text-sm",
-        isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-50" : ""
+        isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
       ),
       to: url,
       children: [
@@ -19634,7 +19641,7 @@ function DefaultDrawer({
         children: groupsWithoutAdmin.map((group) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "bg-gray-50 dark:bg-gray-800 dark:bg-opacity-30 my-4 rounded-lg ml-4",
+            className: "bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-4",
             children: [
               buildGroupHeader(group),
               Object.values(navigationEntries).filter((e) => e.group === group).map((view, index) => /* @__PURE__ */ jsx(
@@ -19666,7 +19673,7 @@ function DefaultDrawer({
           IconButton,
           {
             shape: "square",
-            className: "m-4 text-gray-900 dark:text-white w-fit",
+            className: "m-4 text-surface-900 dark:text-white w-fit",
             children: [
               /* @__PURE__ */ jsx(
                 Tooltip,