@solidxai/core-ui 0.1.13-beta.2 → 0.1.13-beta.4

package/dist/components/auth/SolidOTPVerify.d.ts

@@ -0,0 +1,3 @@
+declare const SolidOTPVerify: () => import("react/jsx-runtime").JSX.Element;
+export default SolidOTPVerify;
+//# sourceMappingURL=SolidOTPVerify.d.ts.map

package/dist/components/auth/SolidOTPVerify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidOTPVerify.d.ts","sourceRoot":"./","sources":["components/auth/SolidOTPVerify.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,cAAc,+CAmHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/auth/SolidOTPVerify.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { InputOtp } from "primereact/inputotp";
+import { Message } from "primereact/message";
+import { Toast } from "primereact/toast";
+import { useRef, useState } from "react";
+import * as Yup from "yup";
+import { useSelector } from "react-redux";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SolidXLogo.svg';
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+const SolidOTPVerify = () => {
+    // const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    // useEffect(() => {
+    //     trigger("") // Fetch settings on mount
+    // }, [trigger])
+    const solidSettingsData = useSelector((state) => state.settingsState?.solidSettings);
+    const [otp, setOTP] = useState();
+    const toast = useRef(null);
+    const router = useRouter();
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState(false);
+    const validationSchema = Yup.object({
+        email: Yup.string()
+            .email(ERROR_MESSAGES.FIELD_INVALID(' email address'))
+            .required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),
+    });
+    const showToast = (severity, summary, detail) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true } // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+    const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
+    return (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: `auth-container ${solidSettingsData?.authPagesLayout === 'center' ? 'center' : 'side'}`, style: { minWidth: 480 }, children: [solidSettingsData?.authPagesLayout === 'center' &&
+                        _jsx("div", { className: "flex justify-content-center", children: _jsx("div", { className: `solid-logo flex align-items-center ${solidSettingsData?.appLogoPosition}`, children: _jsx(Image, { alt: "solid logo", src: solidSettingsData?.appLogo || SolidLogo, className: "relative", fill: true }) }) }), _jsx("h2", { className: `solid-auth-title ${solidSettingsData?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`, children: "OTP Verification" }), _jsx("p", { className: "solid-auth-subtitle text-sm", children: "Please enter the OTP sent to your email to complete verification" }), _jsx(_Fragment, { children: _jsx(Formik, { initialValues: {
+                                email: "",
+                                password: "",
+                            }, validationSchema: validationSchema, onSubmit: async (values) => {
+                                // Handle form submission
+                                const email = values.email;
+                                const password = values.password;
+                                const response = await signIn("credentials", {
+                                    redirect: false,
+                                    email,
+                                    password,
+                                });
+                                if (response?.error) {
+                                    showToast("error", ERROR_MESSAGES.LOGIN_ERROR, response.error);
+                                }
+                                else {
+                                    showToast("success", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);
+                                    router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
+                                }
+                            }, children: (formik) => (_jsxs(Form, { children: [_jsxs("div", { className: "flex flex-column gap-2 px-3", children: [_jsx("label", { htmlFor: "email", className: "solid-auth-input-label", children: "Enter OTP" }), _jsx(InputOtp, { value: otp, onChange: (e) => setOTP(e.value), length: 6, style: { width: '100%' } }), isFormFieldValid(formik, "email") && _jsx(Message, { className: "text-red-500 text-sm", severity: "error", text: formik?.errors?.email?.toString() }), _jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx(Button, { type: "button", icon: 'pi pi-refresh', iconPos: "left", link: true, label: "Resend Code", className: "px-0 text-sm font-normal" }), _jsx("p", { className: "m-0 text-sm text-color", children: "Time left: 00:28" })] })] }), _jsx("div", { className: "mt-4", children: _jsx(Button, { type: "submit", className: "w-full font-light auth-submit-button", label: "Verify", disabled: formik.isSubmitting, loading: formik.isSubmitting }) })] })) }) })] }), _jsx("div", { className: "text-center mt-5", children: _jsxs("div", { className: "text-sm text-400 secondary-dark-color", children: ['<', " Back to ", _jsx(Link, { className: "font-bold", href: "/auth/login", children: "Sign In" })] }) })] }));
+};
+export default SolidOTPVerify;
+//# sourceMappingURL=SolidOTPVerify.js.map

