@wix/patterns 1.440.0 → 1.442.0

package/dist/cjs/utils/fieldTypePrefixIcons.js

@@ -149,23 +149,43 @@ const ICON_STYLE = {
 };
 function getFieldTypeIcon({
   fieldType,
-  size = 'small'
+  size = 'small',
+  icons
 }) {
   const Fallback = size === 'medium' ? _lazy.Database : _lazy.DatabaseSmall;
+  if (icons) {
+    const Icon = size === 'medium' ? icons.Medium : icons.Small;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      style: ICON_STYLE,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 161,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(Icon, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 162,
+        columnNumber: 9
+      }
+    }));
+  }
   if (!fieldType) {
     return /*#__PURE__*/_react.default.createElement("span", {
       style: ICON_STYLE,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 156,
+        lineNumber: 169,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(Fallback, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 157,
+        lineNumber: 170,
         columnNumber: 9
       }
     }));
@@ -177,14 +197,14 @@ function getFieldTypeIcon({
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 166,
+        lineNumber: 179,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(Fallback, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 167,
+        lineNumber: 180,
         columnNumber: 9
       }
     }));
@@ -195,14 +215,14 @@ function getFieldTypeIcon({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 174,
+      lineNumber: 187,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(Icon, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 175,
+      lineNumber: 188,
       columnNumber: 7
     }
   }));

