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

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

@@ -172,8 +172,17 @@ const transformRulesToFilters = (input: any, viewData: any) => {
     const processRule = (rule: any) => {
         if (rule.value !== undefined && rule.value !== null) {
 
-            // Ensure rule.value is always an array
-            let values = typeof rule.value[0] === "object" ? rule.value.map((i: any) => i?.value ? i?.value : i) : rule?.value;
+            // Ensure rule.value is always an array of primitive values.
+            // Mixed arrays like ["failed", { label: "pending", value: "pending" }]
+            // must be normalized before query serialization.
+            const rawValues = Array.isArray(rule?.value) ? rule.value : [rule?.value];
+            let values = rawValues.map((item: any) => {
+                if (item && typeof item === "object") {
+                    if (Object.prototype.hasOwnProperty.call(item, "value")) return item.value;
+                    if (Object.prototype.hasOwnProperty.call(item, "label")) return item.label;
+                }
+                return item;
+            });
             if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between' && rule.matchMode !== '$null' && rule.matchMode !== '$notNull') {
                 values = values[0];
             }
@@ -419,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}
@@ -432,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>
@@ -440,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);
                             }}
@@ -533,7 +549,9 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     type OverlayOption =
         | { id: string; kind: "field"; field: any }
         | { id: string; kind: "predefined"; predefined: any }
