@arquimedes.co/eureka-forms 2.0.32 → 2.0.34-test

package/src/FormSteps/Utils/@StepFiller/StepFiller.tsx

@@ -0,0 +1,69 @@
+import { createContext, useCallback, useContext, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { FillerSteps, calcFillerSize } from '../../StepFunctions';
+import FormContext from '../../../Contexts/FormContext';
+import styles from './StepFiller.module.css';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import React from 'react';
+
+export const SizeChangeContext = createContext<(() => void) | undefined>(
+    undefined
+);
+
+export interface StepFillerContainerProps {
+    step: FillerSteps;
+    children: React.ReactNode;
+}
+
+function StepFiller({ step, children }: StepFillerContainerProps): JSX.Element {
+    const { getValues } = useFormContext();
+    const form = useContext(FormContext);
+    const [fillerSize, setFillerSize] = useState(
+        calcFillerSize(step, form.steps, getValues(), form.size)
+    );
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+
+    const handleSizeChange = useCallback((): void => {
+        setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
+    }, []);
+
+    if (step.maxSize && step.maxSize < form.size.blockNum) {
+        return (
+            <div
+                className={styles.firstLvlContainer}
+                style={{
+                    width:
+                        currentBreakPoint <= step.size ? '100%' : 'fit-content',
+                }}
+            >
+                <SizeChangeContext.Provider value={handleSizeChange}>
+                    {children}
+                </SizeChangeContext.Provider>
+                <div
+                    className={styles.smallSeparator}
+                    style={{
+                        width: fillerSize,
+                    }}
+                ></div>
+            </div>
+        );
+    } else {
+        return (
+            <SizeChangeContext.Provider value={handleSizeChange}>
+                {children}
+                {step.maxSize && <div className={styles.separator}></div>}
+            </SizeChangeContext.Provider>
+        );
+    }
+}
+
+function StepFillerContainer({
+    step,
+    children,
+}: StepFillerContainerProps): JSX.Element {
+    const handleSizeChange = useContext(SizeChangeContext);
+    if (handleSizeChange) return <>{children}</>;
+    else return <StepFiller step={step} children={children} />;
+}
+
+export default StepFillerContainer;

package/src/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.module.css

@@ -0,0 +1,9 @@
+.container {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 5px;
+    margin-bottom: 0px;
+}

package/src/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.tsx

@@ -0,0 +1,55 @@
+import { useContext } from 'react';
+import { GSmartSelect } from '../../../@Types/GenericFormSteps';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector, selectBreakPoint } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import styles from './MaterialInputContainer.module.css';
+import {
+    CheckBox,
+    DatePicker,
+    ClassifierSelector,
+    FormSelector,
+} from '../../../@Types/FormStep';
+
+interface MaterialInputProps {
+    step:
+        | GSmartSelect
+        | CheckBox
+        | ClassifierSelector
+        | DatePicker
+        | FormSelector;
+    editable: boolean;
+    onClick?: () => void;
+    children: React.ReactNode;
+}
+function MaterialInputContainer({
+    step,
+    editable,
+    children,
+    onClick,
+}: MaterialInputProps): JSX.Element {
+    const form = useContext(FormContext);
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const postview = useAppSelector((state) => state.global.postview);
+    return (
+        <div
+            className={styles.container}
+            style={{
+                width:
+                    currentBreakPoint <= step.size
+                        ? '100%'
+                        : calcStepWidth(step.size, form.size),
+                minHeight:
+                    step.description || (!postview && editable && step.required)
+                        ? '55px'
+                        : '43px',
+            }}
+            onClick={onClick}
+            data-testid={step.id}
+        >
+            {children}
+        </div>
+    );
+}
+
+export default MaterialInputContainer;

