From 41f238d12b55164e5e3b0c590d19dc2bf30721dd Mon Sep 17 00:00:00 2001
From: Thulasizwe Nkambule <tnkambule980115@gmail.com>
Date: Mon, 7 Apr 2025 10:15:41 +0200
Subject: [PATCH 1/8] fix: consistent border

---
 .../src/components/entityPicker/index.tsx     |  47 ++++--
 .../src/components/entityPicker/models.ts     |   3 +
 .../components/entityPicker/styles/styles.ts  |   1 +
 .../table/columnsEditor/columnSettings.ts     |  14 +-
 .../entityPicker/index.tsx                    |   8 +-
 .../entityPicker/settingsForm.ts              | 145 ++++++++----------
 .../designer-components/entityPicker/utils.ts |   2 +-
 7 files changed, 114 insertions(+), 106 deletions(-)

diff --git a/shesha-reactjs/src/components/entityPicker/index.tsx b/shesha-reactjs/src/components/entityPicker/index.tsx
index eb75cb27f6..d4599dd45b 100644
--- a/shesha-reactjs/src/components/entityPicker/index.tsx
+++ b/shesha-reactjs/src/components/entityPicker/index.tsx
@@ -63,7 +63,9 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
     outcomeValueFunc,
     incomeValueFunc,
     placeholder,
-    hideBorder
+    dividerWidth = '1px',
+    dividerStyle = 'solid',
+    dividerColor = '#d9d9d9'
   } = props;
 
   if (!entityType)
@@ -147,10 +149,8 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
     if (onChange) onChange(null, null);
   };
 
-  const { background, backgroundImage, borderRadius, borderWidth, borderTopWidth, width, minWidth, maxWidth,
-    borderBottomWidth, borderRightColor, borderRightStyle, borderColor, borderBottomLeftRadius,
-    borderTopLeftRadius, MozBorderTopColors, borderTopStyle, borderTopColor, borderTop, boxShadow,
-    borderBottom, borderBottomColor, borderBottomStyle, borderRight, borderRightWidth, ...restStyle } = style;
+  const { borderBottomLeftRadius,
+    borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, width, minWidth, maxWidth, boxShadow, background, backgroundImage, marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft, ...restStyle } = style;
 
   const borderRadii = style?.borderRadius?.toString().split(' ');
 
@@ -164,17 +164,20 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
                 fontSize: Number(style?.fontSize ?? 14),
                 colorText: style?.color,
                 fontFamily: style?.fontFamily,
