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

package/dist/index.umd.js

@@ -617,7 +617,7 @@
           ui.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"
           }
@@ -2794,22 +2794,23 @@
     }
     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__ */ jsxRuntime.jsx(ui.Icon, { iconKey, size: "medium", className }) : void 0;
+    return iconKey in iconKeysMap ? /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey, size: "medium", className, color }) : void 0;
   }
   const IconForView = React.memo(
     function IconForView2({
       collectionOrView,
       className,
+      color,
       size = "medium"
     }) {
       if (!collectionOrView) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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);
@@ -2824,10 +2825,10 @@
       const iconsCount = ui.coolIconKeys.length;
       if (!key)
         key = ui.coolIconKeys[hashString(collectionOrView.path) % iconsCount];
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey: key, size, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.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 = ui.iconKeys.reduce((acc, key) => {
@@ -4057,11 +4058,11 @@
     const properties = resolvedCollection.properties;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full " + className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full mb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-sm text-gray-600", children: "Id" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-sm text-surface-600", children: "Id" }) }),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex-grow mr-2", children: entity.id }),
               customizationController?.entityLinkBuilder && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4089,11 +4090,11 @@
           {
             className: ui.cls(ui.defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-sm text-gray-600", children: property.name }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-sm text-surface-600", children: property.name }) }),
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                     PropertyPreview,
                     {
@@ -4964,7 +4965,7 @@
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 ui.Typography,
                 {
-                  className: "text-gray-400 dark:text-gray-600",
+                  className: "text-surface-400 dark:text-surface-600",
                   variant: "body2",
                   align: "center",
                   children: helpText
@@ -4986,7 +4987,7 @@
                   color: "inherit",
                   size: "small",
                   onClick: open,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "small", className: "text-gray-500" })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "small", className: "text-surface-500" })
                 }
               )
             }
@@ -5058,7 +5059,7 @@
         hover: disabled ? void 0 : hover,
         size,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex w-10 h-10 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: [
             imageProperty && /* @__PURE__ */ jsxRuntime.jsx(
               PropertyPreview,
               {
@@ -5068,7 +5069,15 @@
                 value: getValueInPath(entity.values, imagePropertyKey)
               }
             ),
-            !imageProperty && /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: collection, size, className: "m-auto" })
+            !imageProperty && /* @__PURE__ */ jsxRuntime.jsx(
+              IconForView,
+              {
+                collectionOrView: collection,
+                color: "primary",
+                size,
+                className: "m-auto p-1"
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col grow-1 w-full max-w-full m-1", children: [
             size !== "smallest" && includeId && (entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5169,11 +5178,11 @@
           tabindex: 0
         },
         className: ui.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" : "",
@@ -5307,22 +5316,20 @@
           EntityPreviewContainer,
           {
             className: ui.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__ */ jsxRuntime.jsx(
-                IconForView,
+                ui.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
             ]
           }
@@ -5803,10 +5810,10 @@
           className: ui.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,
@@ -5848,7 +5855,7 @@
               )
             ] }),
             actions,
-            disabled && onHover && disabledTooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(ui.RemoveCircleIcon, { size: "smallest", color: "disabled", className: "text-gray-500" }) }) })
+            disabled && onHover && disabledTooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(ui.RemoveCircleIcon, { size: "smallest", color: "disabled", className: "text-surface-500" }) }) })
           ]
         }
       );