package/src/Icons/Construction/LeakIcon.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from 'react';
+
+function LeakIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            {...props}
+            fill={props.fill ?? '#757575'}
+            height="512pt"
+            viewBox="0 -86 512.00056 512"
+            width="512pt"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="m203.484375 196.359375c2.402344 0 4.753906-.867187 6.601563-2.492187l26.621093-23.394532c3.03125-2.664062 4.164063-6.890625 2.871094-10.714844l-9.21875-27.257812 21.613281-18.996094c3.03125-2.664062 4.164063-6.890625 2.871094-10.714844l-11.359375-33.570312c-1.070313-3.167969-3.652344-5.589844-6.882813-6.457031l-57.925781-15.519531c-5.335937-1.433594-10.816406 1.734374-12.246093 7.070312-1.429688 5.335938 1.734374 10.820312 7.070312 12.25l52.753906 14.132812 7.507813 22.1875-21.613281 18.996094c-3.03125 2.664063-4.164063 6.890625-2.871094 10.714844l9.21875 27.257812-17.59375 15.460938-130.027344-34.839844 30.992188-115.667968c.6875-2.5625.328124-5.292969-.996094-7.589844-1.328125-2.296875-3.511719-3.972656-6.074219-4.660156l-45.574219-12.210938c-5.332031-1.429688-10.816406 1.734375-12.246094 7.070312l-36.636718 136.722657c-.6875 2.5625-.324219 5.292969 1 7.589843 1.324218 2.292969 3.511718 3.972657 6.070312 4.65625l45.574219 12.210938c.867187.234375 1.738281.34375 2.597656.34375 4.414063 0 8.453125-2.945312 9.652344-7.414062l.464844-1.734376 135.199219 36.226563c.851562.230469 1.722656.34375 2.585937.34375zm-181.238281-56.703125 31.460937-117.40625 26.253907 7.035156-31.457032 117.40625zm0 0" />
+            <path d="m511.660156 144.136719-36.636718-136.722657c-1.429688-5.332031-6.910157-8.5-12.246094-7.070312l-45.574219 12.210938c-2.5625.6875-4.746094 2.363281-6.070313 4.660156-1.328124 2.296875-1.6875 5.023437-1 7.585937l.464844 1.734375-135.199218 36.226563c-3.28125.878906-5.894532 3.367187-6.933594 6.605469-1.039063 3.238281-.363282 6.777343 1.796875 9.40625l19.121093 23.265624-5.867187 25.070313c-.796875 3.40625.242187 6.980469 2.738281 9.425781l19.386719 18.988282-6.847656 28.496093c-.824219 3.429688.21875 7.039063 2.742187 9.5 1.894532 1.84375 4.40625 2.839844 6.980469 2.839844.863281 0 1.730469-.113281 2.585937-.34375l57.925782-15.519531c5.335937-1.429688 8.5-6.914063 7.070312-12.25-1.429687-5.332032-6.914062-8.5-12.246094-7.070313l-41.683593 11.171875 4.246093-17.664062c.820313-3.421875-.214843-7.023438-2.726562-9.484375l-19.417969-19.015625 5.714844-24.398438c.710937-3.035156-.035156-6.222656-2.011719-8.628906l-12.40625-15.09375 120.207032-32.207031 30.992187 115.667969c1.199219 4.46875 5.238281 7.414062 9.65625 7.414062.855469 0 1.726563-.109375 2.59375-.339844l45.574219-12.210937c2.5625-.6875 4.746094-2.363281 6.070312-4.660157 1.328125-2.296874 1.6875-5.027343 1-7.589843zm-48.160156 2.554687-30.996094-115.667968s0 0 0-.003907v-.003906l-.464844-1.730469 26.257813-7.035156 31.457031 117.40625zm0 0" />
+            <path d="m263.386719 203.265625c-1.894531-2.078125-4.574219-3.261719-7.386719-3.261719-2.808594 0-5.492188 1.183594-7.386719 3.261719-.78125.855469-1.640625 1.789063-2.570312 2.792969-14.488281 15.730468-44.640625 48.457031-44.640625 79.34375 0 30.105468 24.492187 54.601562 54.597656 54.601562s54.597656-24.496094 54.597656-54.601562c0-30.886719-30.148437-63.613282-44.640625-79.339844-.925781-1.007812-1.789062-1.941406-2.570312-2.796875zm-7.386719 116.738281c-19.078125 0-34.597656-15.523437-34.597656-34.601562 0-20.492188 20.960937-45.539063 34.597656-60.601563 13.636719 15.0625 34.597656 40.109375 34.597656 60.601563 0 19.078125-15.519531 34.601562-34.597656 34.601562zm0 0" />
+            <path d="m129.878906 54.871094c.917969.261718 1.839844.386718 2.75.386718 4.351563 0 8.355469-2.863281 9.609375-7.253906 1.519531-5.3125-1.554687-10.847656-6.867187-12.363281h-.007813c-5.308593-1.519531-10.839843 1.554687-12.359375 6.867187-1.515625 5.308594 1.5625 10.847657 6.875 12.363282zm0 0" />
+            <path d="m407.335938 149.527344-.007813.003906c-5.335937 1.421875-8.507813 6.898438-7.082031 12.238281 1.191406 4.472657 5.238281 7.421875 9.65625 7.421875.855468 0 1.722656-.109375 2.585937-.339844 5.335938-1.421874 8.507813-6.902343 7.085938-12.238281-1.425781-5.335937-6.90625-8.511719-12.238281-7.085937zm0 0" />
+        </svg>
+    );
+}
+export default LeakIcon;

package/src/Icons/Construction/ProjectIcon.tsx

@@ -0,0 +1,17 @@
+import { SVGProps } from 'react';
+
+function ProjectIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            {...props}
+            fill={props.fill ?? '#757575'}
+            height="480pt"
+            viewBox="0 -8 480 480"
+            width="480pt"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="m440 448v-49.960938c10.546875-6.214843 16.726562-17.816406 16-30.039062 0-17.671875-10.742188-32-24-32s-24 14.328125-24 32c-.726562 12.222656 5.453125 23.824219 16 30.039062v49.960938h-56v-243.054688l-48-24v43.054688h24v16h-24v32h24v16h-24v32h24v16h-24v32h24v16h-24v32h24v16h-24v16h-16v-321.96875l-96-27.421875v29.390625h56v16h-56v32h56v16h-56v32h56v16h-56v32h56v16h-56v32h56v16h-56v32h56v16h-56v32h56v16h-56v16h-16v-448h-144v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v16h-48v16h480v-16zm0 0" />
+        </svg>
+    );
+}
+export default ProjectIcon;

package/src/Icons/Construction/PropertyIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+function PropertyIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            {...props}
+            fill={props.fill ?? '#757575'}
+            height="512"
+            viewBox="0 0 512 512"
+            width="512"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g id="_01-home" data-name="01-home">
+                <g id="glyph">
+                    <path d="m256 4c-108.075 0-196 87.925-196 196 0 52.5 31.807 119.92 94.537 200.378a1065.816 1065.816 0 0 0 93.169 104.294 12 12 0 0 0 16.588 0 1065.816 1065.816 0 0 0 93.169-104.294c62.73-80.458 94.537-147.878 94.537-200.378 0-108.075-87.925-196-196-196zm0 336c-77.2 0-140-62.8-140-140s62.8-140 140-140 140 62.8 140 140-62.8 140-140 140z" />
+                    <path d="m352.072 183.121-88-80a12 12 0 0 0 -16.144 0l-88 80a12.006 12.006 0 0 0 -2.23 15.039 12.331 12.331 0 0 0 10.66 5.84h11.642v76a12 12 0 0 0 12 12h28a12 12 0 0 0 12-12v-44a12 12 0 0 1 12-12h24a12 12 0 0 1 12 12v44a12 12 0 0 0 12 12h28a12 12 0 0 0 12-12v-76h11.642a12.331 12.331 0 0 0 10.66-5.84 12.006 12.006 0 0 0 -2.23-15.039z" />
+                </g>
+            </g>
+        </svg>
+    );
+}
+export default PropertyIcon;

