@paro.io/expert-shared-components 1.14.12 → 1.14.14

package/lib/components/OrganizationChart/utils.js

@@ -50,86 +50,86 @@ const transformEmployeeData = (employeeData, firstName, lastName, primaryService
     };
 };
 exports.transformEmployeeData = transformEmployeeData;
-exports.ConnectorContainer = styled_components_1.default.div `
-    position: relative;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.parent-vertical-line {
-        height: 40px;
-        position: relative;
-
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 2px;
-            height: calc(100% + 2px);
-            background-color: #D8D8D8;
-            transform: translateX(-50%);
-        }
-    }
-
-    &.child-vertical-line {
-        height: 40px;
-        position: relative;
-        margin-bottom: 4px;
-        &:before {
-            content: '';
-            position: absolute;
-            left: 50%;
-            width: 2px;
-            height: 100%;
-            background-color: #D8D8D8;
-            transform: translateX(-50%);
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 50%;
-            width: 8px;
-            height: 8px;
-            border-right: 2px solid #D8D8D8;
-            border-bottom: 2px solid #D8D8D8;
-            transform: translateX(-50%) rotate(45deg);
-            background-color: transparent;
-        }
-    }
-
-    &.horizontal-line {
-        position: absolute;
-        height: 2px;
-        background-color: #D8D8D8;
-        top: 0;
-        width: 100%;
-    }
+exports.ConnectorContainer = styled_components_1.default.div `
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.parent-vertical-line {
+        height: 40px;
+        position: relative;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 2px;
+            height: calc(100% + 2px);
+            background-color: #D8D8D8;
+            transform: translateX(-50%);
+        }
+    }
+
+    &.child-vertical-line {
+        height: 40px;
+        position: relative;
+        margin-bottom: 4px;
+        &:before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            width: 2px;
+            height: 100%;
+            background-color: #D8D8D8;
+            transform: translateX(-50%);
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            left: 50%;
+            width: 8px;
+            height: 8px;
+            border-right: 2px solid #D8D8D8;
+            border-bottom: 2px solid #D8D8D8;
+            transform: translateX(-50%) rotate(45deg);
+            background-color: transparent;
+        }
+    }
+
+    &.horizontal-line {
+        position: absolute;
+        height: 2px;
+        background-color: #D8D8D8;
+        top: 0;
+        width: 100%;
+    }
 `;
-exports.InfoCard = (0, styled_components_1.default)(core_1.Card) `
-    position: absolute;
-    top: 10;
-    right: 0;
-    width: fit-content;
-    max-width: 30%;
-    z-index: 1000;
-    padding: 8px;
-    margin: 16px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: none;
-    border: 1px solid #e2e8f0;
-    max-height: 90vh;
-    overflow: auto;
-    @media (max-width: 600px) {
-        position: absolute;
-        top: 20;
-        right: auto;
-        min-width: 90%;
-    }
+exports.InfoCard = (0, styled_components_1.default)(core_1.Card) `
+    position: absolute;
+    top: 10;
+    right: 0;
+    width: fit-content;
+    max-width: 30%;
+    z-index: 1000;
+    padding: 8px;
+    margin: 16px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: none;
+    border: 1px solid #e2e8f0;
+    max-height: 90vh;
+    overflow: auto;
+    @media (max-width: 600px) {
+        position: absolute;
+        top: 20;
+        right: auto;
+        min-width: 90%;
+    }
 `;
 exports.CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
     '& .MuiDialog-paper': {

package/lib/components/ProjectCard/ProgressBar.js

@@ -44,15 +44,15 @@ const ProgressBar = ({ minFloorHours, maxFloorHours, loggedHours }) => {
     };
     return (react_1.default.createElement("div", { className: `relative m-6 ${minFloorHours <= 0 ? 'pt-4' : 'pt-6'}` },
         react_1.default.createElement("div", { className: "h-8 w-full border-2 border-solid border-[#64748B] rounded-full relative flex flex-wrap bg-[#F1F5F9]" },
-            react_1.default.createElement("div", { className: `h-full w-full rounded-l-full ${isRounded ? 'rounded-r-full' : ''} 
+            react_1.default.createElement("div", { className: `h-full w-full rounded-l-full ${isRounded ? 'rounded-r-full' : ''} 
                             ${totalLoggedHours >= minFloorHours && totalLoggedHours <= maxFloorHours
                     ? 'bg-[#248384]'
                     : totalLoggedHours < minFloorHours
                         ? 'bg-[#F9BABF]'
                         : 'bg-[#A73A43]'}`, style: { width: `${totalLoggedHours !== 0 ? ((totalLoggedHours / totalBar) * 100) : 0}%` } },
-                react_1.default.createElement("div", { className: `absolute top-1/2 left-1/2 transform -translate-x-1/2 z-10 
-                            ${totalLoggedHours < (totalBar * 0.03) || totalLoggedHours > totalBar || (totalLoggedHours < (totalBar * 0.12)) ? 'translate-y-full' : '-translate-y-1/2'}
-                            ${totalLoggedHours < minFloorHours || totalLoggedHours === 0 ? 'text-black' : 'text-white'} 
+                react_1.default.createElement("div", { className: `absolute top-1/2 left-1/2 transform -translate-x-1/2 z-10 
+                            ${totalLoggedHours < (totalBar * 0.03) || totalLoggedHours > totalBar || (totalLoggedHours < (totalBar * 0.12)) ? 'translate-y-full' : '-translate-y-1/2'}
+                            ${totalLoggedHours < minFloorHours || totalLoggedHours === 0 ? 'text-black' : 'text-white'} 
                             font-bold`, style: { left: `calc(${calculatePosition()}% - 1px)` } },
                     (0, exports.formatNumberingSystem)(totalLoggedHours),
                     " hrs")),

package/lib/components/ProjectCard/ReviewRequestModal.js

@@ -35,11 +35,11 @@ const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
 const ReviewRequestModal = ({ project, requestModal, setRequestModal, expertName, freelancerId, setRequestStatus, selectedProject, setSelectedProject, clientId, refetchParoProjects, setHighlightedRatings, createOrUpdateRatingRequestMutation, }) => {
     var _a;
     const [showError, setShowError] = (0, react_1.useState)(false);
-    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
-I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
-  
-Thank you in advance for your time and feedback.
-Best regards,
+    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
+I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
+  
+Thank you in advance for your time and feedback.
+Best regards,
 ${expertName}`);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const handleTextArea = (e) => {

package/lib/components/ProjectIntelligence/MissingInformation/index.js

@@ -164,7 +164,7 @@ const RequestInfoModal = ({ isOpen, missingInfoItem, onClose, onSubmit, document
                     react_1.default.createElement("select", { id: "priorityLevel", disabled: isInternal && !isParoIntelligenceRolePresent, value: priorityLevel, onChange: (e) => { var _a; return setPriorityLevel((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); }, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" }, PRIORITY_LEVELS.map((level) => (react_1.default.createElement("option", { key: level, value: level }, level))))),
                 react_1.default.createElement("div", null,
                     react_1.default.createElement("label", { htmlFor: "specificInformation", className: "block text-sm font-medium text-gray-700 mb-1" }, "Specific Information Needed"),
-                    react_1.default.createElement("textarea", { id: "specificInformation", disabled: isInternal && !isParoIntelligenceRolePresent, value: specificInformation, onChange: (e) => { var _a; return setSpecificInformation((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); }, rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm", placeholder: "Need NetSuite configuration details:\r\n  \r\n  1. US vs Colombian entity setup\r\n  2. Consolidation process and requirements" }))),
+                    react_1.default.createElement("textarea", { id: "specificInformation", disabled: isInternal && !isParoIntelligenceRolePresent, value: specificInformation, onChange: (e) => { var _a; return setSpecificInformation((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); }, rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm", placeholder: "Need NetSuite configuration details:\n  \n  1. US vs Colombian entity setup\n  2. Consolidation process and requirements" }))),
             react_1.default.createElement("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end space-x-3" },
                 react_1.default.createElement("button", { onClick: handleCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors" }, "Cancel"),
                 react_1.default.createElement("button", { onClick: handleSubmit, disabled: isInternal && !isParoIntelligenceRolePresent, className: `px-4 py-2 text-sm font-medium text-white bg-blue bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-${isInternal && !isParoIntelligenceRolePresent ? "not-allowed" : "pointer"}` }, buttonText)))));

package/lib/components/Reviews/Pagination.js

@@ -51,12 +51,12 @@ const Pagination = ({ total, currentPage = 1, setCurrentPage, perPageItems = 10,
     };
     const numberOfPages = Math.ceil(total / perPageItems);
     return (react_1.default.createElement("div", { className: "bg-white px-4 py-3 border-t border-gray-200 sm:px-6 flex flex-col md:flex-row md:items-center md:justify-between" },
-        react_1.default.createElement("div", { className: "pb-2 md:pb-0" }, `Showing 
-          ${perPageItems * (currentPage - 1) + 1} 
-          to 
-          ${Math.min(total, perPageItems * currentPage)} 
-          of 
-          ${total}
+        react_1.default.createElement("div", { className: "pb-2 md:pb-0" }, `Showing 
+          ${perPageItems * (currentPage - 1) + 1} 
+          to 
+          ${Math.min(total, perPageItems * currentPage)} 
+          of 
+          ${total}
           ${displayText}`),
         react_1.default.createElement("div", { className: "flex items-center justify-between" },
             react_1.default.createElement("div", { className: "flex-1 flex justify-between sm:hidden" },

package/lib/components/ReviewsTab/RatingHeader.js

@@ -51,12 +51,12 @@ const isRatingExists = (rating) => {
     return false;
 };
 exports.isRatingExists = isRatingExists;
-const StyledButton = (0, styled_components_1.default)(core_2.Button) `
-    margin: 0px !important;
-    padding: 26px 0 18px 0 !important;
-    span {
-        color: #248384 !important
-     }
+const StyledButton = (0, styled_components_1.default)(core_2.Button) `
+    margin: 0px !important;
+    padding: 26px 0 18px 0 !important;
+    span {
+        color: #248384 !important
+     }
 `;
 const RatingHeader = ({ ratings, project, index, highlightedRatings, requestStatus, handleRatingRequest, loadingSubmitId, handleAddToProfile, ratingReviewButtonlabel, setOpenClientReviewModal, setShowReviewModelWithRecentlyRatedProjects, enableReviewModal, disableReviewModal, isClientPortal, isInternal, createOrUpdateRating, getParoProjectsDocument, projectIdToShow, }) => {
     var _a, _b, _c, _d;

package/lib/components/ReviewsTab/expert-shared-components.code-workspace

@@ -1,20 +1,20 @@
-{
-  "folders": [
-	{
-		"path": "../../.."
-	},
-	{
-		"path": "../../../../internal-profile-app"
-	},
-	{
-		"path": "../../../../availability-gantt-chart"
-	},
-	{
-		"path": "../../../../client-portal"
-	},
-	{
-		"path": "../../../../expert-portal"
-	}
-],
-  "settings": {}
-}
+{
+  "folders": [
+	{
+		"path": "../../.."
+	},
+	{
+		"path": "../../../../internal-profile-app"
+	},
+	{
+		"path": "../../../../availability-gantt-chart"
+	},
+	{
+		"path": "../../../../client-portal"
+	},
+	{
+		"path": "../../../../expert-portal"
+	}
+],
+  "settings": {}
+}

package/lib/components/ReviewsTab/reviewRequestModal.js

@@ -34,11 +34,11 @@ const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
 const ReviewRequestModal = ({ project, requestModal, setRequestModal, expertName, freelancerId, setRequestStatus, selectedProject, setSelectedProject, clientId, refetchParoProjects, setHighlightedRatings, createOrUpdateRatingRequestMutation, getParoProjectsDocument, }) => {
     var _a;
     const [showError, setShowError] = (0, react_1.useState)(false);
-    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
-I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
-  
-Thank you in advance for your time and feedback.
-Best regards,
+    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
+I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
+  
+Thank you in advance for your time and feedback.
+Best regards,
 ${expertName}`);
     const handleTextArea = (e) => {
         setTextareaValue(e.target.value);

package/lib/components/shared/Image.js

@@ -31,20 +31,20 @@ const react_1 = __importStar(require("react"));
 const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
 const cdn_1 = require("./constants/cdn");
-const ProfilePhotoPreview = styled_components_1.default.img `
-  height: 86px;
-  width: 86px;
-  border: 4px solid #F8FAFC;
-  border-radius: 10px;
-  object-fit: cover;
-  object-position: top;
+const ProfilePhotoPreview = styled_components_1.default.img `
+  height: 86px;
+  width: 86px;
+  border: 4px solid #F8FAFC;
+  border-radius: 10px;
+  object-fit: cover;
+  object-position: top;
 `;
-const PhotoChangeButton = (0, styled_components_1.default)(core_1.Typography) `
-  text-decoration: underline;
-  cursor: pointer;
-  :active {
-    text-decoration: none !important;
-  }
+const PhotoChangeButton = (0, styled_components_1.default)(core_1.Typography) `
+  text-decoration: underline;
+  cursor: pointer;
+  :active {
+    text-decoration: none !important;
+  }
 `;
 exports.defaultAvatar = cdn_1.CDN_URL + 'defaultAvatar.png';
 const Image = ({ imageUrl, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, legacyFreelancerId, }) => {

package/lib/components/shared/ProfileTextField.d.ts

@@ -1,18 +1,18 @@
-import { FieldError } from 'react-hook-form/dist/types/form';
-type SectionContents = {
-    defaultValue?: string | number;
-    error?: boolean;
-    helperText: string | undefined | (FieldError | undefined)[];
-    inputRef?: ((instance: any) => void) | null | undefined;
-    label?: string;
-    multiline?: boolean;
-    name?: string;
-    placeholder?: string;
-    props?: unknown;
-    size?: 'small' | 'medium' | undefined;
-    onChange?: ((value: any) => void) | undefined;
-    width?: boolean;
-    InputProps?: any;
-};
-declare const ProfileTextField: ({ defaultValue, error, helperText, inputRef, label, multiline, name, placeholder, props, size, width, onChange, InputProps }: SectionContents) => JSX.Element;
-export default ProfileTextField;
+import { FieldError } from 'react-hook-form/dist/types/form';
+type SectionContents = {
+    defaultValue?: string | number;
+    error?: boolean;
+    helperText: string | undefined | (FieldError | undefined)[];
+    inputRef?: ((instance: any) => void) | null | undefined;
+    label?: string;
+    multiline?: boolean;
+    name?: string;
+    placeholder?: string;
+    props?: unknown;
+    size?: 'small' | 'medium' | undefined;
+    onChange?: ((value: any) => void) | undefined;
+    width?: boolean;
+    InputProps?: any;
+};
+declare const ProfileTextField: ({ defaultValue, error, helperText, inputRef, label, multiline, name, placeholder, props, size, width, onChange, InputProps }: SectionContents) => JSX.Element;
+export default ProfileTextField;

package/lib/components/shared/ProfileTextField.js

@@ -1,16 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const TextField_1 = __importDefault(require("@material-ui/core/TextField"));
-const ProfileTextField = ({ defaultValue, error, helperText, inputRef, label, multiline = false, name, placeholder, props, size, width = false, onChange, InputProps }) => {
-    return (onChange ? react_1.default.createElement(TextField_1.default, Object.assign({ InputProps: InputProps, "x-id": 'TextField' }, props, { defaultValue: defaultValue, error: error, fullWidth: true, helperText: helperText, InputLabelProps: {
-            shrink: true
-        }, inputRef: inputRef, label: label, margin: 'normal', multiline: multiline, name: name, placeholder: placeholder, size: size, style: Object.assign({ marginTop: '8px' }, (width && { width: '100%' })), variant: 'outlined', onChange: onChange, classes: { root: 'inputCurrency' } })) :
-        react_1.default.createElement(TextField_1.default, Object.assign({ InputProps: InputProps, "x-id": 'TextField' }, props, { defaultValue: defaultValue, error: error, fullWidth: true, helperText: helperText, InputLabelProps: {
-                shrink: true
-            }, inputRef: inputRef, label: label, margin: 'normal', multiline: multiline, name: name, placeholder: placeholder, size: size, style: Object.assign({ marginTop: '8px' }, (width && { width: '100%' })), variant: 'outlined' })));
-};
-exports.default = ProfileTextField;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+const ProfileTextField = ({ defaultValue, error, helperText, inputRef, label, multiline = false, name, placeholder, props, size, width = false, onChange, InputProps }) => {
+    return (onChange ? react_1.default.createElement(TextField_1.default, Object.assign({ InputProps: InputProps, "x-id": 'TextField' }, props, { defaultValue: defaultValue, error: error, fullWidth: true, helperText: helperText, InputLabelProps: {
+            shrink: true
+        }, inputRef: inputRef, label: label, margin: 'normal', multiline: multiline, name: name, placeholder: placeholder, size: size, style: Object.assign({ marginTop: '8px' }, (width && { width: '100%' })), variant: 'outlined', onChange: onChange, classes: { root: 'inputCurrency' } })) :
+        react_1.default.createElement(TextField_1.default, Object.assign({ InputProps: InputProps, "x-id": 'TextField' }, props, { defaultValue: defaultValue, error: error, fullWidth: true, helperText: helperText, InputLabelProps: {
+                shrink: true
+            }, inputRef: inputRef, label: label, margin: 'normal', multiline: multiline, name: name, placeholder: placeholder, size: size, style: Object.assign({ marginTop: '8px' }, (width && { width: '100%' })), variant: 'outlined' })));
+};
+exports.default = ProfileTextField;

package/lib/components/shared/StyledActionButtons.d.ts

@@ -1,7 +1,7 @@
-declare const StyledActionButtons: ({ closeOnClick, isDisabled, isLoading, handleSubmit }: {
-    closeOnClick: () => void;
-    isDisabled: boolean;
-    isLoading: boolean;
-    handleSubmit?: () => void;
-}) => JSX.Element;
-export default StyledActionButtons;
+declare const StyledActionButtons: ({ closeOnClick, isDisabled, isLoading, handleSubmit }: {
+    closeOnClick: () => void;
+    isDisabled: boolean;
+    isLoading: boolean;
+    handleSubmit?: () => void;
+}) => JSX.Element;
+export default StyledActionButtons;

package/lib/components/shared/StyledActionButtons.js

@@ -1,15 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const core_1 = require("@material-ui/core");
-const Button_1 = __importDefault(require("@material-ui/core/Button"));
-const Loader_1 = __importDefault(require("./Loader"));
-const StyledActionButtons = ({ closeOnClick, isDisabled, isLoading, handleSubmit }) => {
-    return (react_1.default.createElement(core_1.DialogActions, null,
-        react_1.default.createElement(Button_1.default, { variant: 'outlined', onClick: closeOnClick, color: 'primary' }, "Close"),
-        react_1.default.createElement(Button_1.default, { color: 'default', disabled: isDisabled, key: String(isDisabled), onClick: handleSubmit, variant: 'contained' }, isLoading ? react_1.default.createElement(Loader_1.default, { key: String(isLoading) }) : 'Save')));
-};
-exports.default = StyledActionButtons;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const core_1 = require("@material-ui/core");
+const Button_1 = __importDefault(require("@material-ui/core/Button"));
+const Loader_1 = __importDefault(require("./Loader"));
+const StyledActionButtons = ({ closeOnClick, isDisabled, isLoading, handleSubmit }) => {
+    return (react_1.default.createElement(core_1.DialogActions, null,
+        react_1.default.createElement(Button_1.default, { variant: 'outlined', onClick: closeOnClick, color: 'primary' }, "Close"),
+        react_1.default.createElement(Button_1.default, { color: 'default', disabled: isDisabled, key: String(isDisabled), onClick: handleSubmit, variant: 'contained' }, isLoading ? react_1.default.createElement(Loader_1.default, { key: String(isLoading) }) : 'Save')));
+};
+exports.default = StyledActionButtons;

package/lib/components/shared/ToastNotification.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-interface ToastModalProps {
-    color: 'success' | 'info' | 'warning' | 'danger';
-    icon: string;
-    message: string;
-    duration?: number;
-    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
-}
-declare const ToastModal: React.FC<ToastModalProps>;
-export default ToastModal;
+import React from 'react';
+interface ToastModalProps {
+    color: 'success' | 'info' | 'warning' | 'danger';
+    icon: string;
+    message: string;
+    duration?: number;
+    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
+}
+declare const ToastModal: React.FC<ToastModalProps>;
+export default ToastModal;

package/lib/components/shared/ToastNotification.js

@@ -1,63 +1,63 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const core_1 = require("@material-ui/core");
-const base_ui_1 = require("@paro.io/base-ui");
-const ToastModal = ({ color, icon, message, duration = 6000, // Default duration is 6 seconds
-position = 'bottom-right', }) => {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    // Automatically open the modal on mount
-    (0, react_1.useEffect)(() => {
-        setOpen(true);
-        // Automatically close the modal after the specified duration
-        const timer = setTimeout(() => {
-            setOpen(false);
-        }, duration);
-        // Cleanup the timeout if the component unmounts or if the duration changes
-        return () => clearTimeout(timer);
-    }, [duration]);
-    console.log("triggered");
-    return (react_1.default.createElement(core_1.Dialog, { open: open, onClose: () => setOpen(false), "aria-labelledby": "toast-modal-title", maxWidth: "xs", fullWidth: true, PaperProps: {
-            style: {
-                backgroundColor: '#323232', // Dark background to resemble toast style
-                color: '#fff', // White text
-                borderRadius: '8px',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                zIndex: 9999, // Ensure it’s on top of the MUI Dialog
-                position: 'absolute', // Absolute positioning to control location
-                top: position.includes('top') ? '10%' : 'auto',
-                bottom: position.includes('bottom') ? '10%' : 'auto',
-                right: position.includes('right') ? '10%' : 'auto',
-                left: position.includes('left') ? '10%' : 'auto',
-            },
-        } },
-        react_1.default.createElement(core_1.DialogContent, { style: { textAlign: 'center' } },
-            react_1.default.createElement(base_ui_1.Alert, { color: color, icon: icon, label: message, className: color === 'warning' ? 'bg-warning' : 'bg-success' }),
-            ",")));
-};
-exports.default = ToastModal;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const base_ui_1 = require("@paro.io/base-ui");
+const ToastModal = ({ color, icon, message, duration = 6000, // Default duration is 6 seconds
+position = 'bottom-right', }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // Automatically open the modal on mount
+    (0, react_1.useEffect)(() => {
+        setOpen(true);
+        // Automatically close the modal after the specified duration
+        const timer = setTimeout(() => {
+            setOpen(false);
+        }, duration);
+        // Cleanup the timeout if the component unmounts or if the duration changes
+        return () => clearTimeout(timer);
+    }, [duration]);
+    console.log("triggered");
+    return (react_1.default.createElement(core_1.Dialog, { open: open, onClose: () => setOpen(false), "aria-labelledby": "toast-modal-title", maxWidth: "xs", fullWidth: true, PaperProps: {
+            style: {
+                backgroundColor: '#323232', // Dark background to resemble toast style
+                color: '#fff', // White text
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                zIndex: 9999, // Ensure it’s on top of the MUI Dialog
+                position: 'absolute', // Absolute positioning to control location
+                top: position.includes('top') ? '10%' : 'auto',
+                bottom: position.includes('bottom') ? '10%' : 'auto',
+                right: position.includes('right') ? '10%' : 'auto',
+                left: position.includes('left') ? '10%' : 'auto',
+            },
+        } },
+        react_1.default.createElement(core_1.DialogContent, { style: { textAlign: 'center' } },
+            react_1.default.createElement(base_ui_1.Alert, { color: color, icon: icon, label: message, className: color === 'warning' ? 'bg-warning' : 'bg-success' }),
+            ",")));
+};
+exports.default = ToastModal;