package/dist/cjs/utils/fieldTypePrefixIcons.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lazy","_jsxFileName","toFieldType","value","replace","toUpperCase","FIELD_TYPE_ICON_MAP","SHORT_TEXT","small","TextSmall","medium","Text","LONG_TEXT","NUMBER","NumberSmall","Number","BOOLEAN","SquareRatioCheckedSmall","SquareRatioChecked","DATE","DateSmall","Date","DATE_TIME","DateAndTimeSmall","DateAndTime","DATETIME","TIME","TimeSmall","Time","URL","LinkSmall","Link","EMAIL","EmailSmall","Email","IMAGE","ImageSmall","Image","MEDIA_GALLERY","ProGalleriesSmall","ProGalleries","AUDIO","MusicSmall","Music","DOCUMENT","DocumentSmall","Document","MULTI_DOCUMENT","DocDuplicate","RICH_TEXT","RichTextSmall","RichText","RICH_CONTENT","ArticleSmall","Article","REFERENCE","ReferenceSmall","Reference","MULTI_REFERENCE","MultireferenceSmall","Multireference","OBJECT","CodeObjectSmall","CodeObject","ARRAY","TagSmall","Tag","ADDRESS","LocationSmall","Location","INTEGER","DECIMAL","CHECKBOX","FILES","MULTI_SELECT","ICON_STYLE","display","alignItems","getFieldTypeIcon","fieldType","size","Fallback","Database","DatabaseSmall","default","createElement","style","__self","__source","fileName","lineNumber","columnNumber","entry","Icon"],"sources":["../../../src/utils/fieldTypePrefixIcons.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\nimport {\n  Text,\n  TextSmall,\n  Image,\n  ImageSmall,\n  SquareRatioChecked,\n  SquareRatioCheckedSmall,\n  Number,\n  NumberSmall,\n  Date,\n  DateSmall,\n  DateAndTime,\n  DateAndTimeSmall,\n  Time,\n  TimeSmall,\n  Article,\n  ArticleSmall,\n  RichText,\n  RichTextSmall,\n  Reference,\n  ReferenceSmall,\n  Multireference,\n  MultireferenceSmall,\n  Link,\n  LinkSmall,\n  Document,\n  DocumentSmall,\n  DocDuplicate,\n  Music,\n  MusicSmall,\n  Location,\n  LocationSmall,\n  Tag,\n  TagSmall,\n  CodeObject,\n  CodeObjectSmall,\n  ProGalleries,\n  ProGalleriesSmall,\n  Email,\n  EmailSmall,\n  Database,\n  DatabaseSmall,\n} from '@wix/wix-ui-icons-common/lazy';\nimport type { PatternsFieldType } from '@wix/bex-core';\n\n/**\n * Canonical field type keys (UPPER_SNAKE_CASE).\n * The map is keyed by these values; incoming camelCase strings\n * are normalised before lookup.\n */\nexport type FieldType =\n  | 'SHORT_TEXT'\n  | 'LONG_TEXT'\n  | 'NUMBER'\n  | 'BOOLEAN'\n  | 'DATE'\n  | 'DATE_TIME'\n  | 'DATETIME'\n  | 'TIME'\n  | 'URL'\n  | 'EMAIL'\n  | 'IMAGE'\n  | 'MEDIA_GALLERY'\n  | 'AUDIO'\n  | 'DOCUMENT'\n  | 'MULTI_DOCUMENT'\n  | 'RICH_TEXT'\n  | 'RICH_CONTENT'\n  | 'REFERENCE'\n  | 'MULTI_REFERENCE'\n  | 'OBJECT'\n  | 'ARRAY'\n  | 'ADDRESS'\n  | 'COLOR'\n  | 'INTEGER'\n  | 'DECIMAL'\n  | 'CHECKBOX'\n  | 'DROPDOWN'\n  | 'FILES'\n  | 'MULTI_SELECT';\n\n/**\n * Converts any casing (camelCase, snake_case, etc.) to a canonical FieldType.\n * e.g. \"shortText\" → \"SHORT_TEXT\", \"dateTime\" → \"DATE_TIME\".\n * Already UPPER_SNAKE_CASE strings pass through unchanged.\n */\nexport function toFieldType(value: string): FieldType {\n  return value.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase() as FieldType;\n}\n\ninterface FieldPrefixIconEntry {\n  small: ComponentType;\n  medium: ComponentType;\n}\n\n/**\n * Maps canonical UPPER_SNAKE_CASE field types to icon components (small + medium).\n */\nconst FIELD_TYPE_ICON_MAP: Partial<\n  Record<FieldType | PatternsFieldType, FieldPrefixIconEntry>\n> = {\n  SHORT_TEXT: { small: TextSmall, medium: Text },\n  LONG_TEXT: { small: TextSmall, medium: Text },\n  NUMBER: { small: NumberSmall, medium: Number },\n  BOOLEAN: { small: SquareRatioCheckedSmall, medium: SquareRatioChecked },\n  DATE: { small: DateSmall, medium: Date },\n  DATE_TIME: { small: DateAndTimeSmall, medium: DateAndTime },\n  DATETIME: { small: DateAndTimeSmall, medium: DateAndTime },\n  TIME: { small: TimeSmall, medium: Time },\n  URL: { small: LinkSmall, medium: Link },\n  EMAIL: { small: EmailSmall, medium: Email },\n  IMAGE: { small: ImageSmall, medium: Image },\n  MEDIA_GALLERY: { small: ProGalleriesSmall, medium: ProGalleries },\n  AUDIO: { small: MusicSmall, medium: Music },\n  DOCUMENT: { small: DocumentSmall, medium: Document },\n  MULTI_DOCUMENT: { small: DocumentSmall, medium: DocDuplicate },\n  RICH_TEXT: { small: RichTextSmall, medium: RichText },\n  RICH_CONTENT: { small: ArticleSmall, medium: Article },\n  REFERENCE: { small: ReferenceSmall, medium: Reference },\n  MULTI_REFERENCE: { small: MultireferenceSmall, medium: Multireference },\n  OBJECT: { small: CodeObjectSmall, medium: CodeObject },\n  ARRAY: { small: TagSmall, medium: Tag },\n  ADDRESS: { small: LocationSmall, medium: Location },\n  INTEGER: { small: NumberSmall, medium: Number },\n  DECIMAL: { small: NumberSmall, medium: Number },\n  CHECKBOX: { small: SquareRatioCheckedSmall, medium: SquareRatioChecked },\n  FILES: { small: DocumentSmall, medium: Document },\n  MULTI_SELECT: { small: TagSmall, medium: Tag },\n};\n\n/**\n * Returns an icon ReactNode for the given field type string and size.\n * Accepts both UPPER_SNAKE_CASE and camelCase input.\n * If the field type is not mapped (or undefined), returns an info fallback icon.\n *\n * @param fieldType - The field type string\n * @param size - 'small' (default, for column headers / customize panel) or 'medium' (for filters)\n */\nconst ICON_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n};\n\nexport function getFieldTypeIcon({\n  fieldType,\n  size = 'small',\n}: {\n  fieldType?: FieldType | PatternsFieldType;\n  size?: 'small' | 'medium';\n}): ReactNode {\n  const Fallback = size === 'medium' ? Database : DatabaseSmall;\n\n  if (!fieldType) {\n    return (\n      <span style={ICON_STYLE}>\n        <Fallback />\n      </span>\n    );\n  }\n\n  const entry = FIELD_TYPE_ICON_MAP[fieldType];\n\n  if (!entry) {\n    return (\n      <span style={ICON_STYLE}>\n        <Fallback />\n      </span>\n    );\n  }\n\n  const Icon = size === 'medium' ? entry.medium : entry.small;\n  return (\n    <span style={ICON_STYLE}>\n      <Icon />\n    </span>\n  );\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AA0CuC,IAAAE,YAAA;AAGvC;AACA;AACA;AACA;AACA;;AAgCA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAACC,KAAa,EAAa;EACpD,OAAOA,KAAK,CAACC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAACC,WAAW,CAAC,CAAC;AAChE;AAOA;AACA;AACA;AACA,MAAMC,mBAEL,GAAG;EACFC,UAAU,EAAE;IAAEC,KAAK,EAAEC,eAAS;IAAEC,MAAM,EAAEC;EAAK,CAAC;EAC9CC,SAAS,EAAE;IAAEJ,KAAK,EAAEC,eAAS;IAAEC,MAAM,EAAEC;EAAK,CAAC;EAC7CE,MAAM,EAAE;IAAEL,KAAK,EAAEM,iBAAW;IAAEJ,MAAM,EAAEK;EAAO,CAAC;EAC9CC,OAAO,EAAE;IAAER,KAAK,EAAES,6BAAuB;IAAEP,MAAM,EAAEQ;EAAmB,CAAC;EACvEC,IAAI,EAAE;IAAEX,KAAK,EAAEY,eAAS;IAAEV,MAAM,EAAEW;EAAK,CAAC;EACxCC,SAAS,EAAE;IAAEd,KAAK,EAAEe,sBAAgB;IAAEb,MAAM,EAAEc;EAAY,CAAC;EAC3DC,QAAQ,EAAE;IAAEjB,KAAK,EAAEe,sBAAgB;IAAEb,MAAM,EAAEc;EAAY,CAAC;EAC1DE,IAAI,EAAE;IAAElB,KAAK,EAAEmB,eAAS;IAAEjB,MAAM,EAAEkB;EAAK,CAAC;EACxCC,GAAG,EAAE;IAAErB,KAAK,EAAEsB,eAAS;IAAEpB,MAAM,EAAEqB;EAAK,CAAC;EACvCC,KAAK,EAAE;IAAExB,KAAK,EAAEyB,gBAAU;IAAEvB,MAAM,EAAEwB;EAAM,CAAC;EAC3CC,KAAK,EAAE;IAAE3B,KAAK,EAAE4B,gBAAU;IAAE1B,MAAM,EAAE2B;EAAM,CAAC;EAC3CC,aAAa,EAAE;IAAE9B,KAAK,EAAE+B,uBAAiB;IAAE7B,MAAM,EAAE8B;EAAa,CAAC;EACjEC,KAAK,EAAE;IAAEjC,KAAK,EAAEkC,gBAAU;IAAEhC,MAAM,EAAEiC;EAAM,CAAC;EAC3CC,QAAQ,EAAE;IAAEpC,KAAK,EAAEqC,mBAAa;IAAEnC,MAAM,EAAEoC;EAAS,CAAC;EACpDC,cAAc,EAAE;IAAEvC,KAAK,EAAEqC,mBAAa;IAAEnC,MAAM,EAAEsC;EAAa,CAAC;EAC9DC,SAAS,EAAE;IAAEzC,KAAK,EAAE0C,mBAAa;IAAExC,MAAM,EAAEyC;EAAS,CAAC;EACrDC,YAAY,EAAE;IAAE5C,KAAK,EAAE6C,kBAAY;IAAE3C,MAAM,EAAE4C;EAAQ,CAAC;EACtDC,SAAS,EAAE;IAAE/C,KAAK,EAAEgD,oBAAc;IAAE9C,MAAM,EAAE+C;EAAU,CAAC;EACvDC,eAAe,EAAE;IAAElD,KAAK,EAAEmD,yBAAmB;IAAEjD,MAAM,EAAEkD;EAAe,CAAC;EACvEC,MAAM,EAAE;IAAErD,KAAK,EAAEsD,qBAAe;IAAEpD,MAAM,EAAEqD;EAAW,CAAC;EACtDC,KAAK,EAAE;IAAExD,KAAK,EAAEyD,cAAQ;IAAEvD,MAAM,EAAEwD;EAAI,CAAC;EACvCC,OAAO,EAAE;IAAE3D,KAAK,EAAE4D,mBAAa;IAAE1D,MAAM,EAAE2D;EAAS,CAAC;EACnDC,OAAO,EAAE;IAAE9D,KAAK,EAAEM,iBAAW;IAAEJ,MAAM,EAAEK;EAAO,CAAC;EAC/CwD,OAAO,EAAE;IAAE/D,KAAK,EAAEM,iBAAW;IAAEJ,MAAM,EAAEK;EAAO,CAAC;EAC/CyD,QAAQ,EAAE;IAAEhE,KAAK,EAAES,6BAAuB;IAAEP,MAAM,EAAEQ;EAAmB,CAAC;EACxEuD,KAAK,EAAE;IAAEjE,KAAK,EAAEqC,mBAAa;IAAEnC,MAAM,EAAEoC;EAAS,CAAC;EACjD4B,YAAY,EAAE;IAAElE,KAAK,EAAEyD,cAAQ;IAAEvD,MAAM,EAAEwD;EAAI;AAC/C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMS,UAA+B,GAAG;EACtCC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE;AACd,CAAC;AAEM,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS;EACTC,IAAI,GAAG;AAIT,CAAC,EAAa;EACZ,MAAMC,QAAQ,GAAGD,IAAI,KAAK,QAAQ,GAAGE,cAAQ,GAAGC,mBAAa;EAE7D,IAAI,CAACJ,SAAS,EAAE;IACd,oBACElF,MAAA,CAAAuF,OAAA,CAAAC,aAAA;MAAMC,KAAK,EAAEX,UAAW;MAAAY,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAxF,YAAA;QAAAyF,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACtB9F,MAAA,CAAAuF,OAAA,CAAAC,aAAA,CAACJ,QAAQ;MAAAM,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAxF,YAAA;QAAAyF,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACP,CAAC;EAEX;EAEA,MAAMC,KAAK,GAAGtF,mBAAmB,CAACyE,SAAS,CAAC;EAE5C,IAAI,CAACa,KAAK,EAAE;IACV,oBACE/F,MAAA,CAAAuF,OAAA,CAAAC,aAAA;MAAMC,KAAK,EAAEX,UAAW;MAAAY,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAxF,YAAA;QAAAyF,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACtB9F,MAAA,CAAAuF,OAAA,CAAAC,aAAA,CAACJ,QAAQ;MAAAM,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAxF,YAAA;QAAAyF,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACP,CAAC;EAEX;EAEA,MAAME,IAAI,GAAGb,IAAI,KAAK,QAAQ,GAAGY,KAAK,CAAClF,MAAM,GAAGkF,KAAK,CAACpF,KAAK;EAC3D,oBACEX,MAAA,CAAAuF,OAAA,CAAAC,aAAA;IAAMC,KAAK,EAAEX,UAAW;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxF,YAAA;MAAAyF,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACtB9F,MAAA,CAAAuF,OAAA,CAAAC,aAAA,CAACQ,IAAI;IAAAN,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxF,YAAA;MAAAyF,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CACH,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_lazy","_jsxFileName","toFieldType","value","replace","toUpperCase","FIELD_TYPE_ICON_MAP","SHORT_TEXT","small","TextSmall","medium","Text","LONG_TEXT","NUMBER","NumberSmall","Number","BOOLEAN","SquareRatioCheckedSmall","SquareRatioChecked","DATE","DateSmall","Date","DATE_TIME","DateAndTimeSmall","DateAndTime","DATETIME","TIME","TimeSmall","Time","URL","LinkSmall","Link","EMAIL","EmailSmall","Email","IMAGE","ImageSmall","Image","MEDIA_GALLERY","ProGalleriesSmall","ProGalleries","AUDIO","MusicSmall","Music","DOCUMENT","DocumentSmall","Document","MULTI_DOCUMENT","DocDuplicate","RICH_TEXT","RichTextSmall","RichText","RICH_CONTENT","ArticleSmall","Article","REFERENCE","ReferenceSmall","Reference","MULTI_REFERENCE","MultireferenceSmall","Multireference","OBJECT","CodeObjectSmall","CodeObject","ARRAY","TagSmall","Tag","ADDRESS","LocationSmall","Location","INTEGER","DECIMAL","CHECKBOX","FILES","MULTI_SELECT","ICON_STYLE","display","alignItems","getFieldTypeIcon","fieldType","size","icons","Fallback","Database","DatabaseSmall","Icon","Medium","Small","default","createElement","style","__self","__source","fileName","lineNumber","columnNumber","entry"],"sources":["../../../src/utils/fieldTypePrefixIcons.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\nimport {\n  Text,\n  TextSmall,\n  Image,\n  ImageSmall,\n  SquareRatioChecked,\n  SquareRatioCheckedSmall,\n  Number,\n  NumberSmall,\n  Date,\n  DateSmall,\n  DateAndTime,\n  DateAndTimeSmall,\n  Time,\n  TimeSmall,\n  Article,\n  ArticleSmall,\n  RichText,\n  RichTextSmall,\n  Reference,\n  ReferenceSmall,\n  Multireference,\n  MultireferenceSmall,\n  Link,\n  LinkSmall,\n  Document,\n  DocumentSmall,\n  DocDuplicate,\n  Music,\n  MusicSmall,\n  Location,\n  LocationSmall,\n  Tag,\n  TagSmall,\n  CodeObject,\n  CodeObjectSmall,\n  ProGalleries,\n  ProGalleriesSmall,\n  Email,\n  EmailSmall,\n  Database,\n  DatabaseSmall,\n} from '@wix/wix-ui-icons-common/lazy';\nimport type { PatternsFieldType } from '@wix/bex-core';\n\n/**\n * Canonical field type keys (UPPER_SNAKE_CASE).\n * The map is keyed by these values; incoming camelCase strings\n * are normalised before lookup.\n */\nexport type FieldType =\n  | 'SHORT_TEXT'\n  | 'LONG_TEXT'\n  | 'NUMBER'\n  | 'BOOLEAN'\n  | 'DATE'\n  | 'DATE_TIME'\n  | 'DATETIME'\n  | 'TIME'\n  | 'URL'\n  | 'EMAIL'\n  | 'IMAGE'\n  | 'MEDIA_GALLERY'\n  | 'AUDIO'\n  | 'DOCUMENT'\n  | 'MULTI_DOCUMENT'\n  | 'RICH_TEXT'\n  | 'RICH_CONTENT'\n  | 'REFERENCE'\n  | 'MULTI_REFERENCE'\n  | 'OBJECT'\n  | 'ARRAY'\n  | 'ADDRESS'\n  | 'COLOR'\n  | 'INTEGER'\n  | 'DECIMAL'\n  | 'CHECKBOX'\n  | 'DROPDOWN'\n  | 'FILES'\n  | 'MULTI_SELECT';\n\n/**\n * Converts any casing (camelCase, snake_case, etc.) to a canonical FieldType.\n * e.g. \"shortText\" → \"SHORT_TEXT\", \"dateTime\" → \"DATE_TIME\".\n * Already UPPER_SNAKE_CASE strings pass through unchanged.\n */\nexport function toFieldType(value: string): FieldType {\n  return value.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase() as FieldType;\n}\n\ninterface FieldPrefixIconEntry {\n  small: ComponentType;\n  medium: ComponentType;\n}\n\n/**\n * Maps canonical UPPER_SNAKE_CASE field types to icon components (small + medium).\n */\nconst FIELD_TYPE_ICON_MAP: Partial<\n  Record<FieldType | PatternsFieldType, FieldPrefixIconEntry>\n> = {\n  SHORT_TEXT: { small: TextSmall, medium: Text },\n  LONG_TEXT: { small: TextSmall, medium: Text },\n  NUMBER: { small: NumberSmall, medium: Number },\n  BOOLEAN: { small: SquareRatioCheckedSmall, medium: SquareRatioChecked },\n  DATE: { small: DateSmall, medium: Date },\n  DATE_TIME: { small: DateAndTimeSmall, medium: DateAndTime },\n  DATETIME: { small: DateAndTimeSmall, medium: DateAndTime },\n  TIME: { small: TimeSmall, medium: Time },\n  URL: { small: LinkSmall, medium: Link },\n  EMAIL: { small: EmailSmall, medium: Email },\n  IMAGE: { small: ImageSmall, medium: Image },\n  MEDIA_GALLERY: { small: ProGalleriesSmall, medium: ProGalleries },\n  AUDIO: { small: MusicSmall, medium: Music },\n  DOCUMENT: { small: DocumentSmall, medium: Document },\n  MULTI_DOCUMENT: { small: DocumentSmall, medium: DocDuplicate },\n  RICH_TEXT: { small: RichTextSmall, medium: RichText },\n  RICH_CONTENT: { small: ArticleSmall, medium: Article },\n  REFERENCE: { small: ReferenceSmall, medium: Reference },\n  MULTI_REFERENCE: { small: MultireferenceSmall, medium: Multireference },\n  OBJECT: { small: CodeObjectSmall, medium: CodeObject },\n  ARRAY: { small: TagSmall, medium: Tag },\n  ADDRESS: { small: LocationSmall, medium: Location },\n  INTEGER: { small: NumberSmall, medium: Number },\n  DECIMAL: { small: NumberSmall, medium: Number },\n  CHECKBOX: { small: SquareRatioCheckedSmall, medium: SquareRatioChecked },\n  FILES: { small: DocumentSmall, medium: Document },\n  MULTI_SELECT: { small: TagSmall, medium: Tag },\n};\n\n/**\n * Returns an icon ReactNode for the given field type string and size.\n * Accepts both UPPER_SNAKE_CASE and camelCase input.\n * If the field type is not mapped (or undefined), returns an info fallback icon.\n *\n * @param fieldType - The field type string\n * @param size - 'small' (default, for column headers / customize panel) or 'medium' (for filters)\n */\nconst ICON_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n};\n\nexport function getFieldTypeIcon({\n  fieldType,\n  size = 'small',\n  icons,\n}: {\n  fieldType?: FieldType | PatternsFieldType;\n  size?: 'small' | 'medium';\n  /** Explicit icons (e.g. a custom field type's `display.icons`). Present ⇒\n   *  used instead of the type map. */\n  icons?: { Small: ComponentType; Medium: ComponentType };\n}): ReactNode {\n  const Fallback = size === 'medium' ? Database : DatabaseSmall;\n\n  if (icons) {\n    const Icon = size === 'medium' ? icons.Medium : icons.Small;\n    return (\n      <span style={ICON_STYLE}>\n        <Icon />\n      </span>\n    );\n  }\n\n  if (!fieldType) {\n    return (\n      <span style={ICON_STYLE}>\n        <Fallback />\n      </span>\n    );\n  }\n\n  const entry = FIELD_TYPE_ICON_MAP[fieldType];\n\n  if (!entry) {\n    return (\n      <span style={ICON_STYLE}>\n        <Fallback />\n      </span>\n    );\n  }\n\n  const Icon = size === 'medium' ? entry.medium : entry.small;\n  return (\n    <span style={ICON_STYLE}>\n      <Icon />\n    </span>\n  );\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AA0CuC,IAAAE,YAAA;AAGvC;AACA;AACA;AACA;AACA;;AAgCA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAACC,KAAa,EAAa;EACpD,OAAOA,KAAK,CAACC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAACC,WAAW,CAAC,CAAC;AAChE;AAOA;AACA;AACA;AACA,MAAMC,mBAEL,GAAG;EACFC,UAAU,EAAE;IAAEC,KAAK,EAAEC,eAAS;IAAEC,MAAM,EAAEC;EAAK,CAAC;EAC9CC,SAAS,EAAE;IAAEJ,KAAK,EAAEC,eAAS;IAAEC,MAAM,EAAEC;EAAK,CAAC;EAC7CE,MAAM,EAAE;IAAEL,KAAK,EAAEM,iBAAW;IAAEJ,MAAM,EAAEK;EAAO,CAAC;EAC9CC,OAAO,EAAE;IAAER,KAAK,EAAES,6BAAuB;IAAEP,MAAM,EAAEQ;EAAmB,CAAC;EACvEC,IAAI,EAAE;IAAEX,KAAK,EAAEY,eAAS;IAAEV,MAAM,EAAEW;EAAK,CAAC;EACxCC,SAAS,EAAE;IAAEd,KAAK,EAAEe,sBAAgB;IAAEb,MAAM,EAAEc;EAAY,CAAC;EAC3DC,QAAQ,EAAE;IAAEjB,KAAK,EAAEe,sBAAgB;IAAEb,MAAM,EAAEc;EAAY,CAAC;EAC1DE,IAAI,EAAE;IAAElB,KAAK,EAAEmB,eAAS;IAAEjB,MAAM,EAAEkB;EAAK,CAAC;EACxCC,GAAG,EAAE;IAAErB,KAAK,EAAEsB,eAAS;IAAEpB,MAAM,EAAEqB;EAAK,CAAC;EACvCC,KAAK,EAAE;IAAExB,KAAK,EAAEyB,gBAAU;IAAEvB,MAAM,EAAEwB;EAAM,CAAC;EAC3CC,KAAK,EAAE;IAAE3B,KAAK,EAAE4B,gBAAU;IAAE1B,MAAM,EAAE2B;EAAM,CAAC;EAC3CC,aAAa,EAAE;IAAE9B,KAAK,EAAE+B,uBAAiB;IAAE7B,MAAM,EAAE8B;EAAa,CAAC;EACjEC,KAAK,EAAE;IAAEjC,KAAK,EAAEkC,gBAAU;IAAEhC,MAAM,EAAEiC;EAAM,CAAC;EAC3CC,QAAQ,EAAE;IAAEpC,KAAK,EAAEqC,mBAAa;IAAEnC,MAAM,EAAEoC;EAAS,CAAC;EACpDC,cAAc,EAAE;IAAEvC,KAAK,EAAEqC,mBAAa;IAAEnC,MAAM,EAAEsC;EAAa,CAAC;EAC9DC,SAAS,EAAE;IAAEzC,KAAK,EAAE0C,mBAAa;IAAExC,MAAM,EAAEyC;EAAS,CAAC;EACrDC,YAAY,EAAE;IAAE5C,KAAK,EAAE6C,kBAAY;IAAE3C,MAAM,EAAE4C;EAAQ,CAAC;EACtDC,SAAS,EAAE;IAAE/C,KAAK,EAAEgD,oBAAc;IAAE9C,MAAM,EAAE+C;EAAU,CAAC;EACvDC,eAAe,EAAE;IAAElD,KAAK,EAAEmD,yBAAmB;IAAEjD,MAAM,EAAEkD;EAAe,CAAC;EACvEC,MAAM,EAAE;IAAErD,KAAK,EAAEsD,qBAAe;IAAEpD,MAAM,EAAEqD;EAAW,CAAC;EACtDC,KAAK,EAAE;IAAExD,KAAK,EAAEyD,cAAQ;IAAEvD,MAAM,EAAEwD;EAAI,CAAC;EACvCC,OAAO,EAAE;IAAE3D,KAAK,EAAE4D,mBAAa;IAAE1D,MAAM,EAAE2D;EAAS,CAAC;EACnDC,OAAO,EAAE;IAAE9D,KAAK,EAAEM,iBAAW;IAAEJ,MAAM,EAAEK;EAAO,CAAC;EAC/CwD,OAAO,EAAE;IAAE/D,KAAK,EAAEM,iBAAW;IAAEJ,MAAM,EAAEK;EAAO,CAAC;EAC/CyD,QAAQ,EAAE;IAAEhE,KAAK,EAAES,6BAAuB;IAAEP,MAAM,EAAEQ;EAAmB,CAAC;EACxEuD,KAAK,EAAE;IAAEjE,KAAK,EAAEqC,mBAAa;IAAEnC,MAAM,EAAEoC;EAAS,CAAC;EACjD4B,YAAY,EAAE;IAAElE,KAAK,EAAEyD,cAAQ;IAAEvD,MAAM,EAAEwD;EAAI;AAC/C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMS,UAA+B,GAAG;EACtCC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE;AACd,CAAC;AAEM,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS;EACTC,IAAI,GAAG,OAAO;EACdC;AAOF,CAAC,EAAa;EACZ,MAAMC,QAAQ,GAAGF,IAAI,KAAK,QAAQ,GAAGG,cAAQ,GAAGC,mBAAa;EAE7D,IAAIH,KAAK,EAAE;IACT,MAAMI,IAAI,GAAGL,IAAI,KAAK,QAAQ,GAAGC,KAAK,CAACK,MAAM,GAAGL,KAAK,CAACM,KAAK;IAC3D,oBACE1F,MAAA,CAAA2F,OAAA,CAAAC,aAAA;MAAMC,KAAK,EAAEf,UAAW;MAAAgB,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5F,YAAA;QAAA6F,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACtBlG,MAAA,CAAA2F,OAAA,CAAAC,aAAA,CAACJ,IAAI;MAAAM,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5F,YAAA;QAAA6F,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACH,CAAC;EAEX;EAEA,IAAI,CAAChB,SAAS,EAAE;IACd,oBACElF,MAAA,CAAA2F,OAAA,CAAAC,aAAA;MAAMC,KAAK,EAAEf,UAAW;MAAAgB,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5F,YAAA;QAAA6F,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACtBlG,MAAA,CAAA2F,OAAA,CAAAC,aAAA,CAACP,QAAQ;MAAAS,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5F,YAAA;QAAA6F,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACP,CAAC;EAEX;EAEA,MAAMC,KAAK,GAAG1F,mBAAmB,CAACyE,SAAS,CAAC;EAE5C,IAAI,CAACiB,KAAK,EAAE;IACV,oBACEnG,MAAA,CAAA2F,OAAA,CAAAC,aAAA;MAAMC,KAAK,EAAEf,UAAW;MAAAgB,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5F,YAAA;QAAA6F,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACtBlG,MAAA,CAAA2F,OAAA,CAAAC,aAAA,CAACP,QAAQ;MAAAS,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5F,YAAA;QAAA6F,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACP,CAAC;EAEX;EAEA,MAAMV,IAAI,GAAGL,IAAI,KAAK,QAAQ,GAAGgB,KAAK,CAACtF,MAAM,GAAGsF,KAAK,CAACxF,KAAK;EAC3D,oBACEX,MAAA,CAAA2F,OAAA,CAAAC,aAAA;IAAMC,KAAK,EAAEf,UAAW;IAAAgB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA5F,YAAA;MAAA6F,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACtBlG,MAAA,CAAA2F,OAAA,CAAAC,aAAA,CAACJ,IAAI;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA5F,YAAA;MAAA6F,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CACH,CAAC;AAEX","ignoreList":[]}

package/dist/cjs/version.js

@@ -2,5 +2,5 @@
 
 exports.__esModule = true;
 exports.version = void 0;
-const version = exports.version = 'patterns@1.440.0';
+const version = exports.version = 'patterns@1.442.0';
 //# sourceMappingURL=version.js.map

package/dist/cjs/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["version","exports"],"sources":["../../src/version.ts"],"sourcesContent":["export const version = 'patterns@1.440.0';\n"],"mappings":";;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["version","exports"],"sources":["../../src/version.ts"],"sourcesContent":["export const version = 'patterns@1.442.0';\n"],"mappings":";;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,kBAAkB","ignoreList":[]}

package/dist/docs/CustomFieldType.md

@@ -14,6 +14,8 @@ A **custom field type** is a consumer-defined field that plugs into every schema
 - `value` — value semantics (`defaultValue`, `isEmpty`, `validate`) used by every surface.
 - `capabilities` — e.g. `sortable`.
 - `actions` — extra items on the field's "more actions" menus.
+- `form` — the field's input in the entity-page form.
+- `fieldModal` — opts the type into the add/edit-field modal's type picker, so users can create fields of this type.
 - `display` — the type's label and icons in field menus.
 
 A field uses the type via `type: 'CUSTOM'` and `customType` pointing at the definition's key. `table` and `editableTable` are independent — neither falls back to the other, so implement only the surfaces you need.
@@ -410,6 +412,359 @@ function CustomFieldTypeSpreadsheet() {
 }
 ```
 
+### Add-field modal
+
+What you get: a custom type users can create fields of. The `fieldModal` slot opts the Progress type into the add-field modal — click the "+" header button, pick "Progress" in the type picker (it shows the definition's label, icons, subtitle, and group), name it, and confirm. The new field arrives at the source's `fieldActions.addField` as `{ type: 'CUSTOM', customType: 'docs.progress' }` and its column appears immediately, rendered by the type's `editableTable` slot. Requires `schemaPermissions.createField` and `fieldActions.addField` on the source. Note the picker offers only what the source declares (`fieldModal.types`) plus creatable custom types, and persistence belongs to the source's `FieldActions` — this demo stores fields in memory, so they reset on refresh; a source backed by a real service persists them (see the API tab).
+
+```tsx
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import { EditableTable, defineFieldType } from '@wix/patterns';
+import type { EditableColumn, Field } from '@wix/patterns';
+import {
+  useSchemaSource,
+  useEditableTableCollection,
+} from '@wix/patterns/schema';
+import type {
+  CollectionBackend,
+  FieldActions,
+  LoadedSchema,
+  Schema,
+} from '@wix/patterns/schema';
+
+type Task = { id: string; name: string; progress?: number };
+
+function CustomFieldTypeFieldModal() {
+  // Plain object store (the live-example scope shadows the global `Map`).
+  const [store] = React.useState<{ tasks: Task[]; nextId: number }>(() => ({
+    nextId: 4,
+    tasks: [
+      { id: '1', name: 'Design homepage', progress: 80 },
+      { id: '2', name: 'Set up payments', progress: 100 },
+      { id: '3', name: 'Write product descriptions', progress: 25 },
+    ],
+  }));
+
+  const clamp = (value: number) =>
+    Math.max(0, Math.min(100, Math.round(value) || 0));
+
+  const ProgressCellView = ({ value }: { value: number }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      <div
+        style={{
+          width: '80px',
+          height: '6px',
+          borderRadius: '3px',
+          background: '#DFE5EB',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            width: `${clamp(value ?? 0)}%`,
+            height: '100%',
+            background: '#3899EC',
+          }}
+        />
+      </div>
+      <span>{clamp(value ?? 0)}%</span>
+    </div>
+  );
+
+  const progressFieldType = defineFieldType<number>({
+    type: 'docs.progress',
+    display: {
+      label: 'Progress',
+      icons: { Small: () => <span>%</span>, Medium: () => <span>%</span> },
+    },
+    filter: { filterable: false },
+    value: { defaultValue: 0, isEmpty: (v) => v == null },
+    capabilities: { sortable: true },
+    editableTable: {
+      ViewComponent: ProgressCellView,
+      serialize: (v) => String(clamp(v ?? 0)),
+      deserialize: (raw) => clamp(parseFloat(raw)),
+    },
+    // Opts the type into the add-field modal: it shows in the type picker with
+    // the definition's label and icons, and a created field arrives at the
+    // source's addField as { type: 'CUSTOM', customType: 'docs.progress' }.
+    fieldModal: {
+      creatable: true,
+      namePlaceholder: 'e.g. Progress',
+      subtitle: 'A 0–100% progress bar',
+      group: 'Custom types',
+    },
+  });
+
+  const [schema] = React.useState<Schema>(() => ({
+    id: 'docs-custom-field-type-modal',
+    fields: {},
+    displayField: 'name',
+    idField: 'id',
+    itemPermissions: { createItem: true, updateItem: true, deleteItem: true },
+    // Enables the add-field flow — the editable table shows the "+" header
+    // button, which opens the add-field modal.
+    schemaPermissions: {
+      createField: true,
+      updateField: true,
+      deleteField: true,
+    },
+  }));
+
+  // In-memory field CRUD: each mutation returns the updated fields map, which
+  // the source merges into the loaded schema so the columns update in place.
+  const fieldActions: FieldActions = {
+    addField: async (field) => {
+      schema.fields = { ...schema.fields, [field.id]: field };
+      return schema.fields;
+    },
+    editField: async (fieldId, updates) => {
+      const existing = schema.fields[fieldId];
+      if (existing) {
+        schema.fields = {
+          ...schema.fields,
+          [fieldId]: { ...existing, ...updates } as Field,
+        };
+      }
+      return schema.fields;
+    },
+    deleteField: async (fieldId) => {
+      const rest = { ...schema.fields };
+      delete rest[fieldId];
+      schema.fields = rest;
+      return schema.fields;
+    },
+  };
+
+  const backend: CollectionBackend<Task> = {
+    find: async ({ search = '', sort = [] }) => {
+      const found = store.tasks.filter((task) =>
+        task.name.toLowerCase().includes(search.toLowerCase()),
+      );
+      if (sort.length) {
+        const [{ fieldName, order }] = sort;
+        found.sort((a, b) => {
+          const left = a[fieldName as keyof Task] ?? 0;
+          const right = b[fieldName as keyof Task] ?? 0;
+          const diff = left < right ? -1 : left > right ? 1 : 0;
+          return order === 'asc' ? diff : -diff;
+        });
+      }
+      return { items: found, total: found.length };
+    },
+    create: async (entity) => {
+      const created = { id: `task-${store.nextId++}`, name: '', ...entity };
+      store.tasks = [...store.tasks, created];
+      return created;
+    },
+    update: async (entity) => {
+      store.tasks = store.tasks.map((task) =>
+        task.id === entity.id ? entity : task,
+      );
+      return entity;
+    },
+    bulkDelete: async (entityIds) => {
+      store.tasks = store.tasks.filter((task) => !entityIds.includes(task.id));
+    },
+  };
+
+  const loadSchema = async (): Promise<LoadedSchema<Task>> => ({
+    schema,
+    backend,
+    fieldActions,
+  });
+
+  const columns: EditableColumn<Task>[] = [
+    {
+      id: 'name',
+      title: 'Name',
+      cellType: 'text',
+      getValue: (task) => task.name,
+      setValue: (task, value) => ({ ...task, name: value }),
+      width: 220,
+    },
+  ];
+
+  const source = useSchemaSource<Task>({
+    collectionId: 'docs-custom-field-type-modal',
+    loadSchema,
+    fieldTypes: [progressFieldType],
+    // The modal renders only what the source declares: these standard picker
+    // options plus every creatable custom type (appended automatically).
+    fieldModal: {
+      text: {
+        addTitle: 'Add a field',
+        editTitle: 'Edit field',
+      },
+      types: [
+        {
+          patternsType: 'SHORT_TEXT',
+          label: 'Text',
+          subtitle: 'Titles, paragraph',
+          group: 'Essentials',
+        },
+        {
+          patternsType: 'NUMBER',
+          label: 'Number',
+          subtitle: 'ID, rating, order number',
+          group: 'Essentials',
+        },
+      ],
+    },
+  });
+  const state = useEditableTableCollection<Task>(source);
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Tasks' }} />
+      <CollectionPage.Content>
+        <EditableTable state={state} columns={columns} />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}
+```
+
+### Entity-page form
+
+What you get: the custom type in the entity-page form. The `form` slot's component renders only the Progress input — it receives `value`/`onChange` props, and the entity page owns the form wiring (registration on the form, validation from the definition's `value.validate`) and the field UI (label, required marker, error message). Without a `form` slot, an entity page rendering the field throws in development (production skips it). Try it: change the progress, save from the header, and the value round-trips through the source's backend.
+
+```tsx
+import React from 'react';
+import { defineFieldType } from '@wix/patterns';
+import type { Field, FormFieldComponentProps } from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import {
+  EntityPage,
+  EntityPageFieldsCard,
+  useEntityPage,
+  useSchemaSource,
+} from '@wix/patterns/schema';
+import type {
+  CollectionBackend,
+  LoadedSchema,
+  Schema,
+} from '@wix/patterns/schema';
+import { Input } from '@wix/design-system';
+
+type Task = { id: string; name: string; progress?: number };
+
+function CustomFieldTypeEntityPage() {
+  // Plain object store (the live-example scope shadows the global `Map`).
+  const [store] = React.useState<{ task: Task }>(() => ({
+    task: { id: '1', name: 'Design homepage', progress: 80 },
+  }));
+
+  const clamp = (value: number) =>
+    Math.max(0, Math.min(100, Math.round(value) || 0));
+
+  // The entity-page form input. The entity page owns the form wiring and the
+  // field UI (label, error message from the definition's value.validate) —
+  // this renders only the input.
+  const ProgressFormField = ({
+    value,
+    onChange,
+    onBlur,
+  }: FormFieldComponentProps<number>) => (
+    <Input
+      type="number"
+      min={0}
+      max={100}
+      suffix={<Input.Affix>%</Input.Affix>}
+      value={String(value ?? 0)}
+      // parseFloat, not Number — the example scope shadows `Number`.
+      onChange={(event) => onChange(clamp(parseFloat(event.target.value)))}
+      onBlur={onBlur}
+    />
+  );
+
+  const progressFieldType = defineFieldType<number>({
+    type: 'docs.progress',
+    display: {
+      label: 'Progress',
+      icons: { Small: () => <span>%</span>, Medium: () => <span>%</span> },
+    },
+    filter: { filterable: false },
+    value: {
+      defaultValue: 0,
+      isEmpty: (v) => v == null,
+      // Runs on every surface that validates the field — the entity-page
+      // form wires it into its own validation.
+      validate: (v) =>
+        v != null && (v < 0 || v > 100)
+          ? 'Progress must be between 0 and 100'
+          : null,
+    },
+    // Required once the field renders on an entity page — development throws
+    // without it; production skips the field.
+    form: { Component: ProgressFormField },
+  });
+
+  const progressField: Field = {
+    id: 'progress',
+    displayName: 'Progress',
+    type: 'CUSTOM',
+    customType: 'docs.progress',
+  };
+
+  const schema: Schema = {
+    id: 'docs-custom-field-type-entity-page',
+    fields: {
+      name: { id: 'name', displayName: 'Name', type: 'SHORT_TEXT' } as Field,
+      progress: progressField,
+    },
+    displayField: 'name',
+    idField: 'id',
+  };
+
+  // The entity page reads and writes the entity through the source's backend:
+  // `fetch` derives from `get`, saving from `update`.
+  const backend: CollectionBackend<Task> = {
+    find: async () => ({ items: [store.task], total: 1 }),
+    get: async () => store.task,
+    update: async (entity) => {
+      store.task = entity;
+      return entity;
+    },
+  };
+
+  const loadSchema = async (): Promise<LoadedSchema<Task>> => ({
+    schema,
+    backend,
+  });
+
+  const source = useSchemaSource<Task>({
+    collectionId: 'docs-custom-field-type-entity-page',
+    loadSchema,
+    fieldTypes: [progressFieldType],
+  });
+
+  const form = useForm();
+  const state = useEntityPage<Task>(source, {
+    parentPageId: '',
+    form,
+    entityId: '1',
+    saveSuccessToast: 'Saved',
+    saveErrorToast: () => 'Failed to save',
+  });
+
+  return (
+    <EntityPage state={state} dataHook="docs-custom-field-type-entity-page">
+      <EntityPage.Header title={{ text: store.task.name }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPageFieldsCard
+            title="Fields"
+            subtitle="The Progress field renders through its `form` slot"
+            minHeight="204px"
+          />
+        </EntityPage.MainContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}
+```
+
 ## API
 
 ### Overview
@@ -472,6 +827,56 @@ Items appear on every field-actions menu (editable table column header, manage-f
 
 - `items?: Array` — `disabledTooltip` returning a string disables the item and shows the tooltip.
 
+#### `form` — the entity-page form input
+
+Required once a field of this type renders on an entity page — development throws a clear error without it; production skips the field.
+
+- `Component` — receives `FormFieldComponentProps` (`field`, `value`, `onChange(value)`, `onBlur`, `dataHook?`) and renders only the input. The entity page owns the form wiring and the field UI: it registers the field on the form (seeding the value from the entity, falling back to `value.defaultValue`), runs `value.validate` on it, and wraps the component in a WDS `FormField` with the label, required marker, and error message.
+
+#### `fieldModal` — the add/edit-field modal (opt-in)
+
+Absent ⇒ the modal never offers this type. With it, the type shows in the add-field type picker (using `display.label` and `display.icons`), and a created field arrives at the source's `FieldActions.addField` as `{ type: 'CUSTOM', customType:  }`. Requires the source to support field creation (`schemaPermissions.createField` + `fieldActions.addField`).
+
+- `creatable: boolean` — true ⇒ offered in the picker.
+- `namePlaceholder?: string` — placeholder for the name input; absent ⇒ the modal's generic placeholder.
+- `subtitle?: string` — one-line description under the type in the picker.
+- `group?: string` — group heading the type is listed under.
+- `supportsPii?: boolean` — absent ⇒ follows the source-wide setting.
+- `piiWarning?: () => FieldPiiWarning | undefined` — warning shown while the PII toggle is on.
+- `settingsSection?: FieldSettingsSection` — the type's own collapsible settings section (`Component`, `hasError`, `getValues`, `setValues`); its values reach the source's `addField`/`editField` as `settings`, untouched.
+
+##### What the modal offers, and who persists it
+
+The modal renders only what the source declares — there is no built-in list of standard types, because offering a type is a promise the source's backend can store it. A source adapter declares its creatable set once (`fieldModal.types` on the source, e.g. `useCmsSchemaSource` declares the types `@wix/data` can create); creatable custom types are appended to that set automatically.
+
+Saving goes through the source's `FieldActions` — **persistence is the source's responsibility, Cairo only routes the modal's confirm**:
+
+```ts
+const fieldActions: FieldActions = {
+  // Called on confirm with the new field — a custom type arrives as
+  // { type: 'CUSTOM', customType } — plus the settings section's values.
+  // Persist it in your service, then return the collection's updated fields
+  // map; Cairo merges it into the loaded schema so the columns update
+  // without a reload.
+  addField: async (field, settings) => {
+    await myService.createField(collectionId, field, settings);
+    return (await myService.getSchema(collectionId)).fields;
+  },
+  editField: async (fieldId, updates, settings) => {
+    await myService.updateField(collectionId, fieldId, updates, settings);
+    return (await myService.getSchema(collectionId)).fields;
+  },
+  deleteField: async (fieldId) => {
+    await myService.deleteField(collectionId, fieldId);
+    return (await myService.getSchema(collectionId)).fields;
+  },
+};
+
+const loadSchema = async () => ({ schema, backend, fieldActions });
+```
+
+Your backend must be able to store and serve fields of the custom type — that verification is the consumer's responsibility. The live examples here keep fields in memory, so their changes reset on refresh; a source backed by a real service (e.g. the CMS adapter, which calls the collection APIs) persists them.
+
 
 ### Props
 
@@ -481,5 +886,7 @@ Items appear on every field-actions menu (editable table column header, manage-f
 | `filter` | `FilterTypeConfig \| { filterable: false; }` | Yes | - | Filter behavior, or an explicit opt-out — never silently absent. |
 | `table` | `TableCellConfig<V>` | No | - | Absent ⇒ the field renders with the default cell in the read-only table. |
 | `editableTable` | `EditableCellConfig<V>` | No | - | Absent ⇒ the field renders as a read-only cell in editable surfaces. |
+| `form` | `FormTypeConfig<V>` | No | - | Required once a field of this type renders on an entity page: development throws without it; production skips the field. |
 | `actions` | `FieldActionsConfig` | No | - | Extra items for the field's "more actions" menu. |
+| `fieldModal` | `FieldModalConfig` | No | - | Absent ⇒ the add/edit field modal never offers this type. Fields of the type created elsewhere still open in the modal for name/PII edits. |
 

package/dist/docs/MultiAutoInlineCheckboxFilter.md

@@ -65,9 +65,9 @@ import { MultiAutoInlineCheckboxFilter } from '@wix/patterns';
 | `align` | `"right" \| "left" \| "center" \| "space-between"` | No | - | Defines how the children are aligned according to the X axis |
 | `page` | `Page` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023. **Syntax**: `auto \| <custom-ident>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :-: \| \| **85** \| **110** \| **1** \| **85** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/page |
 | `inline` | `boolean` | No | - | Defines if the box behaves as an inline element |
+| `minHeight` | `any` | No | - | Sets the minimum height of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **3** \| **1.3** \| **12** \| **7** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/min-height |
 | `width` | `any` | No | - | Sets the width of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/width |
 | `zIndex` | `ZIndex` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <integer>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/z-index |
-| `minHeight` | `any` | No | - | Sets the minimum height of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **3** \| **1.3** \| **12** \| **7** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/min-height |
 | `grid` | `Grid` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017. **Syntax**: `<'grid-template'> \| <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? \| [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :------: \| :----: \| :-: \| \| **57** \| **52** \| **10.1** \| **16** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid |
 | `fill` | `Fill` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. **Syntax**: `<paint>` **Initial value**: `black` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :-----: \| :-: \| \| **1** \| **3** \| **4** \| **≤15** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/fill |
 | `container` | `Container` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023. **Syntax**: `<'container-name'> [ / <'container-type'> ]?` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :----: \| :-----: \| :-: \| \| **105** \| **110** \| **16** \| **105** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/container |

package/dist/docs/MultiInlineCheckboxFilter.md

@@ -86,9 +86,9 @@ function BasicMultiInlineCheckboxFilter() {
 | `align` | `"right" \| "left" \| "center" \| "space-between"` | No | - | Defines how the children are aligned according to the X axis |
 | `page` | `Page` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023. **Syntax**: `auto \| <custom-ident>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :-: \| \| **85** \| **110** \| **1** \| **85** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/page |
 | `inline` | `boolean` | No | - | Defines if the box behaves as an inline element |
+| `minHeight` | `any` | No | - | Sets the minimum height of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **3** \| **1.3** \| **12** \| **7** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/min-height |
 | `width` | `any` | No | - | Sets the width of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/width |
 | `zIndex` | `ZIndex` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <integer>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/z-index |
-| `minHeight` | `any` | No | - | Sets the minimum height of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **3** \| **1.3** \| **12** \| **7** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/min-height |
 | `grid` | `Grid` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017. **Syntax**: `<'grid-template'> \| <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? \| [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :------: \| :----: \| :-: \| \| **57** \| **52** \| **10.1** \| **16** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid |
 | `fill` | `Fill` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. **Syntax**: `<paint>` **Initial value**: `black` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :-----: \| :-: \| \| **1** \| **3** \| **4** \| **≤15** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/fill |
 | `container` | `Container` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023. **Syntax**: `<'container-name'> [ / <'container-type'> ]?` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :----: \| :-----: \| :-: \| \| **105** \| **110** \| **16** \| **105** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/container |

package/dist/docs/TableColumn.md

@@ -37,4 +37,5 @@ A column of a [`Table`](./?path=/story/base-components-collections-table-table--
 | `render` | `(row: any, rowNum: number) => ReactNode` | Yes | - | A callback that is called for each row in the data to display the value of this row for the specified column. |
 | `mobile` | `ColumnMobileConfig` | No | - | Mobile column configuration. Determines how this column is displayed on mobile devices. - column: 'first' - Stacks vertically with other 'first' columns - column: 'second' - Displays as standalone second column - undefined - Hidden on mobile |
 | `fieldType` | `"SHORT_TEXT" \| "LONG_TEXT" \| "NUMBER" \| "BOOLEAN" \| "DATE" \| "DATE_TIME" \| "DATETIME" \| "TIME" \| "URL" \| "EMAIL" \| "IMAGE" \| "MEDIA_GALLERY" \| "AUDIO" \| "DOCUMENT" \| "MULTI_DOCUMENT" \| "RICH_TEXT" \| "RICH_CONTENT" \| "REFERENCE" \| "MULTI_REFERENCE" \| "OBJECT" \| "ARRAY" \| "ADDRESS" \| "COLOR" \| "INTEGER" \| "DECIMAL" \| "CHECKBOX" \| "DROPDOWN" \| "FILES" \| "MULTI_SELECT"` | No | - | The field type string used to resolve a prefix icon for the column. Cairo maps this to the appropriate icon internally. |
+| `fieldTypeIcons` | `{ Small: ComponentType<{}>; Medium: ComponentType<{}>; }` | No | - | Explicit prefix icons for the column (e.g. a custom field type's `display.icons`). When present, used instead of the `fieldType` mapping. |