@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

package/dist/components/core/common/SolidLayoutViews.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidLayoutViews.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidLayoutViews.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACX,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/D,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;CAChB;AACD,eAAO,MAAM,gBAAgB,6DAA8D,KAAK,4CAyE/F,CAAA"}
+{"version":3,"file":"SolidLayoutViews.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidLayoutViews.tsx"],"names":[],"mappings":"AAGA,UAAU,KAAK;IACX,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/D,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;CAChB;AACD,eAAO,MAAM,gBAAgB,6DAA8D,KAAK,4CA6D/F,CAAA"}

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

@@ -1,13 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from 'primereact/button';
-import { OverlayPanel } from 'primereact/overlaypanel';
-import { RadioButton } from 'primereact/radiobutton';
-import { useRef } from 'react';
+import { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from '../../shad-cn-ui';
+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 op = useRef(null);
-    return (_jsxs("div", { className: "position-relative", children: [_jsx(Button, { type: "button", size: 'small', severity: 'secondary', icon: _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" }) }), className: 'custom-icon-button', outlined: true, 
-                // @ts-ignore
-                onClick: function (e) { return op.current.toggle(e); } }), _jsxs(OverlayPanel, { ref: op, 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 (_jsxs("div", { className: "flex align-items-center ".concat(option.value === size ? 'solid-active-view' : 'solid-view'), children: [_jsx(RadioButton, { inputId: option.value, name: "sizes", value: option.value, onChange: function (e) { return setSize(e.value); }, checked: option.value === size }), _jsxs("label", { htmlFor: option.value, 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)); }) })] }), _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 (_jsxs("div", { className: "flex align-items-center ".concat(option.value === view ? 'solid-active-view' : 'solid-view'), children: [_jsx(RadioButton, { inputId: option.value, name: "views", value: option.value, onChange: function (e) { return setView(e.value); }, checked: option.value === view }), _jsxs("label", { htmlFor: option.value, 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)); }) })] })] })] }));
+    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); }) })] })] })] }));
 };
 //# 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":"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","sourcesContent":["\nimport { Button } from 'primereact/button';\nimport { OverlayPanel } from 'primereact/overlaypanel';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { useRef } 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 op = useRef(null);\n\n    return (\n        <div className=\"position-relative\">\n            <Button\n                type=\"button\"\n                size='small'\n                severity='secondary'\n                icon={\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                className='custom-icon-button'\n                outlined\n                // @ts-ignore\n                onClick={(e) => op.current.toggle(e)}\n            />\n            <OverlayPanel ref={op} 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) => (\n                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>\n                                <RadioButton\n                                    inputId={option.value}\n                                    name=\"sizes\"\n                                    value={option.value}\n                                    onChange={(e) => setSize(e.value)}\n                                    checked={option.value === size}\n                                />\n                                <label htmlFor={option.value} 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                                </label>\n                            </div>\n                        ))}\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) => (\n                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>\n                                <RadioButton\n                                    inputId={option.value}\n                                    name=\"views\"\n                                    value={option.value}\n                                    onChange={(e) => setView(e.value)}\n                                    checked={option.value === view}\n                                />\n                                <label htmlFor={option.value} 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                                </label>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            </OverlayPanel>\n        </div>\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,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"]}

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

@@ -1,8 +1,6 @@
 