@@ -6329,7 +6336,7 @@
       "div",
       {
         className: ui.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: {
@@ -6460,7 +6467,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: ui.cls(ui.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: ui.cls(ui.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 md:mr-4 mr-2", children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: title }),
@@ -6706,7 +6713,7 @@
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "m-auto flex flex-col gap-2 items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { ...props }),
           text && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6754,9 +6761,9 @@
         "div",
         {
           className: ui.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: {
@@ -6802,7 +6809,7 @@
                     ui.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);
                       },
@@ -6831,7 +6838,7 @@
                     trigger: /* @__PURE__ */ jsxRuntime.jsx(
                       ui.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__ */ jsxRuntime.jsx(ui.FilterListIcon, { size: "small" })
@@ -6859,7 +6866,7 @@
                 ref: resizeHandleRef,
                 className: ui.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
               }
@@ -6910,12 +6917,12 @@
           e.preventDefault();
           submit();
         },
-        className: "text-gray-900 dark:text-white",
+        className: "text-surface-900 dark:text-white",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: ui.cls(ui.defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b"),
+              className: ui.cls(ui.defaultBorderMixin, "py-4 px-6 typography-label border-b"),
               children: column.title ?? id
             }
           ),
@@ -7032,7 +7039,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: ui.cls(ui.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: ui.cls(ui.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];
@@ -7082,7 +7089,7 @@
         "div",
         {
           className: ui.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,
@@ -7589,7 +7596,7 @@
         !isArray && /* @__PURE__ */ jsxRuntime.jsxs(
           ui.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__ */ jsxRuntime.jsx(
@@ -7781,7 +7788,7 @@
         !isArray && /* @__PURE__ */ jsxRuntime.jsxs(
           ui.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__ */ jsxRuntime.jsx(
@@ -7908,7 +7915,7 @@
         /* @__PURE__ */ jsxRuntime.jsxs(
           ui.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__ */ jsxRuntime.jsx(
@@ -8022,7 +8029,7 @@
           children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                 VirtualTable,
@@ -8045,7 +8052,7 @@
                   checkFilterCombination,
                   createFilterField: filterable ? createFilterField : void 0,
                   rowClassName: React.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,
@@ -8345,7 +8352,7 @@
       {
         ref,
         style,
-        className: ui.cls("h-full w-full flex flex-col bg-white dark:bg-gray-950", className),
+        className: ui.cls("h-full w-full flex flex-col bg-white dark:bg-surface-950", className),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             CollectionTableToolbar,
@@ -9162,7 +9169,7 @@
               {
                 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}`
@@ -9262,7 +9269,7 @@
       ui.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) => {
@@ -9310,7 +9317,7 @@
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -9430,7 +9437,7 @@
             ui.StarBorderIcon,
             {
               size: 18,
-              className: "text-gray-400 dark:text-gray-500"
+              className: "text-surface-400 dark:text-surface-500"
             }
           )
         },
@@ -9519,7 +9526,7 @@
           {
             onClick: onIconClick,
             size: 18,
-            className: "text-gray-400 dark:text-gray-500"
+            className: "text-surface-400 dark:text-surface-500"
           }
         ),
         children: entry.name
@@ -10758,7 +10765,7 @@
         pluginActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: ui.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: ui.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
           }
         ),
@@ -10883,7 +10890,7 @@
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: ui.cls(ui.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: ui.cls(ui.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__ */ jsxRuntime.jsx(
               "div",
@@ -11253,7 +11260,7 @@
     const form = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message })
@@ -11266,7 +11273,7 @@
         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__ */ jsxRuntime.jsx(ElementResizeListener, { onResize: adaptResize }),
@@ -11279,7 +11286,7 @@
                 /* @__PURE__ */ jsxRuntime.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"
@@ -11740,7 +11747,7 @@
               }
             )
           ] }),
-          children: collection.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-4 text-gray-900 dark:text-white", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Markdown, { source: collection.description }) })
+          children: collection.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-4 text-surface-900 dark:text-white", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Markdown, { source: collection.description }) })
         }
       );
       const buildAdditionalHeaderWidget = React.useCallback(({
@@ -11982,7 +11989,7 @@
         align: "start",
         alignOffset: -117,
         trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SearchIcon, { size: "small" }) }),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("my-2 rounded-lg bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-white"), children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white"), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "form",
             {
@@ -12010,7 +12017,7 @@
                       setSearchString(e.target.value);
                     },
                     value: searchString,
-                    className: "rounded-lg bg-white dark:bg-gray-800 flex-grow bg-transparent outline-none p-2 " + ui.focusedDisabled
+                    className: "rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + ui.focusedDisabled
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -12052,7 +12059,7 @@
     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__ */ jsxRuntime.jsx(
       "div",
@@ -12582,7 +12589,7 @@
         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__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -13536,7 +13543,7 @@
     return /* @__PURE__ */ jsxRuntime.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"
       }
     );
   }
@@ -13603,7 +13610,7 @@
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       ui.ContentCopyIcon,
                       {
-                        className: "text-gray-700 dark:text-gray-300",
+                        className: "text-surface-700 dark:text-surface-300",
                         size: "smallest"
                       }
                     )
@@ -13625,7 +13632,7 @@
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   ui.OpenInNewIcon,
                   {
-                    className: "text-gray-700 dark:text-gray-300",
+                    className: "text-surface-700 dark:text-surface-300",
                     size: "smallest"
                   }
                 )
@@ -13701,7 +13708,7 @@
             height: getThumbnailMeasure(size)
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.DescriptionIcon, { className: "text-gray-700 dark:text-gray-300" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" }),
             hint && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: hint, children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Typography,
               {
@@ -15369,7 +15376,7 @@
       !placeholder && !disabled && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             ui.Tooltip,
             {
@@ -15405,7 +15412,7 @@
         {
           onClick: (e) => e.stopPropagation(),
           className: "flex flex-col items-center justify-center w-full h-full",
-          children: /* @__PURE__ */ jsxRuntime.jsx(ui.DescriptionIcon, { className: "text-gray-700 dark:text-gray-300" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(ui.DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" })
         }
       )
     ] });
@@ -16115,7 +16122,7 @@
           {
             className: ui.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",
@@ -16124,7 +16131,7 @@
                 IconForView,
                 {
                   collectionOrView: collection,
-                  className: "text-gray-300 dark:text-gray-600"
+                  className: "text-surface-300 dark:text-surface-600"
                 }
               ),
               `Edit ${property.name}`.toUpperCase()
@@ -16456,7 +16463,7 @@
               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
         }
@@ -17713,7 +17720,7 @@
     },
     multi_select: {
       key: "multi_select",
-      name: "Multi select",
+      name: "Multi select (enum)",
       description: "Select multiple text values from within an enumeration",
       Icon: ui.ListAltIcon,
       color: "#4223c9",
@@ -18487,7 +18494,7 @@
                 panel && /* @__PURE__ */ jsxRuntime.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)`
@@ -19368,7 +19375,7 @@
       }, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: ui.cls("flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden", className),
+          className: ui.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)",
@@ -19440,7 +19447,7 @@
               children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                     ui.IconButton,
                     {
@@ -19530,7 +19537,7 @@
     const iconWrap = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "text-gray-600 dark:text-gray-500",
+        className: "text-text-secondary dark:text-text-secondary-dark",
         children: icon
       }
     );
@@ -19544,13 +19551,13 @@
         },
         className: ({ isActive }) => ui.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: [
@@ -19638,7 +19645,7 @@
           children: groupsWithoutAdmin.map((group) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -19670,7 +19677,7 @@
             ui.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__ */ jsxRuntime.jsx(
                   ui.Tooltip,