pixelize-design-library 2.3.6 → 2.3.8

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -1,36 +1,21 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var sizeMap = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const sizeMap = {
     sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
     md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
     lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
 };
-var FALLBACK_GRADIENT = { from: "#667eea", to: "#764ba2" };
-var UpgradeButton = function (_a) {
-    var _b, _c;
-    var label = _a.label, mobileLabel = _a.mobileLabel, subtitle = _a.subtitle, _d = _a.icon, icon = _d === void 0 ? lucide_react_1.Sparkles : _d, _e = _a.iconColor, iconColor = _e === void 0 ? "#FFD66B" : _e, _f = _a.variant, variant = _f === void 0 ? "brand" : _f, gradient = _a.gradient, _g = _a.size, size = _g === void 0 ? "md" : _g, _h = _a.shimmer, shimmer = _h === void 0 ? true : _h, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, _k = _a.isDisabled, isDisabled = _k === void 0 ? false : _k, _l = _a.maxLabelWidth, maxLabelWidth = _l === void 0 ? "160px" : _l, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var c = theme.colors;
-    var themeGradient = (_b = c.gradient) !== null && _b !== void 0 ? _b : FALLBACK_GRADIENT;
-    var variantGradient = {
+const FALLBACK_GRADIENT = { from: "#667eea", to: "#764ba2" };
+const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Sparkles, iconColor = "#FFD66B", variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
+    var _a, _b;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const c = theme.colors;
+    const themeGradient = (_a = c.gradient) !== null && _a !== void 0 ? _a : FALLBACK_GRADIENT;
+    const variantGradient = {
         brand: themeGradient,
         primary: { from: c.primary[500], to: c.primary[700] },
         secondary: { from: c.secondary[400], to: c.secondary[600] },
@@ -39,16 +24,21 @@ var UpgradeButton = function (_a) {
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
         info: { from: c.semantic.info[400], to: c.semantic.info[600] },
     };
-    var resolved = (_c = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _c !== void 0 ? _c : themeGradient;
-    var s = sizeMap[size];
-    var Icon = icon;
-    var blocked = isLoading || isDisabled;
-    var g = "linear-gradient(135deg, ".concat(resolved.from, " 0%, ").concat(resolved.to, " 100%)");
-    var gReversed = "linear-gradient(135deg, ".concat(resolved.to, " 0%, ").concat(resolved.from, " 100%)");
-    var hasMobile = !!mobileLabel && mobileLabel !== label;
-    return (react_1.default.createElement(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: "0 0 0 3px ".concat(resolved.from, "55") }, _hover: blocked
+    const resolved = (_b = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _b !== void 0 ? _b : themeGradient;
+    const s = sizeMap[size];
+    const Icon = icon;
+    const blocked = isLoading || isDisabled;
+    const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
+    const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
+    const hasMobile = !!mobileLabel && mobileLabel !== label;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: `0 0 0 3px ${resolved.from}55` }, _hover: blocked
             ? undefined
-            : __assign({ transform: "translateY(-2px)", bgImage: gReversed, boxShadow: "0 10px 30px ".concat(resolved.from, "66") }, (shimmer ? { _before: { left: "130%" } } : {})), sx: shimmer
+            : {
+                transform: "translateY(-2px)",
+                bgImage: gReversed,
+                boxShadow: `0 10px 30px ${resolved.from}66`,
+                ...(shimmer ? { _before: { left: "130%" } } : {}),
+            }, sx: shimmer
             ? {
                 _before: {
                     content: '""',
@@ -63,11 +53,6 @@ var UpgradeButton = function (_a) {
                     pointerEvents: "none",
                 },
             }
-            : undefined },
-        react_1.default.createElement(react_2.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1 },
-            react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block" }, label),
-            hasMobile && (react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" } }, mobileLabel)),
-            isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && react_1.default.createElement(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))),
-        subtitle && (react_1.default.createElement(react_2.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: iconColor, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1 }, subtitle))));
+            : undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: iconColor, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 exports.default = UpgradeButton;

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts

@@ -41,3 +41,4 @@ export interface UpgradeButtonProps {
     ariaLabel?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
+//# sourceMappingURL=UpgradeButtonProps.d.ts.map

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpgradeButtonProps.d.ts","sourceRoot":"","sources":["../../../src/Components/UpgradeButton/UpgradeButtonProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAC5B,OAAO,GACP,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD"}

package/dist/Components/UserDetails/AddUserModal.d.ts

@@ -2,3 +2,4 @@ import React from "react";
 import { AddUserModalProps } from "./UserDetailsProps";
 declare const AddUserModal: React.FC<AddUserModalProps>;
 export default AddUserModal;
+//# sourceMappingURL=AddUserModal.d.ts.map

package/dist/Components/UserDetails/AddUserModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddUserModal.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/AddUserModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAiBnD,OAAO,EAEL,iBAAiB,EAElB,MAAM,oBAAoB,CAAC;AAa5B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2K7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/UserDetails/AddUserModal.js

@@ -1,115 +1,35 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["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 };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var Button_1 = __importDefault(require("../Button/Button"));
-var TextInput_1 = __importDefault(require("../Input/TextInput"));
-var SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
-var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-var emptyValues = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Button_1 = __importDefault(require("../Button/Button"));
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const emptyValues = {
     firstName: "",
     lastName: "",
     email: "",
     role: null,
 };
-var AddUserModal = function (_a) {
-    var _b, _c, _d, _e;
-    var isOpen = _a.isOpen, onClose = _a.onClose, roleOptions = _a.roleOptions, isLoading = _a.isLoading, onSubmit = _a.onSubmit, onAddRoleClick = _a.onAddRoleClick, upgradeNotice = _a.upgradeNotice, labels = _a.labels;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _f = (0, react_1.useState)(emptyValues), values = _f[0], setValues = _f[1];
-    var _g = (0, react_1.useState)({}), errors = _g[0], setErrors = _g[1];
-    (0, react_1.useEffect)(function () {
+const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAddRoleClick, upgradeNotice, labels, }) => {
+    var _a, _b, _c, _d;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [values, setValues] = (0, react_1.useState)(emptyValues);
+    const [errors, setErrors] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
         if (!isOpen) {
             setValues(emptyValues);
             setErrors({});
         }
     }, [isOpen]);
-    var validate = function () {
-        var nextErrors = {};
+    const validate = () => {
+        const nextErrors = {};
         if (!values.firstName.trim())
             nextErrors.firstName = labels.firstNameRequired;
         if (!values.lastName.trim())
@@ -124,42 +44,25 @@ var AddUserModal = function (_a) {
             nextErrors.role = labels.roleRequired;
         return nextErrors;
     };
-    var handleChange = function (field) {
-        return function (event) {
-            var value = event.target.value;
-            setValues(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), (_a = {}, _a[field] = value, _a)));
-            });
-            setErrors(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), (_a = {}, _a[field] = undefined, _a)));
-            });
-        };
+    const handleChange = (field) => (event) => {
+        const value = event.target.value;
+        setValues((prev) => ({ ...prev, [field]: value }));
+        setErrors((prev) => ({ ...prev, [field]: undefined }));
+    };
+    const handleSubmit = async () => {
+        const nextErrors = validate();
+        if (Object.keys(nextErrors).length > 0) {
+            setErrors(nextErrors);
+            return;
+        }
+        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+            firstName: values.firstName.trim(),
+            lastName: values.lastName.trim(),
+            email: values.email.trim(),
+            role: values.role,
+        }));
     };
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var nextErrors;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    nextErrors = validate();
-                    if (Object.keys(nextErrors).length > 0) {
-                        setErrors(nextErrors);
-                        return [2 /*return*/];
-                    }
-                    return [4 /*yield*/, (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
-                            firstName: values.firstName.trim(),
-                            lastName: values.lastName.trim(),
-                            email: values.email.trim(),
-                            role: values.role,
-                        }))];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var textFields = [
+    const textFields = [
         {
             id: "firstName",
             label: labels.firstName,
@@ -177,42 +80,27 @@ var AddUserModal = function (_a) {
             type: "email",
         },
     ];
-    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true },
-        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
-        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
-            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200] },
-                labels.addNewUser,
-                upgradeNotice),
-            react_1.default.createElement(react_2.ModalCloseButton, null),
-            react_1.default.createElement(react_2.ModalBody, { py: 5 },
-                react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
-                    textFields.map(function (field) { return (react_1.default.createElement(react_2.FormControl, { key: field.id, isInvalid: !!errors[field.id] },
-                        react_1.default.createElement(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }))); }),
-                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true },
-                        react_1.default.createElement(SearchSelect_1.default, { label: labels.role, options: roleOptions.map(function (item) { return ({
-                                id: item.id,
-                                label: item.label,
-                            }); }), value: (_e = values.role) !== null && _e !== void 0 ? _e : undefined, onSelect: function (option) {
-                                if (!option) {
-                                    setValues(function (prev) { return (__assign(__assign({}, prev), { role: null })); });
-                                }
-                                else if (!Array.isArray(option)) {
-                                    var role_1 = {
-                                        id: Number(option.id),
-                                        label: option.label,
-                                    };
-                                    setValues(function (prev) { return (__assign(__assign({}, prev), { role: role_1 })); });
-                                    setErrors(function (prev) { return (__assign(__assign({}, prev), { role: undefined })); });
-                                }
-                            }, isRequired: true, isRemoveAllIcon: true, error: !!errors.role, errorMessage: errors.role, addNew: onAddRoleClick
-                                ? {
-                                    enabled: true,
-                                    text: labels.addNewRole,
-                                    onClick: onAddRoleClick,
-                                }
-                                : undefined })))),
-            react_1.default.createElement(react_2.ModalFooter, null,
-                react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }),
-                react_1.default.createElement(Button_1.default, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, onClick: handleSubmit })))));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+                                            id: item.id,
+                                            label: item.label,
+                                        })), value: (_d = values.role) !== null && _d !== void 0 ? _d : undefined, onSelect: (option) => {
+                                            if (!option) {
+                                                setValues((prev) => ({ ...prev, role: null }));
+                                            }
+                                            else if (!Array.isArray(option)) {
+                                                const role = {
+                                                    id: Number(option.id),
+                                                    label: option.label,
+                                                };
+                                                setValues((prev) => ({ ...prev, role }));
+                                                setErrors((prev) => ({ ...prev, role: undefined }));
+                                            }
+                                        }, isRequired: true, isRemoveAllIcon: true, error: !!errors.role, errorMessage: errors.role, addNew: onAddRoleClick
+                                            ? {
+                                                enabled: true,
+                                                text: labels.addNewRole,
+                                                onClick: onAddRoleClick,
+                                            }
+                                            : undefined }) })] }) }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, onClick: handleSubmit })] })] })] }));
 };
 exports.default = AddUserModal;