-import { Button } from 'primereact/button';
-import { OverlayPanel } from 'primereact/overlaypanel';
-import { RadioButton } from 'primereact/radiobutton';
-import { useRef } from 'react';
+import { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from '../../shad-cn-ui';
+import { useState } from 'react';
 interface Props {
     sizeOptions: { label: string; value: string, image: string }[];
     setSize: (value: string) => void;
@@ -12,76 +10,64 @@ interface Props {
     view: string;
 }
 export const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setView, view }: Props) => {
-    const op = useRef(null);
+    const [open, setOpen] = useState(false);
 
-    return (
-        <div className="position-relative">
-            <Button
-                type="button"
-                size='small'
-                severity='secondary'
-                icon={
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
-                        <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" />
-                    </svg>
-                }
-                className='custom-icon-button'
-                outlined
-                // @ts-ignore
-                onClick={(e) => op.current.toggle(e)}
+    const renderOption = (
+        option: { label: string; value: string; image: string },
+        groupName: string,
+        currentValue: string,
+        onSelect: (value: string) => void
+    ) => (
+        <label key={option.value} className={`flex align-items-center ${option.value === currentValue ? 'solid-active-view' : 'solid-view'}`}>
+            <input
+                type="radio"
+                name={groupName}
+                value={option.value}
+                checked={option.value === currentValue}
+                onChange={() => onSelect(option.value)}
+                className="solid-radio-native"
             />
-            <OverlayPanel ref={op} className='solid-header-dropdown-panel'>
+            <span className="ml-2 flex align-items-center justify-content-between w-full">
+                {option.label}
+                <img
+                    src={option.image}
+                    alt={option.value}
+                    className='img-fluid position-relative'
+                    style={{ width: '2.75rem' }}
+                />
+            </span>
+        </label>
+    );
+
+    return (
+        <SolidPopover open={open} onOpenChange={setOpen} autoCloseGroup="layout-views">
+            <SolidPopoverTrigger asChild>
+                <SolidButton
+                    type="button"
+                    size='sm'
+                    variant='secondary'
+                    className='custom-icon-button'
+                    leftIcon={
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
+                            <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" />
+                        </svg>
+                    }
+                />
+            </SolidPopoverTrigger>
+            <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">
-                        {sizeOptions.map((option) => (
-                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
-                                <RadioButton
-                                    inputId={option.value}
-                                    name="sizes"
-                                    value={option.value}
-                                    onChange={(e) => setSize(e.value)}
-                                    checked={option.value === size}
-                                />
-                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
-                                    {option.label}
-                                    <img
-                                        src={option.image}
-                                        alt={option.value}
-                                        className='img-fluid position-relative'
-                                        style={{ width: '2.75rem' }}
-                                    />
-                                </label>
-                            </div>
-                        ))}
+                        {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">
-                        {viewModes.map((option) => (
-                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
-                                <RadioButton
-                                    inputId={option.value}
-                                    name="views"
-                                    value={option.value}
-                                    onChange={(e) => setView(e.value)}
-                                    checked={option.value === view}
-                                />
-                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
-                                    {option.label}
-                                    <img
-                                        src={option.image}
-                                        alt={option.value}
-                                        className='img-fluid position-relative'
-                                        style={{ width: '2.75rem' }}
-                                    />
-                                </label>
-                            </div>
-                        ))}
+                        {viewModes.map((option) => renderOption(option, "views", view, setView))}
                     </div>
                 </div>
-            </OverlayPanel>
-        </div>
+            </SolidPopoverContent>
+        </SolidPopover>
     );
 }

package/dist/components/core/common/SolidListViewOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidListViewOptions.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidListViewOptions.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,OAAS,GAAG,4CAyB5C,CAAA"}
+{"version":3,"file":"SolidListViewOptions.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidListViewOptions.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,OAAS,GAAG,4CAyB5C,CAAA"}

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog } from "primereact/dialog";
 import { useState } from "react";
+import { SolidDialog } from "../../shad-cn-ui";
+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("i", { className: "pi pi-cog", onClick: function () { return setVisible(true); } }), _jsxs(Dialog, { header: "Header", visible: visible, style: { width: '50vw' }, onHide: function () { if (!visible)
-                    return; setVisible(false); }, 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-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", {})] })] }));
 };
 //# 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,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,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,YAAG,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAAM,EAE9D,MAAC,MAAM,IAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,cAAQ,IAAI,CAAC,OAAO;oBAAE,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAC1H,YAAG,SAAS,EAAC,KAAK,wcAKd,EACJ,eAEM,IAED,IACP,CACT,CAAA;AAEL,CAAC,CAAA","sourcesContent":["\nimport { Dialog } from \"primereact/dialog\";\nimport { useState } from \"react\";\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            <i className=\"pi pi-cog\" onClick={() => setVisible(true)}></i>\n\n            <Dialog header=\"Header\" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>\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            </Dialog>\n        </div>\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,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"]}

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

@@ -1,6 +1,7 @@
 
-import { Dialog } from "primereact/dialog";
 import { useState } from "react";
+import { SolidDialog } from "../../shad-cn-ui";
+import { SolidIcon } from "../../shad-cn-ui/SolidIcon";
 
 
 export const SolidListViewOptions = ({ }: any) => {
@@ -11,9 +12,9 @@ export const SolidListViewOptions = ({ }: any) => {
 
     return (
         <div className="card flex justify-content-center">
-            <i className="pi pi-cog" onClick={() => setVisible(true)}></i>
+            <SolidIcon name="si-cog" onClick={() => setVisible(true)} style={{ cursor: 'pointer' }} />
 
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+            <SolidDialog header="Header" visible={visible} onHide={() => setVisible(false)} contentClassName="w-full" className="solid-dialog-lg">
                 <p className="m-0">
                     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
@@ -21,11 +22,11 @@ export const SolidListViewOptions = ({ }: any) => {
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </p>
                 <div>
-                   
+
                 </div>
 
-            </Dialog>
+            </SolidDialog>
         </div>
     )
 
-}
+}

package/dist/components/core/common/SolidSaveCustomFilterForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidSaveCustomFilterForm.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidSaveCustomFilterForm.tsx"],"names":[],"mappings":";AAKA,UAAU,8BAA8B;IACpC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,gBAAgB,EAAE,CAAC,EAAG,IAAA,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,GAAG,CAAA;CACnB;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CA8D9E,CAAC"}
+{"version":3,"file":"SolidSaveCustomFilterForm.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidSaveCustomFilterForm.tsx"],"names":[],"mappings":";AAIA,UAAU,8BAA8B;IACpC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,gBAAgB,EAAE,CAAC,EAAG,IAAA,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,GAAG,CAAA;CACnB;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAmE9E,CAAC"}

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

@@ -10,9 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "primereact/button";
-import { Checkbox } from "primereact/checkbox";
 import { useState } from "react";
+import { SolidButton } from "../../shad-cn-ui/SolidButton";
+import { SolidInput } from "../../shad-cn-ui/SolidInput";
 export var SolidSaveCustomFilterForm = function (_a) {
     var currentSavedFilterData = _a.currentSavedFilterData, handleSaveFilter = _a.handleSaveFilter, closeDialog = _a.closeDialog;
     var _b = useState({ name: currentSavedFilterData ? currentSavedFilterData.name : "", isPrivate: currentSavedFilterData ? currentSavedFilterData.isPrivate : false }), formValues = _b[0], setFormValues = _b[1];
@@ -32,6 +32,6 @@ export var SolidSaveCustomFilterForm = function (_a) {
         };
         handleSaveFilter(formData);
     };
-    return (_jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { htmlFor: "name", children: "Name:" }), _jsx("input", { type: "text", id: "name", name: "name", placeholder: "Filter Title", className: "p-inputtext p-inputtext-sm p-component", value: formValues.name, onChange: handleChange, readOnly: currentSavedFilterData })] }), _jsxs("div", { className: "mt-3 flex align-items-center ", children: [_jsx(Checkbox, { inputId: "isPrivate", name: "isPrivate", checked: formValues.isPrivate, onChange: function (e) { return handleChange(e); } }), _jsx("label", { htmlFor: "isPrivate", className: "ml-2", children: "Is Private" })] }), _jsxs("div", { className: "mt-3 flex align-items-center gap-2", children: [_jsx(Button, { type: "submit", label: currentSavedFilterData ? "Update" : "Save", size: "small" }), _jsx(Button, { type: "button", label: "Cancel", size: "small", outlined: true, onClick: function () { return closeDialog(); } })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "solid-save-filter-form", children: [_jsxs("div", { className: "solid-save-filter-field", children: [_jsx("label", { htmlFor: "name", className: "solid-save-filter-label", children: "Name" }), _jsx(SolidInput, { id: "name", name: "name", placeholder: "Filter Title", value: formValues.name, onChange: handleChange, readOnly: currentSavedFilterData, className: "solid-save-filter-input" })] }), _jsxs("label", { htmlFor: "isPrivate", className: "solid-save-filter-checkbox-row", children: [_jsx("input", { id: "isPrivate", name: "isPrivate", type: "checkbox", className: "solid-save-filter-checkbox", checked: formValues.isPrivate, onChange: handleChange }), _jsxs("span", { className: "solid-save-filter-checkbox-copy", children: [_jsx("span", { className: "solid-save-filter-label", children: "Private Filter" }), _jsx("span", { className: "solid-save-filter-hint", children: "Only you will be able to access this saved filter." })] })] }), _jsxs("div", { className: "solid-save-filter-actions", children: [_jsx(SolidButton, { type: "submit", size: "sm", children: currentSavedFilterData ? "Update" : "Save" }), _jsx(SolidButton, { type: "button", size: "sm", variant: "outline", onClick: function () { return closeDialog(); }, children: "Cancel" })] })] }));
 };
 //# sourceMappingURL=SolidSaveCustomFilterForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidSaveCustomFilterForm.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidSaveCustomFilterForm.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQjC,MAAM,CAAC,IAAM,yBAAyB,GAA6C,UAAC,EAAyD;QAAvD,sBAAsB,4BAAA,EAAE,gBAAgB,sBAAA,EAAE,WAAW,iBAAA;IACjI,IAAA,KAA8B,QAAQ,CAAC,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EAAxL,UAAU,QAAA,EAAE,aAAa,QAA+J,CAAC;IAEhM,IAAM,YAAY,GAAG,UAAC,CAAsC;QAClD,IAAA,KAAiC,CAAC,CAAC,MAAM,EAAvC,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAa,CAAC;QAChD,aAAa,CAAC,UAAC,IAAI;;YAAK,OAAA,uBACjB,IAAI,gBACN,IAAI,IAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,OAC/C;QAHsB,CAGtB,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,CAAkB;QACpC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAM,QAAQ,GAAG;YACb,EAAE,EAAE,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;YAC7D,IAAI,EAAE,UAAU,CAAC,IAAI;YACrB,SAAS,EAAE,UAAU,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;SACvD,CAAA;QACD,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,gBAAM,QAAQ,EAAE,YAAY,aACxB,eAAK,SAAS,EAAC,wBAAwB,aACnC,gBAAO,OAAO,EAAC,MAAM,sBAAc,EACnC,gBACI,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,cAAc,EAC1B,SAAS,EAAC,wCAAwC,EAClD,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,sBAAsB,GAClC,IACA,EACN,eAAK,SAAS,EAAC,+BAA+B,aAC1C,KAAC,QAAQ,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,UAAU,CAAC,SAAS,EAC7B,QAAQ,EAAE,UAAC,CAAM,IAAK,OAAA,YAAY,CAAC,CAAC,CAAC,EAAf,CAAe,GAE9B,EACX,gBAAO,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,MAAM,2BAAmB,IAC5D,EACN,eAAK,SAAS,EAAC,oCAAoC,aAC/C,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACjD,IAAI,EAAC,OAAO,GACd,EACF,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,OAAO,EAAE,cAAM,OAAA,WAAW,EAAE,EAAb,CAAa,GAC9B,IACA,IACH,CACV,CAAC;AACN,CAAC,CAAC","sourcesContent":["\nimport { Button } from \"primereact/button\";\nimport { Checkbox } from \"primereact/checkbox\";\nimport { useState } from \"react\";\n\ninterface SolidSaveCustomFilterFormProps {\n    currentSavedFilterData: any,\n    handleSaveFilter: ({ }) => void;\n    closeDialog: any\n}\n\nexport const SolidSaveCustomFilterForm: React.FC<SolidSaveCustomFilterFormProps> = ({ currentSavedFilterData, handleSaveFilter, closeDialog }) => {\n    const [formValues, setFormValues] = useState({ name: currentSavedFilterData ? currentSavedFilterData.name : \"\", isPrivate: currentSavedFilterData ? currentSavedFilterData.isPrivate : false });\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const { name, value, type, checked } = e.target;\n        setFormValues((prev) => ({\n            ...prev,\n            [name]: type === \"checkbox\" ? checked : value,\n        }));\n    };\n\n    const handleSubmit = (e: React.FormEvent) => {\n        e.preventDefault();\n        const formData = {\n            id: currentSavedFilterData ? currentSavedFilterData.id : null,\n            name: formValues.name,\n            isPrivate: formValues.isPrivate === true ? true : \"\",\n        }\n        handleSaveFilter(formData);\n    };\n\n    return (\n        <form onSubmit={handleSubmit}>\n            <div className=\"flex flex-column gap-2\">\n                <label htmlFor=\"name\">Name:</label>\n                <input\n                    type=\"text\"\n                    id=\"name\"\n                    name=\"name\"\n                    placeholder=\"Filter Title\"\n                    className=\"p-inputtext p-inputtext-sm p-component\"\n                    value={formValues.name}\n                    onChange={handleChange}\n                    readOnly={currentSavedFilterData}\n                />\n            </div>\n            <div className=\"mt-3 flex align-items-center \">\n                <Checkbox\n                    inputId=\"isPrivate\"\n                    name=\"isPrivate\"\n                    checked={formValues.isPrivate}\n                    onChange={(e: any) => handleChange(e)}\n                >\n                </Checkbox>\n                <label htmlFor=\"isPrivate\" className=\"ml-2\">Is Private</label>\n            </div>\n            <div className=\"mt-3 flex align-items-center gap-2\">\n                <Button\n                    type=\"submit\"\n                    label={currentSavedFilterData ? \"Update\" : \"Save\"}\n                    size=\"small\"\n                />\n                <Button\n                    type=\"button\"\n                    label=\"Cancel\"\n                    size=\"small\"\n                    outlined\n                    onClick={() => closeDialog()}\n                />\n            </div>\n        </form>\n    );\n};\n\n"]}