package/src/Icons/Construction/SpaceIcon.tsx

@@ -0,0 +1,25 @@
+import { SVGProps } from 'react';
+
+function SpaceIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            {...props}
+            fill={props.fill ?? '#757575'}
+            width="512pt"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 64 64"
+        >
+            <title>SpaceType</title>
+            <g id="space_type" data-name="space type">
+                <path d="M29.74,39A10.21,10.21,0,0,0,27.61,39,1.63,1.63,0,0,0,26,40.61V53.35A1.63,1.63,0,0,0,27.61,55h1.74A1.63,1.63,0,0,0,31,53.35V40.61A1.63,1.63,0,0,0,29.74,39Z" />
+                <path d="M57.35,39a10.27,10.27,0,0,0-2.13.05A1.63,1.63,0,0,0,54,40.61V53.35A1.63,1.63,0,0,0,55.61,55h1.74A1.63,1.63,0,0,0,59,53.35V40.61A1.63,1.63,0,0,0,57.35,39Z" />
+                <path d="M33,54a1,1,0,0,0,1,1H51a1,1,0,0,0,1-1V49H33Z" />
+                <path d="M49,42H36a3,3,0,0,0-3,3v2H52V45A3,3,0,0,0,49,42Z" />
+                <path d="M54,31a5,5,0,0,0-5-5H36a5,5,0,0,0-5,5v6.39a3.62,3.62,0,0,1,1.86,2.24A4.68,4.68,0,0,1,33,41c1.37-1.37,4.2-1,16-1a5,5,0,0,1,2.68.78c.64.39.07.39.46-1.15a3.65,3.65,0,0,1,1.43-2C54.15,37.19,54,38.41,54,31Z" />
+                <path d="M17,32c-5.85,0-4.33,0-4-.05a7.06,7.06,0,0,0,6-7,7,7,0,0,0-4.47,1.59,7.08,7.08,0,0,0-2.07-5.05,7.06,7.06,0,0,0-2.07,5.05,7,7,0,0,0-4.47-1.59,7.07,7.07,0,0,0,6,7c.36.08,1.89.05-4,.05l1.71,6H3V55H5V50H20v5h2V38H15.26ZM15,45H10V43h5Z" />
+                <path d="M26,21h6L31,10H19L18,21h6V40.61a3.63,3.63,0,0,1,2-3.24Z" />
+            </g>
+        </svg>
+    );
+}
+export default SpaceIcon;

package/src/Icons/DocumentIcon.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from 'react';
+
+function DocumentIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            {...props}
+            fill={props.fill ?? '#757575'}
+            id="bold"
+            enableBackground="new 0 0 24 24"
+            height="512"
+            viewBox="0 0 24 24"
+            width="512"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="m21.25 3h-18.5c-1.517 0-2.75 1.233-2.75 2.75v12.5c0 1.517 1.233 2.75 2.75 2.75h18.5c1.517 0 2.75-1.233 2.75-2.75v-12.5c0-1.517-1.233-2.75-2.75-2.75zm-13.75 4c1.378 0 2.5 1.122 2.5 2.5s-1.122 2.5-2.5 2.5-2.5-1.122-2.5-2.5 1.122-2.5 2.5-2.5zm4.5 9.25c0 .414-.336.75-.75.75h-7.5c-.414 0-.75-.336-.75-.75v-.5c0-1.517 1.233-2.75 2.75-2.75h3.5c1.517 0 2.75 1.233 2.75 2.75zm8.25.75h-5.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h5.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-4h-5.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h5.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-4h-5.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h5.5c.414 0 .75.336.75.75s-.336.75-.75.75z" />
+        </svg>
+    );
+}
+export default DocumentIcon;

package/src/Icons/Entities/CheckListIcon.tsx

