@ews-admin/global-design-system 1.1.20 → 1.1.22

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, createElement, useState, useRef, useEffect, useId, useCallback, createContext, useContext } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -84,6 +84,36 @@ function isValidPhoneNumber(value) {
     const phoneRegex = /^(\+\d{1,17}|\d{1,17})$/;
     return phoneRegex.test(trimmedValue);
 }
+/**
+ * Blood type enum matching backend BloodTypeEnum values
+ */
+var BloodType;
+(function (BloodType) {
+    BloodType["A_POSITIVE"] = "A+";
+    BloodType["A_NEGATIVE"] = "A-";
+    BloodType["B_POSITIVE"] = "B+";
+    BloodType["B_NEGATIVE"] = "B-";
+    BloodType["AB_POSITIVE"] = "AB+";
+    BloodType["AB_NEGATIVE"] = "AB-";
+    BloodType["O_POSITIVE"] = "O+";
+    BloodType["O_NEGATIVE"] = "O-";
+    BloodType["UNKNOWN"] = "UNKNOWN";
+})(BloodType || (BloodType = {}));
+/**
+ * Ordered list of all blood type values.
+ * Use this to build select/dropdown options.
+ */
+const BLOOD_TYPES = [
+    BloodType.A_POSITIVE,
+    BloodType.A_NEGATIVE,
+    BloodType.B_POSITIVE,
+    BloodType.B_NEGATIVE,
+    BloodType.AB_POSITIVE,
+    BloodType.AB_NEGATIVE,
+    BloodType.O_POSITIVE,
+    BloodType.O_NEGATIVE,
+    BloodType.UNKNOWN,
+];
 
 const Button = React.forwardRef(({ className, variant = "ews-primary", size = "md", loading = false, fullWidth = false, leftIcon, rightIcon, children, disabled, ...props }, ref) => {
     const baseStyles = "inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none";
@@ -227,11 +257,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$c = [
+const __iconNode$e = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$c);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$e);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -241,8 +271,8 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$c);
  */
 
 
-const __iconNode$b = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$b);
+const __iconNode$d = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$d);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -252,8 +282,8 @@ const Check = createLucideIcon("check", __iconNode$b);
  */
 
 
-const __iconNode$a = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$a);
+const __iconNode$c = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$c);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -263,12 +293,12 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$b = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -278,11 +308,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$a = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$8);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$a);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -292,7 +322,7 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$8);
  */
 
 
