@solidxai/core-ui 0.1.9-beta.9 → 0.1.9

package/dist/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -11,7 +11,7 @@ import { getExtensionComponent } from "../../../../../helpers/registry";
 import { SolidFormFieldWidgetProps, SolidFormWidgetProps } from "../../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../../components/common/SolidFieldTooltip";
 import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
-import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogTitle } from "../../../../shad-cn-ui/SolidDialog";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogDescription, SolidDialogHeader, SolidDialogTitle } from "../../../../shad-cn-ui/SolidDialog";
 import { SolidMessage } from "../../../../shad-cn-ui/SolidMessage";
 import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
 import styles from "../solidFields.module.css";
@@ -80,7 +80,7 @@ export class SolidRelationOneToManyField implements ISolidField {
 
         const fieldLayoutInfo = this.fieldContext.field;
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        const className = fieldLayoutInfo.attrs?.className || 'field w-full px-2 pt-2';
 
         const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
 
@@ -188,7 +188,7 @@ export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }:
     const router = useRouter();
 
     const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const className = fieldLayoutInfo.attrs?.className || 'field w-full px-2 pt-2';
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
     const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
     const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
@@ -320,21 +320,21 @@ export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }:
 
     return (
         <div>
-            {/* <div className="justify-content-center align-items-center"> */}
-            {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
-                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                    <SolidFieldTooltip fieldContext={fieldContext} />
-                </label>
-            }
+            <div className={styles.fieldWrapper}>
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        <SolidFieldTooltip fieldContext={fieldContext} />
+                    </label>
+                }
 
-            {/* {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>} */}
-            {listViewParams &&
-                <SolidListView key={refreshList.toString()}  {...listViewParams} handleAddClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} handleEditClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} />
-            }
-            {readOnlyPermission !== true && formViewParams &&
-                <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>
-            }
+                {listViewParams &&
+                    <SolidListView key={refreshList.toString()}  {...listViewParams} handleAddClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} handleEditClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} />
+                }
+                {readOnlyPermission !== true && formViewParams &&
+                    <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>
+                }
+            </div>
 
             <SolidDialog
                 open={showSaveParentEntityConfirmationPopup}
@@ -375,7 +375,7 @@ export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }:
     const fieldMetadata = fieldContext.fieldMetadata;
 
     const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const className = fieldLayoutInfo.attrs?.className || 'field w-full px-2 pt-2';
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
     const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
     const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
@@ -471,24 +471,20 @@ export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }:
 
 
     return (
-        <div>
-            {/* <div className="justify-content-center align-items-center"> */}
+        <div className={styles.fieldViewWrapper}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500"> *</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
                 </label>
             }
 
-            {/* {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>} */}
             {listViewParams &&
                 <SolidListView key={refreshList.toString()}  {...listViewParams} handleAddClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} handleEditClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} />
             }
             {readOnlyPermission !== true && formViewParams &&
                 <RenderSolidFormEmbededView fieldLayoutInfo={fieldLayoutInfo} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>
             }
-
-
         </div>
     );
 }