@@ -0,0 +1,30 @@
+import { SVGProps } from 'react';
+
+function CheckListIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            {...props}
+            fill={props.fill ?? '#757575'}
+            height="480pt"
+            viewBox="0 0 60 70"
+            width="480pt"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M24.79,8.7c1.27,0,2.29-1.03,2.29-2.3c0-1.26-1.03-2.29-2.29-2.29c-1.27,0-2.3,1.03-2.3,2.29  C22.49,7.67,23.52,8.7,24.79,8.7z" />
+            <path d="M13.61,53.84H8.14c-0.41,0-0.75,0.34-0.75,0.75v4.1c0,0.41,0.34,0.75,0.75,0.75h5.46c0.41,0,0.75-0.34,0.75-0.75v-4.1  C14.36,54.18,14.02,53.84,13.61,53.84z" />
+            <path d="M22.88,47.19h-5.46c-0.41,0-0.75,0.34-0.75,0.75v10.75c0,0.41,0.34,0.75,0.75,0.75h5.46c0.41,0,0.75-0.34,0.75-0.75V47.94  C23.63,47.53,23.3,47.19,22.88,47.19z" />
+            <path d="M32.16,43.19h-5.46c-0.41,0-0.75,0.34-0.75,0.75v14.75c0,0.41,0.34,0.75,0.75,0.75h5.46c0.41,0,0.75-0.34,0.75-0.75V43.94  C32.91,43.53,32.57,43.19,32.16,43.19z" />
+            <path d="M41.43,51.06h-5.46c-0.41,0-0.75,0.34-0.75,0.75v6.89c0,0.41,0.34,0.75,0.75,0.75h5.46c0.41,0,0.75-0.34,0.75-0.75v-6.89  C42.18,51.39,41.85,51.06,41.43,51.06z" />
+            <path d="M41.91,18.96H24.27c-0.41,0-0.75,0.34-0.75,0.75s0.34,0.75,0.75,0.75h17.64c0.41,0,0.75-0.34,0.75-0.75  S42.33,18.96,41.91,18.96z" />
+            <path d="M9.93,27.1h5.33c1.26,0,2.29-1.03,2.29-2.29v-5.39c0-1.26-1.03-2.29-2.29-2.29H9.93c-1.26,0-2.29,1.03-2.29,2.29v5.39  C7.64,26.07,8.67,27.1,9.93,27.1z M9.14,19.42c0-0.44,0.35-0.79,0.79-0.79h5.33c0.44,0,0.79,0.35,0.79,0.79v5.39  c0,0.43-0.35,0.79-0.79,0.79H9.93c-0.43,0-0.79-0.35-0.79-0.79V19.42z" />
+            <path d="M17.55,38.48v-5.39c0-1.26-1.03-2.29-2.29-2.29H9.93c-1.26,0-2.29,1.03-2.29,2.29v5.39c0,1.26,1.03,2.29,2.29,2.29h5.33  C16.52,40.76,17.55,39.74,17.55,38.48z M16.05,38.48c0,0.43-0.35,0.79-0.79,0.79H9.93c-0.43,0-0.79-0.35-0.79-0.79v-5.39  c0-0.43,0.35-0.79,0.79-0.79h5.33c0.44,0,0.79,0.35,0.79,0.79V38.48z" />
+            <path d="M23.55,25.28h11.61c0.41,0,0.75-0.34,0.75-0.75s-0.34-0.75-0.75-0.75H23.55c-0.41,0-0.75,0.34-0.75,0.75  S23.13,25.28,23.55,25.28z" />
+            <path d="M23.55,34.12h17.64c0.41,0,0.75-0.34,0.75-0.75s-0.34-0.75-0.75-0.75H23.55c-0.41,0-0.75,0.34-0.75,0.75  S23.13,34.12,23.55,34.12z" />
+            <path d="M35.91,38.19c0-0.41-0.34-0.75-0.75-0.75H23.55c-0.41,0-0.75,0.34-0.75,0.75s0.34,0.75,0.75,0.75h11.61  C35.57,38.94,35.91,38.6,35.91,38.19z" />
+            <path d="M11.34,23.42c0.12,0.17,0.3,0.27,0.5,0.3c0.03,0,0.07,0.01,0.1,0.01c0.17,0,0.33-0.06,0.47-0.16l2.17-1.72  c0.32-0.26,0.38-0.73,0.12-1.05c-0.26-0.32-0.73-0.38-1.05-0.12l-1.56,1.23l-0.41-0.55c-0.25-0.33-0.71-0.41-1.05-0.16  c-0.33,0.25-0.41,0.71-0.16,1.05L11.34,23.42z" />
+            <path d="M13.65,34.33l-1.56,1.23l-0.41-0.55c-0.24-0.33-0.71-0.41-1.05-0.16c-0.33,0.24-0.41,0.71-0.16,1.05l0.87,1.18  c0.12,0.16,0.3,0.27,0.5,0.3c0.03,0,0.07,0.01,0.1,0.01c0.17,0,0.33-0.06,0.47-0.16l2.17-1.72c0.32-0.26,0.38-0.73,0.12-1.05  C14.44,34.13,13.97,34.08,13.65,34.33z" />
+            <path d="M62.2,14.25l-1.59-0.3c-0.13-0.02-0.23-0.13-0.27-0.27c-0.28-1.01-0.68-1.98-1.19-2.88c-0.07-0.13-0.07-0.27-0.01-0.37  l0.91-1.34c0.49-0.73,0.4-1.7-0.22-2.32L58.3,5.21C57.68,4.6,56.7,4.5,55.98,5l-1.35,0.92c-0.1,0.07-0.25,0.07-0.37,0  C53.36,5.4,52.39,5,51.39,4.72c-0.12-0.03-0.25-0.12-0.28-0.26l-0.3-1.6C50.65,2,49.9,1.37,49.02,1.37h-2.19  c-0.88,0-1.63,0.63-1.8,1.49l-0.3,1.6c-0.02,0.13-0.13,0.23-0.27,0.27C43.45,5,42.49,5.4,41.58,5.91c-0.12,0.07-0.26,0.07-0.36,0  l-1.36-0.92c-0.73-0.48-1.7-0.39-2.31,0.23L36,6.76c-0.54,0.54-0.66,1.35-0.35,2.04h-0.77V8.06c0-1.14-0.93-2.08-2.08-2.08h-2.52  c-0.45-2.64-2.73-4.62-5.49-4.62c-2.75,0-5.03,1.98-5.48,4.62h-2.53c-1.14,0-2.07,0.93-2.07,2.08V8.8H7.38  c-2.8,0-5.07,2.27-5.07,5.07v45.7c0,2.79,2.27,5.07,5.07,5.07H42.2c1.72,0,3.24-0.87,4.16-2.18h1.07c0.79,0,1.47-0.56,1.62-1.34  l0.25-1.33c0.01-0.07,0.08-0.11,0.13-0.12c0.86-0.24,1.67-0.57,2.42-1c0.06-0.03,0.13-0.04,0.18-0.01l1.12,0.76  c0.65,0.44,1.53,0.36,2.09-0.19l1.29-1.29c0.56-0.56,0.64-1.44,0.2-2.09l-0.76-1.12c-0.03-0.04-0.02-0.11,0.01-0.17  c0.44-0.77,0.77-1.58,1-2.42c0.01-0.04,0.04-0.12,0.12-0.14l1.32-0.25c0.78-0.14,1.34-0.82,1.34-1.62v-1.82  c0-0.79-0.56-1.47-1.34-1.62l-1.32-0.25c-0.08-0.02-0.12-0.1-0.12-0.13c-0.23-0.85-0.57-1.67-1-2.43c-0.03-0.06-0.04-0.13-0.01-0.18  l0.76-1.12c0.44-0.65,0.36-1.53-0.2-2.09l-1.29-1.29c-0.56-0.55-1.43-0.64-2.09-0.19l-1.12,0.76c-0.04,0.03-0.12,0.03-0.17-0.01  c-0.75-0.43-1.57-0.77-2.42-1c-0.06-0.02-0.13-0.06-0.14-0.12l-0.25-1.33c-0.14-0.78-0.82-1.34-1.62-1.34h-0.16v-3.05h1.75  c0.88,0,1.64-0.63,1.8-1.49l0.3-1.59c0.03-0.15,0.16-0.24,0.27-0.27c1.02-0.28,1.99-0.68,2.88-1.19c0.13-0.07,0.28-0.07,0.38,0  l1.35,0.91c0.73,0.49,1.7,0.4,2.32-0.21l1.55-1.55c0.62-0.62,0.72-1.6,0.22-2.33l-0.91-1.34c-0.07-0.1-0.06-0.25,0-0.37  c0.52-0.91,0.92-1.88,1.19-2.88c0.02-0.07,0.09-0.24,0.26-0.27l1.59-0.3c0.86-0.16,1.49-0.92,1.49-1.8v-2.19  C63.69,15.17,63.07,14.41,62.2,14.25z M47.92,11.29c3.23,0,5.85,2.63,5.85,5.85c0,3.23-2.63,5.85-5.85,5.85  c-0.21,0-0.43-0.01-0.65-0.04v-9.09c0-0.88-0.25-1.69-0.64-2.42C47.05,11.35,47.48,11.29,47.92,11.29z M51.26,49.21  c0,2.36-1.73,4.3-3.99,4.66v-9.33C49.53,44.9,51.26,46.85,51.26,49.21z M16.2,8.06c0-0.32,0.25-0.58,0.57-0.58h3.2  c0.4,0,0.73-0.32,0.75-0.72c0.09-2.19,1.88-3.9,4.06-3.9c2.2,0,3.98,1.71,4.07,3.9c0.02,0.4,0.35,0.72,0.75,0.72h3.2  c0.32,0,0.58,0.25,0.58,0.58v3.28c0,0.31-0.26,0.57-0.58,0.57H16.77c-0.31,0-0.57-0.25-0.57-0.57V8.06z M42.2,63.13H7.38  c-1.97,0-3.57-1.6-3.57-3.57v-45.7c0-1.97,1.6-3.57,3.57-3.57h7.33v1.05c0,1.14,0.93,2.07,2.07,2.07H32.8  c1.14,0,2.08-0.93,2.08-2.07V10.3h7.33c1.97,0,3.57,1.6,3.57,3.57v45.7C45.77,61.53,44.17,63.13,42.2,63.13z" />
+        </svg>
+    );
+}
+export default CheckListIcon;