package/dist/Components/UserDetails/ChangeRoleModal.d.ts

@@ -2,3 +2,4 @@ import React from "react";
 import { ChangeRoleModalProps } from "./UserDetailsProps";
 declare const ChangeRoleModal: React.FC<ChangeRoleModalProps>;
 export default ChangeRoleModal;
+//# sourceMappingURL=ChangeRoleModal.d.ts.map

package/dist/Components/UserDetails/ChangeRoleModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeRoleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/ChangeRoleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAiBnD,OAAO,EAAE,oBAAoB,EAAc,MAAM,oBAAoB,CAAC;AAEtE,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsHnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -1,92 +1,23 @@
 "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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["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 };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var Button_1 = __importDefault(require("../Button/Button"));
-var TextInput_1 = __importDefault(require("../Input/TextInput"));
-var SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
-var ChangeRoleModal = function (_a) {
-    var _b, _c, _d, _e;
-    var isOpen = _a.isOpen, onClose = _a.onClose, userId = _a.userId, email = _a.email, currentRole = _a.currentRole, roleOptions = _a.roleOptions, isLoading = _a.isLoading, onSubmit = _a.onSubmit, onAddRoleClick = _a.onAddRoleClick, labels = _a.labels;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _f = (0, react_1.useState)(null), selectedRole = _f[0], setSelectedRole = _f[1];
-    var _g = (0, react_1.useState)(null), error = _g[0], setError = _g[1];
-    (0, react_1.useEffect)(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Button_1 = __importDefault(require("../Button/Button"));
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
+const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOptions, isLoading, onSubmit, onAddRoleClick, labels, }) => {
+    var _a, _b, _c, _d;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [selectedRole, setSelectedRole] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
         if (isOpen && currentRole) {
-            var match = roleOptions.find(function (role) { return role.label.toLowerCase() === currentRole.toLowerCase(); });
+            const match = roleOptions.find((role) => role.label.toLowerCase() === currentRole.toLowerCase());
             setSelectedRole(match ? { id: match.id, label: match.label } : null);
             setError(null);
         }
@@ -95,56 +26,36 @@ var ChangeRoleModal = function (_a) {
             setError(null);
         }
     }, [isOpen, currentRole, roleOptions]);