@@ -496,6 +492,8 @@ export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }:
 
 export const RenderSolidFormEmbededView = ({ fieldLayoutInfo, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams, handlePopupClose }: any) => {
     const router = useRouter();
+    const dialogTitle = `${formViewParams?.id && formViewParams.id !== "new" ? "Edit" : "Create"} ${fieldLayoutInfo?.attrs?.label ?? formViewParams?.modelName ?? "related record"}`;
+    const dialogDescription = `Manage the ${fieldLayoutInfo?.attrs?.label ?? formViewParams?.modelName ?? "related record"} form in this dialog.`;
 
     const params: FormViewParams = {
         moduleName: formViewParams.moduleName,
@@ -527,7 +525,7 @@ export const RenderSolidFormEmbededView = ({ fieldLayoutInfo, customCreateHandle
             <SolidDialog
                 open={visibleCreateRelationEntity}
                 onOpenChange={setvisibleCreateRelationEntity}
-                className="solid-dialog"
+                className="solid-dialog solid-inline-relation-dialog"
                 style={{
                     width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw",
                     height: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.height ?? "auto"
@@ -536,6 +534,10 @@ export const RenderSolidFormEmbededView = ({ fieldLayoutInfo, customCreateHandle
                 breakpoints={{ '1199px': '35rem', "767px": '85vw', "550px": '90vw' }}
 
             >
+                <SolidDialogHeader className="solid-sr-only">
+                    <SolidDialogTitle>{dialogTitle}</SolidDialogTitle>
+                    <SolidDialogDescription>{dialogDescription}</SolidDialogDescription>
+                </SolidDialogHeader>
                 {params &&
                     <SolidFormView {...params} />
                 }
@@ -548,7 +550,7 @@ export const RenderSolidFormEmbededView = ({ fieldLayoutInfo, customCreateHandle
 export const PseudoRelationOneToManyFormWidget = ({ formData, field, fieldsMetadata, viewMetadata, formViewData }: SolidFormWidgetProps) => {
 
     const fieldLayoutInfo = field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const className = fieldLayoutInfo.attrs?.className || 'field w-full px-2 pt-2';
     const fieldLabel = fieldLayoutInfo.attrs.label;
     const fieldDescription = fieldLayoutInfo.attrs.description;
     const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
@@ -681,7 +683,6 @@ export const PseudoRelationOneToManyFormWidget = ({ formData, field, fieldsMetad
 
     return (
         <div>
-            {/* <div className="justify-content-center align-items-center"> */}
             {showFieldLabel != false &&
                 <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
                     {/* {fieldMetadata.required && <span className="text-red-500"> *</span>} */}

package/dist/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog.js

@@ -32,6 +32,6 @@ export var InlineRelationEntityDialog = function (_a) {
     };
     var dialogWidth = (_g = (_f = (_e = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.inlineCreateLayout) === null || _e === void 0 ? void 0 : _e.attrs) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : "60vw";
     var dialogHeight = (_l = (_k = (_j = (_h = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _h === void 0 ? void 0 : _h.inlineCreateLayout) === null || _j === void 0 ? void 0 : _j.attrs) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : "auto";
-    return (_jsx(SolidDialog, { open: visible, onOpenChange: setVisible, className: "solid-dialog", style: { width: dialogWidth, height: dialogHeight }, children: _jsx(SolidDialogBody, { children: _jsx(SolidFormView, __assign({}, params)) }) }));
+    return (_jsx(SolidDialog, { open: visible, onOpenChange: setVisible, className: "solid-dialog solid-inline-relation-dialog", style: { width: dialogWidth, height: dialogHeight }, children: _jsx(SolidDialogBody, { children: _jsx(SolidFormView, __assign({}, params)) }) }));
 };
 //# sourceMappingURL=InlineRelationEntityDialog.js.map

package/dist/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineRelationEntityDialog.js","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACL,WAAW,EACX,eAAe,GAChB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,aAAa,MAAM,yDAAyD,CAAC;AAEpF,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,EAAoD;;QAAlD,OAAO,aAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA;IACtF,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAE3C,IAAM,MAAM,GAAG;QACb,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,uBAAuB;QAC9D,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,IAAI;QACb,YAAY,EAAE,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,kBAAkB;QACxD,mBAAmB,EAAE,UAAC,MAAW;YAC/B,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC;QACD,oBAAoB,EAAE,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,oBAAoB;QAClE,gBAAgB,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB;QACzC,SAAS,EAAE,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,2BAA2B,CAAC;KAC7E,CAAC;IAEF,IAAM,WAAW,GAAG,MAAA,MAAA,MAAA,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,kBAAkB,0CAAE,KAAK,0CAAE,KAAK,mCAAI,MAAM,CAAC;IACvF,IAAM,YAAY,GAAG,MAAA,MAAA,MAAA,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,kBAAkB,0CAAE,KAAK,0CAAE,MAAM,mCAAI,MAAM,CAAC;IAEzF,OAAO,CACL,KAAC,WAAW,IACV,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,UAAU,EACxB,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,YAEnD,KAAC,eAAe,cACd,KAAC,aAAa,eAAK,MAAM,EAAI,GACb,GACN,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  SolidDialog,\n  SolidDialogBody,\n} from \"../../../../../../shad-cn-ui/SolidDialog\";\nimport { camelCase } from \"lodash\";\nimport SolidFormView from \"../../../../../../../components/core/form/SolidFormView\";\n\nexport const InlineRelationEntityDialog = ({ visible, setVisible, fieldContext, onCreate }: any) => {\n  const fieldLayoutInfo = fieldContext.field;\n\n  const params = {\n    moduleName: fieldContext.fieldMetadata.relationModelModuleName,\n    id: \"new\",\n    embeded: true,\n    customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,\n    customCreateHandler: (values: any) => {\n      setVisible(false);\n      onCreate(values);\n    },\n    inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,\n    handlePopupClose: () => setVisible(false),\n    modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)\n  };\n\n  const dialogWidth = fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? \"60vw\";\n  const dialogHeight = fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.height ?? \"auto\";\n\n  return (\n    <SolidDialog\n      open={visible}\n      onOpenChange={setVisible}\n      className=\"solid-dialog\"\n      style={{ width: dialogWidth, height: dialogHeight }}\n    >\n      <SolidDialogBody>\n        <SolidFormView {...params} />\n      </SolidDialogBody>\n    </SolidDialog>\n  );\n};\n"]}
+{"version":3,"file":"InlineRelationEntityDialog.js","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACL,WAAW,EACX,eAAe,GAChB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,aAAa,MAAM,yDAAyD,CAAC;AAEpF,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,EAAoD;;QAAlD,OAAO,aAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA;IACtF,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAE3C,IAAM,MAAM,GAAG;QACb,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,uBAAuB;QAC9D,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,IAAI;QACb,YAAY,EAAE,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,kBAAkB;QACxD,mBAAmB,EAAE,UAAC,MAAW;YAC/B,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC;QACD,oBAAoB,EAAE,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,oBAAoB;QAClE,gBAAgB,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB;QACzC,SAAS,EAAE,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,2BAA2B,CAAC;KAC7E,CAAC;IAEF,IAAM,WAAW,GAAG,MAAA,MAAA,MAAA,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,kBAAkB,0CAAE,KAAK,0CAAE,KAAK,mCAAI,MAAM,CAAC;IACvF,IAAM,YAAY,GAAG,MAAA,MAAA,MAAA,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,kBAAkB,0CAAE,KAAK,0CAAE,MAAM,mCAAI,MAAM,CAAC;IAEzF,OAAO,CACL,KAAC,WAAW,IACV,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,UAAU,EACxB,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,YAEnD,KAAC,eAAe,cACd,KAAC,aAAa,eAAK,MAAM,EAAI,GACb,GACN,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  SolidDialog,\n  SolidDialogBody,\n} from \"../../../../../../shad-cn-ui/SolidDialog\";\nimport { camelCase } from \"lodash\";\nimport SolidFormView from \"../../../../../../../components/core/form/SolidFormView\";\n\nexport const InlineRelationEntityDialog = ({ visible, setVisible, fieldContext, onCreate }: any) => {\n  const fieldLayoutInfo = fieldContext.field;\n\n  const params = {\n    moduleName: fieldContext.fieldMetadata.relationModelModuleName,\n    id: \"new\",\n    embeded: true,\n    customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,\n    customCreateHandler: (values: any) => {\n      setVisible(false);\n      onCreate(values);\n    },\n    inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,\n    handlePopupClose: () => setVisible(false),\n    modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)\n  };\n\n  const dialogWidth = fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? \"60vw\";\n  const dialogHeight = fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.height ?? \"auto\";\n\n  return (\n    <SolidDialog\n      open={visible}\n      onOpenChange={setVisible}\n      className=\"solid-dialog solid-inline-relation-dialog\"\n      style={{ width: dialogWidth, height: dialogHeight }}\n    >\n      <SolidDialogBody>\n        <SolidFormView {...params} />\n      </SolidDialogBody>\n    </SolidDialog>\n  );\n};\n"]}

package/dist/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog.tsx

@@ -29,7 +29,7 @@ export const InlineRelationEntityDialog = ({ visible, setVisible, fieldContext,
     <SolidDialog
       open={visible}
       onOpenChange={setVisible}
-      className="solid-dialog"
+      className="solid-dialog solid-inline-relation-dialog"
       style={{ width: dialogWidth, height: dialogHeight }}
     >
       <SolidDialogBody>

package/dist/components/core/form/fields/widgets/SolidAiInteractionMessageFieldFormWidget.js

@@ -24,7 +24,7 @@ export var SolidAiInteractionMessageFieldFormWidget = function (_a) {
                 return _jsx(PlainTextDisplay, { message: value });
         }
     };
-    return (_jsxs("div", { className: "mt-2 flex-column", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), value && renderContent()] }));
+    return (_jsxs("div", { className: "mt-2 flex flex-col", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), value && renderContent()] }));
 };
 export var MarkdownDisplay = function (_a) {
     var _b, _c;

package/dist/components/core/form/fields/widgets/SolidAiInteractionMessageFieldFormWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidAiInteractionMessageFieldFormWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidAiInteractionMessageFieldFormWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport MarkdownViewer from \"../../../../../components/common/MarkdownViewer\";\nimport ReactCodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { javascript } from '@codemirror/lang-javascript';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { ERROR_MESSAGES } from \"../../../../../constants/error-messages\";\n\n\nexport const SolidAiInteractionMessageFieldFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n    const contentType = formik?.values?.contentType ? formik?.values?.contentType : \"markdown\"\n\n    const renderContent = () => {\n\n        switch (contentType) {\n            case 'json':\n                return (\n                    <JsonDisplay message={value} />\n                )\n            case 'markdown':\n                return (\n                    <MarkdownDisplay message={value} />\n                )\n            case 'plain_text':\n            default:\n                return <PlainTextDisplay message={value} />\n        }\n    }\n\n    return (\n        <div className=\"mt-2 flex-column\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n            {value && renderContent()}\n        </div>\n    );\n}\n\n\n\nexport interface MarkdownDisplayProps {\n    message: any\n}\n\nexport const MarkdownDisplay: React.FC<MarkdownDisplayProps> = ({ message }) => {\n    // const jsonMsg = JSON.parse(interaction.message);\n    // const markdown = jsonMsg.data;\n    let jsonMsg: any;\n    let markdown: string;\n\n    try {\n        if (typeof message === \"string\") {\n            try {\n                jsonMsg = JSON.parse(message.trim());\n                markdown = jsonMsg?.data ?? \"\";\n            } catch (jsonErr) {\n                // Not valid JSON → treat the raw string as markdown\n                markdown = message.trim();\n            }\n        } else if (typeof message === \"object\" && message !== null) {\n            // Already an object\n            jsonMsg = message;\n            markdown = jsonMsg?.data ?? \"\";\n        } else {\n            // Fallback for other types\n            markdown = String(message ?? \"\");\n        }\n    } catch (err: any) {\n        // Worst-case fallback: put the error string in markdown\n        markdown = ERROR_MESSAGES.INTERATCTION_MESSGAE(err?.message,err);\n        \n    }\n    // 🔧 Normalize escaped newlines, tabs, and quotes\n    if (markdown.includes(\"\\\\n\")) {\n        markdown = markdown\n            .replace(/\\\\n/g, \"\\n\")\n            .replace(/\\\\t/g, \"\\t\")\n            .replace(/\\\\r/g, \"\")\n            .replace(/\\\\\"/g, '\"');\n    }\n\n    // ✅ markdown is now clean and render-ready\n\n    return (\n        <div className={`p-3 `} style={{ width: '100%' }}>\n            <MarkdownViewer data={markdown} />\n        </div>\n    )\n}\n\n\nexport interface JsonDisplayProps {\n    message: any\n}\n\nexport const JsonDisplay: React.FC<JsonDisplayProps> = ({ message }) => {\n    let formattedJson = ''\n    try {\n        const parsed = JSON.parse(message)\n        formattedJson = JSON.stringify(parsed, null, 2)\n    } catch (e) {\n        // formattedJson = 'Invalid JSON'\n        formattedJson = message;\n    }\n\n    return (\n        <div className={`p-3 `} style={{ width: '100%' }}>\n            <ReactCodeMirror\n                value={formattedJson}\n                style={{ fontSize: '10px' }}\n                theme={oneDark}\n                extensions={[javascript(), EditorView.lineWrapping]}\n            />\n        </div>\n    )\n}\n\n\n\nexport interface PlainTextDisplayProps {\n    message: any\n}\n\nexport const PlainTextDisplay: React.FC<PlainTextDisplayProps> = ({ message }) => {\n    return (\n        <div className={`p-3`}>\n            {message}\n        </div>\n    )\n}\n"]}
+{"version":3,"file":"SolidAiInteractionMessageFieldFormWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidAiInteractionMessageFieldFormWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport MarkdownViewer from \"../../../../../components/common/MarkdownViewer\";\nimport ReactCodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { javascript } from '@codemirror/lang-javascript';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { ERROR_MESSAGES } from \"../../../../../constants/error-messages\";\n\n\nexport const SolidAiInteractionMessageFieldFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n    const contentType = formik?.values?.contentType ? formik?.values?.contentType : \"markdown\"\n\n    const renderContent = () => {\n\n        switch (contentType) {\n            case 'json':\n                return (\n                    <JsonDisplay message={value} />\n                )\n            case 'markdown':\n                return (\n                    <MarkdownDisplay message={value} />\n                )\n            case 'plain_text':\n            default:\n                return <PlainTextDisplay message={value} />\n        }\n    }\n\n    return (\n        <div className=\"mt-2 flex flex-col\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n            {value && renderContent()}\n        </div>\n    );\n}\n\n\n\nexport interface MarkdownDisplayProps {\n    message: any\n}\n\nexport const MarkdownDisplay: React.FC<MarkdownDisplayProps> = ({ message }) => {\n    // const jsonMsg = JSON.parse(interaction.message);\n    // const markdown = jsonMsg.data;\n    let jsonMsg: any;\n    let markdown: string;\n\n    try {\n        if (typeof message === \"string\") {\n            try {\n                jsonMsg = JSON.parse(message.trim());\n                markdown = jsonMsg?.data ?? \"\";\n            } catch (jsonErr) {\n                // Not valid JSON → treat the raw string as markdown\n                markdown = message.trim();\n            }\n        } else if (typeof message === \"object\" && message !== null) {\n            // Already an object\n            jsonMsg = message;\n            markdown = jsonMsg?.data ?? \"\";\n        } else {\n            // Fallback for other types\n            markdown = String(message ?? \"\");\n        }\n    } catch (err: any) {\n        // Worst-case fallback: put the error string in markdown\n        markdown = ERROR_MESSAGES.INTERATCTION_MESSGAE(err?.message,err);\n        \n    }\n    // 🔧 Normalize escaped newlines, tabs, and quotes\n    if (markdown.includes(\"\\\\n\")) {\n        markdown = markdown\n            .replace(/\\\\n/g, \"\\n\")\n            .replace(/\\\\t/g, \"\\t\")\n            .replace(/\\\\r/g, \"\")\n            .replace(/\\\\\"/g, '\"');\n    }\n\n    // ✅ markdown is now clean and render-ready\n\n    return (\n        <div className={`p-3 `} style={{ width: '100%' }}>\n            <MarkdownViewer data={markdown} />\n        </div>\n    )\n}\n\n\nexport interface JsonDisplayProps {\n    message: any\n}\n\nexport const JsonDisplay: React.FC<JsonDisplayProps> = ({ message }) => {\n    let formattedJson = ''\n    try {\n        const parsed = JSON.parse(message)\n        formattedJson = JSON.stringify(parsed, null, 2)\n    } catch (e) {\n        // formattedJson = 'Invalid JSON'\n        formattedJson = message;\n    }\n\n    return (\n        <div className={`p-3 `} style={{ width: '100%' }}>\n            <ReactCodeMirror\n                value={formattedJson}\n                style={{ fontSize: '10px' }}\n                theme={oneDark}\n                extensions={[javascript(), EditorView.lineWrapping]}\n            />\n        </div>\n    )\n}\n\n\n\nexport interface PlainTextDisplayProps {\n    message: any\n}\n\nexport const PlainTextDisplay: React.FC<PlainTextDisplayProps> = ({ message }) => {\n    return (\n        <div className={`p-3`}>\n            {message}\n        </div>\n    )\n}\n"]}

package/dist/components/core/form/fields/widgets/SolidAiInteractionMessageFieldFormWidget.tsx

@@ -34,7 +34,7 @@ export const SolidAiInteractionMessageFieldFormWidget = ({ formik, fieldContext
     }
 
     return (
-        <div className="mt-2 flex-column">
+        <div className="mt-2 flex flex-col">
             <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
             {value && renderContent()}
         </div>

package/dist/components/core/form/fields/widgets/SolidAiInteractionMetadataFieldFormWidget.js

@@ -84,6 +84,6 @@ export var SolidAiInteractionMetadataFieldFormWidget = function (_a) {
             content: (value === null || value === void 0 ? void 0 : value.tokenUsage) ? (_jsx("div", { className: "p-3 w-full", children: _jsx(ReactCodeMirror, { value: JSON.stringify(value.tokenUsage, null, 2), style: { fontSize: '10px' }, theme: oneDark, extensions: [javascript(), EditorView.lineWrapping] }) })) : null,
         },
     ];
-    return (_jsx("div", { className: "mt-2 flex-column", children: _jsx(SolidTabGroup, { tabs: tabs, value: activeTab, onValueChange: setActiveTab }) }));
+    return (_jsx("div", { className: "mt-2 flex flex-col", children: _jsx(SolidTabGroup, { tabs: tabs, value: activeTab, onValueChange: setActiveTab }) }));
 };
 //# sourceMappingURL=SolidAiInteractionMetadataFieldFormWidget.js.map

package/dist/components/core/form/fields/widgets/SolidAiInteractionMetadataFieldFormWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidAiInteractionMetadataFieldFormWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidAiInteractionMetadataFieldFormWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useMemo, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport MarkdownViewer from \"../../../../../components/common/MarkdownViewer\";\nimport { SolidButton } from \"../../../../shad-cn-ui/SolidButton\";\nimport { SolidIcon } from \"../../../../shad-cn-ui\";\nimport { SolidTabGroup } from \"../../../../../components/shad-cn-ui/SolidTabs\";\nimport ReactCodeMirror, { EditorView, oneDark } from \"@uiw/react-codemirror\";\nimport { javascript } from \"@codemirror/lang-javascript\";\n\nexport const SolidAiInteractionMetadataFieldFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n\n    const [activeTab, setActiveTab] = useState(\"chunks\");\n\n    const chunkContent = useMemo(() => {\n        if (!value?.chunks?.length) return null;\n        return (\n            <div className=\"solid-layout-accordion flex flex-col gap-2\">\n                {value.chunks.map((c: any, index: number) => {\n                    let processedText = c.text || '';\n                    const meta = c.metadata || {};\n\n                    const isDoc = !!meta.path || meta.source === \"docusaurus\";\n                    const isModule = meta.type === \"module\";\n                    const isModel = meta.type === \"model\";\n\n                    if (isDoc) {\n                        processedText = processedText\n                            .replace(/^Document Title:\\s*/i, \"\")\n                            .replace(/^Text:\\s*/i, \"\")\n                            .trim();\n                    }\n\n                    if (isModel) {\n                        const match = processedText.match(/Full model metadata json:\\s*\\n?({[\\s\\S]+})/);\n                        if (match) {\n                            try {\n                                const pretty = JSON.stringify(JSON.parse(match[1]), null, 2);\n                                processedText = processedText.replace(\n                                    match[0],\n                                    `**Full model metadata json:**\\n\\n\\`\\`\\`json\\n${pretty}\\n\\`\\`\\``\n                                );\n                            } catch {\n                                processedText = processedText.replace(\n                                    match[0],\n                                    `**Full model metadata json (raw):**\\n\\n\\`\\`\\`\\n${match[1]}\\n\\`\\`\\``\n                                );\n                            }\n                        }\n                    }\n\n                    let headerTitle = \"Unknown\";\n                    if (isModule) {\n                        headerTitle = `Module: ${meta.moduleName} (${meta.modelCount} models)`;\n                    } else if (isModel) {\n                        headerTitle = `Model: ${meta.modelName} (${meta.fieldCount} fields)`;\n                    } else if (isDoc) {\n                        headerTitle = `Doc: ${meta.title || meta.doc_title || meta.path}`;\n                    }\n\n                    const openDoc = (e: any) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        if (isDoc) {\n                            const cleanPath = (meta.path || \"\").replace(/\\.md$/, \"\");\n                            const url = `https://docs.solidxai.com/docs/${cleanPath}`;\n                            window.open(url, \"_blank\");\n                        }\n                    };\n\n                    return (\n                        <details key={c.id ?? index} className=\"solid-accordion-item rounded-md border border-border bg-card\" open={index === 0}>\n                            <summary className=\"solid-accordion-header flex justify-between items-center gap-2 p-3 cursor-pointer\">\n                                <span className=\"font-medium\">{headerTitle}</span>\n                                {isDoc && (\n                                    <SolidButton variant=\"ghost\" size=\"sm\" onClick={openDoc} aria-label=\"Open documentation\">\n                                        <SolidIcon name=\"si-external-link\" aria-hidden />\n                                    </SolidButton>\n                                )}\n                            </summary>\n                            <div className=\"solid-accordion-content p-3 pt-0\">\n                                <MarkdownViewer data={processedText} />\n                            </div>\n                        </details>\n                    );\n                })}\n            </div>\n        );\n    }, [value?.chunks]);\n\n    const tabs = [\n        { value: \"chunks\", label: \"Chunks\", content: chunkContent },\n        {\n            value: \"system\",\n            label: \"System Prompt\",\n            content: value?.system_prompt ? <MarkdownViewer data={value.system_prompt} /> : null,\n        },\n        {\n            value: \"user\",\n            label: \"User Prompt\",\n            content: value?.user_prompt ? <MarkdownViewer data={value.user_prompt} /> : null,\n        },\n        {\n            value: \"usage\",\n            label: \"Token Usage\",\n            content: value?.tokenUsage ? (\n                <div className=\"p-3 w-full\">\n                    <ReactCodeMirror\n                        value={JSON.stringify(value.tokenUsage, null, 2)}\n                        style={{ fontSize: '10px' }}\n                        theme={oneDark}\n                        extensions={[javascript(), EditorView.lineWrapping]}\n                    />\n                </div>\n            ) : null,\n        },\n    ];\n\n    return (\n        <div className=\"mt-2 flex-column\">\n            <SolidTabGroup tabs={tabs} value={activeTab} onValueChange={setActiveTab} />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidAiInteractionMetadataFieldFormWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidAiInteractionMetadataFieldFormWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useMemo, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport MarkdownViewer from \"../../../../../components/common/MarkdownViewer\";\nimport { SolidButton } from \"../../../../shad-cn-ui/SolidButton\";\nimport { SolidIcon } from \"../../../../shad-cn-ui\";\nimport { SolidTabGroup } from \"../../../../../components/shad-cn-ui/SolidTabs\";\nimport ReactCodeMirror, { EditorView, oneDark } from \"@uiw/react-codemirror\";\nimport { javascript } from \"@codemirror/lang-javascript\";\n\nexport const SolidAiInteractionMetadataFieldFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n\n    const [activeTab, setActiveTab] = useState(\"chunks\");\n\n    const chunkContent = useMemo(() => {\n        if (!value?.chunks?.length) return null;\n        return (\n            <div className=\"solid-layout-accordion flex flex-col gap-2\">\n                {value.chunks.map((c: any, index: number) => {\n                    let processedText = c.text || '';\n                    const meta = c.metadata || {};\n\n                    const isDoc = !!meta.path || meta.source === \"docusaurus\";\n                    const isModule = meta.type === \"module\";\n                    const isModel = meta.type === \"model\";\n\n                    if (isDoc) {\n                        processedText = processedText\n                            .replace(/^Document Title:\\s*/i, \"\")\n                            .replace(/^Text:\\s*/i, \"\")\n                            .trim();\n                    }\n\n                    if (isModel) {\n                        const match = processedText.match(/Full model metadata json:\\s*\\n?({[\\s\\S]+})/);\n                        if (match) {\n                            try {\n                                const pretty = JSON.stringify(JSON.parse(match[1]), null, 2);\n                                processedText = processedText.replace(\n                                    match[0],\n                                    `**Full model metadata json:**\\n\\n\\`\\`\\`json\\n${pretty}\\n\\`\\`\\``\n                                );\n                            } catch {\n                                processedText = processedText.replace(\n                                    match[0],\n                                    `**Full model metadata json (raw):**\\n\\n\\`\\`\\`\\n${match[1]}\\n\\`\\`\\``\n                                );\n                            }\n                        }\n                    }\n\n                    let headerTitle = \"Unknown\";\n                    if (isModule) {\n                        headerTitle = `Module: ${meta.moduleName} (${meta.modelCount} models)`;\n                    } else if (isModel) {\n                        headerTitle = `Model: ${meta.modelName} (${meta.fieldCount} fields)`;\n                    } else if (isDoc) {\n                        headerTitle = `Doc: ${meta.title || meta.doc_title || meta.path}`;\n                    }\n\n                    const openDoc = (e: any) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        if (isDoc) {\n                            const cleanPath = (meta.path || \"\").replace(/\\.md$/, \"\");\n                            const url = `https://docs.solidxai.com/docs/${cleanPath}`;\n                            window.open(url, \"_blank\");\n                        }\n                    };\n\n                    return (\n                        <details key={c.id ?? index} className=\"solid-accordion-item rounded-md border border-border bg-card\" open={index === 0}>\n                            <summary className=\"solid-accordion-header flex justify-between items-center gap-2 p-3 cursor-pointer\">\n                                <span className=\"font-medium\">{headerTitle}</span>\n                                {isDoc && (\n                                    <SolidButton variant=\"ghost\" size=\"sm\" onClick={openDoc} aria-label=\"Open documentation\">\n                                        <SolidIcon name=\"si-external-link\" aria-hidden />\n                                    </SolidButton>\n                                )}\n                            </summary>\n                            <div className=\"solid-accordion-content p-3 pt-0\">\n                                <MarkdownViewer data={processedText} />\n                            </div>\n                        </details>\n                    );\n                })}\n            </div>\n        );\n    }, [value?.chunks]);\n\n    const tabs = [\n        { value: \"chunks\", label: \"Chunks\", content: chunkContent },\n        {\n            value: \"system\",\n            label: \"System Prompt\",\n            content: value?.system_prompt ? <MarkdownViewer data={value.system_prompt} /> : null,\n        },\n        {\n            value: \"user\",\n            label: \"User Prompt\",\n            content: value?.user_prompt ? <MarkdownViewer data={value.user_prompt} /> : null,\n        },\n        {\n            value: \"usage\",\n            label: \"Token Usage\",\n            content: value?.tokenUsage ? (\n                <div className=\"p-3 w-full\">\n                    <ReactCodeMirror\n                        value={JSON.stringify(value.tokenUsage, null, 2)}\n                        style={{ fontSize: '10px' }}\n                        theme={oneDark}\n                        extensions={[javascript(), EditorView.lineWrapping]}\n                    />\n                </div>\n            ) : null,\n        },\n    ];\n\n    return (\n        <div className=\"mt-2 flex flex-col\">\n            <SolidTabGroup tabs={tabs} value={activeTab} onValueChange={setActiveTab} />\n        </div>\n    );\n}\n"]}

package/dist/components/core/form/fields/widgets/SolidAiInteractionMetadataFieldFormWidget.tsx

@@ -123,7 +123,7 @@ export const SolidAiInteractionMetadataFieldFormWidget = ({ formik, fieldContext
     ];
 
     return (
-        <div className="mt-2 flex-column">
+        <div className="mt-2 flex flex-col">
             <SolidTabGroup tabs={tabs} value={activeTab} onValueChange={setActiveTab} />
         </div>
     );

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.js

@@ -77,28 +77,28 @@ export var SolidIconEditWidget = function (_a) {
             .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
             .join(' ');
     };
-    return (_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: fieldLabel }), _jsxs("div", { className: "flex align-items-end gap-3 mt-2", children: [_jsx("div", { style: { display: 'inline-block' }, children: selectedIcon ? (
+    return (_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: fieldLabel }), _jsxs("div", { className: "flex items-end gap-4 mt-2", children: [_jsx("div", { style: { display: 'inline-block' }, children: selectedIcon ? (
                         // <Button
                         //     type="button"
                         //     icon={<span className={`material-symbols-outlined`}>{selectedIcon}</span>}
                         //     onClick={() => setOpenIconDialog(true)}
                         //     outlined
                         // />
-                        _jsxs("div", { children: [_jsx("span", { className: "material-symbols-outlined", style: { fontSize: 48, cursor: 'pointer' }, onClick: function () { return setOpenIconDialog(true); }, children: selectedIcon }), _jsx("p", { className: "mb-0 text-center", children: formatIconLabel(selectedIcon) })] })) : (_jsx(SolidButton, { type: "button", size: "sm", variant: "outline", onClick: function () { return setOpenIconDialog(true); }, children: "Select Icon" })) }), selectedIcon && (_jsx("div", { children: _jsx(SolidButton, { type: "button", variant: "ghost", className: "ml-2", onClick: handleRemoveIcon, children: "Remove" }) }))] }), _jsxs(SolidDialog, { open: openIconDialog, onOpenChange: setOpenIconDialog, className: "solid-icon-dialog p-0", style: { width: '70vw', height: '70vh', borderRadius: 6 }, showHeader: false, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, children: [_jsxs(SolidDialogHeader, { children: [_jsx(SolidDialogTitle, { children: "Select Icon" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { className: "p-0", children: _jsxs("div", { className: "grid m-0 flex-column md:flex-row ", children: [_jsx("div", { className: "col-12 lg:col-3 p-0", children: _jsx("div", { className: "flex flex-column justify-content-between p-3 lg:p-4", style: { height: '100%' }, children: _jsxs("div", { className: "", children: [_jsx("p", { className: "font-medium", children: "Category" }), _jsx("div", { style: { marginBottom: "1rem", display: "flex", gap: "1rem", flexWrap: "wrap" }, className: "solid-icon-category-wrapper", children: tabs.map(function (tab) { return (_jsx(SolidButton, { type: 'button', size: "sm", onClick: function () {
+                        _jsxs("div", { children: [_jsx("span", { className: "material-symbols-outlined", style: { fontSize: 48, cursor: 'pointer' }, onClick: function () { return setOpenIconDialog(true); }, children: selectedIcon }), _jsx("p", { className: "mb-0 text-center", children: formatIconLabel(selectedIcon) })] })) : (_jsx(SolidButton, { type: "button", size: "sm", variant: "outline", onClick: function () { return setOpenIconDialog(true); }, children: "Select Icon" })) }), selectedIcon && (_jsx("div", { children: _jsx(SolidButton, { type: "button", variant: "ghost", className: "ml-2", onClick: handleRemoveIcon, children: "Remove" }) }))] }), _jsxs(SolidDialog, { open: openIconDialog, onOpenChange: setOpenIconDialog, className: "solid-icon-dialog p-0", style: { width: '70vw', height: '70vh', borderRadius: 6 }, showHeader: false, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, children: [_jsxs(SolidDialogHeader, { children: [_jsx(SolidDialogTitle, { children: "Select Icon" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { className: "p-0", children: _jsxs("div", { className: "flex flex-wrap -mx-2 -mt-2 m-0 flex-col md:flex-row", children: [_jsx("div", { className: "w-full lg:w-1/4 px-0 pt-0", children: _jsx("div", { className: "flex flex-col justify-between p-4 lg:p-6", style: { height: '100%' }, children: _jsxs("div", { className: "", children: [_jsx("p", { className: "font-medium", children: "Category" }), _jsx("div", { style: { marginBottom: "1rem", display: "flex", gap: "1rem", flexWrap: "wrap" }, className: "solid-icon-category-wrapper", children: tabs.map(function (tab) { return (_jsx(SolidButton, { type: 'button', size: "sm", onClick: function () {
                                                             setSelectedCategory(tab);
                                                             setSearchIcon("");
                                                         }, variant: selectedCategory === tab ? "primary" : "outline", style: {
                                                             padding: "8px 16px",
                                                             fontSize: 12
-                                                        }, className: "solid-icon-category", children: tab }, tab)); }) })] }) }) }), _jsx("div", { className: "col-6 p-0 flex lg:hidden", children: _jsxs("div", { className: "p-3 lg:p-4", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-content-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: formatIconLabel(selectedIcon) })] }))] }) }), _jsxs("div", { className: "col-12 lg:col-6 p-0", style: { borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }, children: [_jsx("div", { className: "px-3 lg:px-4 pt-3 lg:pt-4", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Select Icon" }), _jsx(SolidInput, { type: "text", placeholder: "Search icons in \"".concat(selectedCategory, "\""), value: searchIcon, onChange: function (e) { return setSearchIcon(e.target.value); }, className: "w-full" })] }) }), _jsx("div", { style: { height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }, className: "px-4 pb-3 mt-4", children: _jsx("div", { className: "grid", children: filteredIcons.length > 0 ? (filteredIcons.map(function (_a) {
+                                                        }, className: "solid-icon-category", children: tab }, tab)); }) })] }) }) }), _jsx("div", { className: "w-1/2 px-0 pt-0 flex lg:hidden", children: _jsxs("div", { className: "p-4 lg:p-6", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: formatIconLabel(selectedIcon) })] }))] }) }), _jsxs("div", { className: "w-full lg:w-1/2 px-0 pt-0", style: { borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }, children: [_jsx("div", { className: "px-4 lg:px-6 pt-4 lg:pt-6", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Select Icon" }), _jsx(SolidInput, { type: "text", placeholder: "Search icons in \"".concat(selectedCategory, "\""), value: searchIcon, onChange: function (e) { return setSearchIcon(e.target.value); }, className: "w-full" })] }) }), _jsx("div", { style: { height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }, className: "px-6 pb-4 mt-6", children: _jsx("div", { className: "flex flex-wrap -mx-2 -mt-2", children: filteredIcons.length > 0 ? (filteredIcons.map(function (_a) {
                                                     var icon = _a.icon, category = _a.category;
-                                                    return (_jsx("div", { className: "col-3", children: _jsxs("div", { className: "w-full flex flex-column align-items-center justify-content-center gap-3", children: [_jsx("span", { className: "material-symbols-outlined", style: {
+                                                    return (_jsx("div", { className: "w-1/4 px-2 pt-2", children: _jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-4", children: [_jsx("span", { className: "material-symbols-outlined", style: {
                                                                         fontSize: 32,
                                                                         cursor: "pointer",
                                                                         padding: "8px",
                                                                         border: selectedIcon === icon ? "2px solid var(--primary-color)" : "2px solid transparent",
                                                                         borderRadius: "6px",
                                                                     }, onClick: function () { return handleSelectIcon(icon); }, title: "".concat(icon, " (").concat(category, ")"), children: icon }), _jsx("p", { className: 'mb-0 mt-1 text-center', children: formatIconLabel(icon) })] }) }, icon));
-                                                })) : (_jsx("p", { className: "mt", children: "No icons found." })) }) })] }), _jsx("div", { className: "col-3 p-0 hidden lg:flex", children: _jsxs("div", { className: "p-3 lg:p-4", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-content-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: formatIconLabel(selectedIcon) })] }))] }) })] }) }), _jsxs(SolidDialogFooter, { className: "gap-3", children: [_jsx(SolidButton, { type: "button", size: "sm", onClick: function () { return setOpenIconDialog(false); }, children: "Select" }), _jsx(SolidButton, { type: "button", size: "sm", variant: "outline", onClick: function () { return setOpenIconDialog(false); }, children: "Cancel" })] })] })] }));
+                                                })) : (_jsx("p", { className: "mt", children: "No icons found." })) }) })] }), _jsx("div", { className: "w-1/4 px-0 pt-0 hidden lg:flex", children: _jsxs("div", { className: "p-4 lg:p-6", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: formatIconLabel(selectedIcon) })] }))] }) })] }) }), _jsxs(SolidDialogFooter, { className: "gap-4", children: [_jsx(SolidButton, { type: "button", size: "sm", onClick: function () { return setOpenIconDialog(false); }, children: "Select" }), _jsx(SolidButton, { type: "button", size: "sm", variant: "outline", onClick: function () { return setOpenIconDialog(false); }, children: "Cancel" })] })] })] }));
 };
 //# sourceMappingURL=SolidIconEditWidget.js.map

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidIconEditWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconEditWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { solidIcons } from \"../../../../../helpers/solidIcons\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { SolidButton } from \"../../../../shad-cn-ui/SolidButton\";\nimport {\n    SolidDialog,\n    SolidDialogBody,\n    SolidDialogClose,\n    SolidDialogFooter,\n    SolidDialogHeader,\n    SolidDialogTitle,\n} from \"../../../../shad-cn-ui/SolidDialog\";\nimport { SolidInput } from \"../../../../shad-cn-ui/SolidInput\";\nimport { useEffect, useState } from \"react\";\n\nexport const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldName = fieldLayoutInfo?.attrs?.name;\n\n    const [openIconDialog, setOpenIconDialog] = useState(false);\n    const [selectedCategory, setSelectedCategory] = useState(\"All\");\n    const [searchIcon, setSearchIcon] = useState(\"\");\n    const [selectedIcon, setSelectedIcon] = useState(formik.values?.[fieldName] || \"\");\n\n    // const [iconVariant, setIconVariant] = useState(formik.values.iconVariant || \"outlined\");\n\n    // const iconVariants = [\n    //     { label: \"Outlined\", value: \"outlined\" },\n    //     { label: \"Rounded\", value: \"rounded\" },\n    //     { label: \"Sharp\", value: \"sharp\" }\n    // ];\n\n    const allIcons = solidIcons.flatMap(({ category, icons }) =>\n        icons.map((icon) => ({ icon, category }))\n    );\n\n    const filteredIcons = (selectedCategory === \"All\" ? allIcons :\n        allIcons.filter((i) => i.category === selectedCategory)\n    ).filter(({ icon }) => icon.toLowerCase().includes(searchIcon.toLowerCase()));\n\n    const tabs = [\"All\", ...solidIcons.map((c) => c.category)];\n\n    useEffect(() => {\n        if (openIconDialog) {\n            setSelectedIcon(formik?.values?.[fieldName] ?? \"\");\n            // setIconVariant(formik.values.iconVariant ?? \"outlined\");\n        }\n    }, [openIconDialog]);\n\n    const handleSelectIcon = (icon: string) => {\n        setSelectedIcon(icon);\n        // setIconVariant(variant)\n        fieldContext.onChange(\n            {\n                target: {\n                    name: fieldName,\n                    value: icon,\n                    type: \"text\",\n                },\n            } as any,\n            \"onFieldChange\"\n        );\n        // formik.setFieldValue(\"iconVariant\", variant);\n    };\n\n    const handleRemoveIcon = () => {\n        setSelectedIcon(\"\");\n        // setIconVariant(null)\n        fieldContext.onChange(\n            {\n                target: {\n                    name: fieldName,\n                    value: \"\",\n                    type: \"text\",\n                },\n            } as any,\n            \"onFieldChange\"\n        );\n        // formik.setFieldValue(\"iconVariant\", null);\n    };\n\n    const formatIconLabel = (icon: string) =>\n        icon\n            .split('_')\n            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))\n            .join(' ');\n\n    return (\n        <div>\n            <label className=\"form-field-label\">{fieldLabel}</label>\n            <div className=\"flex align-items-end gap-3 mt-2\">\n                <div style={{ display: 'inline-block' }}>\n                    {selectedIcon ? (\n                        // <Button\n                        //     type=\"button\"\n                        //     icon={<span className={`material-symbols-outlined`}>{selectedIcon}</span>}\n                        //     onClick={() => setOpenIconDialog(true)}\n                        //     outlined\n                        // />\n                        <div>\n                            <span className={`material-symbols-outlined`} style={{ fontSize: 48, cursor: 'pointer' }} onClick={() => setOpenIconDialog(true)}>\n                                {selectedIcon}\n                            </span>\n                            <p className=\"mb-0 text-center\">\n                                {formatIconLabel(selectedIcon)}\n                            </p>\n                        </div>\n                    ) : (\n                        <SolidButton\n                            type=\"button\"\n                            size=\"sm\"\n                            variant=\"outline\"\n                            onClick={() => setOpenIconDialog(true)}\n                        >\n                            Select Icon\n                        </SolidButton>\n                    )}\n                </div>\n                {selectedIcon && (\n                    <div>\n                        <SolidButton\n                            type=\"button\"\n                            variant=\"ghost\"\n                            className=\"ml-2\"\n                            onClick={handleRemoveIcon}\n                        >\n                            Remove\n                        </SolidButton>\n                    </div>\n                )}\n            </div>\n            <SolidDialog\n                open={openIconDialog}\n                onOpenChange={setOpenIconDialog}\n                className=\"solid-icon-dialog p-0\"\n                style={{ width: '70vw', height: '70vh', borderRadius: 6 }}\n                showHeader={false}\n                breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}}\n            >\n                <SolidDialogHeader>\n                    <SolidDialogTitle>Select Icon</SolidDialogTitle>\n                    <SolidDialogClose />\n                </SolidDialogHeader>\n                <SolidDialogBody className=\"p-0\">\n                    <div className=\"grid m-0 flex-column md:flex-row \">\n                        <div className=\"col-12 lg:col-3 p-0\">\n                            <div className=\"flex flex-column justify-content-between p-3 lg:p-4\" style={{ height: '100%' }}>\n                                <div className=\"\">\n                                    {/* <p className=\"font-medium\">Variant</p>\n                                    <Dropdown\n                                        value={iconVariant}\n                                        onChange={(e) => setIconVariant(e.value)}\n                                        options={iconVariants}\n                                        optionLabel=\"label\"\n                                        className=\"w-full mb-3\"\n                                        checkmark\n                                        highlightOnSelect={false}\n                                        placeholder=\"Select Variant\"\n                                    /> */}\n\n                                    <p className=\"font-medium\">Category</p>\n                                    <div style={{ marginBottom: \"1rem\", display: \"flex\", gap: \"1rem\", flexWrap: \"wrap\" }} className=\"solid-icon-category-wrapper\">\n                                        {tabs.map((tab) => (\n                                            <SolidButton\n                                                type='button'\n                                                key={tab}\n                                                size=\"sm\"\n                                                onClick={() => {\n                                                    setSelectedCategory(tab);\n                                                    setSearchIcon(\"\");\n                                                }}\n                                                variant={selectedCategory === tab ? \"primary\" : \"outline\"}\n                                                style={{\n                                                    padding: \"8px 16px\",\n                                                    fontSize: 12\n                                                }}\n                                                className=\"solid-icon-category\"\n                                            >\n                                                {tab}\n                                            </SolidButton>\n                                        ))}\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div className=\"col-6 p-0 flex lg:hidden\">\n                            <div className=\"p-3 lg:p-4\">\n                                <p className=\"font-medium\">Selected Icon</p>\n                                {selectedIcon && (\n                                    <>\n                                        <div className=\"flex justify-content-center\">\n                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>\n                                                {selectedIcon}\n                                            </span>\n                                        </div>\n                                        <p className='mt-2 text-center'>{formatIconLabel(selectedIcon)}</p>\n                                        {/* <code className=\"mt-2 d-block\">\n                                            {`<span class=\"material-symbols-${iconVariant || \"outlined\"}\">${selectedIcon}</span>`}\n                                        </code> */}\n                                    </>\n                                )}\n                            </div>\n\n                        </div>\n                        <div className=\"col-12 lg:col-6 p-0\" style={{ borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }}>\n                            <div className=\"px-3 lg:px-4 pt-3 lg:pt-4\">\n                                <div>\n                                    <p className=\"font-medium\">Select Icon</p>\n                                    <SolidInput\n                                        type=\"text\"\n                                        placeholder={`Search icons in \"${selectedCategory}\"`}\n                                        value={searchIcon}\n                                        onChange={(e) => setSearchIcon(e.target.value)}\n                                        className=\"w-full\"\n                                    />\n                                </div>\n                            </div>\n                            <div style={{ height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }} className=\"px-4 pb-3 mt-4\">\n                                <div className=\"grid\">\n                                    {filteredIcons.length > 0 ? (\n                                        filteredIcons.map(({ icon, category }) => (\n                                            <div className=\"col-3\" key={icon}>\n                                                <div className=\"w-full flex flex-column align-items-center justify-content-center gap-3\">\n                                                    <span\n                                                        className={`material-symbols-outlined`}\n                                                        style={{\n                                                            fontSize: 32,\n                                                            cursor: \"pointer\",\n                                                            padding: \"8px\",\n                                                            border: selectedIcon === icon ? \"2px solid var(--primary-color)\" : \"2px solid transparent\",\n                                                            borderRadius: \"6px\",\n                                                        }}\n                                                        onClick={() => handleSelectIcon(icon)}\n                                                        title={`${icon} (${category})`}\n                                                    >\n                                                        {icon}\n                                                    </span>\n                                                    <p className='mb-0 mt-1 text-center'>\n                                                        {formatIconLabel(icon)}\n                                                    </p>\n                                                </div>\n                                            </div>\n                                        ))\n                                    ) : (\n                                        <p className=\"mt\">No icons found.</p>\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n\n                        <div className=\"col-3 p-0 hidden lg:flex\">\n                            <div className=\"p-3 lg:p-4\">\n                                <p className=\"font-medium\">Selected Icon</p>\n                                {selectedIcon && (\n                                    <>\n                                        <div className=\"flex justify-content-center\">\n                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>\n                                                {selectedIcon}\n                                            </span>\n                                        </div>\n                                        <p className='mt-2 text-center'>{formatIconLabel(selectedIcon)}</p>\n                                        {/* <code className=\"mt-2 d-block\">\n                                            {`<span class=\"material-symbols-${iconVariant || \"outlined\"}\">${selectedIcon}</span>`}\n                                        </code> */}\n                                    </>\n                                )}\n                            </div>\n\n                        </div>\n                    </div>\n                </SolidDialogBody>\n                <SolidDialogFooter className=\"gap-3\">\n                    <SolidButton type=\"button\" size=\"sm\" onClick={() => setOpenIconDialog(false)}>\n                        Select\n                    </SolidButton>\n                    <SolidButton type=\"button\" size=\"sm\" variant=\"outline\" onClick={() => setOpenIconDialog(false)}>\n                        Cancel\n                    </SolidButton>\n                </SolidDialogFooter>\n            </SolidDialog>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"SolidIconEditWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconEditWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { solidIcons } from \"../../../../../helpers/solidIcons\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { SolidButton } from \"../../../../shad-cn-ui/SolidButton\";\nimport {\n    SolidDialog,\n    SolidDialogBody,\n    SolidDialogClose,\n    SolidDialogFooter,\n    SolidDialogHeader,\n    SolidDialogTitle,\n} from \"../../../../shad-cn-ui/SolidDialog\";\nimport { SolidInput } from \"../../../../shad-cn-ui/SolidInput\";\nimport { useEffect, useState } from \"react\";\n\nexport const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldName = fieldLayoutInfo?.attrs?.name;\n\n    const [openIconDialog, setOpenIconDialog] = useState(false);\n    const [selectedCategory, setSelectedCategory] = useState(\"All\");\n    const [searchIcon, setSearchIcon] = useState(\"\");\n    const [selectedIcon, setSelectedIcon] = useState(formik.values?.[fieldName] || \"\");\n\n    // const [iconVariant, setIconVariant] = useState(formik.values.iconVariant || \"outlined\");\n\n    // const iconVariants = [\n    //     { label: \"Outlined\", value: \"outlined\" },\n    //     { label: \"Rounded\", value: \"rounded\" },\n    //     { label: \"Sharp\", value: \"sharp\" }\n    // ];\n\n    const allIcons = solidIcons.flatMap(({ category, icons }) =>\n        icons.map((icon) => ({ icon, category }))\n    );\n\n    const filteredIcons = (selectedCategory === \"All\" ? allIcons :\n        allIcons.filter((i) => i.category === selectedCategory)\n    ).filter(({ icon }) => icon.toLowerCase().includes(searchIcon.toLowerCase()));\n\n    const tabs = [\"All\", ...solidIcons.map((c) => c.category)];\n\n    useEffect(() => {\n        if (openIconDialog) {\n            setSelectedIcon(formik?.values?.[fieldName] ?? \"\");\n            // setIconVariant(formik.values.iconVariant ?? \"outlined\");\n        }\n    }, [openIconDialog]);\n\n    const handleSelectIcon = (icon: string) => {\n        setSelectedIcon(icon);\n        // setIconVariant(variant)\n        fieldContext.onChange(\n            {\n                target: {\n                    name: fieldName,\n                    value: icon,\n                    type: \"text\",\n                },\n            } as any,\n            \"onFieldChange\"\n        );\n        // formik.setFieldValue(\"iconVariant\", variant);\n    };\n\n    const handleRemoveIcon = () => {\n        setSelectedIcon(\"\");\n        // setIconVariant(null)\n        fieldContext.onChange(\n            {\n                target: {\n                    name: fieldName,\n                    value: \"\",\n                    type: \"text\",\n                },\n            } as any,\n            \"onFieldChange\"\n        );\n        // formik.setFieldValue(\"iconVariant\", null);\n    };\n\n    const formatIconLabel = (icon: string) =>\n        icon\n            .split('_')\n            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))\n            .join(' ');\n\n    return (\n        <div>\n            <label className=\"form-field-label\">{fieldLabel}</label>\n            <div className=\"flex items-end gap-4 mt-2\">\n                <div style={{ display: 'inline-block' }}>\n                    {selectedIcon ? (\n                        // <Button\n                        //     type=\"button\"\n                        //     icon={<span className={`material-symbols-outlined`}>{selectedIcon}</span>}\n                        //     onClick={() => setOpenIconDialog(true)}\n                        //     outlined\n                        // />\n                        <div>\n                            <span className={`material-symbols-outlined`} style={{ fontSize: 48, cursor: 'pointer' }} onClick={() => setOpenIconDialog(true)}>\n                                {selectedIcon}\n                            </span>\n                            <p className=\"mb-0 text-center\">\n                                {formatIconLabel(selectedIcon)}\n                            </p>\n                        </div>\n                    ) : (\n                        <SolidButton\n                            type=\"button\"\n                            size=\"sm\"\n                            variant=\"outline\"\n                            onClick={() => setOpenIconDialog(true)}\n                        >\n                            Select Icon\n                        </SolidButton>\n                    )}\n                </div>\n                {selectedIcon && (\n                    <div>\n                        <SolidButton\n                            type=\"button\"\n                            variant=\"ghost\"\n                            className=\"ml-2\"\n                            onClick={handleRemoveIcon}\n                        >\n                            Remove\n                        </SolidButton>\n                    </div>\n                )}\n            </div>\n            <SolidDialog\n                open={openIconDialog}\n                onOpenChange={setOpenIconDialog}\n                className=\"solid-icon-dialog p-0\"\n                style={{ width: '70vw', height: '70vh', borderRadius: 6 }}\n                showHeader={false}\n                breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}}\n            >\n                <SolidDialogHeader>\n                    <SolidDialogTitle>Select Icon</SolidDialogTitle>\n                    <SolidDialogClose />\n                </SolidDialogHeader>\n                <SolidDialogBody className=\"p-0\">\n                    <div className=\"flex flex-wrap -mx-2 -mt-2 m-0 flex-col md:flex-row\">\n                        <div className=\"w-full lg:w-1/4 px-0 pt-0\">\n                            <div className=\"flex flex-col justify-between p-4 lg:p-6\" style={{ height: '100%' }}>\n                                <div className=\"\">\n                                    {/* <p className=\"font-medium\">Variant</p>\n                                    <Dropdown\n                                        value={iconVariant}\n                                        onChange={(e) => setIconVariant(e.value)}\n                                        options={iconVariants}\n                                        optionLabel=\"label\"\n                                        className=\"w-full mb-3\"\n                                        checkmark\n                                        highlightOnSelect={false}\n                                        placeholder=\"Select Variant\"\n                                    /> */}\n\n                                    <p className=\"font-medium\">Category</p>\n                                    <div style={{ marginBottom: \"1rem\", display: \"flex\", gap: \"1rem\", flexWrap: \"wrap\" }} className=\"solid-icon-category-wrapper\">\n                                        {tabs.map((tab) => (\n                                            <SolidButton\n                                                type='button'\n                                                key={tab}\n                                                size=\"sm\"\n                                                onClick={() => {\n                                                    setSelectedCategory(tab);\n                                                    setSearchIcon(\"\");\n                                                }}\n                                                variant={selectedCategory === tab ? \"primary\" : \"outline\"}\n                                                style={{\n                                                    padding: \"8px 16px\",\n                                                    fontSize: 12\n                                                }}\n                                                className=\"solid-icon-category\"\n                                            >\n                                                {tab}\n                                            </SolidButton>\n                                        ))}\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div className=\"w-1/2 px-0 pt-0 flex lg:hidden\">\n                            <div className=\"p-4 lg:p-6\">\n                                <p className=\"font-medium\">Selected Icon</p>\n                                {selectedIcon && (\n                                    <>\n                                        <div className=\"flex justify-center\">\n                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>\n                                                {selectedIcon}\n                                            </span>\n                                        </div>\n                                        <p className='mt-2 text-center'>{formatIconLabel(selectedIcon)}</p>\n                                        {/* <code className=\"mt-2 d-block\">\n                                            {`<span class=\"material-symbols-${iconVariant || \"outlined\"}\">${selectedIcon}</span>`}\n                                        </code> */}\n                                    </>\n                                )}\n                            </div>\n\n                        </div>\n                        <div className=\"w-full lg:w-1/2 px-0 pt-0\" style={{ borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }}>\n                            <div className=\"px-4 lg:px-6 pt-4 lg:pt-6\">\n                                <div>\n                                    <p className=\"font-medium\">Select Icon</p>\n                                    <SolidInput\n                                        type=\"text\"\n                                        placeholder={`Search icons in \"${selectedCategory}\"`}\n                                        value={searchIcon}\n                                        onChange={(e) => setSearchIcon(e.target.value)}\n                                        className=\"w-full\"\n                                    />\n                                </div>\n                            </div>\n                            <div style={{ height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }} className=\"px-6 pb-4 mt-6\">\n                                <div className=\"flex flex-wrap -mx-2 -mt-2\">\n                                    {filteredIcons.length > 0 ? (\n                                        filteredIcons.map(({ icon, category }) => (\n                                            <div className=\"w-1/4 px-2 pt-2\" key={icon}>\n                                                <div className=\"w-full flex flex-col items-center justify-center gap-4\">\n                                                    <span\n                                                        className={`material-symbols-outlined`}\n                                                        style={{\n                                                            fontSize: 32,\n                                                            cursor: \"pointer\",\n                                                            padding: \"8px\",\n                                                            border: selectedIcon === icon ? \"2px solid var(--primary-color)\" : \"2px solid transparent\",\n                                                            borderRadius: \"6px\",\n                                                        }}\n                                                        onClick={() => handleSelectIcon(icon)}\n                                                        title={`${icon} (${category})`}\n                                                    >\n                                                        {icon}\n                                                    </span>\n                                                    <p className='mb-0 mt-1 text-center'>\n                                                        {formatIconLabel(icon)}\n                                                    </p>\n                                                </div>\n                                            </div>\n                                        ))\n                                    ) : (\n                                        <p className=\"mt\">No icons found.</p>\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n\n                        <div className=\"w-1/4 px-0 pt-0 hidden lg:flex\">\n                            <div className=\"p-4 lg:p-6\">\n                                <p className=\"font-medium\">Selected Icon</p>\n                                {selectedIcon && (\n                                    <>\n                                        <div className=\"flex justify-center\">\n                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>\n                                                {selectedIcon}\n                                            </span>\n                                        </div>\n                                        <p className='mt-2 text-center'>{formatIconLabel(selectedIcon)}</p>\n                                        {/* <code className=\"mt-2 d-block\">\n                                            {`<span class=\"material-symbols-${iconVariant || \"outlined\"}\">${selectedIcon}</span>`}\n                                        </code> */}\n                                    </>\n                                )}\n                            </div>\n\n                        </div>\n                    </div>\n                </SolidDialogBody>\n                <SolidDialogFooter className=\"gap-4\">\n                    <SolidButton type=\"button\" size=\"sm\" onClick={() => setOpenIconDialog(false)}>\n                        Select\n                    </SolidButton>\n                    <SolidButton type=\"button\" size=\"sm\" variant=\"outline\" onClick={() => setOpenIconDialog(false)}>\n                        Cancel\n                    </SolidButton>\n                </SolidDialogFooter>\n            </SolidDialog>\n        </div>\n    );\n};\n"]}

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.tsx

