@solidxai/core-ui 0.1.9-beta.20 → 0.1.9-beta.21

package/dist/components/core/common/SolidGlobalSearchElement.tsx

@@ -428,7 +428,10 @@ const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, ope
                     variant="ghost"
                     size="sm"
                     className={`solid-saved-filter-main w-full ${isActive ? "is-active" : ""} ${isFocused ? "solid-search-overlay-option-active" : ""}`}
-                    onClick={() => applySavedFilter(savedfilter)}
+                    onMouseDown={(e) => {
+                        e.preventDefault();
+                        applySavedFilter(savedfilter);
+                    }}
                     title={savedfilter?.description}
                 >
                     {savedfilter.name}
@@ -441,7 +444,10 @@ const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, ope
                             variant="outline"
                             size="sm"
                             className="solid-saved-filter-icon-btn"
-                            onClick={() => openSavedCustomFilter(savedfilter)}
+                            onMouseDown={(e) => {
+                                e.preventDefault();
+                                openSavedCustomFilter(savedfilter);
+                            }}
                         >
                             <Pencil size={14} />
                         </SolidButton>
@@ -449,7 +455,8 @@ const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, ope
                             variant="outline"
                             size="sm"
                             className="solid-saved-filter-icon-btn is-danger"
-                            onClick={() => {
+                            onMouseDown={(e) => {
+                                e.preventDefault();
                                 setSavedFilterTobeDeleted(savedfilter.id),
                                     setIsDeleteSQDialogVisible(true);
                             }}
@@ -720,6 +727,18 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
     const [savedFilterFetchDataRefreshKey, setSavedFilterFetchDataRefreshKey] = useState(0);
 
+    const buildSavedFilterUrl = (savedQueryId?: string | number | null) => {
+        const params = new URLSearchParams(searchParams.toString());
+
+        if (savedQueryId === null || savedQueryId === undefined || savedQueryId === "") {
+            params.delete("savedQuery");
+        } else {
+            params.set("savedQuery", String(savedQueryId));
+        }
+
+        const queryString = params.toString();
+        return queryString ? `${pathname}?${queryString}` : pathname;
+    };
 
 
     useEffect(() => {
@@ -1254,9 +1273,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         let parsedSearchParams = searchParams;
         const savedQuery = parsedSearchParams?.get("savedQuery");
         if (savedFilterTobeDeleted == savedQuery) {
-            const urlParams = new URLSearchParams(window.location.search);
-            urlParams.delete("savedQuery");
-            router.push(`?${urlParams.toString()}`);
+            router.push(buildSavedFilterUrl(null));
         }
         setIsDeleteSQDialogVisible(false);
         setTimeout(() => {
@@ -1289,7 +1306,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
                 setPredefinedSearchBaseFilter(null);
                 setTimeout(() => {
-                    router.push(`?savedQuery=${formValues.id}`);
+                    router.push(buildSavedFilterUrl(formValues.id));
                 }, 500)
             } else {
 
@@ -1314,7 +1331,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
 
                 setTimeout(() => {
-                    router.push(`?savedQuery=${result.data.id}`);
+                    router.push(buildSavedFilterUrl(result.data.id));
                 }, 500)
 
             }
@@ -1367,7 +1384,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         return (
             <li>
                 <div className="custom-filter-chip-type">
-                    <div className="flex align-items-center gap-2 text-base">
+                    <div className="flex items-center gap-2 text-base">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"
                             onClick={() => {
                                 setShowGlobalSearchElement(true)
@@ -1404,7 +1421,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
         // push the savedQuery=1 in url 
         if (savedfilter?.id) {
-            router.push(`?savedQuery=${savedfilter.id}`);
+            router.push(buildSavedFilterUrl(savedfilter.id));
             setShowOverlay(false);
         } else {
             console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
@@ -1412,15 +1429,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     }
 
     const removeSavedFilter = () => {
-        const params = new URLSearchParams(searchParams.toString());
         setCurrentSavedFilterData(null);
         setCurrentSavedFilterQuery(null)
-        if (params.has("savedQuery")) {
-            params.delete("savedQuery");
-            const newUrl = params.toString()
-                ? `${pathname}?${params.toString()}`
-                : pathname;
-            router.push(newUrl);
+        if (searchParams.has("savedQuery")) {
+            router.push(buildSavedFilterUrl(null));
         }
     }
 
@@ -1429,7 +1441,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         return (
             <li>
                 <div className="custom-filter-chip-type">
-                    <div className="flex align-items-center gap-2 text-base">
+                    <div className="flex items-center gap-2 text-base">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"
                             onClick={() => {
                                 const fn = async () => {
@@ -1473,8 +1485,8 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     const GroupingChip = () => {
         return (
             <li className="solid-global-search-chip">
-                <div className="flex align-items-center gap-2">
-                    <div className="flex align-items-center gap-2">
+                <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2">
                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
 
                             onClick={() => setShowGroupFilterElement(true)}
@@ -1596,6 +1608,11 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     const hiddenChipItems = managedChipItems.slice(MAX_VISIBLE_CHIPS);
     const hiddenChipCount = hiddenChipItems.length;
 
+    const handleManagedChipOpen = (chip: ManagedChipItem) => {
+        if (!chip.onOpen) return;
+        chip.onOpen();
+    };
+
     const clearAllAppliedChips = () => {
         if (managedChipItems.length === 0) return;
 
@@ -1823,7 +1840,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     const PredefinedSearchChip = () => (
         <li>
             <div className="search-filter-chip-type">
-                <div className="flex align-items-center gap-2">
+                <div className="flex items-center gap-2">
                     <strong>{predefinedSearchChip?.name}:</strong>
                     <span className="custom-chip-value">{predefinedSearchChip?.value}</span>
                 </div>
@@ -1839,15 +1856,35 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
     return (
         <>
-            <div className="flex justify-content-center solid-custom-filter-wrapper relative">
+            <div className="relative flex justify-center solid-custom-filter-wrapper">
                 <div className="solid-global-search-element">
                     <ul className="solid-global-search-chip-list">
                         {visibleChipItems.map((chip) => (
                             <li key={chip.id}>
                                 <div className={`search-filter-chip-type solid-chip-pill solid-chip-tone-${chip.type}`}>
-                                    <span className="custom-chip-value solid-chip-pill-label" title={chip.label}>
-                                        {chip.label}
-                                    </span>
+                                    {chip.onOpen ? (
+                                        <>
+                                            <button
+                                                type="button"
+                                                className="solid-chip-open-button"
+                                                title={chip.label}
+                                                aria-label={`Open ${chip.label}`}
+                                                onMouseDown={(e) => e.preventDefault()}
+                                                onClick={() => handleManagedChipOpen(chip)}
+                                            >
+                                                <span className="solid-chip-open-icon" aria-hidden="true">
+                                                    <Filter size={12} />
+                                                </span>
+                                            </button>
+                                            <span className="custom-chip-value solid-chip-pill-label solid-chip-open-label" title={chip.label}>
+                                                {chip.label}
+                                            </span>
+                                        </>
+                                    ) : (
+                                        <span className="custom-chip-value solid-chip-pill-label" title={chip.label}>
+                                            {chip.label}
+                                        </span>
+                                    )}
                                     <button
                                         type="button"
                                         className="solid-chip-pill-remove"
@@ -1873,7 +1910,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                 </button>
                             </li>
                         )}
-                        {managedChipItems.length > 0 && hiddenChipCount === 0 && (
+                        {/* {managedChipItems.length > 0 && hiddenChipCount === 0 && (
                             <li>
                                 <button
                                     type="button"
@@ -1885,7 +1922,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                     Manage
                                 </button>
                             </li>
-                        )}
+                        )} */}
                         <li ref={chipsRef} className="solid-global-search-input-item">
                             <div className="relative solid-global-search-element-wrapper">
                                 <SolidInput
@@ -1931,7 +1968,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                     </ul>
                 </div>
 
-                {showChipManager && managedChipItems.length > 0 && (
+                {/* {showChipManager && managedChipItems.length > 0 && (
                     <div ref={chipManagerRef} className="absolute z-5 solid-chip-manager-panel">
                         <div className="solid-chip-manager-header">
                             <div className="solid-chip-manager-title">Applied chips ({managedChipItems.length})</div>
@@ -1964,14 +2001,14 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                             ))}
                         </div>
                     </div>
-                )}
+                )} */}
 
                 {showOverlay && (
-                    <div ref={overlayRef} className="absolute w-full shadow-2 solid-search-overlay-pannel">
+                    <div ref={overlayRef} className="absolute w-full shadow-md solid-search-overlay-pannel">
                         <div className="solid-search-overlay-scroll">
                             {inputValue ? (
                                 <>
-                                    <div className="custom-filter-search-options solid-search-overlay-section px-3 py-1 flex flex-column">
+                                    <div className="custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-1">
                                         <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon">
                                             <Search size={13} />
                                             <span>Search by fields</span>
@@ -1983,7 +2020,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                         key={index}
                                                         variant="ghost"
                                                         size="sm"
-                                                        className={`flex gap-1 text-color solid-search-overlay-option ${focusedIndex === index ? "solid-search-overlay-option-active" : ""} justify-content-start`}
+                                                        className={`flex justify-start gap-1 text-color solid-search-overlay-option ${focusedIndex === index ? "solid-search-overlay-option-active" : ""}`}
                                                         onMouseDown={(e) => {
                                                             e.preventDefault();
                                                             const currentValue = inputValue?.trim();
@@ -2005,7 +2042,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                         }}
                                                         onMouseEnter={() => setFocusedIndex(index)}
                                                     >
-                                                        Search <strong style={{paddingLeft:"2px"}}>{value.displayName}</strong> &nbsp; for:&nbsp; <span className="font-bold text-color">{inputValue}</span>
+                                                        Search <strong style={{paddingLeft:"2px"}}>{value.displayName.trim()}</strong>&nbsp;for:&nbsp; <span className="font-bold text-color">{inputValue}</span>
                                                     </SolidButton>
                                                 )
                                             })
@@ -2023,21 +2060,21 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                     {predefinedSearches && predefinedSearches.length > 0 && (
                                         <>
                                             <div className="solid-filter-dialog-sep" />
-                                            <div className="custom-filter-search-options solid-search-overlay-section px-3 py-1 flex flex-column">
+                                            <div className="custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-1">
                                                 <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title">Predefined searches</h6>
                                                 {predefinedSearches.map((predefinedSearch: any, index: number) => (
                                                     <SolidButton
                                                         key={index}
                                                         variant="ghost"
                                                         size="sm"
-                                                        className={`flex flex-column align-items-start gap-1 text-color solid-search-overlay-option solid-search-overlay-option-stacked ${focusedIndex === searchableFields.length + index ? "solid-search-overlay-option-active" : ""}`}
+                                                        className={`flex flex-col items-start gap-1 text-color solid-search-overlay-option solid-search-overlay-option-stacked ${focusedIndex === searchableFields.length + index ? "solid-search-overlay-option-active" : ""}`}
                                                         onMouseDown={(e) => {
                                                             e.preventDefault();
                                                             handlePredefinedSearch(predefinedSearch);
                                                         }}
                                                         onMouseEnter={() => setFocusedIndex(searchableFields.length + index)}
                                                     >
-                                                        <div className="flex gap-1 align-items-center">
+                                                        <div className="flex items-center gap-1">
                                                             <strong>{predefinedSearch.name}:</strong>
                                                             <span className="font-bold text-color">{inputValue}</span>
                                                         </div>
@@ -2082,7 +2119,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                 </div>
                                             </div>
                                         </div>
-                                        <div className="flex flex-column solid-search-overlay-saved-list">
+                                        <div className="flex flex-col solid-search-overlay-saved-list">
                                             {savedFilters.map((savedfilter: any, index: number) => (
                                                 <SavedFilterList
                                                     key={savedfilter.id}
@@ -2108,7 +2145,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                         <div className="solid-search-overlay-footer">
                             <button
                                 type="button"
-                                className={`px-3 py-2 flex flex-column solid-search-overlay-footer-action ${overlayOptions[focusedIndex]?.id === "footer:custom" ? "solid-search-overlay-option-active" : ""}`}
+                                className={`flex flex-col px-3 py-2 solid-search-overlay-footer-action ${overlayOptions[focusedIndex]?.id === "footer:custom" ? "solid-search-overlay-option-active" : ""}`}
                                 onClick={openCustomFilterDialog}
                                 onMouseEnter={() => {
                                     const optIndex = overlayOptions.findIndex((o) => o.id === "footer:custom");
@@ -2132,7 +2169,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                             {viewType === "tree" && (
                                 <button
                                     type="button"
-                                    className={`px-3 py-2 flex flex-column solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ${overlayOptions[focusedIndex]?.id === "footer:grouping" ? "solid-search-overlay-option-active" : ""}`}
+                                    className={`flex flex-col px-3 py-2 solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ${overlayOptions[focusedIndex]?.id === "footer:grouping" ? "solid-search-overlay-option-active" : ""}`}
                                     onClick={openGroupingDialog}
                                     onMouseEnter={() => {
                                         const optIndex = overlayOptions.findIndex((o) => o.id === "footer:grouping");
@@ -2235,7 +2272,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                         <SolidDialogClose />
                     </SolidDialogHeader>
                     <SolidDialogSeparator />
-                    <SolidDialogFooter className="justify-content-center">
+                    <SolidDialogFooter className="justify-center">
                         <SolidButton variant="destructive" size="sm" onClick={deleteSavedFilter}>
                             <Check size={14} />
                             Yes

package/dist/components/core/common/SolidLayoutViews.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 export var SolidLayoutViews = function (_a) {
     var sizeOptions = _a.sizeOptions, setSize = _a.setSize, size = _a.size, viewModes = _a.viewModes, setView = _a.setView, view = _a.view;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    var renderOption = function (option, groupName, currentValue, onSelect) { return (_jsxs("label", { className: "flex align-items-center ".concat(option.value === currentValue ? 'solid-active-view' : 'solid-view'), children: [_jsx("input", { type: "radio", name: groupName, value: option.value, checked: option.value === currentValue, onChange: function () { return onSelect(option.value); }, className: "solid-radio-native" }), _jsxs("span", { className: "ml-2 flex align-items-center justify-content-between w-full", children: [option.label, _jsx("img", { src: option.image, alt: option.value, className: 'img-fluid position-relative', style: { width: '2.75rem' } })] })] }, option.value)); };
-    return (_jsxs(SolidPopover, { open: open, onOpenChange: setOpen, autoCloseGroup: "layout-views", children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx(SolidButton, { type: "button", size: 'sm', variant: 'secondary', className: 'custom-icon-button', leftIcon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M14.9016 13.1969L10.8031 9.09845L14.9016 5L19 9.09845L14.9016 13.1969ZM5 11.7461V5.94301H10.8031V11.7461H5ZM12.2539 19V13.1969H18.057V19H12.2539ZM5 19V13.1969H10.8031V19H5ZM6.45078 10.2953H9.35233V7.39378H6.45078V10.2953ZM14.9197 11.1658L16.9689 9.11658L14.9197 7.06736L12.8705 9.11658L14.9197 11.1658ZM13.7047 17.5492H16.6062V14.6477H13.7047V17.5492ZM6.45078 17.5492H9.35233V14.6477H6.45078V17.5492Z", fill: "#4B4D52" }) }) }) }), _jsxs(SolidPopoverContent, { className: 'solid-header-dropdown-panel', children: [_jsxs("div", { className: 'secondary-border-bottom p-1', children: [_jsx("p", { className: 'px-3 pt-2', children: "Density" }), _jsx("div", { className: "flex flex-column gap-1", children: sizeOptions.map(function (option) { return renderOption(option, "sizes", size, setSize); }) })] }), _jsxs("div", { className: 'p-1', children: [_jsx("p", { className: 'px-3 pt-2', children: "View Mode" }), _jsx("div", { className: "flex flex-column gap-1", children: viewModes.map(function (option) { return renderOption(option, "views", view, setView); }) })] })] })] }));
+    var renderOption = function (option, groupName, currentValue, onSelect) { return (_jsxs("label", { className: "flex items-center ".concat(option.value === currentValue ? 'solid-active-view' : 'solid-view'), children: [_jsx("input", { type: "radio", name: groupName, value: option.value, checked: option.value === currentValue, onChange: function () { return onSelect(option.value); }, className: "solid-radio-native" }), _jsxs("span", { className: "ml-2 flex w-full items-center justify-between", children: [option.label, _jsx("img", { src: option.image, alt: option.value, className: 'img-fluid position-relative', style: { width: '2.75rem' } })] })] }, option.value)); };
+    return (_jsxs(SolidPopover, { open: open, onOpenChange: setOpen, autoCloseGroup: "layout-views", children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx(SolidButton, { type: "button", size: 'sm', variant: 'secondary', className: 'custom-icon-button', leftIcon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M14.9016 13.1969L10.8031 9.09845L14.9016 5L19 9.09845L14.9016 13.1969ZM5 11.7461V5.94301H10.8031V11.7461H5ZM12.2539 19V13.1969H18.057V19H12.2539ZM5 19V13.1969H10.8031V19H5ZM6.45078 10.2953H9.35233V7.39378H6.45078V10.2953ZM14.9197 11.1658L16.9689 9.11658L14.9197 7.06736L12.8705 9.11658L14.9197 11.1658ZM13.7047 17.5492H16.6062V14.6477H13.7047V17.5492ZM6.45078 17.5492H9.35233V14.6477H6.45078V17.5492Z", fill: "#4B4D52" }) }) }) }), _jsxs(SolidPopoverContent, { className: 'solid-header-dropdown-panel', children: [_jsxs("div", { className: 'secondary-border-bottom p-1', children: [_jsx("p", { className: 'px-3 pt-2', children: "Density" }), _jsx("div", { className: "flex flex-col gap-1", children: sizeOptions.map(function (option) { return renderOption(option, "sizes", size, setSize); }) })] }), _jsxs("div", { className: 'p-1', children: [_jsx("p", { className: 'px-3 pt-2', children: "View Mode" }), _jsx("div", { className: "flex flex-col gap-1", children: viewModes.map(function (option) { return renderOption(option, "views", view, setView); }) })] })] })] }));
 };
 //# sourceMappingURL=SolidLayoutViews.js.map

package/dist/components/core/common/SolidLayoutViews.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidLayoutViews.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidLayoutViews.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AASjC,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,EAA+D;QAA7D,WAAW,iBAAA,EAAE,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,IAAI,UAAA;IAC7E,IAAA,KAAkB,QAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAC;IAExC,IAAM,YAAY,GAAG,UACjB,MAAuD,EACvD,SAAiB,EACjB,YAAoB,EACpB,QAAiC,IAChC,OAAA,CACD,iBAA0B,SAAS,EAAE,kCAA2B,MAAM,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,YAAY,CAAE,aAChI,gBACI,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,YAAY,EACtC,QAAQ,EAAE,cAAM,OAAA,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAtB,CAAsB,EACtC,SAAS,EAAC,oBAAoB,GAChC,EACF,gBAAM,SAAS,EAAC,6DAA6D,aACxE,MAAM,CAAC,KAAK,EACb,cACI,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAC7B,IACC,KAjBC,MAAM,CAAC,KAAK,CAkBhB,CACX,EApBI,CAoBJ,CAAC;IAEF,OAAO,CACH,MAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,EAAC,cAAc,aAC1E,KAAC,mBAAmB,IAAC,OAAO,kBACxB,KAAC,WAAW,IACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EACJ,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,YAC1F,eAAM,CAAC,EAAC,kZAAkZ,EAAC,IAAI,EAAC,SAAS,GAAG,GAC1a,GAEZ,GACgB,EACtB,MAAC,mBAAmB,IAAC,SAAS,EAAC,6BAA6B,aACxD,eAAK,SAAS,EAAC,6BAA6B,aACxC,YAAG,SAAS,EAAC,WAAW,wBAAY,EACpC,cAAK,SAAS,EAAC,wBAAwB,YAClC,WAAW,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,EAA5C,CAA4C,CAAC,GACxE,IACJ,EACN,eAAK,SAAS,EAAC,KAAK,aAChB,YAAG,SAAS,EAAC,WAAW,0BAAc,EACtC,cAAK,SAAS,EAAC,wBAAwB,YAClC,SAAS,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,EAA5C,CAA4C,CAAC,GACtE,IACJ,IACY,IACX,CAClB,CAAC;AACN,CAAC,CAAA","sourcesContent":["\nimport { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from '../../shad-cn-ui';\nimport { useState } from 'react';\ninterface Props {\n    sizeOptions: { label: string; value: string, image: string }[];\n    setSize: (value: string) => void;\n    size: string;\n    viewModes: { label: string; value: string, image: string }[];\n    setView: (value: string) => void;\n    view: string;\n}\nexport const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setView, view }: Props) => {\n    const [open, setOpen] = useState(false);\n\n    const renderOption = (\n        option: { label: string; value: string; image: string },\n        groupName: string,\n        currentValue: string,\n        onSelect: (value: string) => void\n    ) => (\n        <label key={option.value} className={`flex align-items-center ${option.value === currentValue ? 'solid-active-view' : 'solid-view'}`}>\n            <input\n                type=\"radio\"\n                name={groupName}\n                value={option.value}\n                checked={option.value === currentValue}\n                onChange={() => onSelect(option.value)}\n                className=\"solid-radio-native\"\n            />\n            <span className=\"ml-2 flex align-items-center justify-content-between w-full\">\n                {option.label}\n                <img\n                    src={option.image}\n                    alt={option.value}\n                    className='img-fluid position-relative'\n                    style={{ width: '2.75rem' }}\n                />\n            </span>\n        </label>\n    );\n\n    return (\n        <SolidPopover open={open} onOpenChange={setOpen} autoCloseGroup=\"layout-views\">\n            <SolidPopoverTrigger asChild>\n                <SolidButton\n                    type=\"button\"\n                    size='sm'\n                    variant='secondary'\n                    className='custom-icon-button'\n                    leftIcon={\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n                            <path d=\"M14.9016 13.1969L10.8031 9.09845L14.9016 5L19 9.09845L14.9016 13.1969ZM5 11.7461V5.94301H10.8031V11.7461H5ZM12.2539 19V13.1969H18.057V19H12.2539ZM5 19V13.1969H10.8031V19H5ZM6.45078 10.2953H9.35233V7.39378H6.45078V10.2953ZM14.9197 11.1658L16.9689 9.11658L14.9197 7.06736L12.8705 9.11658L14.9197 11.1658ZM13.7047 17.5492H16.6062V14.6477H13.7047V17.5492ZM6.45078 17.5492H9.35233V14.6477H6.45078V17.5492Z\" fill=\"#4B4D52\" />\n                        </svg>\n                    }\n                />\n            </SolidPopoverTrigger>\n            <SolidPopoverContent className='solid-header-dropdown-panel'>\n                <div className='secondary-border-bottom p-1'>\n                    <p className='px-3 pt-2'>Density</p>\n                    <div className=\"flex flex-column gap-1\">\n                        {sizeOptions.map((option) => renderOption(option, \"sizes\", size, setSize))}\n                    </div>\n                </div>\n                <div className='p-1'>\n                    <p className='px-3 pt-2'>View Mode</p>\n                    <div className=\"flex flex-column gap-1\">\n                        {viewModes.map((option) => renderOption(option, \"views\", view, setView))}\n                    </div>\n                </div>\n            </SolidPopoverContent>\n        </SolidPopover>\n    );\n}\n"]}
+{"version":3,"file":"SolidLayoutViews.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidLayoutViews.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AASjC,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,EAA+D;QAA7D,WAAW,iBAAA,EAAE,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,IAAI,UAAA;IAC7E,IAAA,KAAkB,QAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAC;IAExC,IAAM,YAAY,GAAG,UACjB,MAAuD,EACvD,SAAiB,EACjB,YAAoB,EACpB,QAAiC,IAChC,OAAA,CACD,iBAA0B,SAAS,EAAE,4BAAqB,MAAM,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,YAAY,CAAE,aAC1H,gBACI,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,YAAY,EACtC,QAAQ,EAAE,cAAM,OAAA,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAtB,CAAsB,EACtC,SAAS,EAAC,oBAAoB,GAChC,EACF,gBAAM,SAAS,EAAC,+CAA+C,aAC1D,MAAM,CAAC,KAAK,EACb,cACI,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAC7B,IACC,KAjBC,MAAM,CAAC,KAAK,CAkBhB,CACX,EApBI,CAoBJ,CAAC;IAEF,OAAO,CACH,MAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,EAAC,cAAc,aAC1E,KAAC,mBAAmB,IAAC,OAAO,kBACxB,KAAC,WAAW,IACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EACJ,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,YAC1F,eAAM,CAAC,EAAC,kZAAkZ,EAAC,IAAI,EAAC,SAAS,GAAG,GAC1a,GAEZ,GACgB,EACtB,MAAC,mBAAmB,IAAC,SAAS,EAAC,6BAA6B,aACxD,eAAK,SAAS,EAAC,6BAA6B,aACxC,YAAG,SAAS,EAAC,WAAW,wBAAY,EACpC,cAAK,SAAS,EAAC,qBAAqB,YAC/B,WAAW,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,EAA5C,CAA4C,CAAC,GACxE,IACJ,EACN,eAAK,SAAS,EAAC,KAAK,aAChB,YAAG,SAAS,EAAC,WAAW,0BAAc,EACtC,cAAK,SAAS,EAAC,qBAAqB,YAC/B,SAAS,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,EAA5C,CAA4C,CAAC,GACtE,IACJ,IACY,IACX,CAClB,CAAC;AACN,CAAC,CAAA","sourcesContent":["\nimport { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from '../../shad-cn-ui';\nimport { useState } from 'react';\ninterface Props {\n    sizeOptions: { label: string; value: string, image: string }[];\n    setSize: (value: string) => void;\n    size: string;\n    viewModes: { label: string; value: string, image: string }[];\n    setView: (value: string) => void;\n    view: string;\n}\nexport const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setView, view }: Props) => {\n    const [open, setOpen] = useState(false);\n\n    const renderOption = (\n        option: { label: string; value: string; image: string },\n        groupName: string,\n        currentValue: string,\n        onSelect: (value: string) => void\n    ) => (\n        <label key={option.value} className={`flex items-center ${option.value === currentValue ? 'solid-active-view' : 'solid-view'}`}>\n            <input\n                type=\"radio\"\n                name={groupName}\n                value={option.value}\n                checked={option.value === currentValue}\n                onChange={() => onSelect(option.value)}\n                className=\"solid-radio-native\"\n            />\n            <span className=\"ml-2 flex w-full items-center justify-between\">\n                {option.label}\n                <img\n                    src={option.image}\n                    alt={option.value}\n                    className='img-fluid position-relative'\n                    style={{ width: '2.75rem' }}\n                />\n            </span>\n        </label>\n    );\n\n    return (\n        <SolidPopover open={open} onOpenChange={setOpen} autoCloseGroup=\"layout-views\">\n            <SolidPopoverTrigger asChild>\n                <SolidButton\n                    type=\"button\"\n                    size='sm'\n                    variant='secondary'\n                    className='custom-icon-button'\n                    leftIcon={\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n                            <path d=\"M14.9016 13.1969L10.8031 9.09845L14.9016 5L19 9.09845L14.9016 13.1969ZM5 11.7461V5.94301H10.8031V11.7461H5ZM12.2539 19V13.1969H18.057V19H12.2539ZM5 19V13.1969H10.8031V19H5ZM6.45078 10.2953H9.35233V7.39378H6.45078V10.2953ZM14.9197 11.1658L16.9689 9.11658L14.9197 7.06736L12.8705 9.11658L14.9197 11.1658ZM13.7047 17.5492H16.6062V14.6477H13.7047V17.5492ZM6.45078 17.5492H9.35233V14.6477H6.45078V17.5492Z\" fill=\"#4B4D52\" />\n                        </svg>\n                    }\n                />\n            </SolidPopoverTrigger>\n            <SolidPopoverContent className='solid-header-dropdown-panel'>\n                <div className='secondary-border-bottom p-1'>\n                    <p className='px-3 pt-2'>Density</p>\n                    <div className=\"flex flex-col gap-1\">\n                        {sizeOptions.map((option) => renderOption(option, \"sizes\", size, setSize))}\n                    </div>\n                </div>\n                <div className='p-1'>\n                    <p className='px-3 pt-2'>View Mode</p>\n                    <div className=\"flex flex-col gap-1\">\n                        {viewModes.map((option) => renderOption(option, \"views\", view, setView))}\n                    </div>\n                </div>\n            </SolidPopoverContent>\n        </SolidPopover>\n    );\n}\n"]}

package/dist/components/core/common/SolidLayoutViews.tsx

@@ -18,7 +18,7 @@ export const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setVie
         currentValue: string,
         onSelect: (value: string) => void
     ) => (
-        <label key={option.value} className={`flex align-items-center ${option.value === currentValue ? 'solid-active-view' : 'solid-view'}`}>
+        <label key={option.value} className={`flex items-center ${option.value === currentValue ? 'solid-active-view' : 'solid-view'}`}>
             <input
                 type="radio"
                 name={groupName}
@@ -27,7 +27,7 @@ export const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setVie
                 onChange={() => onSelect(option.value)}
                 className="solid-radio-native"
             />
-            <span className="ml-2 flex align-items-center justify-content-between w-full">
+            <span className="ml-2 flex w-full items-center justify-between">
                 {option.label}
                 <img
                     src={option.image}
@@ -57,13 +57,13 @@ export const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setVie
             <SolidPopoverContent className='solid-header-dropdown-panel'>
                 <div className='secondary-border-bottom p-1'>
                     <p className='px-3 pt-2'>Density</p>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         {sizeOptions.map((option) => renderOption(option, "sizes", size, setSize))}
                     </div>
                 </div>
                 <div className='p-1'>
                     <p className='px-3 pt-2'>View Mode</p>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         {viewModes.map((option) => renderOption(option, "views", view, setView))}
                     </div>
                 </div>

package/dist/components/core/common/SolidListViewOptions.js

@@ -5,6 +5,6 @@ import { SolidIcon } from "../../shad-cn-ui/SolidIcon";
 export var SolidListViewOptions = function (_a) {
     var _b = useState(false), visible = _b[0], setVisible = _b[1];
     var _c = useState(["Header", "NonExistentComponent"]), componentsToRender = _c[0], setComponentsToRender = _c[1];
-    return (_jsxs("div", { className: "card flex justify-content-center", children: [_jsx(SolidIcon, { name: "si-cog", onClick: function () { return setVisible(true); }, style: { cursor: 'pointer' } }), _jsxs(SolidDialog, { header: "Header", visible: visible, onHide: function () { return setVisible(false); }, contentClassName: "w-full", className: "solid-dialog-lg", children: [_jsx("p", { className: "m-0", children: "ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), _jsx("div", {})] })] }));
+    return (_jsxs("div", { className: "card flex justify-center", children: [_jsx(SolidIcon, { name: "si-cog", onClick: function () { return setVisible(true); }, style: { cursor: 'pointer' } }), _jsxs(SolidDialog, { header: "Header", visible: visible, onHide: function () { return setVisible(false); }, contentClassName: "w-full", className: "solid-dialog-lg", children: [_jsx("p", { className: "m-0", children: "ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), _jsx("div", {})] })] }));
 };
 //# sourceMappingURL=SolidListViewOptions.js.map

package/dist/components/core/common/SolidListViewOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidListViewOptions.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidListViewOptions.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAGvD,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,EAAQ;IAEnC,IAAA,KAAwB,QAAQ,CAAU,KAAK,CAAC,EAA/C,OAAO,QAAA,EAAE,UAAU,QAA4B,CAAC;IAEjD,IAAA,KAA8C,QAAQ,CAAC,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,EAAzF,kBAAkB,QAAA,EAAE,qBAAqB,QAAgD,CAAC;IAEjG,OAAO,CACH,eAAK,SAAS,EAAC,kCAAkC,aAC7C,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,GAAI,EAE1F,MAAC,WAAW,IAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EAAE,gBAAgB,EAAC,QAAQ,EAAC,SAAS,EAAC,iBAAiB,aACjI,YAAG,SAAS,EAAC,KAAK,wcAKd,EACJ,eAEM,IAEI,IACZ,CACT,CAAA;AAEL,CAAC,CAAA","sourcesContent":["\nimport { useState } from \"react\";\nimport { SolidDialog } from \"../../shad-cn-ui\";\nimport { SolidIcon } from \"../../shad-cn-ui/SolidIcon\";\n\n\nexport const SolidListViewOptions = ({ }: any) => {\n\n    const [visible, setVisible] = useState<boolean>(false);\n\n    const [componentsToRender, setComponentsToRender] = useState([\"Header\", \"NonExistentComponent\"]);\n\n    return (\n        <div className=\"card flex justify-content-center\">\n            <SolidIcon name=\"si-cog\" onClick={() => setVisible(true)} style={{ cursor: 'pointer' }} />\n\n            <SolidDialog header=\"Header\" visible={visible} onHide={() => setVisible(false)} contentClassName=\"w-full\" className=\"solid-dialog-lg\">\n                <p className=\"m-0\">\n                    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                </p>\n                <div>\n\n                </div>\n\n            </SolidDialog>\n        </div>\n    )\n\n}\n"]}
+{"version":3,"file":"SolidListViewOptions.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidListViewOptions.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAGvD,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,EAAQ;IAEnC,IAAA,KAAwB,QAAQ,CAAU,KAAK,CAAC,EAA/C,OAAO,QAAA,EAAE,UAAU,QAA4B,CAAC;IAEjD,IAAA,KAA8C,QAAQ,CAAC,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,EAAzF,kBAAkB,QAAA,EAAE,qBAAqB,QAAgD,CAAC;IAEjG,OAAO,CACH,eAAK,SAAS,EAAC,0BAA0B,aACrC,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,GAAI,EAE1F,MAAC,WAAW,IAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EAAE,gBAAgB,EAAC,QAAQ,EAAC,SAAS,EAAC,iBAAiB,aACjI,YAAG,SAAS,EAAC,KAAK,wcAKd,EACJ,eAEM,IAEI,IACZ,CACT,CAAA;AAEL,CAAC,CAAA","sourcesContent":["\nimport { useState } from \"react\";\nimport { SolidDialog } from \"../../shad-cn-ui\";\nimport { SolidIcon } from \"../../shad-cn-ui/SolidIcon\";\n\n\nexport const SolidListViewOptions = ({ }: any) => {\n\n    const [visible, setVisible] = useState<boolean>(false);\n\n    const [componentsToRender, setComponentsToRender] = useState([\"Header\", \"NonExistentComponent\"]);\n\n    return (\n        <div className=\"card flex justify-center\">\n            <SolidIcon name=\"si-cog\" onClick={() => setVisible(true)} style={{ cursor: 'pointer' }} />\n\n            <SolidDialog header=\"Header\" visible={visible} onHide={() => setVisible(false)} contentClassName=\"w-full\" className=\"solid-dialog-lg\">\n                <p className=\"m-0\">\n                    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                </p>\n                <div>\n\n                </div>\n\n            </SolidDialog>\n        </div>\n    )\n\n}\n"]}

package/dist/components/core/common/SolidListViewOptions.tsx

@@ -11,7 +11,7 @@ export const SolidListViewOptions = ({ }: any) => {
     const [componentsToRender, setComponentsToRender] = useState(["Header", "NonExistentComponent"]);
 
     return (
-        <div className="card flex justify-content-center">
+        <div className="card flex justify-center">
             <SolidIcon name="si-cog" onClick={() => setVisible(true)} style={{ cursor: 'pointer' }} />
 
             <SolidDialog header="Header" visible={visible} onHide={() => setVisible(false)} contentClassName="w-full" className="solid-dialog-lg">

package/dist/components/core/common/SolidPasswordHelperText.js

@@ -6,9 +6,9 @@ export var SolidPasswordHelperText = function (_a) {
     var envPasswordHelperText = (_b = env("NEXT_PUBLIC_PASSWORD_COMPLEXITY_DESC")) !== null && _b !== void 0 ? _b : "";
     if (!text && !envPasswordHelperText)
         return null;
-    return (_jsx("div", { className: "mt-4 text-sm grid", children: text ?
+    return (_jsx("div", { className: "mt-4 text-sm", children: text ?
             _jsx("div", { dangerouslySetInnerHTML: { __html: text } })
             :
-                _jsx("div", { className: "col-12", children: _jsx("div", { className: "grid", children: envPasswordHelperText.split("\\n").map(function (line, idx) { return (_jsx("div", { className: "col-6 pt-0", children: _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { children: "\u2022" }), _jsx("span", { children: line })] }) }, idx)); }) }) }) }));
+                _jsx("div", { className: "w-full", children: _jsx("div", { className: "flex flex-wrap -mx-2", children: envPasswordHelperText.split("\\n").map(function (line, idx) { return (_jsx("div", { className: "w-1/2 px-2 pt-0", children: _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { children: "\u2022" }), _jsx("span", { children: line })] }) }, idx)); }) }) }) }));
 };
 //# sourceMappingURL=SolidPasswordHelperText.js.map

package/dist/components/core/common/SolidPasswordHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidPasswordHelperText.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidPasswordHelperText.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAM5C,MAAM,CAAC,IAAM,uBAAuB,GAAsC,UAAC,EAAQ;;QAAN,IAAI,UAAA;IAC/E,IAAM,qBAAqB,GAAG,MAAA,GAAG,CAAC,sCAAsC,CAAC,mCAAI,EAAE,CAAC;IAEhF,IAAI,CAAC,IAAI,IAAI,CAAC,qBAAqB;QAAE,OAAO,IAAI,CAAC;IAEjD,OAAO,CACL,cAAK,SAAS,EAAC,mBAAmB,YAC/B,IAAI,CAAC,CAAC;YACL,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAQ;YACtD,CAAC;gBACD,cAAK,SAAS,EAAC,QAAQ,YACrB,cAAK,SAAS,EAAC,MAAM,YAClB,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CACrD,cAAe,SAAS,EAAC,YAAY,YACnC,eAAK,SAAS,EAAC,YAAY,aACzB,oCAAc,EACd,yBAAO,IAAI,GAAQ,IACf,IAJE,GAAG,CAKP,CACP,EAPsD,CAOtD,CAAC,GACE,GACF,GAEJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { env } from \"../../../adapters/env\";\n\ninterface PasswordHelperTextProps {\n  text?: any;\n}\n\nexport const SolidPasswordHelperText: React.FC<PasswordHelperTextProps> = ({ text }) => {\n  const envPasswordHelperText = env(\"NEXT_PUBLIC_PASSWORD_COMPLEXITY_DESC\") ?? \"\";\n\n  if (!text && !envPasswordHelperText) return null;\n\n  return (\n    <div className=\"mt-4 text-sm grid\">\n      {text ?\n        <div dangerouslySetInnerHTML={{ __html: text }}></div>\n        :\n        <div className=\"col-12\">\n          <div className=\"grid\">\n            {envPasswordHelperText.split(\"\\\\n\").map((line, idx) => (\n              <div key={idx} className=\"col-6 pt-0\">\n                <div className=\"flex gap-2\">\n                  <span>•</span>\n                  <span>{line}</span>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      }\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"SolidPasswordHelperText.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidPasswordHelperText.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAM5C,MAAM,CAAC,IAAM,uBAAuB,GAAsC,UAAC,EAAQ;;QAAN,IAAI,UAAA;IAC/E,IAAM,qBAAqB,GAAG,MAAA,GAAG,CAAC,sCAAsC,CAAC,mCAAI,EAAE,CAAC;IAEhF,IAAI,CAAC,IAAI,IAAI,CAAC,qBAAqB;QAAE,OAAO,IAAI,CAAC;IAEjD,OAAO,CACL,cAAK,SAAS,EAAC,cAAc,YAC1B,IAAI,CAAC,CAAC;YACL,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAQ;YACtD,CAAC;gBACD,cAAK,SAAS,EAAC,QAAQ,YACrB,cAAK,SAAS,EAAC,sBAAsB,YAClC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CACrD,cAAe,SAAS,EAAC,iBAAiB,YACxC,eAAK,SAAS,EAAC,YAAY,aACzB,oCAAc,EACd,yBAAO,IAAI,GAAQ,IACf,IAJE,GAAG,CAKP,CACP,EAPsD,CAOtD,CAAC,GACE,GACF,GAEJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { env } from \"../../../adapters/env\";\n\ninterface PasswordHelperTextProps {\n  text?: any;\n}\n\nexport const SolidPasswordHelperText: React.FC<PasswordHelperTextProps> = ({ text }) => {\n  const envPasswordHelperText = env(\"NEXT_PUBLIC_PASSWORD_COMPLEXITY_DESC\") ?? \"\";\n\n  if (!text && !envPasswordHelperText) return null;\n\n  return (\n    <div className=\"mt-4 text-sm\">\n      {text ?\n        <div dangerouslySetInnerHTML={{ __html: text }}></div>\n        :\n        <div className=\"w-full\">\n          <div className=\"flex flex-wrap -mx-2\">\n            {envPasswordHelperText.split(\"\\\\n\").map((line, idx) => (\n              <div key={idx} className=\"w-1/2 px-2 pt-0\">\n                <div className=\"flex gap-2\">\n                  <span>•</span>\n                  <span>{line}</span>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      }\n    </div>\n  );\n};\n"]}

package/dist/components/core/common/SolidPasswordHelperText.tsx

@@ -11,14 +11,14 @@ export const SolidPasswordHelperText: React.FC<PasswordHelperTextProps> = ({ tex
   if (!text && !envPasswordHelperText) return null;
 
   return (
-    <div className="mt-4 text-sm grid">
+    <div className="mt-4 text-sm">
       {text ?
         <div dangerouslySetInnerHTML={{ __html: text }}></div>
         :
-        <div className="col-12">
-          <div className="grid">
+        <div className="w-full">
+          <div className="flex flex-wrap -mx-2">
             {envPasswordHelperText.split("\\n").map((line, idx) => (
-              <div key={idx} className="col-6 pt-0">
+              <div key={idx} className="w-1/2 px-2 pt-0">
                 <div className="flex gap-2">
                   <span>•</span>
                   <span>{line}</span>

package/dist/components/core/common/SolidSearchBox.js

@@ -8,6 +8,6 @@ export var SolidSearchBox = function (_a) {
     var search = function (event) {
         // setItems([...Array(10).keys()].map(item => event.query + '-' + item));
     };
-    return (_jsx("div", { className: "card flex justify-content-center", children: _jsx(SolidAutocomplete, { value: value, suggestions: items, completeMethod: search, onChange: function (e) { return setValue(e.value); } }) }));
+    return (_jsx("div", { className: "card flex justify-center", children: _jsx(SolidAutocomplete, { value: value, suggestions: items, completeMethod: search, onChange: function (e) { return setValue(e.value); } }) }));
 };
 //# sourceMappingURL=SolidSearchBox.js.map

package/dist/components/core/common/SolidSearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidSearchBox.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidSearchBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,EAAiB;QAAf,QAAQ,cAAA;IAC/B,IAAA,KAAoB,QAAQ,CAAS,EAAE,CAAC,EAAvC,KAAK,QAAA,EAAE,QAAQ,QAAwB,CAAC;IACzC,IAAA,KAAoB,QAAQ,CAAW,EAAE,CAAC,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAC;IACjD,IAAM,MAAM,GAAG,UAAC,KAAU;QACtB,yEAAyE;IAC7E,CAAC,CAAA;IACD,OAAO,CACH,cAAK,SAAS,EAAC,kCAAkC,YAC7C,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAjB,CAAiB,GAAI,GACjH,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { useState } from \"react\";\nimport { SolidAutocomplete } from \"../../shad-cn-ui\";\n\n\nexport const SolidSearchBox = ({ viewData }: any) => {\n    const [value, setValue] = useState<string>('');\n    const [items, setItems] = useState<string[]>([]);\n    const search = (event: any) => {\n        // setItems([...Array(10).keys()].map(item => event.query + '-' + item));\n    }\n    return (\n        <div className=\"card flex justify-content-center\">\n            <SolidAutocomplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />\n        </div>\n    )\n}\n"]}
+{"version":3,"file":"SolidSearchBox.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidSearchBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,EAAiB;QAAf,QAAQ,cAAA;IAC/B,IAAA,KAAoB,QAAQ,CAAS,EAAE,CAAC,EAAvC,KAAK,QAAA,EAAE,QAAQ,QAAwB,CAAC;IACzC,IAAA,KAAoB,QAAQ,CAAW,EAAE,CAAC,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAC;IACjD,IAAM,MAAM,GAAG,UAAC,KAAU;QACtB,yEAAyE;IAC7E,CAAC,CAAA;IACD,OAAO,CACH,cAAK,SAAS,EAAC,0BAA0B,YACrC,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAjB,CAAiB,GAAI,GACjH,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { useState } from \"react\";\nimport { SolidAutocomplete } from \"../../shad-cn-ui\";\n\n\nexport const SolidSearchBox = ({ viewData }: any) => {\n    const [value, setValue] = useState<string>('');\n    const [items, setItems] = useState<string[]>([]);\n    const search = (event: any) => {\n        // setItems([...Array(10).keys()].map(item => event.query + '-' + item));\n    }\n    return (\n        <div className=\"card flex justify-center\">\n            <SolidAutocomplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />\n        </div>\n    )\n}\n"]}

package/dist/components/core/common/SolidSearchBox.tsx

@@ -9,7 +9,7 @@ export const SolidSearchBox = ({ viewData }: any) => {
         // setItems([...Array(10).keys()].map(item => event.query + '-' + item));
     }
     return (
-        <div className="card flex justify-content-center">
+        <div className="card flex justify-center">
             <SolidAutocomplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         </div>
     )

package/dist/components/core/common/SolidXAiIframe.js

@@ -82,7 +82,7 @@ export var SolidXAiIframe = function (_a) {
     }
     // Error state
     if (reachable === false) {
-        return (_jsx("div", { className: "flex  items-center justify-center align-items-center h-full text-center p-4 overflow-x-auto\t", children: _jsxs("h3", { children: ["Mcp Server not reachable. ", _jsx("br", {}), _jsx("span", { className: "opacity-60 mt-2", children: _jsx("strong", { children: url }) })] }) }));
+        return (_jsx("div", { className: "flex h-full items-center justify-center overflow-x-auto p-4 text-center", children: _jsxs("h3", { children: ["Mcp Server not reachable. ", _jsx("br", {}), _jsx("span", { className: "opacity-60 mt-2", children: _jsx("strong", { children: url }) })] }) }));
     }
     // SUCCESS → load iframe
     return (_jsx("iframe", { src: url, style: {

package/dist/components/core/common/SolidXAiIframe.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidXAiIframe.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidXAiIframe.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAU,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM3D,MAAM,CAAC,IAAM,cAAc,GAAkC,UAAC,EAAO;QAAL,GAAG,SAAA;IAC3D,IAAA,KAA4B,QAAQ,CAAiB,IAAI,CAAC,EAAzD,SAAS,QAAA,EAAE,YAAY,QAAkC,CAAC;IAGjE,SAAS,CAAC;QACV,IAAM,OAAO,GAAG,UAAC,KAAS;;YACxB,IAAI,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,MAAM,MAAK,gBAAgB,EAAE;gBAC3C,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;aAC1B;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC5C,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,EAA9C,CAA8C,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IAIL,SAAS,CAAC;QACR,IAAM,WAAW,GAAG;;;;;;wBAGJ,qBAAM,KAAK,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAA;;wBAA1C,GAAG,GAAG,SAAoC;wBAEhD,IAAI,GAAG,CAAC,EAAE,EAAE;4BACV,YAAY,CAAC,IAAI,CAAC,CAAC;yBACpB;6BAAM;4BACL,YAAY,CAAC,KAAK,CAAC,CAAC;yBACrB;;;;wBAED,YAAY,CAAC,KAAK,CAAC,CAAC;;;;;aAEvB,CAAC;QAEF,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,gBAAgB;IAChB,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,uDAAuD,6CAEhE,CACP,CAAC;KACH;IAED,cAAc;IACd,IAAI,SAAS,KAAK,KAAK,EAAE;QACvB,OAAO,CACL,cAAK,SAAS,EAAC,+FAA8F,YAC3G,uDAA8B,cAAS,EACrC,eAAM,SAAS,EAAC,iBAAiB,YAC/B,2BAAS,GAAG,GAAU,GACjB,IACJ,GACD,CACP,CAAC;KACH;IACD,wBAAwB;IACxB,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,MAAM;SACf,EACD,KAAK,EAAC,iCAAiC,EACvC,KAAK,EAAC,uBAAuB,GAC7B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\ninterface SolidXAiIframeProps {\n  url: string;\n}\n\nexport const SolidXAiIframe: React.FC<SolidXAiIframeProps> = ({ url }) => {\n  const [reachable, setReachable] = useState<boolean | null>(null);\n\n\n  useEffect(() => {\n  const handler = (event:any) => {\n    if (event.data?.action === \"REFRESH_PARENT\") {\n      window.location.reload();\n    }\n  };\n\n  window.addEventListener(\"message\", handler);\n  return () => window.removeEventListener(\"message\", handler);\n}, []);\n\n\n\n  useEffect(() => {\n    const checkServer = async () => {\n      try {\n        // Try to fetch the page HEAD (fast, no content)\n        const res = await fetch(url, { method: \"HEAD\" });\n\n        if (res.ok) {\n          setReachable(true);\n        } else {\n          setReachable(false);\n        }\n      } catch (err) {\n        setReachable(false);\n      }\n    };\n\n    checkServer();\n  }, [url]);\n\n  // Loading state\n  if (reachable === null) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-gray-600\">\n        Checking SolidX AI server...\n      </div>\n    );\n  }\n\n  // Error state\n  if (reachable === false) {\n    return (\n      <div className=\"flex  items-center justify-center align-items-center h-full text-center p-4 overflow-x-auto\t\">\n        <h3>Mcp Server not reachable. <br></br>\n          <span className=\"opacity-60 mt-2\">\n            <strong>{url}</strong>\n          </span>\n        </h3>\n      </div>\n    );\n  }\n  // SUCCESS → load iframe\n  return (\n    <iframe\n      src={url}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        border: \"none\",\n      }}\n      allow=\"clipboard-write; clipboard-read\"\n      title=\"SolidX AI JSON Viewer\"\n    />\n  );\n};\n"]}
+{"version":3,"file":"SolidXAiIframe.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidXAiIframe.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAU,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM3D,MAAM,CAAC,IAAM,cAAc,GAAkC,UAAC,EAAO;QAAL,GAAG,SAAA;IAC3D,IAAA,KAA4B,QAAQ,CAAiB,IAAI,CAAC,EAAzD,SAAS,QAAA,EAAE,YAAY,QAAkC,CAAC;IAGjE,SAAS,CAAC;QACV,IAAM,OAAO,GAAG,UAAC,KAAS;;YACxB,IAAI,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,MAAM,MAAK,gBAAgB,EAAE;gBAC3C,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;aAC1B;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC5C,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,EAA9C,CAA8C,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IAIL,SAAS,CAAC;QACR,IAAM,WAAW,GAAG;;;;;;wBAGJ,qBAAM,KAAK,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAA;;wBAA1C,GAAG,GAAG,SAAoC;wBAEhD,IAAI,GAAG,CAAC,EAAE,EAAE;4BACV,YAAY,CAAC,IAAI,CAAC,CAAC;yBACpB;6BAAM;4BACL,YAAY,CAAC,KAAK,CAAC,CAAC;yBACrB;;;;wBAED,YAAY,CAAC,KAAK,CAAC,CAAC;;;;;aAEvB,CAAC;QAEF,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,gBAAgB;IAChB,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,uDAAuD,6CAEhE,CACP,CAAC;KACH;IAED,cAAc;IACd,IAAI,SAAS,KAAK,KAAK,EAAE;QACvB,OAAO,CACL,cAAK,SAAS,EAAC,yEAAyE,YACtF,uDAA8B,cAAS,EACrC,eAAM,SAAS,EAAC,iBAAiB,YAC/B,2BAAS,GAAG,GAAU,GACjB,IACJ,GACD,CACP,CAAC;KACH;IACD,wBAAwB;IACxB,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,MAAM;SACf,EACD,KAAK,EAAC,iCAAiC,EACvC,KAAK,EAAC,uBAAuB,GAC7B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\ninterface SolidXAiIframeProps {\n  url: string;\n}\n\nexport const SolidXAiIframe: React.FC<SolidXAiIframeProps> = ({ url }) => {\n  const [reachable, setReachable] = useState<boolean | null>(null);\n\n\n  useEffect(() => {\n  const handler = (event:any) => {\n    if (event.data?.action === \"REFRESH_PARENT\") {\n      window.location.reload();\n    }\n  };\n\n  window.addEventListener(\"message\", handler);\n  return () => window.removeEventListener(\"message\", handler);\n}, []);\n\n\n\n  useEffect(() => {\n    const checkServer = async () => {\n      try {\n        // Try to fetch the page HEAD (fast, no content)\n        const res = await fetch(url, { method: \"HEAD\" });\n\n        if (res.ok) {\n          setReachable(true);\n        } else {\n          setReachable(false);\n        }\n      } catch (err) {\n        setReachable(false);\n      }\n    };\n\n    checkServer();\n  }, [url]);\n\n  // Loading state\n  if (reachable === null) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-gray-600\">\n        Checking SolidX AI server...\n      </div>\n    );\n  }\n\n  // Error state\n  if (reachable === false) {\n    return (\n      <div className=\"flex h-full items-center justify-center overflow-x-auto p-4 text-center\">\n        <h3>Mcp Server not reachable. <br></br>\n          <span className=\"opacity-60 mt-2\">\n            <strong>{url}</strong>\n          </span>\n        </h3>\n      </div>\n    );\n  }\n  // SUCCESS → load iframe\n  return (\n    <iframe\n      src={url}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        border: \"none\",\n      }}\n      allow=\"clipboard-write; clipboard-read\"\n      title=\"SolidX AI JSON Viewer\"\n    />\n  );\n};\n"]}

package/dist/components/core/common/SolidXAiIframe.tsx

@@ -52,7 +52,7 @@ export const SolidXAiIframe: React.FC<SolidXAiIframeProps> = ({ url }) => {
   // Error state
   if (reachable === false) {
     return (
-      <div className="flex  items-center justify-center align-items-center h-full text-center p-4 overflow-x-auto	">
+      <div className="flex h-full items-center justify-center overflow-x-auto p-4 text-center">
         <h3>Mcp Server not reachable. <br></br>
           <span className="opacity-60 mt-2">
             <strong>{url}</strong>

package/dist/components/core/extension/solid-core/listOfValues/form/SolidLovTypeChangeFormEditWidget.js

@@ -95,7 +95,7 @@ export var SolidLovTypeChangeFormEditWidget = function (_a) {
         formik.setFieldValue(fieldName, inputValue);
         setIsCreating(false);
     };
-    return (_jsxs("div", { className: "solid-lov-type-change-widget w-full", children: [_jsxs("div", { className: "flex align-items-center justify-between  mb-2", children: [_jsx("label", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: fieldLabel }), _jsxs("button", { type: "button", onClick: function () {
+    return (_jsxs("div", { className: "solid-lov-type-change-widget w-full", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: fieldLabel }), _jsxs("button", { type: "button", onClick: function () {
                             setIsCreating(!isCreating);
                             if (!isCreating)
                                 setInputValue("");