package/dist/components/auth/SolidOTPVerify.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidOTPVerify.js","sourceRoot":"./","sources":["components/auth/SolidOTPVerify.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { Form, Formik } from \"formik\";\nimport { signIn } from \"next-auth/react\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/navigation\";\nimport { Button } from \"primereact/button\";\nimport { InputOtp } from \"primereact/inputotp\";\nimport { Message } from \"primereact/message\";\nimport { Toast } from \"primereact/toast\";\nimport { useRef, useState } from \"react\";\nimport * as Yup from \"yup\";\nimport { useSelector } from \"react-redux\";\nimport Image from \"next/image\";\nimport SolidLogo from '../../resources/images/SolidXLogo.svg'\nimport { ERROR_MESSAGES } from \"../../constants/error-messages\";\n\nconst SolidOTPVerify = () => {\n\n    // const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();\n    // useEffect(() => {\n    //     trigger(\"\") // Fetch settings on mount\n    // }, [trigger])\n\n    const solidSettingsData = useSelector((state: any) => state.settingsState?.solidSettings);\n\n    const [otp, setOTP] = useState<number | any>();\n\n    const toast = useRef<Toast>(null);\n    const router = useRouter();\n\n    const [password, setPassword] = useState('');\n    const [checked, setChecked] = useState<boolean>(false);\n\n    const validationSchema = Yup.object({\n        email: Yup.string()\n            .email(ERROR_MESSAGES.FIELD_INVALID(' email address'))\n            .required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),\n    });\n\n    const showToast = (severity: \"success\" | \"error\", summary: string, detail: string) => {\n        toast.current?.show({\n            severity,\n            summary,\n            detail,\n            ...(severity === \"error\"\n                ? { sticky: true }            // stays until user closes\n                : { life: 3000 }),\n        });\n    };\n\n    const isFormFieldValid = (formik: any, fieldName: string) =>\n        formik.touched[fieldName] && formik.errors[fieldName];\n\n    return (\n        <>\n            <Toast ref={toast} />\n            <div className={`auth-container ${solidSettingsData?.authPagesLayout === 'center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>\n                {solidSettingsData?.authPagesLayout === 'center' &&\n                    <div className=\"flex justify-content-center\">\n                        <div className={`solid-logo flex align-items-center ${solidSettingsData?.appLogoPosition}`}>\n                            <Image\n                                alt=\"solid logo\"\n                                src={solidSettingsData?.appLogo || SolidLogo}\n                                className=\"relative\"\n                                fill\n                            />\n                        </div>\n                    </div>\n                }\n                <h2 className={`solid-auth-title ${solidSettingsData?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>\n                <p className=\"solid-auth-subtitle text-sm\">\n                    Please enter the OTP sent to your email to complete verification\n                </p>\n                <>\n                    <Formik\n                        initialValues={{\n                            email: \"\",\n                            password: \"\",\n                        }}\n                        validationSchema={validationSchema}\n                        onSubmit={async (values) => {\n                            // Handle form submission\n                            const email = values.email;\n                            const password = values.password;\n\n                            const response = await signIn(\"credentials\", {\n                                redirect: false,\n                                email,\n                                password,\n                            });\n                            if (response?.error) {\n                                showToast(\"error\", ERROR_MESSAGES.LOGIN_ERROR, response.error);\n                            } else {\n                                showToast(\"success\", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);\n                                router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);\n                            }\n\n                        }}\n                    >\n                        {(formik) => (\n                            <Form>\n                                <div className=\"flex flex-column gap-2 px-3\">\n                                    <label htmlFor=\"email\" className=\"solid-auth-input-label\">Enter OTP</label>\n                                    <InputOtp value={otp} onChange={(e) => setOTP(e.value)} length={6} style={{ width: '100%' }} />\n                                    {isFormFieldValid(formik, \"email\") && <Message\n                                        className=\"text-red-500 text-sm\"\n                                        severity=\"error\"\n                                        text={formik?.errors?.email?.toString()}\n                                    />}\n                                    <div className=\"flex align-items-center justify-content-between\">\n                                        <Button type=\"button\" icon='pi pi-refresh' iconPos=\"left\" link label=\"Resend Code\" className=\"px-0 text-sm font-normal\" />\n                                        <p className=\"m-0 text-sm text-color\">\n                                            Time left: 00:28\n                                        </p>\n                                    </div>\n                                </div>\n                                <div className=\"mt-4\">\n                                    <Button type=\"submit\" className=\"w-full font-light auth-submit-button\" label=\"Verify\" disabled={formik.isSubmitting} loading={formik.isSubmitting} />\n                                </div>\n                            </Form>\n                        )}\n                    </Formik>\n                </>\n            </div>\n            <div className=\"text-center mt-5\">\n                <div className=\"text-sm text-400 secondary-dark-color\">\n                    {'<'} Back to <Link className=\"font-bold\" href=\"/auth/login\">Sign In</Link>\n                </div>\n            </div>\n        </>\n    );\n};\n\nexport default SolidOTPVerify;"]}