+{"version":3,"file":"SolidSaveCustomFilterForm.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidSaveCustomFilterForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { SolidButton } from \"../../shad-cn-ui/SolidButton\";\nimport { SolidInput } from \"../../shad-cn-ui/SolidInput\";\n\ninterface SolidSaveCustomFilterFormProps {\n    currentSavedFilterData: any,\n    handleSaveFilter: ({ }) => void;\n    closeDialog: any\n}\n\nexport const SolidSaveCustomFilterForm: React.FC<SolidSaveCustomFilterFormProps> = ({ currentSavedFilterData, handleSaveFilter, closeDialog }) => {\n    const [formValues, setFormValues] = useState({ name: currentSavedFilterData ? currentSavedFilterData.name : \"\", isPrivate: currentSavedFilterData ? currentSavedFilterData.isPrivate : false });\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const { name, value, type, checked } = e.target;\n        setFormValues((prev) => ({\n            ...prev,\n            [name]: type === \"checkbox\" ? checked : value,\n        }));\n    };\n\n    const handleSubmit = (e: React.FormEvent) => {\n        e.preventDefault();\n        const formData = {\n            id: currentSavedFilterData ? currentSavedFilterData.id : null,\n            name: formValues.name,\n            isPrivate: formValues.isPrivate === true ? true : \"\",\n        }\n        handleSaveFilter(formData);\n    };\n\n    return (\n        <form onSubmit={handleSubmit} className=\"solid-save-filter-form\">\n            <div className=\"solid-save-filter-field\">\n                <label htmlFor=\"name\" className=\"solid-save-filter-label\">Name</label>\n                <SolidInput\n                    id=\"name\"\n                    name=\"name\"\n                    placeholder=\"Filter Title\"\n                    value={formValues.name}\n                    onChange={handleChange}\n                    readOnly={currentSavedFilterData}\n                    className=\"solid-save-filter-input\"\n                />\n            </div>\n            <label htmlFor=\"isPrivate\" className=\"solid-save-filter-checkbox-row\">\n                <input\n                    id=\"isPrivate\"\n                    name=\"isPrivate\"\n                    type=\"checkbox\"\n                    className=\"solid-save-filter-checkbox\"\n                    checked={formValues.isPrivate}\n                    onChange={handleChange}\n                />\n                <span className=\"solid-save-filter-checkbox-copy\">\n                    <span className=\"solid-save-filter-label\">Private Filter</span>\n                    <span className=\"solid-save-filter-hint\">Only you will be able to access this saved filter.</span>\n                </span>\n            </label>\n            <div className=\"solid-save-filter-actions\">\n                <SolidButton\n                    type=\"submit\"\n                    size=\"sm\"\n                >\n                    {currentSavedFilterData ? \"Update\" : \"Save\"}\n                </SolidButton>\n                <SolidButton\n                    type=\"button\"\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onClick={() => closeDialog()}\n                >\n                    Cancel\n                </SolidButton>\n            </div>\n        </form>\n    );\n};\n"]}

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

