@woodylab/payload 0.0.18 → 0.0.21

package/dist/{fieldRoles-BH5WwJxZ.js → fieldRoles-ByWB8j1Q.js}

@@ -75,134 +75,6 @@ const fieldSelect = (override) => ({
     ...override
 });
 
-const fieldContainerProps = (customFields = []) => {
-    return {
-        name: 'ctrP',
-        label: 'Proprietà container',
-        type: 'group',
-        fields: [
-            ...customFields,
-            fieldRichText({ name: 'body', label: 'Contenuto', required: false }),
-            fieldContainerWidths(),
-            {
-                type: 'tabs',
-                tabs: [
-                    {
-                        label: 'Stile',
-                        fields: [
-                            fieldUpload('media', { name: 'bgi', label: 'Immagine di sfondo' }),
-                            //WFieldColor({name:'bgc', label:'Colore di sfondo', required:false}),
-                            {
-                                name: 'borderRadius',
-                                type: 'select',
-                                label: 'Angoli arrotondati',
-                                defaultValue: 'rounded-none',
-                                options: [
-                                    { label: 'Nessuno', value: 'rounded-none' },
-                                    { label: 'Piccolo', value: 'rounded-sm' },
-                                    { label: 'Medio', value: 'rounded-md' },
-                                    { label: 'Grande', value: 'rounded-lg' },
-                                    { label: 'Extra Grande', value: 'rounded-xl' },
-                                    { label: 'Massimo', value: 'rounded-full' },
-                                ],
-                                admin: {
-                                    width: '50%',
-                                    description: 'Imposta lo stile degli angoli arrotondati del contenitore.',
-                                },
-                            },
-                            {
-                                name: 'boxShadow',
-                                type: 'select',
-                                label: 'Ombra contenitore',
-                                defaultValue: 'shadow-none', // Default: nessuna ombra
-                                options: [
-                                    { label: 'Nessuna', value: 'shadow-none' },
-                                    { label: 'Piccola', value: 'shadow-sm' },
-                                    { label: 'Normale', value: 'shadow' },
-                                    { label: 'Media', value: 'shadow-md' },
-                                    { label: 'Grande', value: 'shadow-lg' },
-                                    { label: 'Extra Grande', value: 'shadow-xl' },
-                                    { label: 'Massima', value: 'shadow-2xl' },
-                                ],
-                                admin: {
-                                    width: '50%',
-                                    description: 'Imposta lo stile dell\'ombra per il contenitore.',
-                                },
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Dimensioni',
-                        fields: [
-                            fieldHeights(),
-                            {
-                                type: 'tabs',
-                                tabs: [
-                                    {
-                                        label: 'Margini',
-                                        fields: [
-                                            fieldMargins()
-                                        ]
-                                    },
-                                    {
-                                        label: 'Paddings',
-                                        fields: [
-                                            fieldPaddings()
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            },
-        ]
-    };
-};
-
-const fieldThemeColor = (override) => ({
-    name: override?.name || 'color',
-    label: override?.label || 'Colore',
-    type: 'select',
-    required: override?.required ?? false,
-    options: [
-        { label: 'Default', value: '' },
-        { label: 'Foreground', value: 'foreground' },
-        { label: 'Primary', value: 'primary' },
-        { label: 'Secondary', value: 'secondary' },
-        { label: 'Accent', value: 'accent' },
-        { label: 'Dark', value: 'dark' },
-        { label: 'Light', value: 'light' },
-        { label: 'White', value: 'white' },
-        { label: 'Black', value: 'black' },
-    ],
-    admin: {
-        ...override?.admin,
-    },
-});
-
-const fieldConfigProps = (customFields = []) => {
-    return {
-        name: 'config',
-        label: 'Configurazione',
-        type: 'group',
-        fields: [
-            ...customFields,
-        ],
-    };
-};
-
-const fieldContentProps = (customFields = []) => {
-    return {
-        name: 'cntP',
-        label: 'Contenuto',
-        type: 'group',
-        fields: [
-            ...customFields,
-        ],
-    };
-};
-
 /**
  * Costante che definisce le varianti di larghezza del container come classi Tailwind
  */
@@ -846,118 +718,6 @@ var index = /*#__PURE__*/Object.freeze({
     TailwindWidths: TailwindWidths
 });
 
-/**
- * Genera un campo per la selezione delle altezze
- * @returns Field - Campo di tipo `select` per PayloadCMS
- */
-const fieldViewportHeights = () => {
-    return fieldSelect({
-        name: 'h',
-        label: 'Altezza',
-        type: 'select',
-        options: [{ value: '', label: '(Nessuno)' }, ...TailwindViewportHeights.map(h => ({ value: `h-${h}`, label: h }))],
-        admin: {
-            description: 'Definisce l’altezza dell’elemento.',
-            width: '50%'
-        },
-    });
-};
-
-const fieldSectionProps = (customFields = []) => {
-    return {
-        name: 'sctP',
-        label: 'Proprietà sezione',
-        type: 'group',
-        fields: [
-            ...customFields,
-            fieldRichText({ name: 'body', label: 'Contenuto', required: false }),
-            {
-                type: 'tabs',
-                tabs: [
-                    {
-                        label: 'Stile',
-                        fields: [
-                            fieldUpload('media', { name: 'bgi', label: 'Immagine di sfondo' }),
-                            fieldThemeColor({ name: 'bgc', label: 'Colore di sfondo', required: false }),
-                        ]
-                    }
-                ]
-            },
-            {
-                type: 'tabs',
-                tabs: [
-                    {
-                        label: 'Dimensioni',
-                        fields: [
-                            fieldViewportHeights(),
-                            {
-                                type: 'tabs',
-                                tabs: [{
-                                        label: 'Margini',
-                                        fields: [
-                                            fieldMargins()
-                                        ]
-                                    },
-                                    {
-                                        label: 'Paddings',
-                                        fields: [
-                                            fieldPaddings()
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            },
-        ],
-    };
-};
-
-const fieldSectionTabs = (options = {}) => {
-    const { config = true, section = true, container = true, content = true, configFields = [], sectionFields = [], containerFields = [], contentFields = [] } = options;
-    const tabs = [];
-    if (config) {
-        tabs.push({
-            label: 'Configurazione',
-            fields: [
-                fieldConfigProps(configFields)
-            ],
-        });
-    }
-    // Tab per la sezione
-    if (section) {
-        tabs.push({
-            label: 'Sezione',
-            fields: [
-                fieldSectionProps(sectionFields)
-            ],
-        });
-    }
-    // Tab per il container
-    if (container) {
-        tabs.push({
-            label: 'Container',
-            fields: [
-                fieldContainerProps(containerFields)
-            ],
-        });
-    }
-    // Tab per il contenuto
-    if (content) {
-        tabs.push({
-            label: 'Contenuto',
-            fields: [
-                fieldContentProps(contentFields)
-            ],
-        });
-    }
-    return {
-        type: 'tabs',
-        tabs: tabs,
-    };
-};
-
 /**
  * Genera un campo per la selezione delle larghezze del container
  * @returns Field - Campo di tipo `select` per PayloadCMS
@@ -973,6 +733,27 @@ const fieldContainerWidths = () => {
     });
 };
 
+const fieldThemeColor = (override) => ({
+    name: override?.name || 'color',
+    label: override?.label || 'Colore',
+    type: 'select',
+    required: override?.required ?? false,
+    options: [
+        { label: 'Default', value: '' },
+        { label: 'Foreground', value: 'foreground' },
+        { label: 'Primary', value: 'primary' },
+        { label: 'Secondary', value: 'secondary' },
+        { label: 'Accent', value: 'accent' },
+        { label: 'Dark', value: 'dark' },
+        { label: 'Light', value: 'light' },
+        { label: 'White', value: 'white' },
+        { label: 'Black', value: 'black' },
+    ],
+    admin: {
+        ...override?.admin,
+    },
+});
+
 /**
  * Genera un campo per la selezione delle altezze
  * @returns Field - Campo di tipo `select` per PayloadCMS
@@ -983,7 +764,10 @@ const fieldHeights = () => {
         label: 'Altezza',
         type: 'select',
         defaultValue: 'h-full',
-        options: [{ value: '', label: '(Nessuno)' }, ...TailwindHeights.map(h => ({ value: `h-${h}`, label: h }))],
+        options: [
+            { value: '', label: '(Nessuno)' },
+            ...TailwindHeights.map((h) => ({ value: `h-${h}`, label: h })),
+        ],
         admin: {
             description: 'Definisce l’altezza dell’elemento.',
         },
@@ -991,7 +775,7 @@ const fieldHeights = () => {
 };
 
 const concatMarginFields = (args) => {
-    const { value, siblingData, operation, } = args;
+    const { value, siblingData, operation } = args;
     if (operation === 'create' || operation === 'update') {
         const margins = siblingData || {};
         const { all, x, y, t, r, b, l } = margins;
@@ -1046,8 +830,8 @@ const fieldMargins = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%'
-                        }
+                            width: '33%',
+                        },
                     }),
                     fieldNumber({
                         name: 'x',
@@ -1056,8 +840,8 @@ const fieldMargins = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%'
-                        }
+                            width: '33%',
+                        },
                     }),
                     fieldNumber({
                         name: 'y',
@@ -1066,8 +850,8 @@ const fieldMargins = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%'
-                        }
+                            width: '33%',
+                        },
                     }),
                     fieldNumber({
                         name: 't',
@@ -1076,8 +860,8 @@ const fieldMargins = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '25%'
-                        }
+                            width: '25%',
+                        },
                     }),
                     fieldNumber({
                         name: 'r',
@@ -1086,8 +870,8 @@ const fieldMargins = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '25%'
-                        }
+                            width: '25%',
+                        },
                     }),
                     fieldNumber({
                         name: 'b',
@@ -1096,8 +880,8 @@ const fieldMargins = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '25%'
-                        }
+                            width: '25%',
+                        },
                     }),
                     fieldNumber({
                         name: 'l',
@@ -1106,11 +890,11 @@ const fieldMargins = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '25%'
-                        }
+                            width: '25%',
+                        },
                     }),
-                ]
-            }
+                ],
+            },
         ],
         admin: {
             description: 'Definisce lo spazio esterno generale, orizzontale, verticale o per ciascun lato.',
@@ -1122,7 +906,7 @@ const fieldMargins = () => {
  * Hook per concatenare le classi CSS di padding
  */
 const concatPaddingFields = (args) => {
-    const { value, siblingData, operation, } = args;
+    const { value, siblingData, operation } = args;
     if (operation === 'create' || operation === 'update') {
         const paddings = siblingData || {};
         const { all, x, y, t, r, b, l } = paddings;
@@ -1177,8 +961,8 @@ const fieldPaddings = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%'
-                        }
+                            width: '33%',
+                        },
                     }),
                     fieldNumber({
                         name: 'x',
@@ -1187,8 +971,8 @@ const fieldPaddings = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%'
-                        }
+                            width: '33%',
+                        },
                     }),
                     fieldNumber({
                         name: 'y',
@@ -1197,8 +981,8 @@ const fieldPaddings = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%'
-                        }
+                            width: '33%',
+                        },
                     }),
                     fieldNumber({
                         name: 't',
@@ -1207,8 +991,8 @@ const fieldPaddings = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '25%'
-                        }
+                            width: '25%',
+                        },
                     }),
                     fieldNumber({
                         name: 'r',
@@ -1217,8 +1001,8 @@ const fieldPaddings = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '25%'
-                        }
+                            width: '25%',
+                        },
                     }),
                     fieldNumber({
                         name: 'b',
@@ -1227,8 +1011,8 @@ const fieldPaddings = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '25%'
-                        }
+                            width: '25%',
+                        },
                     }),
                     fieldNumber({
                         name: 'l',
@@ -1237,11 +1021,11 @@ const fieldPaddings = () => {
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '25%'
-                        }
+                            width: '25%',
+                        },
                     }),
-                ]
-            }
+                ],
+            },
         ],
         admin: {
             description: 'Definisce lo spazio interno generale, orizzontale, verticale o per ciascun lato.',
@@ -1249,6 +1033,562 @@ const fieldPaddings = () => {
     };
 };
 
