@ews-admin/global-design-system 1.0.0 → 1.1.1

package/dist/index.js

@@ -5,6 +5,10 @@ var React = require('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}
 
+/**
+ * Default currency for price formatting
+ */
+const CURRENCY = "XOF";
 /**
  * Utility function to merge class names
  * @param inputs - Class values to merge
@@ -16,10 +20,10 @@ function cn(...inputs) {
 /**
  * Utility function to format currency
  * @param amount - Amount to format
- * @param currency - Currency code (default: 'USD')
+ * @param currency - Currency code (default: CURRENCY constant)
  * @returns Formatted currency string
  */
-function formatCurrency(amount, currency = "USD") {
+function formatCurrency(amount, currency = CURRENCY) {
     return new Intl.NumberFormat("en-US", {
         style: "currency",
         currency,
@@ -65,31 +69,330 @@ function generateId(prefix = "ews") {
 const Button = React.forwardRef(({ className, variant = "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 focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
     const variants = {
-        primary: "bg-[var(--ews-primary)] text-white hover:bg-[var(--ews-primary-hover)] focus:ring-[var(--ews-primary)]",
-        secondary: "bg-[var(--ews-gray-200)] text-[var(--ews-gray-900)] hover:bg-[var(--ews-gray-300)] focus:ring-[var(--ews-gray-500)]",
-        success: "bg-[var(--ews-success)] text-white hover:bg-[var(--ews-success-hover)] focus:ring-[var(--ews-success)]",
-        warning: "bg-[var(--ews-warning)] text-white hover:bg-[var(--ews-warning-hover)] focus:ring-[var(--ews-warning)]",
-        error: "bg-[var(--ews-error)] text-white hover:bg-[var(--ews-error-hover)] focus:ring-[var(--ews-error)]",
-        ghost: "bg-transparent text-[var(--ews-gray-700)] hover:bg-[var(--ews-gray-100)] focus:ring-[var(--ews-gray-500)]",
+        primary: "bg-ews-primary text-white hover:bg-ews-primary-hover focus:ring-ews-primary",
+        secondary: "bg-ews-secondary text-white hover:bg-ews-secondary-hover focus:ring-ews-secondary",
+        success: "bg-ews-success text-white hover:bg-ews-success-hover focus:ring-ews-success",
+        warning: "bg-ews-warning text-white hover:bg-ews-warning-hover focus:ring-ews-warning",
+        error: "bg-ews-error text-white hover:bg-ews-error-hover focus:ring-ews-error",
+        ghost: "bg-transparent text-ews-gray-700 hover:bg-ews-gray-100 focus:ring-ews-gray-500",
     };
     const sizes = {
         sm: "px-3 py-1.5 text-sm",
         md: "px-4 py-2 text-base",
         lg: "px-6 py-3 text-lg",
     };
-    return (jsxRuntime.jsxs("button", { className: cn(baseStyles, variants[variant], sizes[size], fullWidth && "w-full", className), ref: ref, disabled: disabled || loading, ...props, children: [loading && (jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), !loading && leftIcon && jsxRuntime.jsx("span", { className: "mr-2", children: leftIcon }), children, !loading && rightIcon && jsxRuntime.jsx("span", { className: "ml-2", children: rightIcon })] }));
+    const iconSizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+    };
+    return (jsxRuntime.jsxs("button", { className: cn(baseStyles, variants[variant], sizes[size], fullWidth && "w-full", className), ref: ref, disabled: disabled || loading, ...props, children: [loading && (jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), !loading && leftIcon && (jsxRuntime.jsx("span", { className: cn("mr-2 flex items-center", iconSizes[size]), children: leftIcon })), children, !loading && rightIcon && (jsxRuntime.jsx("span", { className: cn("ml-2 flex items-center", iconSizes[size]), children: rightIcon }))] }));
 });
 Button.displayName = "Button";
 
-const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, id, ...props }, ref) => {
+/**
+ * @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 toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+/**
+ * @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.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+/**
+ * @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 Icon$1 = React.forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => React.createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => React.createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+/**
+ * @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 createLucideIcon = (iconName, iconNode) => {
+  const Component = React.forwardRef(
+    ({ className, ...props }, ref) => React.createElement(Icon$1, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+/**
+ * @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$9 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
+];
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$9);
+
+/**
+ * @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$8 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$8);
+
+/**
+ * @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$7 = [
+  ["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$7);
+
+/**
+ * @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$6 = [
+  ["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$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: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",
+      key: "ct8e1f"
+    }
+  ],
+  ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }],
+  [
+    "path",
+    {
+      d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",
+      key: "13bj9a"
+    }
+  ],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
+];
+const EyeOff = createLucideIcon("eye-off", __iconNode$5);
+
+/**
+ * @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$4 = [
+  [
+    "path",
+    {
+      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+      key: "1nclc0"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+const Eye = createLucideIcon("eye", __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: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search = createLucideIcon("search", __iconNode$3);
+
+/**
+ * @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$2 = [
+  ["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$2);
+
+/**
+ * @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$1 = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$1);
+
+/**
+ * @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 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+
+const Icon = React.forwardRef(({ size = "md", icon: IconComponent, className, ...props }, ref) => {
+    const sizes = {
+        sm: 16,
+        md: 20,
+        lg: 24,
+        xl: 32,
+    };
+    const iconSize = typeof size === "number" ? size : sizes[size];
+    return (jsxRuntime.jsx(IconComponent, { ref: ref, size: iconSize, className: className, ...props }));
+});
+Icon.displayName = "Icon";
+
+const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, 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;
-    const baseStyles = "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0";
+    // Password visibility state
+    const [showPassword, setShowPassword] = React.useState(false);
+    const isPasswordInput = type === "password";
+    const shouldShowPasswordToggle = showPasswordToggle && isPasswordInput;
+    const actualType = isPasswordInput && showPassword ? "text" : type;
+    const baseStyles = "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0 hover:border-ews-primary";
     const variants = {
-        default: "border-[var(--ews-gray-300)] focus:border-[var(--ews-primary)] focus:ring-[var(--ews-primary)]",
-        error: "border-[var(--ews-error)] focus:border-[var(--ews-error)] focus:ring-[var(--ews-error)]",
-        success: "border-[var(--ews-success)] focus:border-[var(--ews-success)] focus:ring-[var(--ews-success)]",
+        default: "border-ews-gray-300 focus:border-ews-primary focus:ring-ews-primary",
+        error: "border-ews-error focus:border-ews-error focus:ring-ews-error",
+        success: "border-ews-success focus:border-ews-success focus:ring-ews-success",
     };
     const sizes = {
         sm: "px-3 py-1.5 text-sm",
@@ -101,36 +404,474 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
         md: "h-5 w-5",
         lg: "h-6 w-6",
     };
-    return (jsxRuntime.jsxs("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: [label && (jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--ews-gray-700)]", children: label })), jsxRuntime.jsxs("div", { className: "relative", children: [leftIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-[var(--ews-gray-400)]", iconSizes[size]), children: leftIcon }) })), jsxRuntime.jsx("input", { id: inputId, className: cn(baseStyles, variants[actualVariant], sizes[size], leftIcon && "pl-10", rightIcon && "pr-10", className), ref: ref, ...props }), rightIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-[var(--ews-gray-400)]", iconSizes[size]), children: rightIcon }) }))] }), (error || helperText) && (jsxRuntime.jsx("p", { className: cn("text-sm", error ? "text-[var(--ews-error)]" : "text-[var(--ews-gray-500)]"), children: error || helperText }))] }));
+    return (jsxRuntime.jsxs("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: [label && (jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-ews-gray-700", children: label })), jsxRuntime.jsxs("div", { className: "relative", children: [leftIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: leftIcon }) })), jsxRuntime.jsx("input", { id: inputId, type: actualType, className: cn(baseStyles, variants[actualVariant], sizes[size], leftIcon && "pl-10", (rightIcon || shouldShowPasswordToggle) && "pr-10", className), ref: ref, ...props }), rightIcon && !shouldShowPasswordToggle && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: rightIcon }) })), shouldShowPasswordToggle && (jsxRuntime.jsx("button", { type: "button", className: "absolute inset-y-0 right-0 pr-3 flex items-center", onClick: () => setShowPassword(!showPassword), tabIndex: -1, children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400 hover:text-ews-gray-600 transition-colors", iconSizes[size]), children: showPassword ? jsxRuntime.jsx(EyeOff, { size: 16 }) : jsxRuntime.jsx(Eye, { size: 16 }) }) }))] }), (error || helperText) && (jsxRuntime.jsx("p", { className: cn("text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] }));
 });
 Input.displayName = "Input";
 
-const Icon = React.forwardRef(({ size = "md", color = "currentColor", className, ...props }, ref) => {
-    const sizes = {
-        sm: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6",
-        xl: "h-8 w-8",
+const DEFAULT_DELAY = 500;
+/**
+ * A custom hook that debounces a value
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds (optional, defaults to 300ms)
+ * @returns The debounced value
+ */
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+    const actualDelay = delay ?? DEFAULT_DELAY;
+    React.useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, actualDelay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, actualDelay]);
+    return debouncedValue;
+}
+/**
+ * A custom hook that provides a debounced callback function
+ * @param callback - The function to debounce
+ * @param delay - The delay in milliseconds (optional, defaults to 300ms)
+ * @returns A debounced version of the callback
+ */
+function useDebouncedCallback(callback, delay) {
+    const [debounceTimer, setDebounceTimer] = React.useState(null);
+    const debouncedCallback = ((...args) => {
+        if (debounceTimer) {
+            clearTimeout(debounceTimer);
+        }
+        const actualDelay = delay ?? DEFAULT_DELAY;
+        const newTimer = setTimeout(() => {
+            callback(...args);
+        }, actualDelay);
+        setDebounceTimer(newTimer);
+    });
+    React.useEffect(() => {
+        return () => {
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+            }
+        };
+    }, [debounceTimer]);
+    return debouncedCallback;
+}
+
+function SearchAutocomplete({ onSelect, selectedId, searchFunction, getEntityById, getDisplayValue, getSecondaryText, placeholder, icon = Search, disabled = false, minSearchLength = 2, debounceTime = 300, error, }) {
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const [entities, setEntities] = React.useState([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [showDropdown, setShowDropdown] = React.useState(false);
+    const [selectedEntity, setSelectedEntity] = React.useState(null);
+    const [initialLoadDone, setInitialLoadDone] = React.useState(false);
+    const [searchError, setSearchError] = React.useState(null);
+    const dropdownRef = React.useRef(null);
+    const debouncedSearchTerm = useDebounce(searchTerm, debounceTime);
+    // Track if this is an initial load or a user-initiated search
+    const isUserSearch = React.useRef(false);
+    // Only fetch the selected entity by ID once on initial load
+    React.useEffect(() => {
+        const fetchSelectedEntity = async () => {
+            // Only fetch if we have a selectedId, getEntityById function, and haven't loaded yet
+            if (!selectedId || !getEntityById || initialLoadDone)
+                return;
+            setIsLoading(true);
+            try {
+                const entity = await getEntityById(selectedId);
+                if (entity) {
+                    setSelectedEntity(entity);
+                    setSearchTerm(getDisplayValue(entity));
+                }
+            }
+            catch (error) {
+                console.error("Error fetching selected entity:", error);
+            }
+            finally {
+                setIsLoading(false);
+                setInitialLoadDone(true);
+            }
+        };
+        fetchSelectedEntity();
+    }, [selectedId, getEntityById, getDisplayValue, initialLoadDone]);
+    // Handle search term changes - only for user-initiated searches
+    React.useEffect(() => {
+        // Skip if this is just setting the initial value
+        if (!isUserSearch.current)
+            return;
+        // Clear entities if search term is too short
+        if (searchTerm.trim().length < minSearchLength) {
+            setEntities([]);
+            setSearchError(null);
+        }
+    }, [searchTerm, minSearchLength]);
+    // Fetch entities when debounced search term changes - only for user searches
+    React.useEffect(() => {
+        const fetchEntities = async () => {
+            if (!debouncedSearchTerm ||
+                debouncedSearchTerm.length < minSearchLength) {
+                return;
+            }
+            setIsLoading(true);
+            setSearchError(null);
+            try {
+                const results = await searchFunction(debouncedSearchTerm);
+                setEntities(results);
+            }
+            catch (error) {
+                console.error("Error fetching search results:", error);
+                setSearchError(error instanceof Error ? error.message : "Search failed");
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        // Only fetch if this is a user-initiated search
+        if (isUserSearch.current) {
+            fetchEntities();
+        }
+    }, [debouncedSearchTerm, searchFunction, minSearchLength]);
+    // Handle click outside to close dropdown
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setShowDropdown(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    const handleSearchChange = (e) => {
+        const value = e.target.value;
+        // Mark this as a user-initiated search
+        isUserSearch.current = true;
+        setSearchTerm(value);
+        if (selectedEntity) {
+            setSelectedEntity(null);
+            onSelect("");
+        }
+        setShowDropdown(value.trim().length >= minSearchLength);
     };
-    return (jsxRuntime.jsx("svg", { ref: ref, className: `${sizes[size]} ${className || ""}`, fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props }));
-});
-Icon.displayName = "Icon";
+    const handleEntitySelect = (entity) => {
+        // This is a user selection, not an API fetch
+        isUserSearch.current = false;
+        console.log(`Selected entity with ID: ${entity.id}`);
+        setSelectedEntity(entity);
+        setSearchTerm(getDisplayValue(entity));
+        onSelect(entity.id);
+        setShowDropdown(false);
+    };
+    const handleClearSelection = () => {
+        // This is a user action, but not a search
+        isUserSearch.current = false;
+        setSelectedEntity(null);
+        setSearchTerm("");
+        onSelect("");
+    };
+    return (jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Input, { type: "text", placeholder: `${placeholder} (min. ${minSearchLength} characters)`, value: selectedEntity ? "" : searchTerm, onChange: handleSearchChange, onFocus: () => searchTerm.length >= minSearchLength &&
+                            isUserSearch.current &&
+                            setShowDropdown(true), disabled: disabled, autoComplete: "off", name: "search-autocomplete", leftIcon: React.createElement(icon, { size: 16 }) }), selectedEntity && (jsxRuntime.jsx("button", { type: "button", className: "flex absolute inset-y-0 right-0 items-center pr-3", onClick: handleClearSelection, disabled: disabled, children: jsxRuntime.jsx(X, { className: "w-5 h-5 text-gray-400 hover:text-gray-500" }) }))] }), selectedEntity && (jsxRuntime.jsx("div", { className: "p-4 mt-3 rounded-lg border bg-neutral-50 border-neutral-200", children: jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsxs("div", { className: "flex items-center", children: [selectedEntity.photoUrl ? (jsxRuntime.jsx("img", { src: selectedEntity.photoUrl, alt: getDisplayValue(selectedEntity), className: "object-cover mr-3 w-10 h-10 rounded-full" })) : (React.createElement(icon, {
+                                    className: "w-10 h-10 text-neutral-400 mr-3",
+                                })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-medium text-neutral-900", children: getDisplayValue(selectedEntity) }), getSecondaryText && getSecondaryText(selectedEntity) && (jsxRuntime.jsx("div", { className: "text-sm text-neutral-500", children: getSecondaryText(selectedEntity) }))] })] }), jsxRuntime.jsx("button", { type: "button", onClick: handleClearSelection, className: "transition-colors text-neutral-400 hover:text-neutral-600", disabled: disabled, children: jsxRuntime.jsx(X, { className: "w-4 h-4" }) })] }) })), showDropdown && entities?.length > 0 && (jsxRuntime.jsx("div", { className: "overflow-auto absolute z-10 mt-1 w-full max-h-60 bg-white rounded-md shadow-lg", children: jsxRuntime.jsx("ul", { className: "py-1", children: entities.map((entity) => (jsxRuntime.jsx("li", { className: "px-4 py-2 cursor-pointer hover:bg-gray-100", onClick: () => handleEntitySelect(entity), children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [React.createElement(icon, {
+                                    className: "w-4 h-4 text-gray-400",
+                                }), jsxRuntime.jsxs("div", { className: "ml-2", children: [jsxRuntime.jsx("div", { className: "font-medium", children: getDisplayValue(entity) }), getSecondaryText && getSecondaryText(entity) && (jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: getSecondaryText(entity) }))] })] }) }, entity.id))) }) })), showDropdown && searchError && (jsxRuntime.jsx("div", { className: "absolute z-10 p-4 mt-1 w-full text-center text-red-600 bg-white rounded-md shadow-lg border border-red-200", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-center", children: [jsxRuntime.jsx(X, { className: "w-4 h-4 mr-2" }), "Error: ", searchError] }) })), showDropdown && error && !searchError && (jsxRuntime.jsx("div", { className: "absolute z-10 p-4 mt-1 w-full text-center text-red-600 bg-white rounded-md shadow-lg border border-red-200", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-center", children: [jsxRuntime.jsx(X, { className: "w-4 h-4 mr-2" }), error] }) })), showDropdown &&
+                debouncedSearchTerm &&
+                entities?.length === 0 &&
+                !isLoading &&
+                !searchError &&
+                !error && (jsxRuntime.jsx("div", { className: "absolute z-10 p-4 mt-1 w-full text-center text-gray-500 bg-white rounded-md shadow-lg", children: debouncedSearchTerm.length < minSearchLength
+                    ? `Type at least ${minSearchLength} characters to search`
+                    : "No results found. Try a different search term." })), isLoading && showDropdown && (jsxRuntime.jsx("div", { className: "absolute z-10 p-4 mt-1 w-full text-center text-gray-500 bg-white rounded-md shadow-lg", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-ews-primary mr-2" }), "Loading..."] }) }))] }));
+}
 
-const ArrowRight = (props) => (jsxRuntime.jsxs(Icon, { ...props, children: [jsxRuntime.jsx("path", { d: "M5 12h14" }), jsxRuntime.jsx("path", { d: "m12 5 7 7-7 7" })] }));
+function MultiSearchAutocomplete({ items, selectedItems, onSelectionChange, onSearch, getEntityById, getPrimaryText, getSecondaryText, placeholder, disabled = false, loading = false, multiple = true, className, renderSelectedItem, renderListItem, keepOpenOnSelect = true, error, minSearchLength = 2, debounceTime = 300, }) {
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [filteredItems, setFilteredItems] = React.useState(items);
+    const [isSearching, setIsSearching] = React.useState(false);
+    const [searchError, setSearchError] = React.useState(null);
+    const dropdownRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const debouncedSearchTerm = useDebounce(searchTerm, debounceTime);
+    // Handle search term changes
+    React.useEffect(() => {
+        // If search term is empty, show all items
+        if (!searchTerm.trim()) {
+            setFilteredItems(items);
+            setSearchError(null);
+            return;
+        }
+        // If search term is too short, don't search
+        if (searchTerm.length < minSearchLength) {
+            setFilteredItems([]);
+            setSearchError(null);
+            return;
+        }
+    }, [searchTerm, items, minSearchLength]);
+    // Debounced search with API calls
+    React.useEffect(() => {
+        // If debounced search term is empty or too short, don't search
+        if (!debouncedSearchTerm.trim() ||
+            debouncedSearchTerm.length < minSearchLength) {
+            return;
+        }
+        const performSearch = async () => {
+            try {
+                setIsSearching(true);
+                setSearchError(null);
+                await onSearch(debouncedSearchTerm);
+            }
+            catch (err) {
+                setSearchError(err instanceof Error ? err.message : "Search failed");
+            }
+            finally {
+                setIsSearching(false);
+            }
+        };
+        performSearch();
+    }, [debouncedSearchTerm, onSearch, minSearchLength]);
+    // Update filtered items when items prop changes
+    React.useEffect(() => {
+        setFilteredItems(items);
+    }, [items]);
+    const handleItemToggle = React.useCallback((item) => {
+        if (multiple) {
+            const isSelected = selectedItems.some((selected) => selected.id === item.id);
+            if (isSelected) {
+                onSelectionChange(selectedItems.filter((selected) => selected.id !== item.id));
+            }
+            else {
+                onSelectionChange([...selectedItems, item]);
+            }
+            // Keep dropdown open for multiple selection
+            if (keepOpenOnSelect) {
+                setIsOpen(true);
+            }
+        }
+        else {
+            onSelectionChange([item]);
+            setIsOpen(false);
+        }
+    }, [selectedItems, onSelectionChange, multiple, keepOpenOnSelect]);
+    const handleRemoveItem = React.useCallback((itemToRemove) => {
+        onSelectionChange(selectedItems.filter((item) => item.id !== itemToRemove.id));
+    }, [selectedItems, onSelectionChange]);
+    const handleInputFocus = () => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    };
+    const handleInputBlur = () => {
+        // Don't close immediately to allow for clicks on dropdown items
+        // Only close if keepOpenOnSelect is false
+        if (!keepOpenOnSelect) {
+            setTimeout(() => setIsOpen(false), 150);
+        }
+    };
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        const handleEscapeKey = (event) => {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            document.addEventListener("keydown", handleEscapeKey);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("keydown", handleEscapeKey);
+        };
+    }, [isOpen]);
+    // Default render functions
+    const defaultRenderSelectedItem = (entity) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-ews-primary/10 text-ews-primary border border-ews-primary/20", children: [getPrimaryText(entity), jsxRuntime.jsx("button", { type: "button", onClick: () => handleRemoveItem(entity), className: "ml-2 text-ews-primary/60 hover:text-ews-primary", disabled: disabled, title: "Remove item", children: jsxRuntime.jsx(X, { className: "w-3 h-3" }) })] }));
+    const defaultRenderListItem = (entity, isSelected) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("w-5 h-5 border-2 rounded flex items-center justify-center", isSelected ? "bg-ews-primary border-ews-primary" : "border-gray-300"), children: isSelected && jsxRuntime.jsx(Check, { className: "w-3 h-3 text-white" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: getPrimaryText(entity) }), getSecondaryText && (jsxRuntime.jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: getSecondaryText(entity) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: selectedItems.map((item) => (jsxRuntime.jsx("div", { children: renderSelectedItem
+                        ? renderSelectedItem(item)
+                        : defaultRenderSelectedItem(item) }, item.id))) })), jsxRuntime.jsx(Input, { ref: inputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, disabled: disabled, leftIcon: jsxRuntime.jsx(Search, { className: "w-4 h-4" }), className: "w-full" }), isOpen && !disabled && (jsxRuntime.jsx("div", { className: "absolute z-10 mt-1 w-full max-h-60 bg-white rounded-lg border border-gray-200 shadow-lg overflow-auto", children: loading || isSearching ? (jsxRuntime.jsxs("div", { className: "px-4 py-3 text-sm text-gray-500 flex items-center", children: [jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-ews-primary mr-2" }), isSearching ? "Searching..." : "Loading..."] })) : searchError ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-red-600", children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(X, { className: "w-4 h-4 mr-2" }), "Error: ", searchError] }) })) : error ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-red-600", children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(X, { className: "w-4 h-4 mr-2" }), error] }) })) : filteredItems.length === 0 ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-gray-500", children: searchTerm.length < minSearchLength
+                        ? `Type at least ${minSearchLength} characters to search`
+                        : "No items found" })) : (jsxRuntime.jsx("div", { className: "py-1", children: filteredItems.map((item) => {
+                        const isSelected = selectedItems.some((selected) => selected.id === item.id);
+                        return (jsxRuntime.jsx("button", { type: "button", onClick: () => handleItemToggle(item), className: cn("w-full px-4 py-3 text-left flex items-center transition-colors", isSelected
+                                ? "bg-ews-primary/10 text-ews-primary border-l-4 border-ews-primary"
+                                : "hover:bg-ews-primary/5 text-gray-900"), children: renderListItem
+                                ? renderListItem(item, isSelected)
+                                : defaultRenderListItem(item, isSelected) }, item.id));
+                    }) })) }))] }));
+}
 