package/src/Icons/Entities/GenericEntityIcon.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from 'react';
+
+const GenericEntityIcon = (props: SVGProps<SVGSVGElement>): any => (
+    <svg
+        {...props}
+        fill={props.fill ?? '#757575'}
+        version="1.1"
+        width="500pt"
+        height="500pt"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="M10 5H4c-.55 0-1 .45-1 1s.45 1 1 1h2v3c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1zM10 2H4c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1zM20.89 13.11a.9959.9959 0 00-1.41 0l-6.36 6.36c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l6.36-6.36c.39-.39.39-1.02 0-1.41z"></path>
+        <circle cx="14.5" cy="14.5" r="1.5"></circle>
+        <circle cx="19.5" cy="19.5" r="1.5"></circle>
+        <path d="M15.5 11c1.38 0 2.5-1.12 2.5-2.5V4h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1v3.51c-.42-.32-.93-.51-1.5-.51C14.12 6 13 7.12 13 8.5s1.12 2.5 2.5 2.5zM10.45 18.09c.39-.39.39-1.02 0-1.41a.9959.9959 0 00-1.41 0l-.71.71-.71-.71.35-.35c.98-.98.98-2.56 0-3.54-.49-.49-1.13-.73-1.77-.73-.64 0-1.28.24-1.77.73-.98.98-.98 2.56 0 3.54l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.48 1.14.72 1.78.72.64 0 1.28-.24 1.77-.73l1.06-1.06.71.71c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41l-.71-.71.71-.71zm-4.6-3.89c.12-.12.26-.15.35-.15s.23.03.35.15c.19.2.19.51 0 .71l-.35.35-.35-.36c-.12-.12-.15-.26-.15-.35s.03-.23.15-.35zm0 5.65c-.12.12-.26.15-.35.15s-.23-.03-.35-.15c-.12-.12-.15-.26-.15-.35s.03-.23.15-.35l1.06-1.06.71.71-1.07 1.05z"></path>
+    </svg>
+);
+export default GenericEntityIcon;