-                fontWeightStrong: Number(style.fontWeight)
+                fontWeightStrong: Number(style.fontWeight),
+                multipleItemBg: 'rgba(0,0,0,0.06)'
               },
             },
           }}
         >
           {useButtonPicker ? (
-            <Button onClick={handleButtonPickerClick} size={size} {...(pickerButtonProps || {})}>
+            <Button onClick={handleButtonPickerClick} size={size} {...(pickerButtonProps || {})} style={style}>
               {title}
             </Button>
           ) : (
-            <Space.Compact style={{ width: '100%', ...style }}>
+            <Space.Compact style={{
+              width, minWidth, maxWidth, boxShadow, marginTop, marginRight, marginBottom, marginLeft, background, backgroundImage, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius
+            }}>
               <Select
                 size={size}
                 onDropdownVisibleChange={(_e) => {
@@ -191,11 +194,19 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
                 allowClear
                 mode={selectedMode}
                 options={options}
-                variant={hideBorder ? 'borderless' : null}
+                variant='borderless'
                 suffixIcon={null}
                 onChange={handleMultiChange}
                 className={styles.entitySelect}
-                style={{ width: '100%' }}
+                style={{
+                  ...restStyle,
+                  borderRightStyle: 'none',
+                  borderRightWidth: 0,
+                  marginTop: 0,
+                  marginRight: 0, marginBottom: 0, marginLeft: 0, paddingTop, paddingRight, paddingBottom, paddingLeft,
+                  borderTopRightRadius: 0, borderBottomRightRadius: 0,
+                  borderTopLeftRadius, borderBottomLeftRadius
+                }}
                 loading={selection.loading}
               >
                 {''}
@@ -209,10 +220,20 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
                 icon={<EllipsisOutlined />}
                 style={{
                   ...restStyle,
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                  marginTop: 0,
+                  marginRight: 0,
+                  marginBottom: 0,
+                  marginLeft: 0,
+                  paddingTop,
+                  paddingRight,
+                  paddingBottom,
+                  paddingLeft,
+                  borderLeftStyle: dividerStyle,
+                  borderLeftWidth: dividerWidth,
+                  borderLeftColor: dividerColor,
                   borderRadius: `0px ${borderRadii?.[1]} ${borderRadii?.[2]} 0px`,
-                  background: 'transparent',
-                  borderLeft: '1px solid #d9d9d9',
-                  height: '100%',
                   zIndex: 1,
                 }}
                 type='text'
diff --git a/shesha-reactjs/src/components/entityPicker/models.ts b/shesha-reactjs/src/components/entityPicker/models.ts
index 3b5b8b7387..c18db949b9 100644
--- a/shesha-reactjs/src/components/entityPicker/models.ts
+++ b/shesha-reactjs/src/components/entityPicker/models.ts
@@ -65,4 +65,7 @@ export interface IEntityPickerProps extends Omit<IWrappedEntityPickerProps, 'onD
   placeholder: string;
   incomeValueFunc: IncomeValueFunc;
   outcomeValueFunc: OutcomeValueFunc;
+  dividerWidth?: string;
+  dividerStyle?: CSSProperties['borderLeftStyle'];
+  dividerColor?: string;
 }
diff --git a/shesha-reactjs/src/components/entityPicker/styles/styles.ts b/shesha-reactjs/src/components/entityPicker/styles/styles.ts
index d41a8bb276..e3b4c7e730 100644
--- a/shesha-reactjs/src/components/entityPicker/styles/styles.ts
+++ b/shesha-reactjs/src/components/entityPicker/styles/styles.ts
@@ -65,6 +65,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
     `);
 
   const entitySelect = cx("entity-select", css`
+        width: calc(100% - 32px) !important;
         &:hover: {
                 color: colorTextSecondary,
               }
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/columnsEditor/columnSettings.ts b/shesha-reactjs/src/designer-components/dataTable/table/columnsEditor/columnSettings.ts
index b68cd1c30e..21c53a6a2f 100644
--- a/shesha-reactjs/src/designer-components/dataTable/table/columnsEditor/columnSettings.ts
+++ b/shesha-reactjs/src/designer-components/dataTable/table/columnsEditor/columnSettings.ts
@@ -153,18 +153,20 @@ export const getColumnSettings = (data?: any) => ({
                             "inputs": [
                                 {
                                     "id": "anchored1",
-                                    "type": "dropdown",
+                                    "type": "radio",
                                     "propertyName": "anchored",
                                     "label": "Anchored",
                                     "jsSetting": true,
-                                    "dropdownOptions": [
+                                    "buttonGroupOptions": [
                                         {
-                                            "label": "Left",
-                                            "value": "left"
+                                            "title": "Left",
+                                            "value": "left",
+                                            "icon": "LeftOutlined"
                                         },
                                         {
-                                            "label": "Right",
-                                            "value": "right"
+                                            "title": "Right",
+                                            "value": "right",
+                                            "icon": "RightOutlined"
                                         }
                                     ],
                                     "allowClear": true
diff --git a/shesha-reactjs/src/designer-components/entityPicker/index.tsx b/shesha-reactjs/src/designer-components/entityPicker/index.tsx
index b505691291..3b4191ab1c 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/index.tsx
+++ b/shesha-reactjs/src/designer-components/entityPicker/index.tsx
@@ -49,6 +49,9 @@ export interface IEntityPickerComponentProps extends IConfigurableFormComponent,
   widthUnits?: string;
   buttons?: ButtonGroupItemProps[];
   footerButtons?: ModalFooterButtons;
+  dividerWidth?: string;
+  dividerStyle?: CSSProperties['borderLeftStyle'];
+  dividerColor?: string;
 }
 
 const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
@@ -198,6 +201,9 @@ const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
               value={value}
               onChange={onChangeInternal}
               size={model.size}
+              dividerWidth={model.dividerWidth}
+              dividerStyle={model.dividerStyle}
+              dividerColor={model.dividerColor}
             />
           );
         }}
@@ -257,7 +263,7 @@ const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
       ...model,
       editMode: 'inherited',
       entityType: isEntityReferencePropertyMetadata(propMetadata)
-        ? propMetadata.entityType 
+        ? propMetadata.entityType
         : isEntityReferenceArrayPropertyMetadata(propMetadata)
           ? propMetadata.entityType
           : undefined,
diff --git a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
index 72fd9ca03d..7fd59e0b4d 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
+++ b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
@@ -1,9 +1,9 @@
 import { DesignerToolbarSettings } from '@/interfaces/toolbarSettings';
 import { FormLayout } from 'antd/lib/form/Form';
 import { fontTypes, fontWeights, textAlign } from '../_settings/utils/font/utils';
-import { getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils';
+import { borderStyles, getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils';
 import { nanoid } from '@/utils/uuid';
-import { repeatOptions } from '../_settings/utils/background/utils';
+import { backgroundTypeOptions, positionOptions, repeatOptions, sizeOptions } from '../_settings/utils/background/utils';
 
 export const getSettings = (data) => {
 
@@ -185,7 +185,7 @@ export const getSettings = (data) => {
                     label: 'Value Format',
                     dropdownOptions: [
                       {
-                        label: 'Simple Id',
+                        label: 'Simple ID',
                         value: 'simple',
                       },
                       {
@@ -309,7 +309,7 @@ export const getSettings = (data) => {
                         id: nanoid(),
                         hidden: { _code: 'return !(getSettingValue(data?.showModalFooter) === true || getSettingValue(data?.footerButtons) === "default");', _mode: 'code', _value: false } as any,
                         propertyName: 'submitHttpVerb',
-                        label: 'Submit Http Verb',
+                        label: 'Submit HTTP Verb',
                         dropdownOptions: [
                           { label: 'POST', value: 'POST' },
                           { label: 'PUT', value: 'PUT' },
@@ -329,7 +329,7 @@ export const getSettings = (data) => {
                       id: '264903ff-b525-4a6e-893f-d560b219df9d',
                       propertyName: 'modalWidth',
                       inputType: 'customDropdown',
-                      label: 'Dialog Width (%)',
+                      label: 'Dialog Width',
                       allowClear: true,
                       customDropdownMode: 'single',
                       dropdownOptions: [
@@ -469,6 +469,7 @@ export const getSettings = (data) => {
                                 hideLabel: true,
                                 width: 60,
                                 dropdownOptions: textAlign,
+                                hidden: { _code: 'return  getSettingValue(data?.mode) === "multiple";', _mode: 'code', _value: false } as any,
                               },
                             ],
                           })
@@ -604,6 +605,7 @@ export const getSettings = (data) => {
                         ]
                       }
                     })
+
                     .addCollapsiblePanel({
                       id: 'backgroundStyleCollapsiblePanel',
                       propertyName: 'pnlBackgroundStyle',
@@ -624,33 +626,7 @@ export const getSettings = (data) => {
                               propertyName: "background.type",
                               inputType: "radio",
                               tooltip: "Select a type of background",
-                              buttonGroupOptions: [
-                                {
-                                  value: "color",
-                                  icon: "FormatPainterOutlined",
-                                  title: "Color"
-                                },
-                                {
-                                  value: "gradient",
-                                  icon: "BgColorsOutlined",
-                                  title: "Gradient"
-                                },
-                                {
-                                  value: "image",
-                                  icon: "PictureOutlined",
-                                  title: "Image"
-                                },
-                                {
-                                  value: "url",
-                                  icon: "LinkOutlined",
-                                  title: "URL"
-                                },
-                                {
-                                  value: "storedFile",
-                                  icon: "DatabaseOutlined",
-                                  title: "Stored File"
-                                }
-                              ],
+                              buttonGroupOptions: backgroundTypeOptions,
                               readOnly: { _code: 'return  getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
                             })
                             .addSettingsInputRow({
@@ -727,74 +703,27 @@ export const getSettings = (data) => {
                               id: "backgroundStyleRow-controls",
                               parentId: 'backgroundStyleRow',
                               inline: true,
+                              hidden: { _code: 'return  getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', _mode: 'code', _value: false } as any,
                               readOnly: { _code: 'return  getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
                               inputs: [
                                 {
                                   type: 'customDropdown',
                                   id: 'backgroundStyleRow-size',
                                   label: "Size",
+                                  customTooltip: 'Size of the background image, two space separated values with units e.g "100% 100px"',
                                   hideLabel: true,
                                   propertyName: "background.size",
-                                  dropdownOptions: [
-                                    {
-                                      value: "cover",
-                                      label: "Cover"
-                                    },
-                                    {
-                                      value: "contain",
-                                      label: "Contain"
-                                    },
-                                    {
-                                      value: "auto",
-                                      label: "Auto"
-                                    }
-                                  ],
+                                  dropdownOptions: sizeOptions,
                                 },
                                 {
                                   type: 'customDropdown',
                                   id: 'backgroundStyleRow-position',
                                   label: "Position",
                                   hideLabel: true,
+                                  customTooltip: 'Position of the background image, two space separated values with units e.g "5em 100px"',
                                   propertyName: "background.position",
-                                  dropdownOptions: [
-                                    {
-                                      value: "center",
-                                      label: "Center"
-                                    },
-                                    {
-                                      value: "top",
-                                      label: "Top"
-                                    },
-                                    {
-                                      value: "left",
-                                      label: "Left"
-                                    },
-                                    {
-                                      value: "right",
-                                      label: "Right"
-                                    },
-                                    {
-                                      value: "bottom",
-                                      label: "Bottom"
-                                    },
-                                    {
-                                      value: "top left",
-                                      label: "Top Left"
-                                    },
-                                    {
-                                      value: "top right",
-                                      label: "Top Right"
-                                    },
-                                    {
-                                      value: "bottom left",
-                                      label: "Bottom Left"
-                                    },
-                                    {
-                                      value: "bottom right",
-                                      label: "Bottom Right"
-                                    }
-                                  ],
-                                }
+                                  dropdownOptions: positionOptions,
+                                },
                               ]
                             })
                             .addSettingsInputRow({
@@ -925,6 +854,52 @@ export const getSettings = (data) => {
                         ]
                       }
                     })
+                    .addCollapsiblePanel({
+                      id: 'entityPickerDividerCollapsiblePanel',
+                      propertyName: 'entityPickerDivider',
+                      label: 'Entity Picker Divider',
+                      labelAlign: 'right',
+                      ghost: true,
+                      content: {
+                        id: 'entityPickerDividerPnl',
+                        components: [...new DesignerToolbarSettings()
+                          .addSettingsInputRow({
+                            id: nanoid(),
+                            parentId: 'borderStylePnl',
+                            inline: true,
+                            readOnly: false,
+                            inputs: [
+                              {
+                                id: nanoid(),
+                                type: 'textField',
+                                label: "Width",
+                                hideLabel: true,
+                                propertyName: 'dividerWidth',
+                              },
+                              {
+                                id: nanoid(),
+                                label: "Style",
+                                propertyName: 'dividerStyle',
+                                type: "dropdown",
+                                hideLabel: true,
+                                width: 60,
+                                readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
+                                dropdownOptions: borderStyles,
+                              },
+                              {
+                                id: nanoid(),
+                                label: `Color`,
+                                propertyName: 'dividerColor',
+                                type: "colorPicker",
+                                readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
+                                hideLabel: true,
+                              }
+                            ]
+                          })
+                          .toJson()
+                        ]
+                      }
+                    })
                     .toJson()]
               }).toJson()]
           },
diff --git a/shesha-reactjs/src/designer-components/entityPicker/utils.ts b/shesha-reactjs/src/designer-components/entityPicker/utils.ts
index 93a4e39bfc..1fad2d01a9 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/utils.ts
+++ b/shesha-reactjs/src/designer-components/entityPicker/utils.ts
@@ -5,7 +5,7 @@ export const defaultStyles = (prev): IStyleType => {
 
   return {
     border: { hideBorder: false, radiusType: 'all', borderType: 'all', border: { all: { width: '1px', style: 'solid', color: '#d9d9d9' } }, radius: { all: 8 } },
-    dimensions: { width: '100%', height: size === 'small' ? '22px' : size === 'large' ? '38px' : '30px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' },
+    dimensions: { width: '100%', height: size === 'small' ? '22px' : size === 'large' ? '38px' : 'auto', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' },
     background: {
       type: 'color',
       color: '#fff',

From 957efb06c74cc34d482b719164ba862bac9e994c Mon Sep 17 00:00:00 2001
From: Thulasizwe Nkambule <tnkambule980115@gmail.com>
Date: Mon, 7 Apr 2025 12:08:41 +0200
Subject: [PATCH 2/8] chore: migrateStyles update

---
 .../src/designer-components/_common-migrations/migrateStyles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shesha-reactjs/src/designer-components/_common-migrations/migrateStyles.ts b/shesha-reactjs/src/designer-components/_common-migrations/migrateStyles.ts
index 1a7a06ba3a..cfdb76ed34 100644
--- a/shesha-reactjs/src/designer-components/_common-migrations/migrateStyles.ts
+++ b/shesha-reactjs/src/designer-components/_common-migrations/migrateStyles.ts
@@ -72,7 +72,7 @@ export const migratePrevStyles = <T extends ExtendedType>(prev: T, defaults?: Om
                 weight: prevStyles?.fontWeight as string || defaults?.font?.weight || '400',
             },
             dimensions: {
-                width: prev.block ? '100%' : addPx(prevStyles?.width) || addPx(prev?.dimensions?.width) || defaults?.dimensions?.width,
+                width: prev.block ? '100%' : addPx(prevStyles?.width) || addPx(prev?.width) || addPx(prev?.dimensions?.width) || defaults?.dimensions?.width,
                 height: addPx(prevStyles?.height) || heightFromSize || addPx(prev?.dimensions?.height) || defaults?.dimensions?.height,
                 minHeight: addPx(prev?.dimensions?.minHeight) || defaults?.dimensions?.minHeight,
                 maxHeight: addPx(prev?.dimensions?.maxHeight) || defaults?.dimensions?.maxHeight,

From e194e8d6c6f8016875461c2bf5a5606107fd232c Mon Sep 17 00:00:00 2001
From: Thulasizwe Nkambule <tnkambule980115@gmail.com>
Date: Tue, 8 Apr 2025 11:35:00 +0200
Subject: [PATCH 3/8] settings update

---
 .../entityPicker/settingsForm.ts              | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
index 7fd59e0b4d..63a206b57e 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
+++ b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
@@ -100,6 +100,30 @@ export const getSettings = (data) => {
                   },
                 ],
               })
+
+              .addSettingsInputRow({
+                id: 'default-value-s4gmBg31azZC0UjZjpfTm',
+                parentId: 's4gmBg31azZC0UjZjpfTm',
+                readOnly: false,
+                hidden: { _code: 'return !getSettingValue(data?.entityType);', _mode: 'code', _value: false } as any,
+                inputs: [
+                  {
+                    type: 'propertyAutocomplete',
+                    id: 'hpm6rN_aj-L_KaG5MLIZt',
+                    propertyName: 'displayEntityKey',
+                    label: 'Display Property',
+                    labelAlign: 'right',
+                    parentId: 'pn154bf6-f76d-4139-a850-c99bf06c8b69',
+                    hidden: false,
+                    isDynamic: false,
+                    description: 'Name of the property that should be displayed in the field. Live empty to use default display property defined on the back-end.',
+                    validate: {},
+                    modelType: '{{data.entityType}}',
+                    autoFillProps: false,
+                    settingsValidationErrors: [],
+                  },
+                ],
+              })
               .addSettingsInputRow({
                 id: '12d700d6-ed4d-49d5-9cfd-fe8f0060f3b6',
                 parentId: 's4gmBg31azZC0UjZjpfTm',
@@ -124,29 +148,6 @@ export const getSettings = (data) => {
                   },
                 ],
               })
-              .addSettingsInputRow({
-                id: 'default-value-s4gmBg31azZC0UjZjpfTm',
-                parentId: 's4gmBg31azZC0UjZjpfTm',
-                readOnly: false,
-                hidden: { _code: 'return !getSettingValue(data?.entityType);', _mode: 'code', _value: false } as any,
-                inputs: [
-                  {
-                    type: 'propertyAutocomplete',
-                    id: 'hpm6rN_aj-L_KaG5MLIZt',
-                    propertyName: 'displayEntityKey',
-                    label: 'Display Property',
-                    labelAlign: 'right',
-                    parentId: 'pn154bf6-f76d-4139-a850-c99bf06c8b69',
-                    hidden: false,
-                    isDynamic: false,
-                    description: 'Name of the property that should be displayed in the field. Live empty to use default display property defined on the back-end.',
-                    validate: {},
-                    modelType: '{{data.entityType}}',
-                    autoFillProps: false,
-                    settingsValidationErrors: [],
-                  },
-                ],
-              })
               .toJson()
             ]
           },

From 81d64dd212c73cf845ff0776e09fadbd50ca6d49 Mon Sep 17 00:00:00 2001
From: Thulasizwe Nkambule <tnkambule980115@gmail.com>
Date: Tue, 8 Apr 2025 16:14:51 +0200
Subject: [PATCH 4/8] middle border

---
 .../src/components/entityPicker/index.tsx     | 16 +++++++---------
 .../src/components/entityPicker/models.ts     |  4 +---
 .../_settings/utils/border/interfaces.ts      |  6 ++++++
 .../_settings/utils/border/utils.tsx          |  7 ++++---
 .../entityPicker/index.tsx                    |  4 +---
 .../entityPicker/settingsForm.ts              | 19 +------------------
 6 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/shesha-reactjs/src/components/entityPicker/index.tsx b/shesha-reactjs/src/components/entityPicker/index.tsx
index d4599dd45b..55ad721918 100644
--- a/shesha-reactjs/src/components/entityPicker/index.tsx
+++ b/shesha-reactjs/src/components/entityPicker/index.tsx
@@ -63,9 +63,7 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
     outcomeValueFunc,
     incomeValueFunc,
     placeholder,
-    dividerWidth = '1px',
-    dividerStyle = 'solid',
-    dividerColor = '#d9d9d9'
+    dividerStyle
   } = props;
 
   if (!entityType)
@@ -200,12 +198,12 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
                 className={styles.entitySelect}
                 style={{
                   ...restStyle,
-                  borderRightStyle: 'none',
-                  borderRightWidth: 0,
+                  borderRight: 'none',
                   marginTop: 0,
                   marginRight: 0, marginBottom: 0, marginLeft: 0, paddingTop, paddingRight, paddingBottom, paddingLeft,
                   borderTopRightRadius: 0, borderBottomRightRadius: 0,
-                  borderTopLeftRadius, borderBottomLeftRadius
+                  borderTopLeftRadius,
+                  borderBottomLeftRadius
                 }}
                 loading={selection.loading}
               >
@@ -230,9 +228,9 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
                   paddingRight,
                   paddingBottom,
                   paddingLeft,
-                  borderLeftStyle: dividerStyle,
-                  borderLeftWidth: dividerWidth,
-                  borderLeftColor: dividerColor,
+                  borderLeftStyle: dividerStyle?.style ?? 'solid',
+                  borderLeftWidth: dividerStyle?.width ?? '1px',
+                  borderLeftColor: dividerStyle?.color ?? '#d9d9d9',
                   borderRadius: `0px ${borderRadii?.[1]} ${borderRadii?.[2]} 0px`,
                   zIndex: 1,
                 }}
diff --git a/shesha-reactjs/src/components/entityPicker/models.ts b/shesha-reactjs/src/components/entityPicker/models.ts
index c18db949b9..af9d445aa1 100644
--- a/shesha-reactjs/src/components/entityPicker/models.ts
+++ b/shesha-reactjs/src/components/entityPicker/models.ts
@@ -65,7 +65,5 @@ export interface IEntityPickerProps extends Omit<IWrappedEntityPickerProps, 'onD
   placeholder: string;
   incomeValueFunc: IncomeValueFunc;
   outcomeValueFunc: OutcomeValueFunc;
-  dividerWidth?: string;
-  dividerStyle?: CSSProperties['borderLeftStyle'];
-  dividerColor?: string;
+  dividerStyle?: any;
 }
