@wix/patterns 1.468.0 → 1.470.0

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1816577347";
+var _namespace_ = "ImportStepUpload2930019465";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ImportStepUpload1816577347__root","fileUpload":"ImportStepUpload1816577347__fileUpload"};
+export var classes = {"root":"ImportStepUpload2930019465__root","fileUpload":"ImportStepUpload2930019465__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow1661076173";
+var _namespace_ = "InputOverflow73060054";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow1661076173__root"};
+export var classes = {"root":"InputOverflow73060054__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2194277522";
+var _namespace_ = "LoadingRow3473808676";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2194277522__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2194277522__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3473808676__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3473808676__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText3594640238";
+var _namespace_ = "MaxHeightText3374354239";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText3594640238__root"};
+export var classes = {"root":"MaxHeightText3374354239__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines1821347204";
+var _namespace_ = "MaxLines2770426191";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines1821347204__root"};
+export var classes = {"root":"MaxLines2770426191__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3973334724";
+var _namespace_ = "MultiBulkActionToolbar153987077";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar3973334724__root","leftGroupWrapper":"MultiBulkActionToolbar3973334724__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3973334724__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3973334724__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar153987077__root","leftGroupWrapper":"MultiBulkActionToolbar153987077__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar153987077__selectedCountItem","selectedCountText":"MultiBulkActionToolbar153987077__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2500048676";
+var _namespace_ = "NestedTablePlaceholderStatesRow368706";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow2500048676__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow368706__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow1727132175";
+var _namespace_ = "NestedTableRow701864069";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow1727132175__root","firstLevel":"NestedTableRow1727132175__firstLevel","placeholder":"NestedTableRow1727132175__placeholder","parentHovered":"NestedTableRow1727132175__parentHovered"};
+export var classes = {"root":"NestedTableRow701864069__root","firstLevel":"NestedTableRow701864069__firstLevel","placeholder":"NestedTableRow701864069__placeholder","parentHovered":"NestedTableRow701864069__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect2880892721";
+var _namespace_ = "MultipleDragOverlayEffect965541054";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect2880892721__root"};
+export var classes = {"root":"MultipleDragOverlayEffect965541054__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow2964883176";
+var _namespace_ = "NestedTableDragAndDropRow17191069";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow2964883176__root"};
+export var classes = {"root":"NestedTableDragAndDropRow17191069__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent279598614";
+var _namespace_ = "PickerContent2878574456";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent279598614__root"};
+export var classes = {"root":"PickerContent2878574456__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1268835811";
+var _namespace_ = "PickerContentAdditionalStep722232321";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep1268835811__root","titles":"PickerContentAdditionalStep1268835811__titles","suffix":"PickerContentAdditionalStep1268835811__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep722232321__root","titles":"PickerContentAdditionalStep722232321__titles","suffix":"PickerContentAdditionalStep722232321__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem2152260888";
+var _namespace_ = "PickerTableListItem2359575036";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem2152260888__root"};
+export var classes = {"root":"PickerTableListItem2359575036__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2295773302";
+var _namespace_ = "ScrollableContent406688216";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent2295773302__root"};
+export var classes = {"root":"ScrollableContent406688216__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/SetupWidget.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget2579698650";
+var _namespace_ = "SetupWidget3954814698";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SetupWidget2579698650__root","row":"SetupWidget2579698650__row","completedCta":"SetupWidget2579698650__completedCta","secondaryCta":"SetupWidget2579698650__secondaryCta","card":"SetupWidget2579698650__card","stepIcon":"SetupWidget2579698650__stepIcon","chevron":"SetupWidget2579698650__chevron","chevronDisabled":"SetupWidget2579698650__chevronDisabled","inProgressLabel":"SetupWidget2579698650__inProgressLabel"};
+export var classes = {"root":"SetupWidget3954814698__root","row":"SetupWidget3954814698__row","completedCta":"SetupWidget3954814698__completedCta","secondaryCta":"SetupWidget3954814698__secondaryCta","card":"SetupWidget3954814698__card","stepIcon":"SetupWidget3954814698__stepIcon","chevron":"SetupWidget3954814698__chevron","chevronDisabled":"SetupWidget3954814698__chevronDisabled","inProgressLabel":"SetupWidget3954814698__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3666684108";
+var _namespace_ = "SkeletonCard2603771799";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard3666684108__root","headerLoading":"SkeletonCard3666684108__headerLoading"};
+export var classes = {"root":"SkeletonCard2603771799__root","headerLoading":"SkeletonCard2603771799__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal304127389";
+var _namespace_ = "SlidingModal1671637190";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal304127389__root"};
+export var classes = {"root":"SlidingModal1671637190__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader475769976";
+var _namespace_ = "AddFieldColumnHeader510560837";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AddFieldColumnHeader475769976__root","anchorLayer":"AddFieldColumnHeader475769976__anchorLayer","popover":"AddFieldColumnHeader475769976__popover","title":"AddFieldColumnHeader475769976__title","hoverBridge":"AddFieldColumnHeader475769976__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader510560837__root","anchorLayer":"AddFieldColumnHeader510560837__anchorLayer","popover":"AddFieldColumnHeader510560837__popover","title":"AddFieldColumnHeader510560837__title","hoverBridge":"AddFieldColumnHeader510560837__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1758085590";
+var _namespace_ = "TabsFilter2706877069";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"TabsFilter1758085590__root","titleBox":"TabsFilter1758085590__titleBox"};
+export var classes = {"root":"TabsFilter2706877069__root","titleBox":"TabsFilter2706877069__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal323279871";
+var _namespace_ = "ManageTagsModal664180296";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ManageTagsModal323279871__root"};
+export var classes = {"root":"ManageTagsModal664180296__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarItem/ToolbarItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem37333139";
+var _namespace_ = "ToolbarItem2403709245";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ToolbarItem37333139__root"};
+export var classes = {"root":"ToolbarItem2403709245__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItemBox4138502288";
+var _namespace_ = "ToolbarItemBox2598226318";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ToolbarItemBox4138502288__root"};
+export var classes = {"root":"ToolbarItemBox2598226318__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/common.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common3746632953";
+var _namespace_ = "common1129797279";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"common3746632953__root","column":"common3746632953__column","fullHeight":"common3746632953__fullHeight"};
+export var classes = {"root":"common1129797279__root","column":"common1129797279__column","fullHeight":"common1129797279__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/schema/EntityPageFieldsCard.tsx

@@ -21,7 +21,8 @@ export interface EntityPageFieldsCardProps
   title: string;
   subtitle?: string;
   /**
-   * Field ids to offer, in order. Omitted ⇒ every editable schema field.
+   * Field ids to offer, in order. Omitted ⇒ every schema field; system fields
+   * and the id field show their value read-only and can be hidden.
    * Read once, on the first render — a later change is ignored, since the saved
    * show/hide and order are keyed to the list the card started with.
    */

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader386705226";
+var _namespace_ = "CollectionPageHeader2482715281";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPageHeader386705226__root"};
+export var classes = {"root":"CollectionPageHeader2482715281__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CustomColumnsEntityPageState.ts

@@ -9,8 +9,10 @@ import type { ManageFieldsSource } from './ManageFieldsSource';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
 import type { Field, SchemaConfig } from '../types/SchemaConfig';
+import { isEntityPageFieldHideable } from './EntityPage/resolveEntityPageFields';
 
-type SchemaFields = Pick<SchemaConfig, 'id' | 'fields'>;
+type SchemaFields = Pick<SchemaConfig, 'id' | 'fields'> &
+  Partial<Pick<SchemaConfig, 'idField'>>;
 
 export interface CustomColumnsEntityPageStateParams {
   panels: SidePanelsState;
@@ -139,9 +141,10 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
         if (!field) {
           return null;
         }
-        const isRequired = field.validation?.required === true;
-        const hideable = !isRequired;
-        return fieldToColumn(field, hideable);
+        return fieldToColumn(
+          field,
+          isEntityPageFieldHideable(field, this.schema?.idField),
+        );
       })
       .filter(Boolean) as Column[];
   }

package/src/state/EntityPage/resolveEntityPageFields.ts

@@ -1,25 +1,36 @@
 import type { Field } from '@wix/bex-core';
 
-/** The fields an entity page renders: the given ids, or every editable schema
- *  field. Lives here so the fields component and the card that wraps it offer
- *  the same list. */
+/** The given ids, or every schema field. */
 export function resolveEntityPageFields(
   fields: Record<string, Field | undefined>,
-  idField: string,
   fieldIds?: string[],
 ): Field[] {
-  // An explicit fieldIds list is taken as-is — the consumer chose those fields.
   if (fieldIds) {
     return fieldIds
       .map((id) => fields[id])
       .filter((field): field is Field => Boolean(field));
   }
 
-  // By default, skip the id field and system fields (e.g. `_id`, `_manualSort`,
-  // `_createdDate`): they are not user-editable, and rendering a required one
-  // would silently block save (react-hook-form marks the form invalid).
-  return Object.values(fields).filter(
-    (field): field is Field =>
-      Boolean(field) && !field!.isSystem && field!.id !== idField,
+  return Object.values(fields).filter((field): field is Field =>
+    Boolean(field),
+  );
+}
+
+export function isEntityPageReadOnlyField(
+  field: Field,
+  idField: string | undefined,
+): boolean {
+  return field.isSystem === true || field.id === idField;
+}
+
+// Hiding a required input would leave the form invalid with nothing on screen
+// to fix. A read-only field is not in the form, so its `required` does not
+// apply.
+export function isEntityPageFieldHideable(
+  field: Field,
+  idField: string | undefined,
+): boolean {
+  return (
+    isEntityPageReadOnlyField(field, idField) || !field.validation?.required
   );
 }

package/src/state/EntityPageFieldsCardState.ts

@@ -7,7 +7,10 @@ import {
   type WixPatternsContainer,
 } from '@wix/bex-core';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
-import { resolveEntityPageFields } from './EntityPage/resolveEntityPageFields';
+import {
+  isEntityPageFieldHideable,
+  resolveEntityPageFields,
+} from './EntityPage/resolveEntityPageFields';
 import type { EntityPageState } from './EntityPage/EntityPageState';
 import { SchemaCardState } from './SchemaCard/SchemaCardState';
 import type { SchemaViewConfig } from './SchemaCard/SchemaFieldsState';
@@ -120,22 +123,18 @@ export class EntityPageFieldsCardState {
     return this.params.pageState.schema ?? this.sourceState?.schema ?? null;
   }
 
-  /** The fields the card offers — empty until the schema loads. A required
-   *  field is not hideable: hiding it would leave the form invalid with nothing
-   *  on screen to fix. */
+  /** The fields the card offers — empty until the schema loads. */
   get declaredFields(): SchemaViewConfig[] {
     const { schema } = this;
     if (!schema) {
       return [];
     }
-    return resolveEntityPageFields(
-      schema.fields,
-      schema.idField,
-      this.params.fieldIds,
-    ).map((field) => ({
-      id: field.id,
-      hideable: !field.validation?.required,
-    }));
+    return resolveEntityPageFields(schema.fields, this.params.fieldIds).map(
+      (field) => ({
+        id: field.id,
+        hideable: isEntityPageFieldHideable(field, schema.idField),
+      }),
+    );
   }
 
   /** What the card renders. Before the schema loads this is whatever the card

package/src/state/FormPage/FormPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "FormPageHeader2666273753";
+var _namespace_ = "FormPageHeader3791353024";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"FormPageHeader2666273753__root"};
+export var classes = {"root":"FormPageHeader3791353024__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/buildEditableFieldColumns.ts

@@ -162,6 +162,12 @@ export function buildEditableFieldColumns(
       name: field.displayName,
       isPrimary: field.isPrimary,
       isSystem: field.isSystem,
+      // Also set by buildFieldColumns, and needed here too: this column reaches
+      // the toolbar through simplifyColumn, which always emits the key, so it
+      // would overwrite the display column's value with undefined.
+      infoTooltipProps: field.helpText
+        ? { content: field.helpText }
+        : undefined,
       hideable: true,
       sortable:
         definition?.capabilities?.sortable ??

package/src/state/buildFieldColumns.tsx

@@ -71,6 +71,9 @@ export function buildFieldColumns(
       isPii: field.isPii,
       isSystem: field.isSystem,
       isPrimary: field.isPrimary,
+      infoTooltipProps: field.helpText
+        ? { content: field.helpText }
+        : undefined,
       fieldType: toFieldType(field.type),
       fieldTypeIcons: definition?.display.icons,
       width: layout.width,