@@ -1,7 +1,6 @@
-
-import { Button } from "primereact/button";
-import { Checkbox } from "primereact/checkbox";
 import { useState } from "react";
+import { SolidButton } from "../../shad-cn-ui/SolidButton";
+import { SolidInput } from "../../shad-cn-ui/SolidInput";
 
 interface SolidSaveCustomFilterFormProps {
     currentSavedFilterData: any,
@@ -31,45 +30,49 @@ export const SolidSaveCustomFilterForm: React.FC<SolidSaveCustomFilterFormProps>
     };
 
     return (
-        <form onSubmit={handleSubmit}>
-            <div className="flex flex-column gap-2">
-                <label htmlFor="name">Name:</label>
-                <input
-                    type="text"
+        <form onSubmit={handleSubmit} className="solid-save-filter-form">
+            <div className="solid-save-filter-field">
+                <label htmlFor="name" className="solid-save-filter-label">Name</label>
+                <SolidInput
                     id="name"
                     name="name"
                     placeholder="Filter Title"
-                    className="p-inputtext p-inputtext-sm p-component"
                     value={formValues.name}
                     onChange={handleChange}
                     readOnly={currentSavedFilterData}
+                    className="solid-save-filter-input"
                 />
             </div>
-            <div className="mt-3 flex align-items-center ">
-                <Checkbox
-                    inputId="isPrivate"
+            <label htmlFor="isPrivate" className="solid-save-filter-checkbox-row">
+                <input
+                    id="isPrivate"
                     name="isPrivate"
+                    type="checkbox"
+                    className="solid-save-filter-checkbox"
                     checked={formValues.isPrivate}
-                    onChange={(e: any) => handleChange(e)}
-                >
-                </Checkbox>
-                <label htmlFor="isPrivate" className="ml-2">Is Private</label>
-            </div>
-            <div className="mt-3 flex align-items-center gap-2">
-                <Button
-                    type="submit"
-                    label={currentSavedFilterData ? "Update" : "Save"}
-                    size="small"
+                    onChange={handleChange}
                 />
-                <Button
+                <span className="solid-save-filter-checkbox-copy">
+                    <span className="solid-save-filter-label">Private Filter</span>
+                    <span className="solid-save-filter-hint">Only you will be able to access this saved filter.</span>
+                </span>
+            </label>
+            <div className="solid-save-filter-actions">
+                <SolidButton
+                    type="submit"
+                    size="sm"
+                >
+                    {currentSavedFilterData ? "Update" : "Save"}
+                </SolidButton>
+                <SolidButton
                     type="button"
-                    label="Cancel"
-                    size="small"
-                    outlined
+                    size="sm"
+                    variant="outline"
                     onClick={() => closeDialog()}
-                />
+                >
+                    Cancel
+                </SolidButton>
             </div>
         </form>
     );
 };