-const __iconNode$7 = [
+const __iconNode$9 = [
   [
     "path",
     {
@@ -310,7 +340,7 @@ const __iconNode$7 = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-const EyeOff = createLucideIcon("eye-off", __iconNode$7);
+const EyeOff = createLucideIcon("eye-off", __iconNode$9);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -320,7 +350,7 @@ const EyeOff = createLucideIcon("eye-off", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$8 = [
   [
     "path",
     {
@@ -330,7 +360,7 @@ const __iconNode$6 = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$6);
+const Eye = createLucideIcon("eye", __iconNode$8);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -340,7 +370,7 @@ const Eye = createLucideIcon("eye", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$7 = [
   [
     "path",
     {
@@ -349,7 +379,7 @@ const __iconNode$5 = [
     }
   ]
 ];
-const Heart = createLucideIcon("heart", __iconNode$5);
+const Heart = createLucideIcon("heart", __iconNode$7);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -359,11 +389,31 @@ const Heart = createLucideIcon("heart", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$6 = [
+  [
+    "path",
+    {
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
+    }
+  ],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
+];
+const Pencil = createLucideIcon("pencil", __iconNode$6);
+
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$4);
+const Search = createLucideIcon("search", __iconNode$5);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -373,14 +423,29 @@ const Search = createLucideIcon("search", __iconNode$4);
  */
 
 
-const __iconNode$3 = [
+const __iconNode$4 = [
   ["path", { d: "M11 2v2", key: "1539x4" }],
   ["path", { d: "M5 2v2", key: "1yf1q8" }],
   ["path", { d: "M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1", key: "rb5t3r" }],
   ["path", { d: "M8 15a6 6 0 0 0 12 0v-3", key: "x18d4x" }],
   ["circle", { cx: "20", cy: "10", r: "2", key: "ts1r5v" }]
 ];
-const Stethoscope = createLucideIcon("stethoscope", __iconNode$3);
+const Stethoscope = createLucideIcon("stethoscope", __iconNode$4);
+
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$3 = [
+  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
+];
+const Trash = createLucideIcon("trash", __iconNode$3);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -455,7 +520,7 @@ const UserIcon = ({ size = 24, color = "currentColor", className = "", ...props
     return jsx(User, { size: size, color: color, className: className, ...props });
 };
 
-const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, required = false, countryCodeSelect, id, type = "text", ...props }, ref) => {
+const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, required = false, countryCodeSelect, leftAddon, rightAddon, id, type = "text", ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     const hasError = Boolean(error);
     const actualVariant = hasError ? "error" : variant;
@@ -514,7 +579,7 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
                                                 countryCodeSelect.onChange(item.code);
                                                 setIsDropdownOpen(false);
                                             }, className: cn("px-3 py-2 text-sm cursor-pointer transition-colors", isSelected && "bg-ews-primary text-white", !isSelected && "hover:bg-ews-gray-50"), children: [jsx("span", { className: "font-medium", children: item.code }), item.country && (jsx("span", { className: cn("ml-2 text-xs", isSelected ? "text-white/80" : "text-ews-gray-500"), children: item.country }))] }, item.code));
-                                    }) }))] }) })), leftIcon && !countryCodeSelect && (jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none", children: jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: leftIcon }) })), jsx("input", { id: inputId, type: actualType, className: cn(baseStyles, variants[actualVariant], sizes[size], countryCodeSelect && "pl-24", leftIcon && !countryCodeSelect && "pl-10", (rightIcon || shouldShowPasswordToggle) && "pr-10", className), ref: ref, ...props }), rightIcon && !shouldShowPasswordToggle && (jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: rightIcon }) })), shouldShowPasswordToggle && (jsx("button", { type: "button", className: "flex absolute inset-y-0 right-0 items-center pr-3", onClick: () => setShowPassword(!showPassword), tabIndex: -1, children: jsx("span", { className: cn("transition-colors text-ews-gray-400 hover:text-ews-gray-600", iconSizes[size]), children: showPassword ? jsx(EyeOff, { size: 16 }) : jsx(Eye, { size: 16 }) }) }))] }), (error || helperText) && (jsx("p", { className: cn("text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] }));
+                                    }) }))] }) })), leftIcon && !countryCodeSelect && !leftAddon && (jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none", children: jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: leftIcon }) })), leftAddon && !countryCodeSelect && !leftIcon && (jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pointer-events-none overflow-hidden rounded-l-md", children: jsx("span", { className: "flex items-center h-full px-3 text-sm font-medium whitespace-nowrap bg-ews-gray-50 border-r border-ews-gray-300 text-ews-gray-600", children: leftAddon }) })), jsx("input", { id: inputId, type: actualType, className: cn(baseStyles, variants[actualVariant], sizes[size], countryCodeSelect && "pl-24", leftIcon && !countryCodeSelect && !leftAddon && "pl-10", leftAddon && !countryCodeSelect && !leftIcon && "pl-16", (rightIcon || shouldShowPasswordToggle) && "pr-10", rightAddon && !rightIcon && !shouldShowPasswordToggle && "pr-16", className), ref: ref, ...props }), rightAddon && !rightIcon && !shouldShowPasswordToggle && (jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsx("span", { className: "text-sm font-medium text-ews-gray-500", children: rightAddon }) })), rightIcon && !shouldShowPasswordToggle && (jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: rightIcon }) })), shouldShowPasswordToggle && (jsx("button", { type: "button", className: "flex absolute inset-y-0 right-0 items-center pr-3", onClick: () => setShowPassword(!showPassword), tabIndex: -1, children: jsx("span", { className: cn("transition-colors text-ews-gray-400 hover:text-ews-gray-600", iconSizes[size]), children: showPassword ? jsx(EyeOff, { size: 16 }) : jsx(Eye, { size: 16 }) }) }))] }), (error || helperText) && (jsx("p", { className: cn("text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] }));
 });
 Input.displayName = "Input";
 
@@ -1638,7 +1703,7 @@ function MultiSearchAutocomplete({ items, selectedItems, onSelectionChange, onSe
                     }) })) }))] }));
 }
 