package/src/Icons/Entities/HandshakeIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+
+const HandShakeIcon = (props: SVGProps<SVGSVGElement>): any => (
+    <svg
+        {...props}
+        fill={props.fill ?? '#757575'}
+        version="1.1"
+        width="511pt"
+        height="511pt"
+        viewBox="0 -3 511.99992 511"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="m509.914062 214.859375-85.695312-111.320313c-3.171875-4.117187-8.957031-5.132812-13.34375-2.34375l-55.328125 35.1875h-72.160156c-.933594 0-1.863281.199219-2.761719.460938l-55.949219 16.105469-58.054687-15.878907-56.410156-35.875c-4.3125-2.742187-9.992188-1.8125-13.199219 2.164063l-94.785157 117.40625c-3.40625 4.21875-2.84375 10.378906 1.265626 13.914063l49.679687 42.753906 44.570313 60.0625c-13.035157 13.886718-12.78125 35.789062.78125 49.355468 6.011718 6.007813 13.65625 9.402344 21.519531 10.191407-.273438 1.78125-.414063 3.589843-.414063 5.425781 0 9.476562 3.691406 18.386719 10.390625 25.085938 6.703125 6.703124 15.613281 10.394531 25.089844 10.394531.128906 0 .253906-.007813.378906-.011719-.003906.242188-.015625.480469-.015625.722656 0 9.476563 3.691406 18.386719 10.390625 25.089844 6.703125 6.699219 15.613281 10.390625 25.089844 10.390625 1.871094 0 3.722656-.152344 5.539063-.433594.769531 7.890625 4.171874 15.570313 10.203124 21.601563 6.914063 6.917968 16 10.375 25.085938 10.375s18.171875-3.457032 25.089844-10.375l5.425781-5.425782 2.277344 1.835938c6.859375 6.644531 15.765625 9.964844 24.671875 9.964844 9.085937 0 18.171875-3.457032 25.085937-10.375 7.058594-7.058594 10.515625-16.375 10.371094-25.644532 9.265625.140626 18.585937-3.3125 25.644531-10.367187 7.050782-7.054687 10.507813-16.363281 10.371094-25.628906 9.652344.152343 18.808594-3.554688 25.640625-10.386719 7.058594-7.058594 10.515625-16.375 10.371094-25.644531 9.273437.140625 18.585937-3.3125 25.644531-10.371094 12.046875-12.046875 13.597656-30.667969 4.664062-44.414063l32.542969-68.15625 48.925781-42.101562c4.042969-3.480469 4.660157-9.511719 1.40625-13.734375zm-402.914062-91.910156 40.5625 25.792969-88.238281 107.5-35.359375-30.433594zm5.722656 227.921875 12.242188-12.242188c.371094-.371094.761718-.722656 1.160156-1.050781 2.394531-1.953125 5.292969-3.117187 8.363281-3.394531.085938-.007813.175781-.007813.261719-.011719.4375-.035156.875-.058594 1.316406-.054687 4.195313.058593 8.09375 1.773437 10.984375 4.824218 5.671875 5.996094 5.367188 15.792969-.679687 21.839844l-11.871094 11.871094c-6.003906 6.003906-15.773438 6.003906-21.777344 0-6.003906-6.007813-6.003906-15.777344 0-21.78125zm31.496094 62.484375c-2.910156-2.90625-4.511719-6.773438-4.511719-10.886719s1.601563-7.980469 4.511719-10.890625l23.738281-23.738281c4.546875-4.546875 11.695313-5.792969 17.507813-3.023438 5.992187 2.855469 9.363281 9.359375 8.484375 15.902344-.46875 3.492188-2.09375 6.78125-4.585938 9.277344l-23.363281 23.359375c-2.910156 2.910156-6.777344 4.511719-10.890625 4.511719s-7.980469-1.601563-10.890625-4.511719zm35.84375 36.191406c-2.910156-2.90625-4.511719-6.773437-4.511719-10.886719 0-4.113281 1.601563-7.980468 4.511719-10.890625l23.734375-23.738281c4.863281-4.859375 12.664063-5.90625 18.617187-2.441406 5.4375 3.164062 8.285157 9.375 7.351563 15.5625-.511719 3.402344-2.128906 6.601562-4.5625 9.035156l-23.359375 23.359375c-2.910156 2.910156-6.777344 4.511719-10.890625 4.511719s-7.980469-1.601563-10.890625-4.511719zm40.828125 31.5625c-6.003906-6.003906-6.003906-15.773437 0-21.777344l12.242187-12.242187c.371094-.371094.757813-.71875 1.15625-1.046875.011719-.007813.019532-.015625.027344-.023438 1.992188-1.617187 4.332032-2.699219 6.828125-3.171875.058594-.007812.117188-.015625.175781-.023437.429688-.078125.867188-.140625 1.304688-.179688.175781-.015625.351562-.015625.53125-.027343.359375-.019532.714844-.042969 1.078125-.039063 4.191406.058594 8.09375 1.769531 10.984375 4.824219.355469.375.6875.765625.992188 1.167968 4.617187 6.035157 3.996093 15-1.734376 20.734376l-11.808593 11.808593c-6.003907 6.003907-15.773438 6-21.777344-.003906zm187.285156-112.042969c-6.003906 6.007813-15.773437 6.003906-21.777343 0-.21875-.21875-.449219-.421875-.683594-.613281l-64.554688-65.234375c-3.902344-3.941406-10.257812-3.972656-14.199218-.070312-3.941407 3.898437-3.972657 10.253906-.074219 14.195312l65.253906 65.933594c.007813.007812.015625.015625.023437.023437 6.003907 6.003907 6.003907 15.777344 0 21.78125-2.910156 2.910157-6.777343 4.511719-10.890624 4.511719-4.117188 0-7.984376-1.601562-10.890626-4.511719l-43.652343-44.105469c-3.898438-3.941406-10.253907-3.972656-14.195313-.074218-3.941406 3.902344-3.972656 10.257812-.074218 14.199218l42.984374 43.429688c.21875.273438.453126.535156.703126.785156 6.003906 6.003906 6.003906 15.777344 0 21.78125-6.007813 6.003906-15.78125 6-21.785157-.003906l-23.824219-24.074219c-3.902343-3.941406-10.257812-3.976562-14.199218-.074219-3.941406 3.898438-3.972656 10.253907-.074219 14.195313l23.160156 23.398437c.21875.273438.453125.539063.707031.789063 6.003907 6.003906 6.003907 15.777344 0 21.78125-6.003906 6.007813-15.773437 6.003906-21.777343 0-.691407-.691406-1.503907-1.222656-2.277344-1.816406-.65625-.5-.828125-.847657-.5-1.644531.332031-.808594.828125-1.539063 1.160156-2.351563.367188-.90625.664063-1.839844.953125-2.777344 1.539063-4.960937 1.992188-10.296875 1.300782-15.445312-1.328126-9.878907-6.761719-18.792969-14.996094-24.433594-4.449219-3.042969-9.597656-5.039063-14.933594-5.789063 2.585938-11.40625-.519531-23.773437-8.597656-32.308593-6.648438-7.023438-15.628906-10.964844-25.289063-11.097657-.351562-.003906-.703125-.003906-1.058593 0 .214843-9.21875-3.136719-18.378906-9.492188-25.09375-6.652344-7.023437-15.632812-10.964843-25.289062-11.097656-2.871094-.039062-5.769532.265625-8.566407.910156-1.195312-8.316406-5.386719-16.011718-11.734375-21.515624-6.308594-5.460938-14.242187-8.492188-22.691406-8.609376-8.894531-.128906-17.632812 3.152344-24.238281 9.117188l-38.808594-52.292969 92.84375-113.109375 29.589844 8.09375-38.644531 68.191406c-4.671876 8.246094-5.851563 17.816407-3.324219 26.949219 2.527343 9.136719 8.457031 16.738281 16.703125 21.410157.515625.292968 1.035156.570312 1.5625.835937.039062.019531.078125.039063.121094.058594 1.386718.691406 2.8125 1.285156 4.257812 1.785156 6.730469 2.332031 14 2.585937 21.011719.648437 9.132812-2.527343 16.734375-8.460937 21.40625-16.703124l25.113281-44.316407 44.839844 3.179688 119.402344 119.398437c6 6.007813 6 15.777344-.003907 21.78125zm4.160157-46.019531-112.011719-112.007813c-.210938-.214843-.433594-.417968-.664063-.609374-1.613281-1.34375-3.613281-2.15625-5.722656-2.304688l-54.902344-3.894531c-3.796875-.261719-7.570312 1.757812-9.445312 5.066406l-28.234375 49.828125c-2.027344 3.578125-5.328125 6.152344-9.292969 7.25-3.960938 1.097656-8.117188.582031-11.699219-1.445312-3.578125-2.027344-6.152343-5.328126-7.25-9.292969-1.097656-3.964844-.585937-8.121094 1.445313-11.699219l37.691406-66.519531 15.273438-4.394531c.101562-.03125.199218-.070313.300781-.101563l57.003906-16.460937h68.875l85.984375 109.304687zm40.503906-73.039063-79.515625-101.136718 40.582031-25.808594 74.300781 96.511719zm0 0" />
+        <path d="m310.183594 117.53125c2.570312 0 5.140625-.980469 7.101562-2.941406l68.578125-68.578125c3.921875-3.921875 3.921875-10.277344 0-14.199219s-10.277343-3.921875-14.199219 0l-68.578124 68.578125c-3.921876 3.921875-3.921876 10.277344 0 14.199219 1.960937 1.960937 4.53125 2.941406 7.097656 2.941406zm0 0" />
+        <path d="m194.714844 114.589844c1.960937 1.960937 4.53125 2.941406 7.101562 2.941406 2.566406 0 5.136719-.980469 7.097656-2.941406 3.921876-3.921875 3.921876-10.277344 0-14.199219l-68.578124-68.578125c-3.921876-3.921875-10.277344-3.921875-14.199219 0s-3.921875 10.277344 0 14.199219zm0 0" />
+        <path d="m256 117.53125c5.542969 0 10.039062-4.496094 10.039062-10.039062v-56.753907c0-5.542969-4.496093-10.039062-10.039062-10.039062s-10.039062 4.496093-10.039062 10.039062v56.753907c0 5.542968 4.496093 10.039062 10.039062 10.039062zm0 0" />
+        <path d="m246.734375 14.351562c1.59375 3.863282 5.566406 6.398438 9.757813 6.179688 4.140624-.214844 7.777343-3.011719 9.058593-6.953125 1.285157-3.972656-.113281-8.5-3.441406-11.03125-3.394531-2.5859375-8.128906-2.730469-11.679687-.382813-3.960938 2.617188-5.496094 7.828126-3.695313 12.1875zm0 0" />
+    </svg>
+);
+export default HandShakeIcon;