-

package/dist/components/core/common/SolidSearchBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidSearchBox.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidSearchBox.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,iBAAkB,GAAG,4CAW/C,CAAA"}
+{"version":3,"file":"SolidSearchBox.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidSearchBox.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,iBAAkB,GAAG,4CAW/C,CAAA"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AutoComplete } from "primereact/autocomplete";
 import { useState } from "react";
+import { SolidAutocomplete } from "../../shad-cn-ui";
 export var SolidSearchBox = function (_a) {
     var viewData = _a.viewData;
     var _b = useState(''), value = _b[0], setValue = _b[1];
@@ -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(AutoComplete, { value: value, suggestions: items, completeMethod: search, onChange: function (e) { return setValue(e.value); } }) }));
+    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); } }) }));
 };
 //# 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":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,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,YAAY,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,GAC5G,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["\nimport { AutoComplete } from \"primereact/autocomplete\";\nimport { useState } from \"react\";\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            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />\n        </div>\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,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"]}

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

@@ -1,6 +1,5 @@
-
-import { AutoComplete } from "primereact/autocomplete";
 import { useState } from "react";
+import { SolidAutocomplete } from "../../shad-cn-ui";
 
 
 export const SolidSearchBox = ({ viewData }: any) => {
@@ -11,7 +10,7 @@ export const SolidSearchBox = ({ viewData }: any) => {
     }
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+            <SolidAutocomplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         </div>
     )