+const fieldContainerProps = (customFields = []) => {
+    return {
+        name: 'ctrP',
+        label: 'Proprietà container',
+        type: 'group',
+        fields: [
+            ...customFields,
+            fieldRichText({ name: 'body', label: 'Contenuto', required: false }),
+            fieldContainerWidths(),
+            {
+                type: 'tabs',
+                tabs: [
+                    {
+                        label: 'Stile',
+                        fields: [
+                            fieldUpload('media', { name: 'bgi', label: 'Immagine di sfondo' }),
+                            fieldThemeColor({ name: 'bgc', label: 'Colore di sfondo', required: false }),
+                            fieldSelect({
+                                name: 'borderRadius',
+                                type: 'select',
+                                label: 'Angoli arrotondati',
+                                defaultValue: 'rounded-none',
+                                options: [
+                                    { label: 'Nessuno', value: 'rounded-none' },
+                                    { label: 'Piccolo', value: 'rounded-sm' },
+                                    { label: 'Medio', value: 'rounded-md' },
+                                    { label: 'Grande', value: 'rounded-lg' },
+                                    { label: 'Extra Grande', value: 'rounded-xl' },
+                                    { label: 'Massimo', value: 'rounded-full' },
+                                ],
+                                admin: {
+                                    width: '50%',
+                                    description: 'Imposta lo stile degli angoli arrotondati del contenitore.',
+                                },
+                            }),
+                            fieldSelect({
+                                name: 'boxShadow',
+                                type: 'select',
+                                label: 'Ombra contenitore',
+                                defaultValue: 'shadow-none', // Default: nessuna ombra
+                                options: [
+                                    { label: 'Nessuna', value: 'shadow-none' },
+                                    { label: 'Piccola', value: 'shadow-sm' },
+                                    { label: 'Normale', value: 'shadow' },
+                                    { label: 'Media', value: 'shadow-md' },
+                                    { label: 'Grande', value: 'shadow-lg' },
+                                    { label: 'Extra Grande', value: 'shadow-xl' },
+                                    { label: 'Massima', value: 'shadow-2xl' },
+                                ],
+                                admin: {
+                                    width: '50%',
+                                    description: "Imposta lo stile dell'ombra per il contenitore.",
+                                },
+                            }),
+                        ],
+                    },
+                    {
+                        label: 'Dimensioni',
+                        fields: [
+                            fieldHeights(),
+                            {
+                                type: 'tabs',
+                                tabs: [
+                                    {
+                                        label: 'Margini',
+                                        fields: [fieldMargins()],
+                                    },
+                                    {
+                                        label: 'Paddings',
+                                        fields: [fieldPaddings()],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    };
+};
+
+const iconsList = [
+    { label: 'Academic Cap', value: 'AcademicCapIcon' },
+    { label: 'Adjustments Horizontal', value: 'AdjustmentsHorizontalIcon' },
+    { label: 'Adjustments Vertical', value: 'AdjustmentsVerticalIcon' },
+    { label: 'Archive Box Arrow Down', value: 'ArchiveBoxArrowDownIcon' },
+    { label: 'Archive Box X Mark', value: 'ArchiveBoxXMarkIcon' },
+    { label: 'Archive Box', value: 'ArchiveBoxIcon' },
+    { label: 'Arrow Down Circle', value: 'ArrowDownCircleIcon' },
+    { label: 'Arrow Down', value: 'ArrowDownIcon' },
+    { label: 'Arrow Left Circle', value: 'ArrowLeftCircleIcon' },
+    { label: 'Arrow Left', value: 'ArrowLeftIcon' },
+    { label: 'Arrow Right Circle', value: 'ArrowRightCircleIcon' },
+    { label: 'Arrow Right', value: 'ArrowRightIcon' },
+    { label: 'Arrow Up Circle', value: 'ArrowUpCircleIcon' },
+    { label: 'Arrow Up', value: 'ArrowUpIcon' },
+    { label: 'Bell Alert', value: 'BellAlertIcon' },
+    { label: 'Bell', value: 'BellIcon' },
+    { label: 'Bookmark Square', value: 'BookmarkSquareIcon' },
+    { label: 'Bookmark', value: 'BookmarkIcon' },
+    { label: 'Building Office', value: 'BuildingOfficeIcon' },
+    { label: 'Calendar', value: 'CalendarIcon' },
+    { label: 'Camera', value: 'CameraIcon' },
+    { label: 'Chart Bar', value: 'ChartBarIcon' },
+    { label: 'Chat Bubble Left Right', value: 'ChatBubbleLeftRightIcon' },
+    { label: 'Chat Bubble Left', value: 'ChatBubbleLeftIcon' },
+    { label: 'Check Circle', value: 'CheckCircleIcon' },
+    { label: 'Check', value: 'CheckIcon' },
+    { label: 'Chevron Down', value: 'ChevronDownIcon' },
+    { label: 'Chevron Left', value: 'ChevronLeftIcon' },
+    { label: 'Chevron Right', value: 'ChevronRightIcon' },
+    { label: 'Chevron Up', value: 'ChevronUpIcon' },
+    { label: 'Clock', value: 'ClockIcon' },
+    { label: 'Cloud Arrow Up', value: 'CloudArrowUpIcon' },
+    { label: 'Cloud', value: 'CloudIcon' },
+    { label: 'Code Bracket', value: 'CodeBracketIcon' },
+    { label: 'Cog', value: 'CogIcon' },
+    { label: 'Command Line', value: 'CommandLineIcon' },
+    { label: 'Computer Desktop', value: 'ComputerDesktopIcon' },
+    { label: 'Credit Card', value: 'CreditCardIcon' },
+    { label: 'Document', value: 'DocumentIcon' },
+    { label: 'Envelope', value: 'EnvelopeIcon' },
+    { label: 'Exclamation Circle', value: 'ExclamationCircleIcon' },
+    { label: 'Exclamation Triangle', value: 'ExclamationTriangleIcon' },
+    { label: 'Eye', value: 'EyeIcon' },
+    { label: 'Face Smile', value: 'FaceSmileIcon' },
+    { label: 'Film', value: 'FilmIcon' },
+    { label: 'Finger Print', value: 'FingerPrintIcon' },
+    { label: 'Fire', value: 'FireIcon' },
+    { label: 'Flag', value: 'FlagIcon' },
+    { label: 'Folder Open', value: 'FolderOpenIcon' },
+    { label: 'Folder', value: 'FolderIcon' },
+    { label: 'Gift', value: 'GiftIcon' },
+    { label: 'Globe Alt', value: 'GlobeAltIcon' },
+    { label: 'Globe Europe Africa', value: 'GlobeEuropeAfricaIcon' },
+    { label: 'Hand Raised', value: 'HandRaisedIcon' },
+    { label: 'Heart', value: 'HeartIcon' },
+    { label: 'Home', value: 'HomeIcon' },
+    { label: 'Identification', value: 'IdentificationIcon' },
+    { label: 'Information Circle', value: 'InformationCircleIcon' },
+    { label: 'Key', value: 'KeyIcon' },
+    { label: 'Link', value: 'LinkIcon' },
+    { label: 'List Bullet', value: 'ListBulletIcon' },
+    { label: 'Lock Closed', value: 'LockClosedIcon' },
+    { label: 'Lock Open', value: 'LockOpenIcon' },
+    { label: 'Magnifying Glass Circle', value: 'MagnifyingGlassCircleIcon' },
+    { label: 'Magnifying Glass', value: 'MagnifyingGlassIcon' },
+    { label: 'Map Pin', value: 'MapPinIcon' },
+    { label: 'Map', value: 'MapIcon' },
+    { label: 'Moon', value: 'MoonIcon' },
+    { label: 'Paper Airplane', value: 'PaperAirplaneIcon' },
+    { label: 'Paper Clip', value: 'PaperClipIcon' },
+    { label: 'Pause Circle', value: 'PauseCircleIcon' },
+    { label: 'Pencil Square', value: 'PencilSquareIcon' },
+    { label: 'Pencil', value: 'PencilIcon' },
+    { label: 'Phone Arrow Up Right', value: 'PhoneArrowUpRightIcon' },
+    { label: 'Phone X Mark', value: 'PhoneXMarkIcon' },
+    { label: 'Phone', value: 'PhoneIcon' },
+    { label: 'Photo', value: 'PhotoIcon' },
+    { label: 'Play Circle', value: 'PlayCircleIcon' },
+    { label: 'Play', value: 'PlayIcon' },
+    { label: 'Plus Circle', value: 'PlusCircleIcon' },
+    { label: 'Plus', value: 'PlusIcon' },
+    { label: 'Power', value: 'PowerIcon' },
+    { label: 'Question Mark Circle', value: 'QuestionMarkCircleIcon' },
+    { label: 'Rocket Launch', value: 'RocketLaunchIcon' },
+    { label: 'Rss', value: 'RssIcon' },
+    { label: 'Scale', value: 'ScaleIcon' },
+    { label: 'Server', value: 'ServerIcon' },
+    { label: 'Share', value: 'ShareIcon' },
+    { label: 'Shield Check', value: 'ShieldCheckIcon' },
+    { label: 'Shield Exclamation', value: 'ShieldExclamationIcon' },
+    { label: 'Shopping Bag', value: 'ShoppingBagIcon' },
+    { label: 'Shopping Cart', value: 'ShoppingCartIcon' },
+    { label: 'Star', value: 'StarIcon' },
+    { label: 'Stop Circle', value: 'StopCircleIcon' },
+    { label: 'Sun', value: 'SunIcon' },
+    { label: 'Tag', value: 'TagIcon' },
+    { label: 'Trash', value: 'TrashIcon' },
+    { label: 'Trophy', value: 'TrophyIcon' },
+    { label: 'User Circle', value: 'UserCircleIcon' },
+    { label: 'User Group', value: 'UserGroupIcon' },
+    { label: 'User', value: 'UserIcon' },
+    { label: 'Users', value: 'UsersIcon' },
+    { label: 'Video Camera', value: 'VideoCameraIcon' },
+    { label: 'Wifi', value: 'WifiIcon' },
+    { label: 'Window', value: 'WindowIcon' },
+    { label: 'Wrench Screwdriver', value: 'WrenchScrewdriverIcon' },
+    { label: 'Wrench', value: 'WrenchIcon' },
+    { label: 'X Circle', value: 'XCircleIcon' },
+    { label: 'X Mark', value: 'XMarkIcon' },
+];
+
+const fieldAction = () => ({
+    type: 'group',
+    label: 'Azione',
+    name: 'action',
+    fields: [
+        fieldCheckbox({
+            name: 'show',
+            label: 'Mostra azione',
+            defaultValue: false,
+            admin: {
+                width: '50%',
+            },
+        }),
+        fieldText({
+            name: 'label',
+            type: 'text',
+            label: 'Testo da visualizzare',
+            defaultValue: 'Action',
+            admin: {
+                width: '50%',
+            },
+        }),
+        fieldSelect({
+            name: 'actionType',
+            label: 'Tipo di azione',
+            defaultValue: 'internalLink',
+            admin: {
+                width: '33%',
+            },
+            options: [
+                {
+                    label: 'Interno',
+                    value: 'internalLink',
+                },
+                {
+                    label: 'Esterno',
+                    value: 'externalLink',
+                },
+                /*
+                {
+                  label: 'Azione',
+                  value: 'customAction',
+                },
+                */
+            ],
+        }),
+        {
+            name: 'internalLink',
+            type: 'relationship',
+            label: 'Seleziona una pagina interna',
+            admin: {
+                condition: (data, siblingData) => {
+                    return siblingData?.actionType === 'internalLink';
+                },
+            },
+            relationTo: ['pages', 'posts', 'destinations'],
+        },
+        {
+            name: 'externalLink',
+            type: 'text',
+            label: 'URL esterno',
+            admin: {
+                condition: (data, siblingData) => {
+                    return siblingData?.actionType === 'externalLink';
+                },
+            },
+        },
+        {
+            type: 'collapsible',
+            label: 'Stile',
+            fields: [
+                {
+                    type: 'row',
+                    fields: [
+                        {
+                            name: 'buttonStyle',
+                            type: 'select',
+                            label: 'Stile bottone',
+                            defaultValue: 'solid',
+                            admin: {
+                                width: '33%',
+                            },
+                            options: [
+                                { label: 'Solido', value: 'solid' },
+                                { label: 'Outline', value: 'outline' },
+                                { label: 'Ghost', value: 'ghost' },
+                                { label: 'Link', value: 'link' },
+                            ],
+                        },
+                        {
+                            name: 'buttonColor',
+                            type: 'select',
+                            label: 'Colore bottone',
+                            defaultValue: 'primary',
+                            admin: {
+                                width: '33%',
+                            },
+                            options: [
+                                { label: 'Primary', value: 'primary' },
+                                { label: 'Secondary', value: 'secondary' },
+                                { label: 'Accent', value: 'accent' },
+                                { label: 'Dark', value: 'dark' },
+                                { label: 'Light', value: 'light' },
+                            ],
+                        },
+                        {
+                            name: 'buttonSize',
+                            type: 'select',
+                            label: 'Dimensione bottone',
+                            defaultValue: 'default',
+                            admin: {
+                                width: '33%',
+                            },
+                            options: [
+                                { label: 'Small', value: 'small' },
+                                { label: 'Default', value: 'default' },
+                                { label: 'Medium', value: 'medium' },
+                                { label: 'Large', value: 'large' },
+                                { label: 'Extra Large', value: 'xl' },
+                            ],
+                        },
+                        {
+                            name: 'buttonRounded',
+                            type: 'select',
+                            label: 'Arrotondamento',
+                            defaultValue: 'default',
+                            admin: {
+                                width: '33%',
+                            },
+                            options: [
+                                { label: 'Nessuno', value: 'none' },
+                                { label: 'Piccolo', value: 'sm' },
+                                { label: 'Standard', value: 'default' },
+                                { label: 'Grande', value: 'lg' },
+                                { label: 'Completo', value: 'full' },
+                            ],
+                        },
+                        {
+                            name: 'alignment',
+                            type: 'select',
+                            label: 'Allineamento del Bottone',
+                            defaultValue: 'left',
+                            options: [
+                                {
+                                    label: 'Sinistra',
+                                    value: 'left',
+                                },
+                                {
+                                    label: 'Centro',
+                                    value: 'center',
+                                },
+                                {
+                                    label: 'Destra',
+                                    value: 'right',
+                                },
+                            ],
+                            admin: {
+                                width: '33%',
+                                condition: (data) => true, // Puoi modificare questa condizione se il campo deve essere mostrato solo in determinate circostanze
+                            },
+                        },
+                        fieldThemeColor({
+                            name: 'textColor',
+                            label: 'Colore del testo',
+                            admin: {
+                                width: '33%',
+                            },
+                        }),
+                        {
+                            name: 'additionalEffects',
+                            type: 'select',
+                            label: 'Effetti aggiuntivi',
+                            hasMany: true,
+                            admin: {
+                                width: '33%',
+                            },
+                            options: [
+                                { label: 'Ombra', value: 'shadow' },
+                                { label: 'Transizione', value: 'transition' },
+                                { label: 'Animazione scala', value: 'scale' },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    type: 'row',
+                    fields: [
+                        {
+                            name: 'useIcon',
+                            type: 'checkbox',
+                            label: 'Usa icona',
+                            defaultValue: false,
+                            admin: {
+                                width: '33%',
+                            },
+                        },
+                        {
+                            name: 'iconPosition',
+                            type: 'select',
+                            label: 'Posizione icona',
+                            defaultValue: 'left',
+                            admin: {
+                                width: '33%',
+                                condition: (_, siblingData) => siblingData?.useIcon === true,
+                            },
+                            options: [
+                                { label: 'Sinistra', value: 'left' },
+                                { label: 'Destra', value: 'right' },
+                                { label: 'Solo icona', value: 'only' },
+                            ],
+                        },
+                        {
+                            name: 'iconName',
+                            type: 'select',
+                            label: 'Icona',
+                            options: [...iconsList],
+                            admin: {
+                                width: '33%',
+                                condition: (_, siblingData) => siblingData?.useIcon === true,
+                            },
+                            // Qui potresti usare un select con le icone disponibili se hai una libreria predefinita
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+});
+
+const fieldConfigProps = (customFields = []) => {
+    return {
+        name: 'config',
+        label: 'Configurazione',
+        type: 'group',
+        fields: [
+            ...customFields,
+        ],
+    };
+};
+
+const fieldContentProps = (customFields = []) => {
+    return {
+        name: 'cntP',
+        label: 'Contenuto',
+        type: 'group',
+        fields: [
+            ...customFields,
+        ],
+    };
+};
+
+/**
+ * Genera un campo per la selezione delle altezze
+ * @returns Field - Campo di tipo `select` per PayloadCMS
+ */
+const fieldViewportHeights = () => {
+    return fieldSelect({
+        name: 'h',
+        label: 'Altezza',
+        type: 'select',
+        options: [
+            { value: '', label: '(Nessuno)' },
+            ...TailwindViewportHeights.map((h) => ({ value: `h-${h}`, label: h })),
+        ],
+        admin: {
+            description: 'Definisce l’altezza dell’elemento.',
+            width: '50%',
+        },
+    });
+};
+
+const fieldSectionProps = (customFields = []) => {
+    return {
+        name: 'sctP',
+        label: 'Proprietà sezione',
+        type: 'group',
+        fields: [
+            ...customFields,
+            fieldRichText({ name: 'body', label: 'Contenuto', required: false }),
+            {
+                type: 'tabs',
+                tabs: [
+                    {
+                        label: 'Stile',
+                        fields: [
+                            fieldUpload('media', { name: 'bgi', label: 'Immagine di sfondo' }),
+                            fieldThemeColor({ name: 'bgc', label: 'Colore di sfondo', required: false }),
+                        ],
+                    },
+                ],
+            },
+            {
+                type: 'tabs',
+                tabs: [
+                    {
+                        label: 'Dimensioni',
+                        fields: [
+                            fieldViewportHeights(),
+                            {
+                                type: 'tabs',
+                                tabs: [
+                                    {
+                                        label: 'Margini',
+                                        fields: [fieldMargins()],
+                                    },
+                                    {
+                                        label: 'Paddings',
+                                        fields: [fieldPaddings()],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    };
+};
+
+const fieldSectionTabs = (options = {}) => {
+    const { config = true, section = true, container = true, content = true, configFields = [], sectionFields = [], containerFields = [], contentFields = [] } = options;
+    const tabs = [];
+    if (config) {
+        tabs.push({
+            label: 'Configurazione',
+            fields: [
+                fieldConfigProps(configFields)
+            ],
+        });
+    }
+    // Tab per la sezione
+    if (section) {
+        tabs.push({
+            label: 'Sezione',
+            fields: [
+                fieldSectionProps(sectionFields)
+            ],
+        });
+    }
+    // Tab per il container
+    if (container) {
+        tabs.push({
+            label: 'Container',
+            fields: [
+                fieldContainerProps(containerFields)
+            ],
+        });
+    }
+    // Tab per il contenuto
+    if (content) {
+        tabs.push({
+            label: 'Contenuto',
+            fields: [
+                fieldContentProps(contentFields)
+            ],
+        });
+    }
+    return {
+        type: 'tabs',
+        tabs: tabs,
+    };
+};
+
 var UserRole;
 (function (UserRole) {
     UserRole["ADMIN"] = "admin";
@@ -1282,6 +1622,7 @@ const fieldRoles = (override) => ({
 });
 
 exports.TailwindTextSizes = TailwindTextSizes;
+exports.fieldAction = fieldAction;
 exports.fieldArray = fieldArray;
 exports.fieldCheckbox = fieldCheckbox;
 exports.fieldConfigProps = fieldConfigProps;
@@ -1302,5 +1643,6 @@ exports.fieldText = fieldText;
 exports.fieldThemeColor = fieldThemeColor;
 exports.fieldUpload = fieldUpload;
 exports.fieldViewportHeights = fieldViewportHeights;
+exports.iconsList = iconsList;
 exports.index = index;
-//# sourceMappingURL=fieldRoles-BH5WwJxZ.js.map
+//# sourceMappingURL=fieldRoles-ByWB8j1Q.js.map