package/src/Icons/Entities/SupplierIcon.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from 'react';
+
+const SupplierIcon = (props: SVGProps<SVGSVGElement>): any => (
+    <svg
+        {...props}
+        fill={props.fill ?? '#757575'}
+        width="512"
+        height="512"
+        version="1.1"
+        viewBox="0 0 160 160"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <g>
+            <path d="M146.227,105.699l-27.514,5.464l-0.974-4.922l-1.858-9.362l-14.284,2.843l1.858,9.362l0.974,4.922l-7.976,1.587   c-0.743-1.627-1.627-3.164-2.622-4.601c-4.37-6.298-11.009-10.738-18.493-12.366c-1.708-0.372-3.466-0.593-5.254-0.663   l-9.884-49.784c-0.271-1.356,0.613-2.682,1.969-2.943l27.514-5.465l0.974,4.922l1.868,9.362l14.284-2.843l-1.858-9.362   l-0.974-4.922l27.504-5.465c1.366-0.271,2.682,0.613,2.953,1.979l13.772,69.301C148.477,104.112,147.593,105.428,146.227,105.699z" />
+            <path d="M149.741,108.588l-51.994,10.327c0.356,1.106,0.66,2.24,0.891,3.407c0.232,1.167,0.385,2.331,0.478,3.489l51.994-10.327   c1.905-0.378,3.142-2.229,2.764-4.133C153.496,109.447,151.645,108.209,149.741,108.588z" />
+            <path d="M32.325,7.401c-0.554-1.651-2.248-2.682-4.002-2.333c-1.158,0.23-2.062,1.005-2.509,2.005   c-0.508,1.137-1.618,1.89-2.84,2.133L8.982,11.985c-1.646,0.327-2.918,1.739-2.924,3.417c-0.008,2.308,2.064,3.923,4.203,3.498   l14.083-2.797c1.221-0.243,2.535,0.029,3.439,0.886c0.795,0.753,1.927,1.124,3.085,0.894c1.718-0.341,2.881-1.882,2.817-3.579   c4.769-0.432,9.207,2.805,10.161,7.605l15.416,77.618c1.219-0.41,2.473-0.755,3.768-1.012c1.039-0.206,2.077-0.356,3.11-0.452   L50.743,20.538C49.035,11.938,40.899,6.239,32.325,7.401z" />
+            <path d="M63.715,101.963c-14.503,2.88-23.925,16.973-21.044,31.475c2.88,14.503,16.972,23.925,31.475,21.044   c14.503-2.881,23.925-16.973,21.044-31.475S78.218,99.082,63.715,101.963z M70.914,138.208c-5.506,1.094-10.876-2.496-11.969-8.003   c-1.094-5.506,2.496-10.876,8.003-11.969c5.506-1.094,10.876,2.496,11.969,8.003C80.01,131.745,76.42,137.115,70.914,138.208z" />
+        </g>
+    </svg>
+);
+export default SupplierIcon;