-}
+}

package/dist/components/core/dashboard/DashboardFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,UAAU,oBAAoB;IAC1B,kBAAkB,EAAE,uBAAuB,EAAE,CAAC;IAC9C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,OAAO,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAqKD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4K1D,CAAC"}
+{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAI3D,UAAU,oBAAoB;IAC1B,kBAAkB,EAAE,uBAAuB,EAAE,CAAC;IAC9C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,OAAO,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAoKD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0K1D,CAAC"}

package/dist/components/core/dashboard/DashboardFilter.js

@@ -56,14 +56,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { Dropdown } from "primereact/dropdown";
-import { Calendar } from "primereact/calendar";
-import { AutoComplete } from "primereact/autocomplete";
+import { SolidAutocomplete, SolidButton, SolidDatePicker, SolidDialog, SolidDivider, SolidSelect } from "../../shad-cn-ui";
 import { useLazyGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
-import { Divider } from "primereact/divider";
-import { Fieldset } from "primereact/fieldset";
 var getNumberOfInputs = function (matchMode) {
     switch (matchMode) {
         case '$between': return 2;
@@ -135,10 +129,10 @@ var FilterValueInput = function (_a) {
         var dateVal = val ? new Date(val) : null;
         if (isNaN((dateVal === null || dateVal === void 0 ? void 0 : dateVal.getTime()) || 0))
             dateVal = null;
-        return (_jsx(Calendar, { value: dateVal, onChange: function (e) {
-                var dateStr = e.value ? e.value.toISOString().split('T')[0] : '';
+        return (_jsx(SolidDatePicker, { selected: dateVal || undefined, onChange: function (nextDate) {
+                var dateStr = nextDate ? nextDate.toISOString().split('T')[0] : '';
                 updateValue(index, dateStr);
-            }, dateFormat: "mm/dd/yy", placeholder: "mm/dd/yyyy", mask: "99/99/9999", className: "w-full", inputClassName: "w-full p-inputtext-sm" }));
+            }, dateFormat: "MM/dd/yyyy", placeholderText: "mm/dd/yyyy", className: "w-full", inputClassName: "w-full text-sm" }));
     };
     var SelectionStaticInput = function (_a) {
         var val = _a.val, index = _a.index, updateValue = _a.updateValue, dv = _a.dv;
@@ -152,7 +146,7 @@ var FilterValueInput = function (_a) {
             });
             setFilteredItems(filtered);
         };
-        return (_jsx(AutoComplete, { value: val, suggestions: filteredItems, completeMethod: search, onChange: function (e) { return updateValue(index, e.value); }, field: "label", dropdown: true, className: "w-full", inputClassName: "w-full p-inputtext-sm" }));
+        return (_jsx(SolidAutocomplete, { value: val, suggestions: filteredItems, completeMethod: search, onChange: function (e) { return updateValue(index, e.value); }, field: "label", dropdown: true, className: "w-full", inputClassName: "w-full text-sm" }));
     };
     var SelectionDynamicInput = function (_a) {
         var val = _a.val, index = _a.index, updateValue = _a.updateValue, dv = _a.dv;
@@ -183,11 +177,11 @@ var FilterValueInput = function (_a) {
                 }
             });
         }); };