-const Check = (props) => (jsxRuntime.jsx(Icon, { ...props, children: jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+const Modal = ({ isOpen, onClose, title, children, variant = "info", primaryAction, secondaryAction, onPrimaryAction, onSecondaryAction, isLoading = false, closeOnOverlayClick = true, className, contentClassName, error, }) => {
+    // Handle escape key press
+    React.useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === "Escape" && isOpen) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+            // Prevent body scroll when modal is open
+            document.body.style.overflow = "hidden";
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+            document.body.style.overflow = "unset";
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    const getVariantStyles = () => {
+        switch (variant) {
+            case "error":
+                return {
+                    icon: jsxRuntime.jsx(CircleAlert, { className: "w-6 h-6 text-ews-error" }),
+                    iconBg: "bg-ews-error/10",
+                    titleColor: "text-ews-error",
+                    borderColor: "border-ews-error/20",
+                };
+            case "warning":
+                return {
+                    icon: jsxRuntime.jsx(TriangleAlert, { className: "w-6 h-6 text-ews-warning" }),
+                    iconBg: "bg-ews-warning/10",
+                    titleColor: "text-ews-warning",
+                    borderColor: "border-ews-warning/20",
+                };
+            case "confirmation":
+                return {
+                    icon: jsxRuntime.jsx(CircleCheckBig, { className: "w-6 h-6 text-ews-success" }),
+                    iconBg: "bg-ews-success/10",
+                    titleColor: "text-ews-success",
+                    borderColor: "border-ews-success/20",
+                };
+            default:
+                return {
+                    icon: jsxRuntime.jsx(CircleAlert, { className: "w-6 h-6 text-ews-primary" }),
+                    iconBg: "bg-ews-primary/10",
+                    titleColor: "text-ews-primary",
+                    borderColor: "border-ews-primary/20",
+                };
+        }
+    };
+    const variantStyles = getVariantStyles();
+    const handleOverlayClick = (e) => {
+        if (e.target === e.currentTarget && closeOnOverlayClick) {
+            onClose();
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: handleOverlayClick }), jsxRuntime.jsxs("div", { className: cn("relative w-full max-w-md mx-4 bg-white rounded-lg shadow-xl transform transition-all", "animate-in fade-in-0 zoom-in-95 duration-200", className), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between p-6 border-b", variantStyles.borderColor), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("p-2 rounded-full", variantStyles.iconBg), children: variantStyles.icon }), jsxRuntime.jsx("h2", { id: "modal-title", className: cn("text-lg font-semibold", variantStyles.titleColor), children: title })] }), jsxRuntime.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntime.jsx("div", { className: cn("p-6", contentClassName), children: jsxRuntime.jsx("div", { className: "text-gray-700 leading-relaxed", children: error && variant === "error" ? (jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsx("p", { children: error.message }), error.fields && error.fields.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "font-semibold text-gray-900", children: "Erreurs de champ:" }), jsxRuntime.jsx("ul", { className: "mt-2 space-y-1", children: error.fields.map((field, index) => (jsxRuntime.jsxs("li", { className: "text-ews-error", children: ["\u2022 ", field.path, ": ", field.message] }, index))) })] }))] })) : (children) }) }), (primaryAction || secondaryAction) && (jsxRuntime.jsxs("div", { className: "flex items-center justify-end space-x-3 p-6 pt-0", children: [secondaryAction && (jsxRuntime.jsx(Button, { variant: "ghost", onClick: onSecondaryAction || onClose, disabled: isLoading, children: secondaryAction })), primaryAction && (jsxRuntime.jsx(Button, { variant: variant === "error" ? "error" : "primary", onClick: onPrimaryAction, loading: isLoading, children: primaryAction }))] }))] })] }));
+};
+
+const Logo = ({ size = "md", showTagline = true, iconOnly = false, variant = "normal", className, onClick, }) => {
+    const sizes = {
+        sm: "h-8",
+        md: "h-12",
+        lg: "h-16",
+        xl: "h-24",
+    };
+    const iconSizes = {
+        sm: "h-6 w-6",
+        md: "h-8 w-8",
+        lg: "h-12 w-12",
+        xl: "h-16 w-16",
+    };
+    // Get the appropriate logo image based on variant
+    // For iconOnly, always use favicon.ico
+    const logoSrc = iconOnly
+        ? "/favicon.ico"
+        : variant === "white"
+            ? "/image/logoWhite.png"
+            : variant === "favicon"
+                ? "/favicon.ico"
+                : "/image/logo.png";
+    if (iconOnly) {
+        return (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center", iconSizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "w-full h-full object-contain" }) }));
+    }
+    return (jsxRuntime.jsx("div", { className: cn("flex items-center", sizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "h-full w-auto object-contain" }) }));
+};
 
-const Search = (props) => (jsxRuntime.jsxs(Icon, { ...props, children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }), jsxRuntime.jsx("path", { d: "m21 21-4.35-4.35" })] }));
+const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, }) => {
+    const [specialties, setSpecialties] = React.useState([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+    // Mock API call - replace with actual API
+    const fetchSpecialties = React.useCallback(async (searchTerm) => {
+        setIsLoading(true);
+        try {
+            // Simulate API delay
+            await new Promise((resolve) => setTimeout(resolve, 300));
+            // Mock data - replace with actual API call
+            const mockSpecialties = [
+                { id: "1", code: "CARD", label: "Cardiology" },
+                { id: "2", code: "DERM", label: "Dermatology" },
+                { id: "3", code: "ENDO", label: "Endocrinology" },
+                { id: "4", code: "GAST", label: "Gastroenterology" },
+                { id: "5", code: "HEMA", label: "Hematology" },
+                { id: "6", code: "NEUR", label: "Neurology" },
+                { id: "7", code: "ONCO", label: "Oncology" },
+                { id: "8", code: "ORTH", label: "Orthopedics" },
+                { id: "9", code: "PED", label: "Pediatrics" },
+                { id: "10", code: "PSYC", label: "Psychiatry" },
+                { id: "11", code: "RAD", label: "Radiology" },
+                { id: "12", code: "SURG", label: "Surgery" },
+                { id: "13", code: "UROL", label: "Urology" },
+                { id: "14", code: "GYN", label: "Gynecology" },
+                { id: "15", code: "OPHT", label: "Ophthalmology" },
+            ];
+            // Filter based on search term
+            const filtered = mockSpecialties.filter((specialty) => specialty.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                specialty.code.toLowerCase().includes(searchTerm.toLowerCase()));
+            setSpecialties(filtered);
+        }
+        catch (error) {
+            console.error("Error fetching specialties:", error);
+            setSpecialties([]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, []);
+    // Initial load
+    React.useEffect(() => {
+        fetchSpecialties("");
+    }, [fetchSpecialties]);
+    const handleSelectionChange = React.useCallback((items) => {
+        // Check max selections limit
+        if (maxSelections && items.length > maxSelections) {
+            return; // Don't update if exceeding max selections
+        }
+        onSpecialtiesChange(items);
+    }, [onSpecialtiesChange, maxSelections]);
+    const getEntityById = React.useCallback(async (id) => {
+        return specialties.find((specialty) => specialty.id === id);
+    }, [specialties]);
+    return (jsxRuntime.jsxs("div", { className: cn("space-y-3", className), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx("div", { className: "flex justify-center items-center w-8 h-8 rounded-lg bg-secondary-100", children: jsxRuntime.jsx(Stethoscope, { className: "w-4 h-4 text-secondary-600" }) }), jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Medical Specialties" })] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Select Specialties" }) }), jsxRuntime.jsx(MultiSearchAutocomplete, { items: specialties, selectedItems: selectedSpecialties, onSelectionChange: handleSelectionChange, onSearch: fetchSpecialties, getEntityById: getEntityById, getPrimaryText: (specialty) => specialty.label, getSecondaryText: (specialty) => specialty.code, placeholder: placeholder, disabled: disabled, loading: isLoading, multiple: true, keepOpenOnSelect: true, className: "w-full", renderSelectedItem: (specialty) => (jsxRuntime.jsx("span", { className: "inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-ews-primary/10 text-ews-primary border border-ews-primary/20", children: specialty.label })), renderListItem: (specialty, isSelected) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("w-5 h-5 border-2 rounded flex items-center justify-center", isSelected
+                                ? "bg-ews-primary border-ews-primary"
+                                : "border-gray-300"), children: isSelected && (jsxRuntime.jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: specialty.label }), jsxRuntime.jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: specialty.code })] })] })) }), showSelectedCount && selectedSpecialties.length > 0 && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm text-gray-600", children: [jsxRuntime.jsxs("span", { children: [selectedSpecialties.length, " specialty", selectedSpecialties.length !== 1 ? "ies" : "", " selected"] }), maxSelections && (jsxRuntime.jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
+};
 
 exports.ArrowRight = ArrowRight;
 exports.Button = Button;
 exports.Check = Check;
 exports.Icon = Icon;
 exports.Input = Input;
+exports.Logo = Logo;
+exports.Modal = Modal;
+exports.MultiSearchAutocomplete = MultiSearchAutocomplete;
 exports.Search = Search;
+exports.SearchAutocomplete = SearchAutocomplete;
+exports.SpecialtySearchAutocomplete = SpecialtySearchAutocomplete;
 exports.cn = cn;
 exports.debounce = debounce;
 exports.formatCurrency = formatCurrency;
 exports.formatDate = formatDate;
 exports.generateId = generateId;
+exports.useDebounce = useDebounce;
+exports.useDebouncedCallback = useDebouncedCallback;
 //# sourceMappingURL=index.js.map