package/dist/components/auth/SolidOTPVerify.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { InputOtp } from "primereact/inputotp";
+import { Message } from "primereact/message";
+import { Toast } from "primereact/toast";
+import { useEffect, useRef, useState } from "react";
+import * as Yup from "yup";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SolidXLogo.svg'
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
+
+const SolidOTPVerify = () => {
+
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    useEffect(() => {
+        trigger("") // Fetch settings on mount
+    }, [trigger])
+
+    const [otp, setOTP] = useState<number | any>();
+
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState<boolean>(false);
+
+    const validationSchema = Yup.object({
+        email: Yup.string()
+            .email(ERROR_MESSAGES.FIELD_INVALID(' email address'))
+            .required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),
+    });
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true }            // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>
+                {solidSettingsData?.data?.authPagesLayout === 'center' &&
+                    <div className="flex justify-content-center">
+                        <div className={`solid-logo flex align-items-center ${solidSettingsData?.data?.appLogoPosition}`}>
+                            <Image
+                                alt="solid logo"
+                                src={solidSettingsData?.data?.appLogo || SolidLogo}
+                                className="relative"
+                                fill
+                            />
+                        </div>
+                    </div>
+                }
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>
+                <p className="solid-auth-subtitle text-sm">
+                    Please enter the OTP sent to your email to complete verification
+                </p>
+                <>
+                    <Formik
+                        initialValues={{
+                            email: "",
+                            password: "",
+                        }}
+                        validationSchema={validationSchema}
+                        onSubmit={async (values) => {
+                            // Handle form submission
+                            const email = values.email;
+                            const password = values.password;
+
+                            const response = await signIn("credentials", {
+                                redirect: false,
+                                email,
+                                password,
+                            });
+                            if (response?.error) {
+                                showToast("error", ERROR_MESSAGES.LOGIN_ERROR, response.error);
+                            } else {
+                                showToast("success", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);
+                                router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
+                            }
+
+                        }}
+                    >
+                        {(formik) => (
+                            <Form>
+                                <div className="flex flex-column gap-2 px-3">
+                                    <label htmlFor="email" className="solid-auth-input-label">Enter OTP</label>
+                                    <InputOtp value={otp} onChange={(e) => setOTP(e.value)} length={6} style={{ width: '100%' }} />
+                                    {isFormFieldValid(formik, "email") && <Message
+                                        className="text-red-500 text-sm"
+                                        severity="error"
+                                        text={formik?.errors?.email?.toString()}
+                                    />}
+                                    <div className="flex align-items-center justify-content-between">
+                                        <Button type="button" icon='pi pi-refresh' iconPos="left" link label="Resend Code" className="px-0 text-sm font-normal" />
+                                        <p className="m-0 text-sm text-color">
+                                            Time left: 00:28
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="mt-4">
+                                    <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                                </div>
+                            </Form>
+                        )}
+                    </Formik>
+                </>
+            </div>
+            <div className="text-center mt-5">
+                <div className="text-sm text-400 secondary-dark-color">
+                    {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default SolidOTPVerify;

package/dist/components/common/AuthBanner.d.ts

@@ -0,0 +1,3 @@
+declare const AuthBanner: () => import("react/jsx-runtime").JSX.Element;
+export default AuthBanner;
+//# sourceMappingURL=AuthBanner.d.ts.map

package/dist/components/common/AuthBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthBanner.d.ts","sourceRoot":"","sources":["../../../src/components/common/AuthBanner.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,UAAU,+CAoCf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/common/AuthBanner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { env } from "../../adapters/env";
+var AuthBanner = function () {
+    return (_jsx("div", { style: {
+            position: "relative",
+            width: "100%",
+            height: "calc(100vh)",
+            background: 'url(/images/loginhero.png)',
+            // background: 'url(/images/LoginBanner.png)',
+            backgroundSize: 'cover',
+            marginTop: env("ENABLE_CUSTOM_HEADER_FOOTER") === "true" ? 70 : 0
+        }, className: "flex align-items-center", children: _jsx("div", { className: "grid m-0", children: _jsxs("div", { className: "col-8 mx-auto", children: [_jsx("div", { className: "text-5xl text-white font-semibold line-height-3", children: env("SOLID_APP_TITLE") }), _jsx("div", { className: "text-sm text-white line-height-3", children: env("NEXT_PUBLIC_SOLID_APP_DESCRIPTION") }), _jsx("div", { className: "mt-5" })] }) }) }));
+};
+export default AuthBanner;
+//# sourceMappingURL=AuthBanner.js.map

package/dist/components/common/AuthBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthBanner.js","sourceRoot":"","sources":["../../../src/components/common/AuthBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC,IAAM,UAAU,GAAG;IACjB,OAAO,CACL,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,aAAa;YACrB,UAAU,EAAE,4BAA4B;YACxC,8CAA8C;YAC9C,cAAc,EAAE,OAAO;YACvB,SAAS,EAAE,GAAG,CAAC,6BAA6B,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAClE,EACD,SAAS,EAAC,yBAAyB,YAEnC,cAAK,SAAS,EAAC,UAAU,YACvB,eAAK,SAAS,EAAC,eAAe,aAC5B,cAAK,SAAS,EAAC,iDAAiD,YAC7D,GAAG,CAAC,iBAAiB,CAAC,GACnB,EACN,cAAK,SAAS,EAAC,kCAAkC,YAC9C,GAAG,CAAC,mCAAmC,CAAC,GACrC,EACN,cAAK,SAAS,EAAC,MAAM,GASf,IACF,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/common/AuthBanner.tsx

@@ -0,0 +1,41 @@
+import { env } from "../../adapters/env";
+
+const AuthBanner = () => {
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: "calc(100vh)",
+        background: 'url(/images/loginhero.png)',
+        // background: 'url(/images/LoginBanner.png)',
+        backgroundSize: 'cover',
+        marginTop: env("ENABLE_CUSTOM_HEADER_FOOTER") === "true" ? 70 : 0
+      }}
+      className="flex align-items-center"
+    >
+      <div className="grid m-0">
+        <div className="col-8 mx-auto">
+          <div className="text-5xl text-white font-semibold line-height-3">
+            {env("SOLID_APP_TITLE")}
+          </div>
+          <div className="text-sm text-white line-height-3">
+            {env("NEXT_PUBLIC_SOLID_APP_DESCRIPTION")}
+          </div>
+          <div className="mt-5">
+            {/* <AvatarGroup>
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar label="60k+" shape="circle" size="large" className="text-sm text-bold" style={{ color: '#191866', backgroundColor: '#fff' }} />
+            </AvatarGroup> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthBanner;

package/dist/components/common/SingleSelectAutoCompleteField.d.ts

@@ -0,0 +1,2 @@
+export declare const SingleSelectAutoCompleteField: ({ disabled, formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction, formErrors }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SingleSelectAutoCompleteField.d.ts.map

package/dist/components/common/SingleSelectAutoCompleteField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectAutoCompleteField.d.ts","sourceRoot":"","sources":["../../../src/components/common/SingleSelectAutoCompleteField.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,6BAA6B,8JAA+J,GAAG,4CA4D3M,CAAA"}

package/dist/components/common/SingleSelectAutoCompleteField.js

@@ -0,0 +1,92 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+import { getVirtualScrollerOptions } from "../../helpers/autoCompleteVirtualScroll";
+// UsesCases
+// Suppose you have a moduelId field In create Dto then you need to creaate a module key in firmik and use that to store the autocomplete state and along with it update the moduleId  Field with id
+// In case of relationType the Id field will always will be id   
+// Else the value will be whatever valuekey use passed 
+export var SingleSelectAutoCompleteField = function (_a) {
+    var disabled = _a.disabled, formik = _a.formik, isFormFieldValid = _a.isFormFieldValid, relationField = _a.relationField, fieldName = _a.fieldName, fieldNameId = _a.fieldNameId, labelKey = _a.labelKey, valueKey = _a.valueKey, searchData = _a.searchData, existingData = _a.existingData, additionalAction = _a.additionalAction, formErrors = _a.formErrors;
+    var _b = useState(existingData), selectedItem = _b[0], setSelectedItem = _b[1];
+    var _c = useState([]), filteredItem = _c[0], setFilteredItem = _c[1];
+    useEffect(function () {
+        // if (existingData) {
+        setSelectedItem(existingData);
+        // formik.setFieldValue(fieldName, existingData);
+        // }
+    }, [existingData]);
+    var searchItems = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, searchData(event)];
+                case 1:
+                    data = _a.sent();
+                    setFilteredItem(data);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsx(_Fragment, { children: _jsx(AutoComplete, { disabled: disabled ? disabled : false, value: selectedItem, suggestions: filteredItem, 
+            // invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
+            invalid: isFormFieldValid(formik, fieldName), completeMethod: searchItems, 
+            // virtualScrollerOptions={{ itemSize: 38 }}
+            virtualScrollerOptions: getVirtualScrollerOptions({
+                itemsLength: filteredItem.length,
+            }), 
+            // style={{
+            //     maxHeight: 39.67
+            // }}
+            field: labelKey, dropdown: true, onChange: function (e) {
+                // formik.handleChange(e)
+                setSelectedItem(e.value);
+                if (additionalAction) {
+                    additionalAction(e);
+                }
+                if (relationField === true) {
+                    formik.setFieldValue(fieldName, e.value);
+                    formik.setFieldValue(fieldNameId, e.value.id);
+                }
+                else {
+                    formik.setFieldValue(fieldName, e.value[valueKey]);
+                }
+            }, className: "solid-standard-autocomplete" }) }));
+};
+//# sourceMappingURL=SingleSelectAutoCompleteField.js.map

package/dist/components/common/SingleSelectAutoCompleteField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectAutoCompleteField.js","sourceRoot":"","sources":["../../../src/components/common/SingleSelectAutoCompleteField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAIpF,YAAY;AACZ,oMAAoM;AACpM,iEAAiE;AACjE,uDAAuD;AAEvD,MAAM,CAAC,IAAM,6BAA6B,GAAG,UAAC,EAA8J;QAA5J,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,gBAAgB,sBAAA,EAAE,aAAa,mBAAA,EAAE,SAAS,eAAA,EAAE,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAA,EAAE,gBAAgB,sBAAA,EAAE,UAAU,gBAAA;IAE3L,IAAA,KAAkC,QAAQ,CAAC,YAAY,CAAC,EAAvD,YAAY,QAAA,EAAE,eAAe,QAA0B,CAAC;IACzD,IAAA,KAAkC,QAAQ,CAAC,EAAE,CAAC,EAA7C,YAAY,QAAA,EAAE,eAAe,QAAgB,CAAC;IACrD,SAAS,CAAC;QACN,sBAAsB;QACtB,eAAe,CAAC,YAAY,CAAC,CAAA;QAC7B,iDAAiD;QAEjD,IAAI;IACR,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAClB,IAAM,WAAW,GAAG,UAAO,KAAU;;;;wBACpB,qBAAM,UAAU,CAAC,KAAK,CAAC,EAAA;;oBAA9B,IAAI,GAAG,SAAuB;oBACpC,eAAe,CAAC,IAAI,CAAC,CAAC;;;;SAEzB,CAAC;IAGF,OAAO,CACH,4BACI,KAAC,YAAY,IACT,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EACrC,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,YAAY;YACzB,6EAA6E;YAC7E,OAAO,EAAE,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,EAE5C,cAAc,EAAE,WAAW;YAC3B,4CAA4C;YAC5C,sBAAsB,EAAE,yBAAyB,CAAC;gBAC9C,WAAW,EAAE,YAAY,CAAC,MAAM;aACjC,CAAC;YAEJ,WAAW;YACX,uBAAuB;YACvB,KAAK;YACL,KAAK,EAAE,QAAQ,EACf,QAAQ,QACR,QAAQ,EAAE,UAAC,CAAC;gBACR,yBAAyB;gBACzB,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACzB,IAAI,gBAAgB,EAAE;oBAClB,gBAAgB,CAAC,CAAC,CAAC,CAAC;iBACvB;gBACD,IAAI,aAAa,KAAK,IAAI,EAAE;oBACxB,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;oBACzC,MAAM,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;iBACjD;qBAAM;oBACH,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;iBAEtD;YAEL,CAAC,EACD,SAAS,EAAC,6BAA6B,GACzC,GAEH,CAGN,CAAA;AACL,CAAC,CAAA","sourcesContent":["\nimport { AutoComplete } from \"primereact/autocomplete\";\nimport { useEffect, useState } from \"react\";\nimport { getVirtualScrollerOptions } from \"../../helpers/autoCompleteVirtualScroll\";\n\n\n\n// UsesCases\n// Suppose you have a moduelId field In create Dto then you need to creaate a module key in firmik and use that to store the autocomplete state and along with it update the moduleId  Field with id\n// In case of relationType the Id field will always will be id   \n// Else the value will be whatever valuekey use passed \n\nexport const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction, formErrors }: any) => {\n\n    const [selectedItem, setSelectedItem] = useState(existingData);\n    const [filteredItem, setFilteredItem] = useState([]);\n    useEffect(() => {\n        // if (existingData) {\n        setSelectedItem(existingData)\n        // formik.setFieldValue(fieldName, existingData);\n\n        // }\n    }, [existingData])\n    const searchItems = async (event: any) => {\n        const data = await searchData(event);\n        setFilteredItem(data);\n\n    };    \n\n\n    return (\n        <>\n            <AutoComplete\n                disabled={disabled ? disabled : false}\n                value={selectedItem}\n                suggestions={filteredItem}\n                // invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}\n                invalid={isFormFieldValid(formik, fieldName)}\n\n                completeMethod={searchItems}\n                // virtualScrollerOptions={{ itemSize: 38 }}\n                virtualScrollerOptions={getVirtualScrollerOptions({\n                    itemsLength: filteredItem.length,\n                  })}\n                  \n                // style={{\n                //     maxHeight: 39.67\n                // }}\n                field={labelKey}\n                dropdown\n                onChange={(e) => {\n                    // formik.handleChange(e)\n                    setSelectedItem(e.value);\n                    if (additionalAction) {\n                        additionalAction(e);\n                    }\n                    if (relationField === true) {\n                        formik.setFieldValue(fieldName, e.value);\n                        formik.setFieldValue(fieldNameId, e.value.id);\n                    } else {\n                        formik.setFieldValue(fieldName, e.value[valueKey]);\n\n                    }\n\n                }}\n                className=\"solid-standard-autocomplete\"\n            />\n\n        </>\n\n\n    )\n}"]}

package/dist/components/common/SingleSelectAutoCompleteField.tsx

@@ -0,0 +1,73 @@
+
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+import { getVirtualScrollerOptions } from "../../helpers/autoCompleteVirtualScroll";
+
+
+
+// UsesCases
+// Suppose you have a moduelId field In create Dto then you need to creaate a module key in firmik and use that to store the autocomplete state and along with it update the moduleId  Field with id
+// In case of relationType the Id field will always will be id   
+// Else the value will be whatever valuekey use passed 
+
+export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction, formErrors }: any) => {
+
+    const [selectedItem, setSelectedItem] = useState(existingData);
+    const [filteredItem, setFilteredItem] = useState([]);
+    useEffect(() => {
+        // if (existingData) {
+        setSelectedItem(existingData)
+        // formik.setFieldValue(fieldName, existingData);
+
+        // }
+    }, [existingData])
+    const searchItems = async (event: any) => {
+        const data = await searchData(event);
+        setFilteredItem(data);
+
+    };    
+
+
+    return (
+        <>
+            <AutoComplete
+                disabled={disabled ? disabled : false}
+                value={selectedItem}
+                suggestions={filteredItem}
+                // invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
+                invalid={isFormFieldValid(formik, fieldName)}
+
+                completeMethod={searchItems}
+                // virtualScrollerOptions={{ itemSize: 38 }}
+                virtualScrollerOptions={getVirtualScrollerOptions({
+                    itemsLength: filteredItem.length,
+                  })}
+                  
+                // style={{
+                //     maxHeight: 39.67
+                // }}
+                field={labelKey}
+                dropdown
+                onChange={(e) => {
+                    // formik.handleChange(e)
+                    setSelectedItem(e.value);
+                    if (additionalAction) {
+                        additionalAction(e);
+                    }
+                    if (relationField === true) {
+                        formik.setFieldValue(fieldName, e.value);
+                        formik.setFieldValue(fieldNameId, e.value.id);
+                    } else {
+                        formik.setFieldValue(fieldName, e.value[valueKey]);
+
+                    }
+
+                }}
+                className="solid-standard-autocomplete"
+            />
+
+        </>
+
+
+    )
+}

package/dist/components/common/SolidExportStepper.d.ts

@@ -0,0 +1,12 @@
+interface Step {
+    label: string;
+    value: string;
+}
+interface Props {
+    solidFormViewWorkflowData: Step[];
+    activeValue: string;
+    setActiveValue: (value: string) => void;
+}
+export declare const SolidExportStepper: ({ solidFormViewWorkflowData, activeValue, setActiveValue }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidExportStepper.d.ts.map

package/dist/components/common/SolidExportStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidExportStepper.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidExportStepper.tsx"],"names":[],"mappings":"AAKA,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,yBAAyB,EAAE,IAAI,EAAE,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,kBAAkB,+DAA+D,KAAK,4CAsHlG,CAAC"}

package/dist/components/common/SolidExportStepper.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "primereact/button";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef } from "react";
+export var SolidExportStepper = function (_a) {
+    var solidFormViewWorkflowData = _a.solidFormViewWorkflowData, activeValue = _a.activeValue, setActiveValue = _a.setActiveValue;
+    var formStepperOverlay = useRef(null);
+    var activeIndex = solidFormViewWorkflowData.findIndex(function (step) { return step.value === activeValue; });
+    var visibleSteps = solidFormViewWorkflowData.length > 5
+        ? solidFormViewWorkflowData.slice(0, 5)
+        : solidFormViewWorkflowData;
+    var handleStepClick = function (value) {
+        setActiveValue(value);
+    };
+    return (_jsx("div", { className: "flex solid-dynamic-stepper export-stepper", children: visibleSteps.map(function (step, index) {
+            var isActive = index === activeIndex;
+            var isBeforeActive = index < activeIndex;
+            var isAfterActive = index > activeIndex;
+            var isFirstVisible = index === 0;
+            var isLastVisible = index === visibleSteps.length - 1;
+            var isNextAfterActive = index === activeIndex + 1;
+            var isTwoStepsOnly = visibleSteps.length === 2;
+            return (_jsxs(Button, { type: "button", className: "solid-step-button export relative ".concat(isTwoStepsOnly ? 'two-step-button' : '', " ").concat(isActive ? 'p-button-primary' : '', " ").concat(isBeforeActive ? 'p-button-secondary' : ''), text: !isActive && !isBeforeActive, onClick: function () { return handleStepClick(step.value); }, children: [step.label, _jsxs(_Fragment, { children: [isNextAfterActive && solidFormViewWorkflowData.map(function (step) { return step.value; }).includes(activeValue) &&
+                                (_jsx("div", { className: "absolute active-step-arrow", children: _jsx("svg", { viewBox: "0 0 72 72", xmlns: "http://www.w3.org/2000/svg", fill: "#000000", transform: "rotate(30)", height: "60px", width: "60px", children: _jsxs("g", { id: "SVGRepo_iconCarrier", children: [_jsx("g", { id: "color", children: _jsx("polygon", { fill: "var(--primary-color)", points: "36,62 65,12 7,12" }) }), _jsx("g", { id: "line", children: _jsx("polyline", { fill: "none", stroke: "", strokeMiterlimit: "10", strokeWidth: "1.5", points: "36,62 65,12 7,12" }) })] }) }) })), (isActive || isBeforeActive) && !isFirstVisible && (!isTwoStepsOnly || index === 1) && (_jsx("div", { className: "absolute active-before-step-arrow", children: _jsx("svg", { viewBox: "0 0 72 72", xmlns: "http://www.w3.org/2000/svg", fill: "#000000", transform: "rotate(30)", height: "55px", width: "55px", children: _jsxs("g", { id: "SVGRepo_iconCarrier", children: [_jsx("g", { id: "color", children: _jsx("polygon", { fill: "#EAEDF1", points: "36,62 65,12 7,12" }) }), _jsx("g", { id: "line", children: _jsx("polyline", { fill: "none", stroke: "var(--solid-stepper-border)", strokeMiterlimit: "10", strokeWidth: "1.5", points: "36,62 65,12 7,12" }) })] }) }) })), isAfterActive && !isLastVisible && (_jsx("div", { className: "absolute inactive-step-arrow", children: _jsx("svg", { viewBox: "0 0 72 72", xmlns: "http://www.w3.org/2000/svg", fill: "#000000", transform: "rotate(30)", height: "55px", width: "55px", children: _jsxs("g", { id: "SVGRepo_iconCarrier", children: [_jsx("g", { id: "color", children: _jsx("polygon", { fill: "#EAEDF1", points: "36,62 65,12 7,12" }) }), _jsx("g", { id: "line", children: _jsx("polyline", { fill: "none", stroke: "var(--solid-stepper-border)", strokeMiterlimit: "10", strokeWidth: "1.5", points: "36,62 65,12 7,12" }) })] }) }) }))] }), solidFormViewWorkflowData.length > 5 && index === 4 && (_jsxs("div", { className: 'absolute', style: { right: 5 }, children: [_jsx(Button, { type: 'button', icon: "pi pi-angle-down", text: true, size: 'small', style: { height: 24, width: '1.5rem', padding: 0 }, onClick: function (e) {
+                                    // @ts-ignore 
+                                    return formStepperOverlay.current.toggle(e);
+                                } }), _jsx(OverlayPanel, { ref: formStepperOverlay, className: "solid-custom-overlay solid-form-stepper-overlay", children: _jsx("div", { className: 'flex flex-column gap-1 p-1', children: solidFormViewWorkflowData.slice(5).map(function (step, index) { return (_jsx(Button, { type: 'button', label: step.label, size: 'small', text: true, onClick: function () { return handleStepClick(step.value); } }, index)); }) }) })] }))] }, index));
+        }) }));
+};
+//# sourceMappingURL=SolidExportStepper.js.map

package/dist/components/common/SolidExportStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidExportStepper.js","sourceRoot":"","sources":["../../../src/components/common/SolidExportStepper.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { Button } from \"primereact/button\";\nimport { OverlayPanel } from \"primereact/overlaypanel\";\nimport React, { useRef, useState } from \"react\";\n\ninterface Step {\n  label: string;\n  value: string;\n}\n\ninterface Props {\n  solidFormViewWorkflowData: Step[];\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n}\n\nexport const SolidExportStepper = ({ solidFormViewWorkflowData, activeValue ,setActiveValue}: Props) => {\n  const formStepperOverlay = useRef<OverlayPanel>(null);\n  const activeIndex = solidFormViewWorkflowData.findIndex(step => step.value === activeValue);\n  const visibleSteps = solidFormViewWorkflowData.length > 5\n    ? solidFormViewWorkflowData.slice(0, 5)\n    : solidFormViewWorkflowData;\n    const handleStepClick = (value: string) => {\n        setActiveValue(value);\n      };\n  return (\n    <div className=\"flex solid-dynamic-stepper export-stepper\">\n      {visibleSteps.map((step: any, index: number) => {\n                         const isActive = index === activeIndex;\n                         const isBeforeActive = index < activeIndex;\n                         const isAfterActive = index > activeIndex;\n                         const isFirstVisible = index === 0;\n                         const isLastVisible = index === visibleSteps.length - 1;\n                         const isNextAfterActive = index === activeIndex + 1;\n                         const isTwoStepsOnly = visibleSteps.length === 2;\n                         return (\n                             <Button\n                             key={index}\n                             type=\"button\"\n                             className={`solid-step-button export relative ${isTwoStepsOnly ? 'two-step-button' : ''} ${isActive ? 'p-button-primary' : ''} ${isBeforeActive ? 'p-button-secondary' : ''}`}\n                             text={!isActive && !isBeforeActive}\n                                 onClick={() => handleStepClick(step.value)}\n                             >\n                                 {step.label}\n                                 <>\n                                     {isNextAfterActive && solidFormViewWorkflowData.map((step: any) => step.value).includes(activeValue) &&\n                                         (\n                                             <div className=\"absolute active-step-arrow\">\n                                                 <svg viewBox=\"0 0 72 72\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000000\" transform=\"rotate(30)\"\n                                                     height=\"60px\"\n                                                     width=\"60px\"\n                                                 >\n                                                     <g id=\"SVGRepo_iconCarrier\">\n                                                         <g id=\"color\">\n                                                             <polygon fill={\"var(--primary-color)\"} points=\"36,62 65,12 7,12\" />\n                                                         </g>\n                                                         <g id=\"line\">\n                                                             <polyline fill=\"none\" stroke=\"\" strokeMiterlimit=\"10\" strokeWidth=\"1.5\" points=\"36,62 65,12 7,12\" />\n                                                         </g>\n                                                     </g>\n                                                 </svg>\n                                             </div>\n                                         )}\n     \n                                     {(isActive || isBeforeActive) && !isFirstVisible && (!isTwoStepsOnly || index === 1) && (\n                                         <div className=\"absolute active-before-step-arrow\">\n                                             <svg viewBox=\"0 0 72 72\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000000\" transform=\"rotate(30)\"\n                                                 height=\"55px\"\n                                                 width=\"55px\"\n                                             >\n                                                 <g id=\"SVGRepo_iconCarrier\">\n                                                     <g id=\"color\">\n                                                         <polygon fill=\"#EAEDF1\" points=\"36,62 65,12 7,12\" />\n                                                     </g>\n                                                     <g id=\"line\">\n                                                         <polyline fill=\"none\" stroke=\"var(--solid-stepper-border)\" strokeMiterlimit=\"10\" strokeWidth=\"1.5\" points=\"36,62 65,12 7,12\" />\n                                                     </g>\n                                                 </g>\n                                             </svg>\n                                         </div>\n                                     )}\n     \n                                     {isAfterActive && !isLastVisible && (\n                                         <div className=\"absolute inactive-step-arrow\">\n                                             <svg viewBox=\"0 0 72 72\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000000\" transform=\"rotate(30)\"\n                                                 height=\"55px\"\n                                                 width=\"55px\"\n                                             >\n                                                 <g id=\"SVGRepo_iconCarrier\">\n                                                     <g id=\"color\">\n                                                         <polygon fill=\"#EAEDF1\" points=\"36,62 65,12 7,12\" />\n                                                     </g>\n                                                     <g id=\"line\">\n                                                         <polyline fill=\"none\" stroke=\"var(--solid-stepper-border)\" strokeMiterlimit=\"10\" strokeWidth=\"1.5\" points=\"36,62 65,12 7,12\" />\n                                                     </g>\n                                                 </g>\n                                             </svg>\n                                         </div>\n                                     )}\n                                 </>\n                                 {solidFormViewWorkflowData.length > 5 && index === 4 && (\n                                     <div className='absolute' style={{ right: 5 }}>\n                                         <Button\n                                             type='button'\n                                             icon=\"pi pi-angle-down\"\n                                             text\n                                             size='small'\n                                             style={{ height: 24, width: '1.5rem', padding: 0 }}\n                                             onClick={(e) =>\n                                                 // @ts-ignore \n                                                 formStepperOverlay.current.toggle(e)\n                                             }\n                                         />\n                                         <OverlayPanel ref={formStepperOverlay} className=\"solid-custom-overlay solid-form-stepper-overlay\">\n                                             <div className='flex flex-column gap-1 p-1'>\n                                                 {solidFormViewWorkflowData.slice(5).map((step: any, index: number) => (\n                                                     <Button\n                                                         key={index}\n                                                         type='button'\n                                                         label={step.label}\n                                                         size='small'\n                                                         text\n                                                         onClick={() => handleStepClick(step.value)}\n                                                     />\n                                                 ))}\n                                             </div>\n                                         </OverlayPanel>\n                                     </div>\n                                 )}\n                             </Button>\n                         )\n                     })}\n    </div>\n  );\n};\n"]}