package/src/Services/FileService.ts

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import axiosInstance from '../Utils/AxiosAPI';
+import widgetInstance from '../Utils/AxiosWidget';
+
+export async function getUploadUrls(
+    files: Array<File>,
+    idOrganization?: string
+): Promise<(Record<string, any> | string)[]> {
+    const filesArray = files.map((file: File) => ({
+        publicFile: false,
+        extension: file.name.split('.').pop(),
+    }));
+
+    let response;
+    if (idOrganization) {
+        response = await widgetInstance.post(
+            `/uploadfile?idOrganization=${idOrganization}`,
+            filesArray
+        );
+    } else {
+        response = await axiosInstance.post('/uploadfile', filesArray);
+    }
+
+    return response.data ?? undefined;
+}
+
+export async function postFile(
+    file: File,
+    postInfo: Record<string, any>
+): Promise<{ fileName: string; S3Key: string }> {
+    const formData = new FormData();
+    Object.keys(postInfo.postInfo.fields).forEach((key) => {
+        formData.append(key, postInfo.postInfo.fields[key]);
+    });
+
+    // Actual file has to be appended last.
+    formData.append('file', file);
+
+    await axios.post(postInfo.postInfo.url, formData, {
+        timeout: 300000,
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+    });
+
+    return {
+        fileName: file.name,
+        S3Key: postInfo.S3Key,
+    };
+}

package/src/Services/FormService.ts

@@ -0,0 +1,20 @@
+import { Form } from '../@Types';
+import { Branding } from '../@Types/Branding';
+import axiosInstance from '../Utils/AxiosAPI';
+import widgetInstance from '../Utils/AxiosWidget';
+
+export async function fetchForm(
+    apiKey: string,
+    idOrganization?: string
+): Promise<(Form & { branding?: Branding }) | null> {
+    try {
+        const response = await (idOrganization
+            ? widgetInstance.get(
+                  `/form/${apiKey}?idOrganization=${idOrganization}`
+              )
+            : axiosInstance.get(`/form/${apiKey}`));
+        return response.data;
+    } catch (error) {
+        return null;
+    }
+}

package/src/Services/OrganizationService.ts

@@ -0,0 +1,19 @@
+import { Organization } from '../@Types';
+import axiosInstance from '../Utils/AxiosAPI';
+import widgetInstance from '../Utils/AxiosWidget';
+
+export async function fetchOrganization(
+    idOrganization?: string
+): Promise<Organization | null> {
+    try {
+        const response = idOrganization
+            ? await widgetInstance.get(
+                  `/organization?idOrganization=${idOrganization}`
+              )
+            : await axiosInstance.get('/organization');
+
+        return response.data;
+    } catch (error) {
+        return null;
+    }
+}

package/src/Shared/CustomBtn/CustomBtn.module.css

@@ -0,0 +1,61 @@
+.customBtn {
+    max-width: 100%;
+    border-radius: 20px;
+    padding: 15px 30px;
+    font-size: 1.4rem;
+    cursor: pointer;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: none;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.customBtn[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.ripple {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    display: block;
+    content: '';
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 1s ease 1 forwards ripple-effect;
+}
+
+@keyframes ripple-effect {
+    0% {
+        transform: scale(1);
+        opacity: 0.6;
+    }
+    50% {
+        transform: scale(10);
+        opacity: 0.1;
+    }
+    60% {
+        transform: scale(35);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(35);
+        opacity: 0;
+    }
+}
+
+.loaderContainer {
+    top: 0px;
+    bottom: 0px;
+    right: 0px;
+    left: 0px;
+    position: absolute;
+}

package/src/Shared/CustomBtn/CustomBtn.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import styles from './CustomBtn.module.css';
+import Loader from '../Loader/Loader';
+
+interface CustomBtnProps {
+    label: string;
+    'data-testid'?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    backgroundColor?: string;
+    color?: string;
+    width?: string;
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+function CustomBtn({
+    label,
+    onClick,
+    backgroundColor,
+    color,
+    loading = false,
+    disabled = false,
+    width = 'fit-content',
+    ...others
+}: CustomBtnProps): JSX.Element {
+    const [coords, setCoords] = useState<{ x: number; y: number } | undefined>(
+        undefined
+    );
+
+    useEffect(() => {
+        if (coords) setCoords(undefined);
+    }, [label]);
+
+    return (
+        <button
+            className={styles.customBtn}
+            style={{
+                width,
+                background: backgroundColor,
+                color,
+            }}
+            data-testid={others['data-testid']}
+            disabled={disabled || loading}
+            onClick={async (e) => {
+                const rect = (e.target as any).getBoundingClientRect();
+                setCoords({
+                    x: e.clientX - rect.left,
+                    y: e.clientY - rect.top,
+                });
+                setTimeout(() => setCoords(undefined), 600);
+                onClick && onClick(e);
+            }}
+        >
+            {coords ? (
+                <span
+                    className={styles.ripple}
+                    style={{
+                        backgroundColor: color,
+                        left: coords.x,
+                        top: coords.y,
+                    }}
+                />
+            ) : (
+                <></>
+            )}
+            <div
+                style={{
+                    visibility: loading ? 'hidden' : 'visible',
+                    margin: '0px 10px',
+                }}
+            >
+                {label}
+            </div>
+            {loading && (
+                <div className={styles.loaderContainer}>
+                    <Loader color={color} position="unset" />
+                </div>
+            )}
+        </button>
+    );
+}
+
+export default CustomBtn;