@@ -90,7 +90,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
     return (
         <div>
             <label className="form-field-label">{fieldLabel}</label>
-            <div className="flex align-items-end gap-3 mt-2">
+            <div className="flex items-end gap-4 mt-2">
                 <div style={{ display: 'inline-block' }}>
                     {selectedIcon ? (
                         // <Button
@@ -144,9 +144,9 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                     <SolidDialogClose />
                 </SolidDialogHeader>
                 <SolidDialogBody className="p-0">
-                    <div className="grid m-0 flex-column md:flex-row ">
-                        <div className="col-12 lg:col-3 p-0">
-                            <div className="flex flex-column justify-content-between p-3 lg:p-4" style={{ height: '100%' }}>
+                    <div className="flex flex-wrap -mx-2 -mt-2 m-0 flex-col md:flex-row">
+                        <div className="w-full lg:w-1/4 px-0 pt-0">
+                            <div className="flex flex-col justify-between p-4 lg:p-6" style={{ height: '100%' }}>
                                 <div className="">
                                     {/* <p className="font-medium">Variant</p>
                                     <Dropdown
@@ -186,12 +186,12 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                             </div>
                         </div>
 
-                        <div className="col-6 p-0 flex lg:hidden">
-                            <div className="p-3 lg:p-4">
+                        <div className="w-1/2 px-0 pt-0 flex lg:hidden">
+                            <div className="p-4 lg:p-6">
                                 <p className="font-medium">Selected Icon</p>
                                 {selectedIcon && (
                                     <>
-                                        <div className="flex justify-content-center">
+                                        <div className="flex justify-center">
                                             <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>
                                                 {selectedIcon}
                                             </span>
@@ -205,8 +205,8 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                             </div>
 
                         </div>
-                        <div className="col-12 lg:col-6 p-0" style={{ borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }}>
-                            <div className="px-3 lg:px-4 pt-3 lg:pt-4">
+                        <div className="w-full lg:w-1/2 px-0 pt-0" style={{ borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }}>
+                            <div className="px-4 lg:px-6 pt-4 lg:pt-6">
                                 <div>
                                     <p className="font-medium">Select Icon</p>
                                     <SolidInput
@@ -218,12 +218,12 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                                     />
                                 </div>
                             </div>
-                            <div style={{ height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }} className="px-4 pb-3 mt-4">
-                                <div className="grid">
+                            <div style={{ height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }} className="px-6 pb-4 mt-6">
+                                <div className="flex flex-wrap -mx-2 -mt-2">
                                     {filteredIcons.length > 0 ? (
                                         filteredIcons.map(({ icon, category }) => (
-                                            <div className="col-3" key={icon}>
-                                                <div className="w-full flex flex-column align-items-center justify-content-center gap-3">
+                                            <div className="w-1/4 px-2 pt-2" key={icon}>
+                                                <div className="w-full flex flex-col items-center justify-center gap-4">
                                                     <span
                                                         className={`material-symbols-outlined`}
                                                         style={{
@@ -251,12 +251,12 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                             </div>
                         </div>
 
-                        <div className="col-3 p-0 hidden lg:flex">
-                            <div className="p-3 lg:p-4">
+                        <div className="w-1/4 px-0 pt-0 hidden lg:flex">
+                            <div className="p-4 lg:p-6">
                                 <p className="font-medium">Selected Icon</p>
                                 {selectedIcon && (
                                     <>
-                                        <div className="flex justify-content-center">
+                                        <div className="flex justify-center">
                                             <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>
                                                 {selectedIcon}
                                             </span>
@@ -272,7 +272,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                         </div>
                     </div>
                 </SolidDialogBody>
-                <SolidDialogFooter className="gap-3">
+                <SolidDialogFooter className="gap-4">
                     <SolidButton type="button" size="sm" onClick={() => setOpenIconDialog(false)}>
                         Select
                     </SolidButton>

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.js

@@ -29,6 +29,6 @@ export var SolidRelationFieldAvatarFormWidget = function (_a) {
         //     setFieldValue([value.label]);
         // }
     }, [fieldContext]);
-    return (_jsxs("div", { className: "mt-2 flex-column", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), _jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: fieldValue.map(function (v) { return (_jsx(AvatarWidget, { value: v })); }) })] }));
+    return (_jsxs("div", { className: "mt-2 flex flex-col", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), _jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: fieldValue.map(function (v) { return (_jsx(AvatarWidget, { value: v })); }) })] }));
 };
 //# sourceMappingURL=SolidRelationFieldAvatarFormWidget.js.map