diff --git a/shesha-reactjs/src/designer-components/_settings/utils/border/interfaces.ts b/shesha-reactjs/src/designer-components/_settings/utils/border/interfaces.ts
index c547e5c2ca..5618d83935 100644
--- a/shesha-reactjs/src/designer-components/_settings/utils/border/interfaces.ts
+++ b/shesha-reactjs/src/designer-components/_settings/utils/border/interfaces.ts
@@ -39,6 +39,12 @@ export interface IBorderValue {
             color?: string;
             style?: IBorderType;
         };
+        middle?: {
+            width?: string | number;
+            unit?: string;
+            color?: string;
+            style?: IBorderType;
+        };
     };
     radiusType?: string;
     borderType?: string;
diff --git a/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx b/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx
index 8a5ac216e1..ccdc6935ed 100644
--- a/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx
+++ b/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx
@@ -115,7 +115,8 @@ export const borderSides = [
     { value: "top", icon: "BorderTopOutlined", title: "Top" },
     { value: "right", icon: "BorderRightOutlined", title: "Right" },
     { value: "bottom", icon: "BorderBottomOutlined", title: "Bottom" },
-    { value: "left", icon: "BorderLeftOutlined", title: "Left" }
+    { value: "left", icon: "BorderLeftOutlined", title: "Left" },
+    { value: "middle", icon: "BorderHorizontalOutlined", title: "Middle" }
 ];
 
 