-        | { id: string; kind: "saved"; saved: any };
+        | { id: string; kind: "saved"; saved: any }
+        | { id: string; kind: "custom" }
+        | { id: string; kind: "grouping" };
     type ManagedChipItem = {
         id: string;
         type: "saved" | "search" | "predefined" | "custom" | "grouping";
@@ -648,10 +666,17 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     const [savedFilterQueryString, setSavedFilterQueryString] = useState<string>();
     const [showOverlay, setShowOverlay] = useState(false);
     const overlayRef = useRef<HTMLDivElement | null>(null);
+    const searchInputRef = useRef<HTMLInputElement | null>(null);
     const [showChipManager, setShowChipManager] = useState(false);
     const chipManagerRef = useRef<HTMLDivElement | null>(null);
     const chipManagerTriggerRef = useRef<HTMLButtonElement | null>(null);
 
+    const focusSearchInput = () => {
+        requestAnimationFrame(() => {
+            searchInputRef.current?.focus();
+        });
+    };
+
     useEffect(() => {
         if (focusedIndex >= 0 && showOverlay) {
             const activeElement = document.querySelector(`.solid-search-overlay-option-active`);
@@ -702,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(() => {
@@ -909,12 +946,20 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             const fieldElements = extractFields(layoutChildren);
 
 
-            const fieldsList = Object.entries(fieldsData ?? {}).map(([key, value]: any) => {
+            // Build one entry per layout column (not per field name), so multiple columns
+            // sharing the same field name (e.g. several viewMetadata columns with different
+            // searchFields/labels) each appear as a separate searchable option.
+            const seenKeys = new Set<string>();
+            const fieldsList: any[] = [];
+
+            // First pass: one entry per unique field name (for non-searchable / filter use)
+            Object.entries(fieldsData ?? {}).forEach(([key, value]: any) => {
                 const viewFieldElement = fieldElements.find(
                     (f: any) => f?.attrs?.name === key
                 );
-                return {
-                    name: value.displayName,
+                seenKeys.add(key);
+                fieldsList.push({
+                    name: viewFieldElement?.attrs?.label ?? value.displayName,
                     value: key,
                     type: value.type,
                     ormType: value.ormType,
@@ -922,7 +967,33 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                     searchField: viewFieldElement?.attrs?.searchField ?? null,
                     isSearchable: viewFieldElement?.attrs?.isSearchable ?? false,
                     relationType: value?.relationType ?? null,
-                };
+                });
+            });
+
+            // Second pass: for any layout column that shares a field name but has a
+            // distinct searchField, add it as an additional searchable entry.
+            fieldElements.forEach((fieldElement: any) => {
+                const key = fieldElement?.attrs?.name;
+                const searchField = fieldElement?.attrs?.searchField;
+                const isSearchable = fieldElement?.attrs?.isSearchable ?? false;
+                if (!isSearchable || !searchField) return;
+                // Already covered by the first pass entry for this key?
+                const existingEntry = fieldsList.find(
+                    (e: any) => e.value === key && e.searchField === searchField
+                );
+                if (existingEntry) return; // already in list
+                const value: any = (fieldsData ?? {})[key];
+                if (!value) return;
+                fieldsList.push({
+                    name: fieldElement?.attrs?.label ?? value.displayName,
+                    value: key,
+                    type: value.type,
+                    ormType: value.ormType,
+                    matchMode: fieldElement?.attrs?.searchMatchMode,
+                    searchField: searchField,
+                    isSearchable: true,
+                    relationType: value?.relationType ?? null,
+                });
             });
 
             const filterableFieldsList = fieldsList.filter((field: any) => {
@@ -1202,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(() => {
@@ -1237,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 {
 
@@ -1262,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)
 
             }
@@ -1315,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)
@@ -1352,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);
@@ -1360,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));
         }
     }
 
@@ -1377,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 () => {
@@ -1421,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)}
@@ -1544,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;
 
@@ -1593,9 +1662,20 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             kind: "saved" as const,
             saved: s,
         }));
+        const custom: OverlayOption[] = [{
+            id: "footer:custom",
+            kind: "custom" as const,
+        }];
+        const grouping: OverlayOption[] =
+            viewType === "tree"
+                ? [{
+                    id: "footer:grouping",
+                    kind: "grouping" as const,
+                }]
+                : [];
 
-        return [...fields, ...predefined, ...saved];
-    }, [inputValue, searchableFields, predefinedSearches, savedFilters]);
+        return [...fields, ...predefined, ...saved, ...custom, ...grouping];
+    }, [inputValue, searchableFields, predefinedSearches, savedFilters, viewType]);
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const currentValue = inputValue?.trim() || "";
@@ -1640,6 +1720,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                     handlePredefinedSearch(activeOption.predefined);
                 } else if (activeOption?.kind === "saved") {
                     applySavedFilter(activeOption.saved);
+                } else if (activeOption?.kind === "custom") {
+                    openCustomFilterDialog();
+                } else if (activeOption?.kind === "grouping") {
+                    openGroupingDialog();
                 } else if (currentValue) {
                     handleAddChip();
                     setShowOverlay(false);
@@ -1756,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>
@@ -1772,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"
@@ -1806,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"
@@ -1818,10 +1922,11 @@ 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
+                                    ref={searchInputRef}
                                     className="solid-global-search-input"
                                     value={inputValue || ""}
                                     placeholder="Search."
@@ -1845,9 +1950,14 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                 <SolidButton
                                     variant="outline"
                                     size="sm"
+                                    onMouseDown={(e) => {
+                                        // Preserve input focus so overlay keyboard navigation continues to work.
+                                        e.preventDefault();
+                                    }}
                                     onClick={() => {
                                         setShowChipManager(false);
                                         setShowOverlay(true);
+                                        focusSearchInput();
                                     }}
                                     className="custom-filter-button solid-global-search-trigger"
                                 >
@@ -1858,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>
@@ -1891,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>
@@ -1910,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();
@@ -1932,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>
                                                 )
                                             })
@@ -1950,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>
@@ -2009,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}
@@ -2035,8 +2145,12 @@ 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"
+                                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");
+                                    if (optIndex !== -1) setFocusedIndex(optIndex);
+                                }}
                             >
                                 <div className="solid-search-overlay-footer-action-main">
                                     <div className="solid-search-overlay-panel-callout-icon">
@@ -2055,8 +2169,12 @@ 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"
+                                    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");
+                                        if (optIndex !== -1) setFocusedIndex(optIndex);
+                                    }}
                                 >
                                     <div className="solid-search-overlay-footer-action-main">
                                         <div className="solid-search-overlay-panel-callout-icon">
@@ -2154,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