-const Modal = ({ isOpen, onClose, title, children, variant = "info", primaryAction, secondaryAction, onPrimaryAction, onSecondaryAction, isLoading = false, closeOnOverlayClick = true, className, contentClassName, error, }) => {
+const Modal = ({ isOpen, onClose, title, children, variant = "info", size = "md", primaryAction, secondaryAction, onPrimaryAction, onSecondaryAction, isLoading = false, closeOnOverlayClick = true, className, contentClassName, error, }) => {
     // Handle escape key press
     useEffect(() => {
         const handleEscape = (event) => {
@@ -1691,12 +1756,82 @@ const Modal = ({ isOpen, onClose, title, children, variant = "info", primaryActi
         }
     };
     const variantStyles = getVariantStyles();
+    const getSizeClasses = () => {
+        const sizeMap = {
+            sm: "max-w-sm",
+            md: "max-w-md",
+            lg: "max-w-lg",
+            xl: "max-w-xl",
+            "2xl": "max-w-2xl",
+            full: "max-w-full",
+        };
+        return sizeMap[size] || sizeMap.md;
+    };
     const handleOverlayClick = (e) => {
         if (e.target === e.currentTarget && closeOnOverlayClick) {
             onClose();
         }
     };
-    return (jsxs("div", { className: "flex fixed inset-0 z-50 justify-center items-center", children: [jsx("div", { className: "absolute inset-0 backdrop-blur-sm bg-black/50", onClick: handleOverlayClick }), jsxs("div", { className: cn("relative mx-4 w-full max-w-md bg-white rounded-lg shadow-xl transition-all transform", "duration-200 animate-in fade-in-0 zoom-in-95", className), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", children: [jsxs("div", { className: cn("flex items-center justify-between p-6 border-b", variantStyles.borderColor), children: [jsxs("div", { className: "flex items-center space-x-3", children: [jsx("div", { className: cn("p-2 rounded-full", variantStyles.iconBg), children: variantStyles.icon }), jsx("h2", { id: "modal-title", className: cn("text-lg font-semibold", variantStyles.titleColor), children: title })] }), jsx("button", { onClick: onClose, className: "p-1 text-gray-400 transition-colors hover:text-gray-600", "aria-label": "Close modal", children: jsx(X, { className: "w-5 h-5" }) })] }), jsx("div", { className: cn("p-6", contentClassName), children: jsx("div", { className: "leading-relaxed text-gray-700", children: error && variant === "error" ? (jsxs("div", { className: "space-y-3", children: [jsx("p", { children: error.message }), error.fields && error.fields.length > 0 && (jsxs("div", { children: [jsx("p", { className: "font-semibold text-gray-900", children: "Erreurs de champ:" }), jsx("ul", { className: "mt-2 space-y-1", children: error.fields.map((field, index) => (jsxs("li", { className: "text-ews-error", children: ["\u2022 ", field.path, ": ", field.message] }, index))) })] }))] })) : (children) }) }), (primaryAction || secondaryAction) && (jsxs("div", { className: "flex justify-end items-center p-6 pt-0 space-x-3", children: [secondaryAction && (jsx(Button, { variant: "outline", onClick: onSecondaryAction || onClose, disabled: isLoading, children: secondaryAction })), primaryAction && (jsx(Button, { variant: variant === "error" ? "error" : "ews-primary", onClick: onPrimaryAction, loading: isLoading, children: primaryAction }))] }))] })] }));
+    return (jsxs("div", { className: "flex fixed inset-0 z-50 justify-center items-center", children: [jsx("div", { className: "absolute inset-0 backdrop-blur-sm bg-black/50", onClick: handleOverlayClick }), jsxs("div", { className: cn("relative w-full bg-white rounded-lg shadow-xl transition-all transform", "duration-200 animate-in fade-in-0 zoom-in-95", getSizeClasses(), "mx-4", className), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", children: [jsxs("div", { className: cn("flex items-center justify-between p-6 border-b", variantStyles.borderColor), children: [jsxs("div", { className: "flex items-center space-x-3", children: [jsx("div", { className: cn("p-2 rounded-full", variantStyles.iconBg), children: variantStyles.icon }), jsx("h2", { id: "modal-title", className: cn("text-lg font-semibold", variantStyles.titleColor), children: title })] }), jsx("button", { onClick: onClose, className: "p-1 text-gray-400 transition-colors hover:text-gray-600", "aria-label": "Close modal", children: jsx(X, { className: "w-5 h-5" }) })] }), jsx("div", { className: cn("p-6", contentClassName), children: jsx("div", { className: "leading-relaxed text-gray-700", children: error && variant === "error" ? (jsxs("div", { className: "space-y-3", children: [jsx("p", { children: error.message }), error.fields && error.fields.length > 0 && (jsxs("div", { children: [jsx("p", { className: "font-semibold text-gray-900", children: "Erreurs de champ:" }), jsx("ul", { className: "mt-2 space-y-1", children: error.fields.map((field, index) => (jsxs("li", { className: "text-ews-error", children: ["\u2022 ", field.path, ": ", field.message] }, index))) })] }))] })) : (children) }) }), (primaryAction || secondaryAction) && (jsxs("div", { className: "flex justify-end items-center p-6 pt-0 space-x-3", children: [secondaryAction && (jsx(Button, { variant: "outline", onClick: onSecondaryAction || onClose, disabled: isLoading, children: secondaryAction })), primaryAction && (jsx(Button, { variant: variant === "error" ? "error" : "ews-primary", onClick: onPrimaryAction, loading: isLoading, children: primaryAction }))] }))] })] }));
+};
+
+const SIZE_CLASSES = {
+    sm: "h-10 w-10",
+    md: "h-16 w-16",
+    lg: "h-32 w-32",
+};
+const INDICATOR_CLASSES = {
+    sm: "h-2 w-2",
+    md: "h-4 w-4",
+    lg: "h-8 w-8",
+};
+function UploadProgressBar({ progress, isLoading, }) {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        if (isLoading) {
+            setVisible(true);
+            return;
+        }
+        // isLoading just turned false
+        if (progress >= 100) {
+            setVisible(true);
+            const t = setTimeout(() => setVisible(false), 1000);
+            return () => clearTimeout(t);
+        }
+        // Legacy path (no isLoading prop): driven purely by progress
+        if (progress > 0 && progress < 100) {
+            setVisible(true);
+            return;
+        }
+        setVisible(false);
+    }, [progress, isLoading]);
+    if (!visible)
+        return null;
+    const indeterminate = isLoading && progress === 0;
+    return (jsx("div", { className: "mt-2 h-1.5 w-32 rounded-full bg-gray-200", children: jsx("div", { className: cn("h-full rounded-full bg-ews-primary transition-all duration-300", indeterminate && "animate-pulse"), style: { width: indeterminate ? "35%" : `${progress}%` } }) }));
+}
+const ProfileImageUpload = ({ imageUrl, altText, readOnly = false, size = "lg", uploadProgress = 0, isLoading = false, showDeleteButton = true, accept = "image/*", maxFileSizeMB = 3, onFileSelect, onFileSizeExceeded, onDeleteConfirm, deleteConfirmTitle, deleteConfirmMessage, deleteConfirmLabel, cancelLabel, }) => {
+    const fileInputRef = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const [showConfirm, setShowConfirm] = useState(false);
+    const handleEditClick = () => fileInputRef.current?.click();
+    const handleFileChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        if (file.size > maxFileSizeMB * 1024 * 1024) {
+            onFileSizeExceeded?.();
+            e.target.value = "";
+            return;
+        }
+        onFileSelect(file);
+        e.target.value = ""; // allow re-selecting the same file
+    };
+    const handleConfirmDelete = () => {
+        setShowConfirm(false);
+        onDeleteConfirm();
+    };
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "inline-flex flex-col items-center", children: [jsxs("div", { className: "relative", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx("img", { src: imageUrl, alt: altText, className: cn("rounded-full border-4 border-white object-cover", SIZE_CLASSES[size]) }), jsx("div", { className: cn("absolute bottom-0 right-0 rounded-full border-4 border-white bg-green-400", INDICATOR_CLASSES[size]) }), jsx("input", { type: "file", ref: fileInputRef, accept: accept, className: "hidden", onChange: handleFileChange }), isHovered && !readOnly && !isLoading && (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: handleEditClick, className: "absolute left-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-ews-primary transition-colors hover:bg-ews-secondary", "aria-label": "Edit profile image", children: jsx(Pencil, { className: "h-4 w-4 text-white" }) }), showDeleteButton && (jsx("button", { type: "button", onClick: () => setShowConfirm(true), className: "absolute left-0 top-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-red-600 transition-colors hover:bg-red-700", "aria-label": "Delete profile image", children: jsx(Trash, { className: "h-4 w-4 text-white" }) }))] }))] }), jsx(UploadProgressBar, { progress: uploadProgress, isLoading: isLoading })] }), jsx(Modal, { isOpen: showConfirm, onClose: () => setShowConfirm(false), title: deleteConfirmTitle, variant: "error", size: "sm", primaryAction: deleteConfirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirmDelete, onSecondaryAction: () => setShowConfirm(false), children: jsx("p", { children: deleteConfirmMessage }) })] }));
 };
 
 const DropdownMultiSelect = ({ options, name, control, placeholder = "Select options", searchPlaceholder = "Search...", onChange, value: controlledValue, defaultValue, onValidate, disabled = false, error, label, className, }) => {
@@ -1985,5 +2120,5 @@ const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesCh
                             : `${selectedSpecialties.length} specialty${selectedSpecialties.length !== 1 ? "ies" : ""} selected` }), maxSelections && (jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
 };
 
-export { ArrowRight, Button, Check, DoctorIcon, DropdownMultiSelect, Icon, Input, Logo, Modal, MultiSearchAutocomplete, PatientIcon, Search, SearchAutocomplete, Select, SpecialtySearchAutocomplete, ThemeDebugger, ThemeProvider, ThemeToggle, UserIcon, cn, debounce, formatCurrency, formatDate, formatNumeric, generateId, isValidPhoneNumber, useDebounce, useDebouncedCallback, useSelectField, useTheme };
+export { ArrowRight, BLOOD_TYPES, BloodType, Button, Check, DoctorIcon, DropdownMultiSelect, Icon, Input, Logo, Modal, MultiSearchAutocomplete, PatientIcon, ProfileImageUpload, Search, SearchAutocomplete, Select, SpecialtySearchAutocomplete, ThemeDebugger, ThemeProvider, ThemeToggle, UserIcon, cn, debounce, formatCurrency, formatDate, formatNumeric, generateId, isValidPhoneNumber, useDebounce, useDebouncedCallback, useSelectField, useTheme };
 //# sourceMappingURL=index.esm.js.map