@@ -133,7 +134,7 @@ const generateCode = (type: string, isCustom: boolean, isResponsive: boolean, pa
     return `return getSettingValue(${devicePath}${path ? '?.' + path : ''}?.border?.${type}) !== "${isCustom ? "custom" : "all"}";`;
 };
 
-export const getBorderInputs = (path = '', isResponsive: boolean = true) => {
+export const getBorderInputs = (path = '', isResponsive: boolean = true, hasMiddle: boolean = false) => {
 
     const borderProp = path ? `${path}.border.border` : 'border.border';
 
@@ -193,7 +194,7 @@ export const getBorderInputs = (path = '', isResponsive: boolean = true) => {
             id: 'borderStyleRow',
             parentId: 'borderStylePnl',
             hidden: { _code: generateCode('borderType', true, isResponsive, path), _mode: 'code', _value: false } as any,
-            components: borderSides.map(sideValue => {
+            components: borderSides.slice(0, hasMiddle ? 5 : 4).map(sideValue => {
                 const side = sideValue.value;
 
                 return new DesignerToolbarSettings()
diff --git a/shesha-reactjs/src/designer-components/entityPicker/index.tsx b/shesha-reactjs/src/designer-components/entityPicker/index.tsx
index 3b4191ab1c..be13da4a5f 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/index.tsx
+++ b/shesha-reactjs/src/designer-components/entityPicker/index.tsx
@@ -201,9 +201,7 @@ const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
               value={value}
               onChange={onChangeInternal}
               size={model.size}
-              dividerWidth={model.dividerWidth}
-              dividerStyle={model.dividerStyle}
-              dividerColor={model.dividerColor}
+              dividerStyle={border?.border?.middle}
             />
           );
         }}
diff --git a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
index 63a206b57e..9c00664ffb 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
+++ b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
@@ -575,27 +575,10 @@ export const getSettings = (data) => {
                       content: {
                         id: 'borderStylePnl',
                         components: [...new DesignerToolbarSettings()
-                          .addSettingsInputRow({
-                            id: `borderStyleRow`,
-                            parentId: 'borderStylePnl',
-                            hidden: { _code: 'return  !getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.border?.hideBorder);', _mode: 'code', _value: false } as any,
-                            readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
-                            inputs: [
-                              {
-                                type: 'button',
-                                id: 'borderStyleRow-hideBorder',
-                                label: "Border",
-                                hideLabel: true,
-                                propertyName: "border.hideBorder",
-                                icon: "EyeOutlined",
-                                iconAlt: "EyeInvisibleOutlined"
-                              },
-                            ]
-                          })
                           .addContainer({
                             id: 'borderStyleRow',
                             parentId: 'borderStylePnl',
-                            components: getBorderInputs() as any
+                            components: getBorderInputs('', true, true) as any
                           })
                           .addContainer({
                             id: 'borderRadiusStyleRow',

From 27b892c789ad0d28f5330ca5d1adbb265ddc068e Mon Sep 17 00:00:00 2001
From: Thulasizwe Nkambule <tnkambule980115@gmail.com>
Date: Thu, 10 Apr 2025 11:41:23 +0200
Subject: [PATCH 5/8] chore: removed config provider

---
 .../src/components/entityPicker/index.tsx     | 157 ++++++++----------
 .../components/entityPicker/styles/styles.ts  |  17 +-
 2 files changed, 85 insertions(+), 89 deletions(-)

diff --git a/shesha-reactjs/src/components/entityPicker/index.tsx b/shesha-reactjs/src/components/entityPicker/index.tsx
index 55ad721918..214efb26c6 100644
--- a/shesha-reactjs/src/components/entityPicker/index.tsx
+++ b/shesha-reactjs/src/components/entityPicker/index.tsx
@@ -1,5 +1,5 @@
 import { EllipsisOutlined } from '@ant-design/icons';
-import { Button, Space, Select, Skeleton, ConfigProvider } from 'antd';
+import { Button, Space, Select, Skeleton } from 'antd';
 import { DefaultOptionType } from 'antd/lib/select';
 import React, { useMemo, useRef, useState } from 'react';
 import { useEntitySelectionData } from '@/utils/entity';
@@ -69,7 +69,7 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
   if (!entityType)
     throw SheshaError.throwPropertyError('entityType');
 
-  const { styles } = useStyles(style);
+  const { styles } = useStyles({ style });
   const selectRef = useRef(undefined);
 
   const [showModal, setShowModal] = useState(false);
@@ -155,90 +155,75 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
   return (
     <div className={styles.entityPickerContainer}>
       <div>
-        <ConfigProvider
-          theme={{
-            components: {
-              Select: {
-                fontSize: Number(style?.fontSize ?? 14),
-                colorText: style?.color,
-                fontFamily: style?.fontFamily,
-                fontWeightStrong: Number(style.fontWeight),
-                multipleItemBg: 'rgba(0,0,0,0.06)'
-              },
-            },
-          }}
-        >
-          {useButtonPicker ? (
-            <Button onClick={handleButtonPickerClick} size={size} {...(pickerButtonProps || {})} style={style}>
-              {title}
-            </Button>
-          ) : (
-            <Space.Compact style={{
-              width, minWidth, maxWidth, boxShadow, marginTop, marginRight, marginBottom, marginLeft, background, backgroundImage, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius
-            }}>
-              <Select
-                size={size}
-                onDropdownVisibleChange={(_e) => {
-                  selectRef.current.blur();
-                  showPickerDialog();
-                }}
-                onClear={onClear}
-                value={selection.loading ? undefined : valueId}
-                placeholder={selection.loading ? 'Loading...' : placeholder}
-                notFoundContent={''}
-                defaultValue={defaultValue}
-                disabled={disabled || selection.loading}
-                ref={selectRef}
-                allowClear
-                mode={selectedMode}
-                options={options}
-                variant='borderless'
-                suffixIcon={null}
-                onChange={handleMultiChange}
-                className={styles.entitySelect}
-                style={{
-                  ...restStyle,
-                  borderRight: 'none',
-                  marginTop: 0,
-                  marginRight: 0, marginBottom: 0, marginLeft: 0, paddingTop, paddingRight, paddingBottom, paddingLeft,
-                  borderTopRightRadius: 0, borderBottomRightRadius: 0,
-                  borderTopLeftRadius,
-                  borderBottomLeftRadius
-                }}
-                loading={selection.loading}
-              >
-                {''}
-              </Select>
-              <Button
-                onClick={showPickerDialog}
-                className={styles.pickerInputGroupEllipsis}
-                disabled={disabled}
-                loading={loading ?? false}
-                size={size}
-                icon={<EllipsisOutlined />}
-                style={{
-                  ...restStyle,
-                  borderTopLeftRadius: 0,
-                  borderBottomLeftRadius: 0,
-                  marginTop: 0,
-                  marginRight: 0,
-                  marginBottom: 0,
-                  marginLeft: 0,
-                  paddingTop,
-                  paddingRight,
-                  paddingBottom,
-                  paddingLeft,
-                  borderLeftStyle: dividerStyle?.style ?? 'solid',
-                  borderLeftWidth: dividerStyle?.width ?? '1px',
-                  borderLeftColor: dividerStyle?.color ?? '#d9d9d9',
-                  borderRadius: `0px ${borderRadii?.[1]} ${borderRadii?.[2]} 0px`,
-                  zIndex: 1,
-                }}
-                type='text'
-              />
-            </Space.Compact>
-          )}
-        </ConfigProvider>
+        {useButtonPicker ? (
+          <Button onClick={handleButtonPickerClick} size={size} {...(pickerButtonProps || {})} style={style}>
+            {title}
+          </Button>
+        ) : (
+          <Space.Compact style={{
+            width, minWidth, maxWidth, boxShadow, marginTop, marginRight, marginBottom, marginLeft, background, backgroundImage, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius
+          }}>
+            <Select
+              size={size}
+              onDropdownVisibleChange={(_e) => {
+                selectRef.current.blur();
+                showPickerDialog();
+              }}
+              onClear={onClear}
+              value={selection.loading ? undefined : valueId}
+              placeholder={selection.loading ? 'Loading...' : placeholder}
+              notFoundContent={''}
+              defaultValue={defaultValue}
+              disabled={disabled || selection.loading}
+              ref={selectRef}
+              allowClear
+              mode={selectedMode}
+              options={options}
+              variant='borderless'
+              suffixIcon={null}
+              onChange={handleMultiChange}
+              className={styles.entitySelect}
+              style={{
+                ...restStyle,
+                borderRight: 'none',
+                marginTop: 0,
+                marginRight: 0, marginBottom: 0, marginLeft: 0, paddingTop, paddingRight, paddingBottom, paddingLeft,
+                borderTopRightRadius: 0, borderBottomRightRadius: 0,
+                borderTopLeftRadius,
+                borderBottomLeftRadius
+              }}
+              loading={selection.loading}
+            >
+              {''}
+            </Select>
+            <Button
+              onClick={showPickerDialog}
+              className={styles.pickerInputGroupEllipsis}
+              disabled={disabled}
+              loading={loading ?? false}
+              icon={<EllipsisOutlined />}
+              style={{
+                ...restStyle,
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                marginTop: 0,
+                marginRight: 0,
+                marginBottom: 0,
+                marginLeft: 0,
+                paddingTop,
+                paddingRight,
+                paddingBottom,
+                paddingLeft,
+                borderLeftStyle: dividerStyle?.style ?? 'solid',
+                borderLeftWidth: dividerStyle?.width ?? '1px',
+                borderLeftColor: dividerStyle?.color ?? '#d9d9d9',
+                borderRadius: `0px ${borderRadii?.[1]} ${borderRadii?.[2]} 0px`,
+                zIndex: 1,
+              }}
+              type='text'
+            />
+          </Space.Compact>
+        )}
       </div>
 
       {showModal && <EntityPickerModal {...props} onCloseModal={() => setShowModal(false)} />}
diff --git a/shesha-reactjs/src/components/entityPicker/styles/styles.ts b/shesha-reactjs/src/components/entityPicker/styles/styles.ts
index e3b4c7e730..8707002e48 100644
--- a/shesha-reactjs/src/components/entityPicker/styles/styles.ts
+++ b/shesha-reactjs/src/components/entityPicker/styles/styles.ts
@@ -1,6 +1,7 @@
 import { createStyles, sheshaStyles } from '@/styles';
+import { CSSProperties } from 'react';
 
-export const useStyles = createStyles(({ css, cx, prefixCls }) => {
+export const useStyles = createStyles(({ css, cx, prefixCls }, { style }: { style: CSSProperties }) => {
   const pickerEllipsisBtnWidth = "45px";
 
   const pickerInputGroup = "picker-input-group";
@@ -11,7 +12,6 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
   const shaReactTable = "sha-react-table";
   const shaGlobalTableFilter = "sha-global-table-filter";
 
-
   const entityPickerContainer = cx("entity-picker-container", css`
     .${pickerInputGroup} {
       .${pickerInputGroupInput} {
@@ -65,20 +65,31 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
     `);
 
   const entitySelect = cx("entity-select", css`
+        --ant-color-text: ${style?.color || '#000'} !important;
         width: calc(100% - 32px) !important;
         &:hover: {
                 color: colorTextSecondary,
               }
 
         .ant-select-selector > ant-select-selection-search, ant-select-selection-placeholder {
-          all: inherit !important;
           border-right: 1px solid #d9d9d9;
           padding: 0 8px !important;
           * {
+            font-size: ${style?.fontSize || '14px'} !important;
+            font-weight: ${style?.fontWeight} !important;
+            color: ${style?.color || '#000'} !important;
+            font-family: ${style?.fontFamily || 'inherit'} !important;  
             border-top-right-radius: 0 !important;
             border-bottom-right-radius: 0 !important;
             }
           }
+
+          .ant-select-selection-item {
+            font-size: ${style?.fontSize || '14px'} !important;
+            font-weight: ${style?.fontWeight} !important;
+            color: ${style?.color || '#000'} !important;
+            font-family: ${style?.fontFamily || 'inherit'} !important;  
+          }
       `);
 
   return {

From 987bf5615b8c22f5d02b7eeb05d3c63504beae48 Mon Sep 17 00:00:00 2001
From: Thulasizwe <48715536+czwe-01@users.noreply.github.com>
Date: Mon, 14 Apr 2025 10:37:42 +0200
Subject: [PATCH 6/8] Update
 shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../src/designer-components/entityPicker/settingsForm.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
index 01e4af08ad..9724a1e48b 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
+++ b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
@@ -827,7 +827,7 @@ export const getSettings = (data) => {
                         components: [...new DesignerToolbarSettings()
                           .addSettingsInputRow({
                             id: nanoid(),
-                            parentId: 'borderStylePnl',
+                            parentId: 'entityPickerDividerPnl',
                             inline: true,
                             readOnly: false,
                             inputs: [

From d0c60faa784d103a2610b4701c8ea64fab408cd9 Mon Sep 17 00:00:00 2001
From: Thulasizwe Nkambule <tnkambule980115@gmail.com>
Date: Mon, 14 Apr 2025 15:59:17 +0200
Subject: [PATCH 7/8] fix: entity picker modal useStyle

---
 .../src/components/entityPicker/modal.tsx          | 14 +++++++-------
 .../src/components/entityPicker/models.ts          |  3 ++-
 .../src/components/entityPicker/styles/styles.ts   |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/shesha-reactjs/src/components/entityPicker/modal.tsx b/shesha-reactjs/src/components/entityPicker/modal.tsx
index b425e64303..c5ccd37a20 100644
--- a/shesha-reactjs/src/components/entityPicker/modal.tsx
+++ b/shesha-reactjs/src/components/entityPicker/modal.tsx
@@ -35,7 +35,7 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
     onCloseModal,
   } = props;
 
-  const { styles } = useStyles();
+  const { styles } = useStyles({});
   const [modalId] = useState(nanoid()); // use generated value because formId was changed. to be reviewed
   const [state, setState] = useState<IEntityPickerState>({ showModal: true });
   const hidePickerDialog = () => {
@@ -55,7 +55,7 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
   const { globalState } = useGlobalState();
   const { formData } = useForm();
   const pageContext = useDataContextManager(false)?.getPageContext();
-  
+
   useEffect(() => {
     registerConfigurableColumns(modalId, configurableColumns);
   }, [configurableColumns]);
@@ -72,13 +72,13 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
       onSelect(row);
     } else {
       if (isMultiple) {
-        const values = !!valueId ? (Array.isArray(valueId) ? valueId : [valueId]): [];
+        const values = !!valueId ? (Array.isArray(valueId) ? valueId : [valueId]) : [];
         if (!values.includes(row.id)) {
-          const vs = !!value ? (Array.isArray(value) ? value : [value]): [];
+          const vs = !!value ? (Array.isArray(value) ? value : [value]) : [];
           onChange([...vs, outcomeValueFunc(row, {})], null);
         }
       } else {
-        onChange(outcomeValueFunc(row, {}),null);
+        onChange(outcomeValueFunc(row, {}), null);
       }
     }
 
@@ -117,7 +117,7 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
       [
         { match: 'data', data: formData },
         { match: 'globalState', data: globalState },
-        { match: 'pageContext', data: {...pageContext?.getFull()} },
+        { match: 'pageContext', data: { ...pageContext?.getFull() } },
       ],
       propertyMetadataAccessor
     ).then(evaluatedFilters => {
@@ -233,7 +233,7 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
 };
 
 export const EntityPickerModal = (props: IEntityPickerModalProps) => {
-  
+
   return (
     <DataTableProvider
       userConfigId={'table_' + props.name}
diff --git a/shesha-reactjs/src/components/entityPicker/models.ts b/shesha-reactjs/src/components/entityPicker/models.ts
index af9d445aa1..d25ccf349f 100644
--- a/shesha-reactjs/src/components/entityPicker/models.ts
+++ b/shesha-reactjs/src/components/entityPicker/models.ts
@@ -7,6 +7,7 @@ import { FormIdentifier } from '@/providers/form/models';
 import { ITableViewProps } from '@/providers/dataTable/filters/models';
 import { ModalFooterButtons } from '@/providers/dynamicModal/models';
 import { ButtonGroupItemProps } from '@/index';
+import { IBorderValue } from '@/designer-components/_settings/utils/border/interfaces';
 
 interface IWrappedEntityPickerProps {
   entityType?: string;
@@ -65,5 +66,5 @@ export interface IEntityPickerProps extends Omit<IWrappedEntityPickerProps, 'onD
   placeholder: string;
   incomeValueFunc: IncomeValueFunc;
   outcomeValueFunc: OutcomeValueFunc;
-  dividerStyle?: any;
+  dividerStyle?: IBorderValue['border']['middle'];
 }
diff --git a/shesha-reactjs/src/components/entityPicker/styles/styles.ts b/shesha-reactjs/src/components/entityPicker/styles/styles.ts
index 8707002e48..dd79d7cfbe 100644
--- a/shesha-reactjs/src/components/entityPicker/styles/styles.ts
+++ b/shesha-reactjs/src/components/entityPicker/styles/styles.ts
@@ -1,7 +1,7 @@
 import { createStyles, sheshaStyles } from '@/styles';
 import { CSSProperties } from 'react';
 
-export const useStyles = createStyles(({ css, cx, prefixCls }, { style }: { style: CSSProperties }) => {
+export const useStyles = createStyles(({ css, cx, prefixCls }, { style }: { style?: CSSProperties }) => {
   const pickerEllipsisBtnWidth = "45px";
 
   const pickerInputGroup = "picker-input-group";

From 5c5a568f99c98fe6355f3b293ac64d4348c2f28a Mon Sep 17 00:00:00 2001
From: Thulasizwe Nkambule <tnkambule980115@gmail.com>
Date: Tue, 15 Apr 2025 12:09:02 +0200
Subject: [PATCH 8/8] removed divider styles panel

---
 .../entityPicker/settingsForm.ts              | 82 ++++---------------
 1 file changed, 18 insertions(+), 64 deletions(-)

diff --git a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
index 9724a1e48b..c3082f1110 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
+++ b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
@@ -1,7 +1,7 @@
 import { DesignerToolbarSettings } from '@/interfaces/toolbarSettings';
 import { FormLayout } from 'antd/lib/form/Form';
 import { fontTypes, fontWeights, textAlign } from '../_settings/utils/font/utils';
-import { borderStyles, getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils';
+import { getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils';
 import { nanoid } from '@/utils/uuid';
 import { backgroundTypeOptions, positionOptions, repeatOptions, sizeOptions } from '../_settings/utils/background/utils';
 
@@ -160,7 +160,7 @@ export const getSettings = (data) => {
                   .addSettingsInputRow({
                     id: 'query-builder-s4gmBg31azZC0UjZjpfTm',
                     parentId: 'pnl54bf6-f76d-4139-a850-c99bf06c8b69',
-                      inputs: [
+                    inputs: [
                       {
                         type: 'queryBuilder',
                         id: 'query-builder-s4gmBg31azZC0UjZjpfTm',
@@ -174,7 +174,7 @@ export const getSettings = (data) => {
                     ],
                   })
                   .addSettingsInput({
-                      inputType: 'dropdown',
+                    inputType: 'dropdown',
                     id: 'acb2d566-fe48-43bd-84e0-28b7103354c1',
                     propertyName: 'valueFormat',
                     parentId: 'pnl54bf6-f76d-4139-a850-c99bf06c8b69',
@@ -221,10 +221,10 @@ export const getSettings = (data) => {
                         description: "Return value that will be stored as field value",
                       },
                     ],
-                    })
+                  })
                   .addSettingsInput({
                     id: 'columns-s4gmBg31azZC0UjZjpfTm',
-                      inputType: 'columnsConfig',
+                    inputType: 'columnsConfig',
                     propertyName: 'items',
                     parentId: 'pn154bf6-f76d-4139-a850-c99bf06c8b69',
                     label: 'Columns',
@@ -253,7 +253,7 @@ export const getSettings = (data) => {
                   components: [...new DesignerToolbarSettings()
                     .addSettingsInputRow({
                       id: 'data-source-s4gmBg31azZC0UjZjpfTm',
-                          inputs: [
+                      inputs: [
                         {
                           type: 'textField',
                           id: '4b3b0da0-f126-4e37-b5f5-568367dc008f',
@@ -283,7 +283,7 @@ export const getSettings = (data) => {
                     })
                     .addSettingsInputRow({
                       id: 'buttons-s4gmBg31azZC0UjZjpfTm',
-                          inputs: [{
+                      inputs: [{
                         id: nanoid(),
                         propertyName: 'footerButtons',
                         label: 'Buttons Type',
@@ -416,7 +416,7 @@ export const getSettings = (data) => {
                             parentId: 'fontStylePnl',
                             inline: true,
                             propertyName: 'font',
-                                      inputs: [
+                            inputs: [
                               {
                                 type: 'dropdown',
                                 id: 'fontFamily-s4gmBg31azZC0UjZjpfTm',
@@ -481,7 +481,7 @@ export const getSettings = (data) => {
                             id: 'dimensionsStyleRowWidth',
                             parentId: 'dimensionsStylePnl',
                             inline: true,
-                                      inputs: [
+                            inputs: [
                               {
                                 type: 'textField',
                                 id: 'width-s4gmBg31azZC0UjZjpfTm',
@@ -516,7 +516,7 @@ export const getSettings = (data) => {
                             id: 'dimensionsStyleRowHeight',
                             parentId: 'dimensionsStylePnl',
                             inline: true,
-                                      inputs: [
+                            inputs: [
                               {
                                 type: 'textField',
                                 id: 'height-s4gmBg31azZC0UjZjpfTm',
@@ -611,7 +611,7 @@ export const getSettings = (data) => {
                                 jsSetting: false,
                               }],
                               hidden: { _code: 'return  getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) !== "color";', _mode: 'code', _value: false } as any,
-                                        })
+                            })
                             .addSettingsInputRow({
                               id: "backgroundStyle-gradientColors",
                               parentId: "backgroundStylePnl",
@@ -625,7 +625,7 @@ export const getSettings = (data) => {
                               ],
                               hidden: { _code: 'return  getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) !== "gradient";', _mode: 'code', _value: false } as any,
                               hideLabel: true,
-                                        })
+                            })
                             .addSettingsInputRow({
                               id: "backgroundStyle-url",
                               parentId: "backgroundStylePnl",
@@ -637,7 +637,7 @@ export const getSettings = (data) => {
                                 label: "URL",
                               }],
                               hidden: { _code: 'return  getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) !== "url";', _mode: 'code', _value: false } as any,
-                                        })
+                            })
                             .addSettingsInputRow({
                               id: "backgroundStyle-image",
                               parentId: 'backgroundStylePnl',
@@ -649,12 +649,12 @@ export const getSettings = (data) => {
                                 jsSetting: false,
                               }],
                               hidden: { _code: 'return  getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) !== "image";', _mode: 'code', _value: false } as any,
-                                        })
+                            })
                             .addSettingsInputRow({
                               id: "backgroundStyleRow-storedFile",
                               parentId: 'backgroundStylePnl',
                               hidden: { _code: 'return  getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) !== "storedFile";', _mode: 'code', _value: false } as any,
-                                          inputs: [
+                              inputs: [
                                 {
                                   type: 'textField',
                                   id: 'backgroundStyle-storedFile',
@@ -694,7 +694,7 @@ export const getSettings = (data) => {
                             .addSettingsInputRow({
                               id: 'backgroundStyleRow-repeat',
                               parentId: 'backgroundStyleRow',
-                                          inputs: [{
+                              inputs: [{
                                 type: 'radio',
                                 id: 'backgroundStyleRow-repeat-radio',
                                 label: 'Repeat',
@@ -724,7 +724,7 @@ export const getSettings = (data) => {
                             id: 'shadowStyleRow',
                             parentId: 'shadowStylePnl',
                             inline: true,
-                                      inputs: [
+                            inputs: [
                               {
                                 type: 'numberField',
                                 id: 'shadowStyleRow-offsetX',
@@ -806,7 +806,7 @@ export const getSettings = (data) => {
                         id: 'stylePnl-M500-911MFR',
                         components: [...new DesignerToolbarSettings()
                           .addSettingsInput({
-                                      id: 'custom-css-412c-8461-4c8d55e5c073',
+                            id: 'custom-css-412c-8461-4c8d55e5c073',
                             inputType: 'codeEditor',
                             propertyName: 'style',
                             label: 'Style',
@@ -816,52 +816,6 @@ export const getSettings = (data) => {
                         ]
                       }
                     })
-                    .addCollapsiblePanel({
-                      id: 'entityPickerDividerCollapsiblePanel',
-                      propertyName: 'entityPickerDivider',
-                      label: 'Entity Picker Divider',
-                      labelAlign: 'right',
-                      ghost: true,
-                      content: {
-                        id: 'entityPickerDividerPnl',
-                        components: [...new DesignerToolbarSettings()
-                          .addSettingsInputRow({
-                            id: nanoid(),
-                            parentId: 'entityPickerDividerPnl',
-                            inline: true,
-                            readOnly: false,
-                            inputs: [
-                              {
-                                id: nanoid(),
-                                type: 'textField',
-                                label: "Width",
-                                hideLabel: true,
-                                propertyName: 'dividerWidth',
-                              },
-                              {
-                                id: nanoid(),
-                                label: "Style",
-                                propertyName: 'dividerStyle',
-                                type: "dropdown",
-                                hideLabel: true,
-                                width: 60,
-                                readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
-                                dropdownOptions: borderStyles,
-                              },
-                              {
-                                id: nanoid(),
-                                label: `Color`,
-                                propertyName: 'dividerColor',
-                                type: "colorPicker",
-                                readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
-                                hideLabel: true,
-                              }
-                            ]
-                          })
-                          .toJson()
-                        ]
-                      }
-                    })
                     .toJson()]
               }).toJson()]
           },