-        return (_jsx(AutoComplete, { value: val, suggestions: filteredItems, completeMethod: search, onChange: function (e) { return updateValue(index, e.value); }, field: "label", dropdown: true, className: "w-full", inputClassName: "w-full p-inputtext-sm" }));
+        return (_jsx(SolidAutocomplete, { value: val, suggestions: filteredItems, completeMethod: search, onChange: function (e) { return updateValue(index, e.value); }, field: "label", dropdown: true, className: "w-full", inputClassName: "w-full text-sm" }));
     };
     if (numberOfInputs === 0)
         return _jsx(_Fragment, {});
-    return (_jsx("div", { className: "flex flex-column gap-2", children: values.map(function (val, index) { return (_jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "flex-grow-1", children: [rule.variable.variableType === 'date' && renderDate(val, index), rule.variable.variableType === 'selectionStatic' && _jsx(SelectionStaticInput, { val: val, index: index, updateValue: updateValue, dv: rule.variable }), rule.variable.variableType === 'selectionDynamic' && _jsx(SelectionDynamicInput, { val: val, index: index, updateValue: updateValue, dv: rule.variable })] }), numberOfInputs === null && (_jsxs("div", { className: "flex align-items-center", children: [_jsx(Button, { type: "button", text: true, severity: 'secondary', icon: "pi pi-plus", size: 'small', onClick: addInput, className: 'p-0 mr-2 target-btn', style: { width: 30, minWidth: 30 } }), _jsx(Button, { type: "button", text: true, severity: 'secondary', icon: "pi pi-trash", size: 'small', onClick: function () { return deleteInput(index); }, className: 'p-0 target-btn', style: { width: 30, minWidth: 30 }, disabled: values.length <= 1 })] }))] }, index)); }) }));
+    return (_jsx("div", { className: "flex flex-column gap-2", children: values.map(function (val, index) { return (_jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "flex-grow-1", children: [rule.variable.variableType === 'date' && renderDate(val, index), rule.variable.variableType === 'selectionStatic' && _jsx(SelectionStaticInput, { val: val, index: index, updateValue: updateValue, dv: rule.variable }), rule.variable.variableType === 'selectionDynamic' && _jsx(SelectionDynamicInput, { val: val, index: index, updateValue: updateValue, dv: rule.variable })] }), numberOfInputs === null && (_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidButton, { type: "button", text: true, severity: 'secondary', icon: "si si-plus", size: 'sm', onClick: addInput, className: 'p-0 mr-2 target-btn', style: { width: 30, minWidth: 30 } }), _jsx(SolidButton, { type: "button", text: true, severity: 'secondary', icon: "si si-trash", size: 'sm', onClick: function () { return deleteInput(index); }, className: 'p-0 target-btn', style: { width: 30, minWidth: 30 }, disabled: values.length <= 1 })] }))] }, index)); }) }));
 };
 export var DashboardFilter = function (_a) {
     var dashboardVariables = _a.dashboardVariables, initialFilters = _a.initialFilters, onApply = _a.onApply, visible = _a.visible, onHide = _a.onHide;
@@ -300,6 +294,6 @@ export var DashboardFilter = function (_a) {
         onApply([]);
         onHide();
     };
-    return (_jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: visible, style: { width: '50vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: onHide, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Add Dashboard Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: onHide })] }), _jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "p-2 lg:p-2", children: [_jsx(Fieldset, { className: 'primary-filter-fieldset', children: _jsxs("div", { className: "flex flex-column gap-3 py-3", children: [rules.map(function (rule) { return (_jsxs("div", { className: "grid grid-nogutter align-items-start", children: [_jsx("div", { className: "col-12 md:col-4 pr-2", children: _jsx("div", { className: "p-inputtext p-disabled w-full flex align-items-center mb-2 md:mb-0", style: { minHeight: '38px' }, children: rule.fieldName }) }), _jsx("div", { className: "col-12 md:col-4 pr-2", children: _jsx(Dropdown, { value: rule.matchMode, onChange: function (e) { return handleChange(rule.id, 'matchMode', e.value); }, options: rule.variable.variableType === 'date' ? dateFilterMatchModeOptions : selectionFilterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full" }) }), _jsx("div", { className: "col-12 md:col-4", children: _jsx(FilterValueInput, { rule: rule, onChange: handleChange }) })] }, rule.id)); }), rules.length === 0 && (_jsx("div", { className: "text-color-secondary italic", children: "No variables available for this dashboard." }))] }) }), _jsxs("div", { className: 'flex gap-3 mt-3', children: [_jsx(Button, { label: "Apply", size: "small", onClick: handleApply, autoFocus: true }), _jsx(Button, { type: 'button', label: 'Cancel', outlined: true, size: 'small', onClick: onHide })] })] })] }));
+    return (_jsxs(SolidDialog, { showHeader: false, visible: visible, className: "solid-global-search-filter solid-dialog-lg", onHide: onHide, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Add Dashboard Filter" }), _jsx(SolidButton, { icon: "si si-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "sm", onClick: onHide })] }), _jsx(SolidDivider, { className: "m-0" }), _jsxs("div", { className: "p-2 lg:p-2", children: [_jsx("div", { className: 'primary-filter-fieldset', children: _jsxs("div", { className: "flex flex-column gap-3 py-3", children: [rules.map(function (rule) { return (_jsxs("div", { className: "grid grid-nogutter align-items-start", children: [_jsx("div", { className: "col-12 md:col-4 pr-2", children: _jsx("div", { className: "p-inputtext p-disabled w-full flex align-items-center mb-2 md:mb-0", style: { minHeight: '38px' }, children: rule.fieldName }) }), _jsx("div", { className: "col-12 md:col-4 pr-2", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) { return handleChange(rule.id, 'matchMode', e.value); }, options: rule.variable.variableType === 'date' ? dateFilterMatchModeOptions : selectionFilterMatchModeOptions, placeholder: "Select Operator", className: "w-full" }) }), _jsx("div", { className: "col-12 md:col-4", children: _jsx(FilterValueInput, { rule: rule, onChange: handleChange }) })] }, rule.id)); }), rules.length === 0 && (_jsx("div", { className: "text-color-secondary italic", children: "No variables available for this dashboard." }))] }) }), _jsxs("div", { className: 'flex gap-3 mt-3', children: [_jsx(SolidButton, { label: "Apply", size: "sm", onClick: handleApply, autoFocus: true }), _jsx(SolidButton, { type: 'button', label: 'Cancel', outlined: true, size: 'sm', onClick: onHide })] })] })] }));
 };
 //# sourceMappingURL=DashboardFilter.js.map