-    var isUnchanged = ((_b = selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === (currentRole === null || currentRole === void 0 ? void 0 : currentRole.toLowerCase());
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!selectedRole) {
-                        setError(labels.roleRequired);
-                        return [2 /*return*/];
-                    }
-                    if (userId == null)
-                        return [2 /*return*/];
-                    return [4 /*yield*/, (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId: userId, roleId: selectedRole.id }))];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true },
-        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
-        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
-            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] }, labels.changeRoleTitle),
-            react_1.default.createElement(react_2.ModalCloseButton, null),
-            react_1.default.createElement(react_2.ModalBody, { py: 5 },
-                react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
-                    react_1.default.createElement(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }),
-                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!error, isRequired: true },
-                        react_1.default.createElement(SearchSelect_1.default, { label: labels.role, options: roleOptions.map(function (item) { return ({
-                                id: item.id,
-                                label: item.label,
-                            }); }), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: function (option) {
-                                if (!option) {
-                                    setSelectedRole(null);
-                                }
-                                else if (!Array.isArray(option)) {
-                                    setSelectedRole({
-                                        id: Number(option.id),
-                                        label: option.label,
-                                    });
-                                    setError(null);
-                                }
-                            }, isRequired: true, isRemoveAllIcon: true, error: !!error, errorMessage: error !== null && error !== void 0 ? error : undefined, addNew: onAddRoleClick
-                                ? {
-                                    enabled: true,
-                                    text: labels.addNewRole,
-                                    onClick: onAddRoleClick,
-                                }
-                                : undefined })))),
-            react_1.default.createElement(react_2.ModalFooter, null,
-                react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }),
-                react_1.default.createElement(Button_1.default, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, isDisabled: isUnchanged || !selectedRole, onClick: handleSubmit })))));
+    const isUnchanged = ((_a = selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (currentRole === null || currentRole === void 0 ? void 0 : currentRole.toLowerCase());
+    const handleSubmit = async () => {
+        if (!selectedRole) {
+            setError(labels.roleRequired);
+            return;
+        }
+        if (userId == null)
+            return;
+        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+                                            id: item.id,
+                                            label: item.label,
+                                        })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {
+                                            if (!option) {
+                                                setSelectedRole(null);
+                                            }
+                                            else if (!Array.isArray(option)) {
+                                                setSelectedRole({
+                                                    id: Number(option.id),
+                                                    label: option.label,
+                                                });
+                                                setError(null);
+                                            }
+                                        }, isRequired: true, isRemoveAllIcon: true, error: !!error, errorMessage: error !== null && error !== void 0 ? error : undefined, addNew: onAddRoleClick
+                                            ? {
+                                                enabled: true,
+                                                text: labels.addNewRole,
+                                                onClick: onAddRoleClick,
+                                            }
+                                            : undefined }) })] }) }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, isDisabled: isUnchanged || !selectedRole, onClick: handleSubmit })] })] })] }));
 };
 exports.default = ChangeRoleModal;

package/dist/Components/UserDetails/DeactivateConfirmModal.d.ts

@@ -2,3 +2,4 @@ import React from "react";
 import { DeactivateConfirmModalProps } from "./UserDetailsProps";
 declare const DeactivateConfirmModal: React.FC<DeactivateConfirmModalProps>;
 export default DeactivateConfirmModal;
+//# sourceMappingURL=DeactivateConfirmModal.d.ts.map

package/dist/Components/UserDetails/DeactivateConfirmModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeactivateConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/DeactivateConfirmModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAEjE,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA2EjE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}