@gamecp/ui 0.1.0 → 0.1.14

package/dist/index.js

@@ -1,22 +1,78 @@
 'use strict';
 
-var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var React4 = require('react');
 var ri = require('react-icons/ri');
-var NextLink = require('next/link');
 var reactDom = require('react-dom');
 var framerMotion = require('framer-motion');
+var NextLink = require('next/link');
+var reactTooltip = require('react-tooltip');
+var nextIntlayer = require('next-intlayer');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React4__default = /*#__PURE__*/_interopDefault(React4);
 var NextLink__default = /*#__PURE__*/_interopDefault(NextLink);
 
-// src/Button.tsx
+// src/Badge.tsx
+var badgeVariants = {
+  default: "bg-gray-100 text-foreground border-border",
+  primary: "bg-primary-100 text-primary-800 border-primary-200",
+  secondary: "bg-gray-100 text-foreground border-border",
+  success: "bg-success text-success-dark border-success-light",
+  warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  error: "bg-red-100 text-red-800 border-red-200",
+  info: "bg-muted text-muted-foreground border-ring",
+  gray: "bg-gray-100 text-foreground border-border",
+  purple: "bg-purple-100 text-purple-800 border-purple-200",
+  pink: "bg-pink-100 text-pink-800 border-pink-200",
+  indigo: "bg-indigo-100 text-indigo-800 border-indigo-200",
+  yellow: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  orange: "bg-orange-100 text-orange-800 border-orange-200",
+  teal: "bg-teal-100 text-teal-800 border-teal-200",
+  cyan: "bg-cyan-100 text-cyan-800 border-cyan-200",
+  lime: "bg-lime-100 text-lime-800 border-lime-200",
+  emerald: "bg-emerald-100 text-emerald-800 border-emerald-200",
+  rose: "bg-rose-100 text-rose-800 border-rose-200",
+  sky: "bg-sky-100 text-sky-800 border-sky-200",
+  violet: "bg-violet-100 text-violet-800 border-violet-200",
+  fuchsia: "bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200",
+  amber: "bg-amber-100 text-amber-800 border-amber-200"
+};
+var badgeSizes = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-0.5 text-xs",
+  lg: "px-3 py-1 text-sm"
+};
+function Badge({
+  children,
+  variant = "default",
+  size = "md",
+  className = "",
+  customColors
+}) {
+  const baseClasses = "inline-flex items-center font-medium rounded-full border";
+  const variantClasses5 = variant === "custom" ? "" : badgeVariants[variant];
+  const sizeClasses5 = badgeSizes[size];
+  const customStyles = variant === "custom" && customColors ? {
+    backgroundColor: customColors.background,
+    color: customColors.text,
+    borderColor: customColors.border || customColors.background
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `${baseClasses} ${variantClasses5} ${sizeClasses5} ${className}`,
+      style: customStyles,
+      children
+    }
+  );
+}
 var variantClasses = {
   primary: "bg-primary text-primary-foreground hover:bg-primary/90 border-transparent",
   secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
   destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-transparent",
+  danger: "bg-red-600 text-white hover:bg-red-700 border-transparent",
   ghost: "bg-transparent hover:bg-muted hover:text-foreground border-transparent",
   link: "bg-transparent text-primary underline-offset-4 hover:underline border-transparent p-0",
   outline: "bg-transparent border-border hover:bg-muted hover:text-foreground"
@@ -95,73 +151,6 @@ var Button = React4.forwardRef(
 );
 Button.displayName = "Button";
 var Button_default = Button;
-var badgeVariants = {
-  default: "bg-gray-100 text-foreground border-border",
-  primary: "bg-primary-100 text-primary-800 border-primary-200",
-  secondary: "bg-gray-100 text-foreground border-border",
-  success: "bg-success text-success-dark border-success-light",
-  warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  error: "bg-red-100 text-red-800 border-red-200",
-  info: "bg-muted text-muted-foreground border-ring",
-  gray: "bg-gray-100 text-foreground border-border",
-  purple: "bg-purple-100 text-purple-800 border-purple-200",
-  pink: "bg-pink-100 text-pink-800 border-pink-200",
-  indigo: "bg-indigo-100 text-indigo-800 border-indigo-200",
-  yellow: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  orange: "bg-orange-100 text-orange-800 border-orange-200",
-  teal: "bg-teal-100 text-teal-800 border-teal-200",
-  cyan: "bg-cyan-100 text-cyan-800 border-cyan-200",
-  lime: "bg-lime-100 text-lime-800 border-lime-200",
-  emerald: "bg-emerald-100 text-emerald-800 border-emerald-200",
-  rose: "bg-rose-100 text-rose-800 border-rose-200",
-  sky: "bg-sky-100 text-sky-800 border-sky-200",
-  violet: "bg-violet-100 text-violet-800 border-violet-200",
-  fuchsia: "bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200",
-  amber: "bg-amber-100 text-amber-800 border-amber-200"
-};
-var badgeSizes = {
-  sm: "px-2 py-0.5 text-xs",
-  md: "px-2.5 py-0.5 text-xs",
-  lg: "px-3 py-1 text-sm"
-};
-function Badge({
-  children,
-  variant = "default",
-  size = "md",
-  className = "",
-  customColors
-}) {
-  const baseClasses = "inline-flex items-center font-medium rounded-full border";
-  const variantClasses4 = variant === "custom" ? "" : badgeVariants[variant];
-  const sizeClasses4 = badgeSizes[size];
-  const customStyles = variant === "custom" && customColors ? {
-    backgroundColor: customColors.background,
-    color: customColors.text,
-    borderColor: customColors.border || customColors.background
-  } : {};
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: `${baseClasses} ${variantClasses4} ${sizeClasses4} ${className}`,
-      style: customStyles,
-      children
-    }
-  );
-}
-var SuccessBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...props, variant: "success" });
-var WarningBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...props, variant: "warning" });
-var ErrorBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...props, variant: "error" });
-var InfoBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...props, variant: "info" });
-var PrimaryBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...props, variant: "primary" });
-var GrayBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...props, variant: "gray" });
-function StatusBadge({
-  isActive,
-  activeText = "Active",
-  inactiveText = "Inactive",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...props, variant: isActive ? "success" : "error", children: isActive ? activeText : inactiveText });
-}
 var sizeClasses2 = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -267,7 +256,8 @@ function Card({
   contentClassName = "",
   status,
   statusIcon,
-  statusText
+  statusText,
+  id
 }) {
   const [isExpanded, setIsExpanded] = React4.useState(defaultExpanded);
   const baseClasses = [
@@ -297,6 +287,7 @@ function Card({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      id,
       className: `${baseClasses} ${className}`,
       style,
       onClick: clickable || onClick ? handleClick : void 0,
@@ -350,957 +341,3258 @@ function Card({
     }
   );
 }
-function SimpleCard({
+var sizeClasses3 = {
+  sm: "max-w-md",
+  md: "max-w-2xl",
+  lg: "max-w-4xl",
+  xl: "max-w-6xl",
+  full: "max-w-full mx-4"
+};
+function Modal({
+  isOpen,
+  onClose,
   children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className, ...props, children });
-}
-function HeaderCard({
   title,
-  subtitle,
-  description,
-  icon,
-  iconColor,
-  iconSize,
-  actionButton,
-  children,
+  header,
+  blocking = false,
+  size = "md",
   className = "",
-  ...props
+  footer,
+  fullScreen = false,
+  noPadding = false,
+  footerBg = "gray",
+  variant = "default",
+  scrollable = true,
+  "aria-describedby": ariaDescribedBy,
+  customStyles = {}
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Card,
-    {
-      title,
-      subtitle,
-      description,
-      icon,
-      iconColor,
-      iconSize,
-      actionButton,
-      className,
-      ...props,
-      children
+  const modalContentRef = React4.useRef(null);
+  const previousActiveElementRef = React4.useRef(null);
+  const hasPerformedInitialFocusRef = React4.useRef(false);
+  const getFocusableElements = () => {
+    if (!modalContentRef.current) return [];
+    const focusableSelectors = [
+      "button:not([disabled])",
+      "a[href]",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+    return Array.from(
+      modalContentRef.current.querySelectorAll(focusableSelectors)
+    );
+  };
+  React4.useEffect(() => {
+    if (!isOpen) {
+      hasPerformedInitialFocusRef.current = false;
+      return;
     }
-  );
-}
-function StatusCard({
-  status,
-  statusIcon,
-  statusText,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Card,
-    {
-      status,
-      statusIcon,
-      statusText,
-      className,
-      ...props,
-      children
+    if (!hasPerformedInitialFocusRef.current) {
+      previousActiveElementRef.current = document.activeElement;
     }
-  );
-}
-function ClickableCard({
-  onClick,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { onClick, clickable: true, hover: true, className, ...props, children });
-}
-function AccordionCard({
-  accordion = true,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { accordion, className, ...props, children });
-}
-var variantClasses3 = {
-  default: "text-foreground hover:text-primary",
-  primary: "text-primary hover:text-primary/80",
-  muted: "text-muted-foreground hover:text-foreground"
-};
-var Link = React4.forwardRef(
-  ({
-    href,
-    variant = "default",
-    underline = false,
-    external = false,
-    className = "",
-    children,
-    ...props
-  }, ref) => {
-    const classes = [
-      "transition-colors",
-      variantClasses3[variant],
-      underline ? "underline underline-offset-4" : "hover:underline hover:underline-offset-4",
-      className
-    ].filter(Boolean).join(" ");
-    if (external || href.startsWith("http")) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          ref,
-          href,
-          className: classes,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          ...props,
-          children
+    let timeoutId = null;
+    if (!hasPerformedInitialFocusRef.current) {
+      const focusableElements = getFocusableElements();
+      const firstFocusable = focusableElements[0];
+      timeoutId = setTimeout(() => {
+        const activeElement = document.activeElement;
+        const isHTMLElement = activeElement instanceof HTMLElement;
+        const isUserTyping = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || isHTMLElement && activeElement.isContentEditable);
+        const isFocusInModal = modalContentRef.current?.contains(activeElement);
+        if (!isUserTyping && !isFocusInModal) {
+          if (firstFocusable) {
+            firstFocusable.focus();
+            hasPerformedInitialFocusRef.current = true;
+          } else if (modalContentRef.current) {
+            modalContentRef.current.focus();
+            hasPerformedInitialFocusRef.current = true;
+          }
+        } else if (isFocusInModal) {
+          hasPerformedInitialFocusRef.current = true;
         }
-      );
+      }, 100);
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(NextLink__default.default, { ref, href, className: classes, ...props, children });
-  }
-);
-Link.displayName = "Link";
-var Link_default = Link;
-function FormInput({
-  label,
-  name,
-  type = "text",
-  value,
-  onChange,
-  placeholder,
-  required = false,
-  disabled = false,
-  error,
-  className = "",
-  inputClassName = "",
-  min,
-  max,
-  step,
-  maxLength,
-  autoComplete,
-  description,
-  footerDescription,
-  autoFocus = false,
-  onKeyDown,
-  onBlur,
-  icon,
-  rows = 3,
-  showHidePassword = false,
-  onGeneratePassword,
-  copyable = false,
-  readOnly = false,
-  clearable = true
-}) {
-  const [showPassword, setShowPassword] = React4.useState(false);
-  const [copied, setCopied] = React4.useState(false);
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(String(value));
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
-  const shouldShowIcons = (inputType) => {
-    return inputType !== "checkbox" && inputType !== "textarea";
-  };
-  const getIconConfig = (iconProp) => {
-    if (!iconProp) return { left: null, right: null };
-    if (React4__default.default.isValidElement(iconProp)) {
-      return { left: iconProp, right: null };
-    }
-    if (typeof iconProp === "object" && iconProp !== null && ("left" in iconProp || "right" in iconProp)) {
-      return { left: iconProp.left || null, right: iconProp.right || null };
-    }
-    return {
-      left: React4__default.default.isValidElement(iconProp) ? iconProp : null,
-      right: null
+    const handleTab = (event) => {
+      if (event.key !== "Tab") return;
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
     };
-  };
-  const renderIcon = (iconNode, position) => {
-    if (!iconNode) return null;
-    const rightPositionClass = position === "right" && type === "number" ? "right-4 pr-3" : position === "right" ? "right-0 pr-3" : "left-0 pl-3";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `absolute inset-y-0 ${rightPositionClass} flex items-center pointer-events-none`,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: iconNode })
+    const handleEsc = (event) => {
+      if (event.key === "Escape" && !blocking) {
+        onClose();
       }
-    );
+    };
+    document.addEventListener("keydown", handleTab);
+    document.addEventListener("keydown", handleEsc);
+    document.body.style.overflow = "hidden";
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      document.removeEventListener("keydown", handleTab);
+      document.removeEventListener("keydown", handleEsc);
+      document.body.style.overflow = "unset";
+      if (!isOpen && previousActiveElementRef.current) {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, [isOpen, onClose, blocking]);
+  const modalRoot = (() => {
+    if (typeof document === "undefined") return null;
+    let root = document.getElementById("modal-root");
+    if (!root) {
+      root = document.createElement("div");
+      root.id = "modal-root";
+      document.body.appendChild(root);
+    }
+    return root;
+  })();
+  if (!modalRoot) {
+    return null;
+  }
+  const backdropVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 }
   };
-  const getInputPaddingClasses = (inputType, iconConfig) => {
-    if (!shouldShowIcons(inputType)) return "";
-    const paddingClasses2 = [];
-    if (iconConfig.left) paddingClasses2.push("pl-10");
-    if (iconConfig.right) {
-      paddingClasses2.push(inputType === "number" ? "pr-12" : "pr-10");
+  const modalVariants = {
+    hidden: {
+      opacity: 0,
+      scale: 0.95,
+      y: 20
+    },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      transition: {
+        duration: 0.2,
+        ease: "easeOut"
+      }
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.9,
+      y: 100,
+      // Slide down much further for reverse effect
+      transition: {
+        duration: 0.3,
+        ease: "easeIn"
+      }
     }
-    return paddingClasses2.join(" ");
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `form-group ${className}`, children: type === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        id: name,
-        name,
-        type: "checkbox",
-        checked: Boolean(value),
-        onChange: (e) => {
-          const newValue = e.target.checked;
-          const syntheticEvent = {
-            target: {
-              name: e.target.name,
-              value: newValue,
-              checked: newValue
+  if (!isOpen) return null;
+  if (variant === "plain") {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          className: `modal-backdrop fixed inset-0 w-screen h-screen flex items-center ${customStyles.backdrop?.includes("justify-") ? customStyles.backdrop : customStyles.backdrop ? `${customStyles.backdrop} justify-center` : "justify-center bg-black/10"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
+          variants: backdropVariants,
+          initial: "hidden",
+          animate: isOpen ? "visible" : "hidden",
+          exit: "hidden",
+          onClick: blocking ? void 0 : onClose,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              ref: modalContentRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? "modal-title-plain" : void 0,
+              "aria-describedby": ariaDescribedBy || "modal-content-plain",
+              tabIndex: -1,
+              className: `w-full flex flex-col overflow-hidden relative z-[1000000] ${customStyles.container || "bg-card shadow-xl"} ${fullScreen ? "h-full rounded-none" : `rounded-lg ${className} ${sizeClasses3[size]} max-h-[90vh]`}`,
+              variants: modalVariants,
+              initial: "hidden",
+              animate: isOpen ? "visible" : "exit",
+              exit: "exit",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  id: "modal-content-plain",
+                  className: `flex-1 ${customStyles.content || ""}`,
+                  children
+                }
+              )
             },
-            currentTarget: {
-              name: e.target.name,
-              value: newValue,
-              checked: newValue
-            }
-          };
-          onChange(syntheticEvent);
+            "modal-content"
+          )
         },
-        required,
-        disabled,
-        onKeyDown,
-        className: "sr-only",
-        "aria-label": label,
-        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
-        "aria-invalid": error ? "true" : "false"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+        "modal-backdrop"
+      ) }),
+      modalRoot
+    );
+  }
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
       {
-        type: "button",
-        onClick: () => {
-          if (!disabled) {
-            const checkbox = document.getElementById(
-              name
-            );
-            if (checkbox) {
-              checkbox.click();
-            }
-          }
-        },
-        disabled,
-        className: `
-              relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
-              ${Boolean(value) ? "bg-primary" : "bg-muted"}
-              ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-              ${error ? "ring-2 ring-destructive" : ""}
-            `,
-        "aria-label": `${label}${required ? " (required)" : ""}`,
-        "aria-describedby": name,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
+        variants: backdropVariants,
+        initial: "hidden",
+        animate: isOpen ? "visible" : "hidden",
+        exit: "hidden",
+        onClick: blocking ? void 0 : onClose,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
           {
-            className: `
-                inline-block h-4 w-4 transform rounded-full bg-background border border-border transition duration-200 ease-in-out
-                ${Boolean(value) ? "translate-x-6" : "translate-x-1"}
-              `
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "label",
-        {
-          htmlFor: name,
-          className: "text-sm font-medium text-foreground cursor-pointer",
-          onClick: () => {
-            if (!disabled) {
-              const checkbox = document.getElementById(
-                name
-              );
-              if (checkbox) {
-                checkbox.click();
-              }
-            }
+            ref: modalContentRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? "modal-title" : void 0,
+            "aria-describedby": ariaDescribedBy || "modal-content",
+            tabIndex: -1,
+            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative z-[1000000] ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
+            variants: modalVariants,
+            initial: "hidden",
+            animate: isOpen ? "visible" : "exit",
+            exit: "exit",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: header }) : title ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `px-6 py-4 border-b border-border flex justify-between items-center flex-shrink-0 ${customStyles.header || ""}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h2",
+                      {
+                        id: "modal-title",
+                        className: "text-xl font-semibold text-foreground",
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors",
+                        title: "Close",
+                        "aria-label": "Close modal",
+                        disabled: blocking,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiCloseLine, { className: "w-5 h-5", "aria-hidden": "true" })
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  id: "modal-content",
+                  className: `bg-background text-foreground flex-1 ${scrollable ? "overflow-y-auto" : ""} ${fullScreen || noPadding ? "p-0" : "px-6 py-4"}`,
+                  children
+                }
+              ),
+              footer && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `flex-shrink-0 px-6 py-4 border-t border-border ${footerBg === "white" ? "bg-card" : "bg-muted"} ${customStyles.footer || ""}`,
+                  children: footer
+                }
+              )
+            ]
           },
-          children: [
-            label,
-            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", "aria-label": "required", children: "*" })
-          ]
-        }
-      ),
-      description && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          id: `${name}-description`,
-          className: "text-xs text-muted-foreground",
-          children: description
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) : error })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: "form-label", children: [
-      label,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "form-label-required", children: "*" })
-    ] }),
-    description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-description`, className: "form-description", children: description }),
-    type === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        id: name,
-        name,
-        value,
-        onChange,
-        placeholder,
-        required,
-        disabled,
-        autoFocus,
-        onKeyDown,
-        onBlur,
-        rows,
-        maxLength,
-        "aria-invalid": error ? "true" : "false",
-        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
-        className: `form-input ${error ? "form-input-error" : ""} ${inputClassName}`
-      }
-    ) : type === "color" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-10 h-10 border border-input rounded-md overflow-hidden bg-card", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: name,
-            name,
-            type: "color",
-            value,
-            onChange,
-            required,
-            disabled,
-            className: "absolute inset-0 w-full h-full cursor-pointer opacity-0"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "w-full h-full rounded-md",
-            style: { backgroundColor: value }
-          }
+          "modal-content"
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      },
+      "modal-backdrop"
+    ) }),
+    modalRoot
+  );
+}
+function ConfirmDialog({ isOpen, options, onConfirm, onCancel }) {
+  const { title, message, confirmText, cancelText = "Cancel", confirmButtonColor = "blue" } = options;
+  const getConfirmVariant = () => {
+    switch (confirmButtonColor) {
+      case "red":
+        return "danger";
+      case "green":
+        return "primary";
+      case "blue":
+      default:
+        return "primary";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen, onClose: onCancel, title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground", children: message }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button_default, { variant: "secondary", onClick: onCancel, children: cancelText }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button_default, { variant: getConfirmVariant(), onClick: onConfirm, children: confirmText })
+    ] })
+  ] }) });
+}
+function useConfirmDialog() {
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [options, setOptions] = React4.useState({
+    title: "",
+    message: "",
+    confirmText: "Confirm"
+  });
+  const [resolver, setResolver] = React4.useState(null);
+  const confirm = (opts) => {
+    setOptions(opts);
+    setIsOpen(true);
+    return new Promise((resolve) => {
+      setResolver(() => resolve);
+    });
+  };
+  const handleConfirm = () => {
+    setIsOpen(false);
+    if (resolver) {
+      resolver(true);
+      setResolver(null);
+    }
+  };
+  const handleCancel = () => {
+    setIsOpen(false);
+    if (resolver) {
+      resolver(false);
+      setResolver(null);
+    }
+  };
+  const dialog = /* @__PURE__ */ jsxRuntime.jsx(
+    ConfirmDialog,
+    {
+      isOpen,
+      options,
+      onConfirm: handleConfirm,
+      onCancel: handleCancel
+    }
+  );
+  return { confirm, dialog };
+}
+var ConfirmDialog_default = ConfirmDialog;
+var paddingClasses2 = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+function Container({
+  children,
+  className = "",
+  padding = "md",
+  id
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: `${paddingClasses2[padding]} ${className}`, children });
+}
+var EmptyState = ({
+  icon: Icon,
+  title,
+  subtitle,
+  action,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `text-center py-12 text-secondary-foreground p-6 lg:p-12 ${className}`,
+      role: "status",
+      "aria-live": "polite",
+      children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+          Icon,
           {
-            id: `${name}-text`,
-            name: `${name}-text`,
-            type: "text",
-            value,
-            onChange,
-            placeholder,
-            required,
-            disabled,
-            maxLength,
-            autoComplete,
-            autoFocus,
-            onKeyDown,
-            onBlur,
-            className: `form-input max-w-24 ${error ? "form-input-error" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`,
-            "aria-label": `${label} text input`
+            className: "w-12 h-12 mx-auto mb-3 text-muted-foreground",
+            "aria-hidden": "true"
           }
         ),
-        shouldShowIcons(type) && (() => {
-          const iconConfig = getIconConfig(icon);
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            renderIcon(iconConfig.left, "left"),
-            renderIcon(iconConfig.right, "right")
-          ] });
-        })()
-      ] })
-    ] }) : showHidePassword && type === "password" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium mb-1", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-4", children: subtitle }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: action })
+      ]
+    }
+  );
+};
+var EmptyState_default = EmptyState;
+function useKeyboardNavigation({
+  isOpen,
+  optionsLength,
+  onSelect,
+  onClose,
+  onOpen
+}) {
+  const [focusedIndex, setFocusedIndex] = React4.useState(-1);
+  const resetFocus = React4.useCallback(() => {
+    setFocusedIndex(-1);
+  }, []);
+  const handleKeyDown = React4.useCallback(
+    (e) => {
+      if (!isOpen) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          e.preventDefault();
+          onOpen?.();
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => prev < optionsLength - 1 ? prev + 1 : 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => prev > 0 ? prev - 1 : optionsLength - 1);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < optionsLength) {
+            onSelect(focusedIndex);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onClose();
+          resetFocus();
+          break;
+        case "Tab":
+          onClose();
+          resetFocus();
+          break;
+      }
+    },
+    [isOpen, optionsLength, focusedIndex, onSelect, onClose, onOpen, resetFocus]
+  );
+  return {
+    focusedIndex,
+    handleKeyDown,
+    resetFocus,
+    setFocusedIndex
+  };
+}
+function SmartDropdown({
+  isOpen,
+  onClose,
+  trigger,
+  children,
+  className = "",
+  width = 384,
+  maxHeight = 450,
+  offset = 8,
+  margin = 16,
+  id = "dropdown-listbox",
+  position = "auto"
+}) {
+  const [dropdownPosition, setDropdownPosition] = React4.useState({
+    top: 0,
+    left: 0,
+    right: void 0,
+    width: 0,
+    maxHeight: 0,
+    isAbove: false
+  });
+  const dropdownRef = React4.useRef(null);
+  const triggerRef = React4.useRef(null);
+  const calculateDropdownPosition = React4.useCallback(() => {
+    if (!triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const spaceAbove = triggerRect.top - margin;
+    const spaceBelow = viewportHeight - triggerRect.bottom - margin;
+    let calculatedWidth;
+    if (width === "fit-content") {
+      calculatedWidth = triggerRect.width;
+    } else if (width === "auto") {
+      calculatedWidth = triggerRect.width;
+    } else if (typeof width === "number") {
+      calculatedWidth = Math.min(width, viewportWidth - margin * 2);
+    } else {
+      calculatedWidth = triggerRect.width;
+    }
+    const calculatedMaxHeight = Math.min(
+      maxHeight,
+      Math.max(spaceAbove, spaceBelow)
+    );
+    let left = triggerRect.left;
+    let right = void 0;
+    if (position === "top-right" || position === "bottom-right") {
+      left = triggerRect.right - calculatedWidth;
+    } else if (position === "top-left" || position === "bottom-left") {
+      left = triggerRect.left;
+    } else if (position === "top-left-aligned" || position === "bottom-left-aligned") {
+      const availableLeftSpace = triggerRect.left - margin;
+      const dynamicOffset = Math.max(20, availableLeftSpace * 0.2);
+      right = viewportWidth - triggerRect.left + dynamicOffset;
+      left = 0;
+      calculatedWidth = Math.min(
+        calculatedWidth,
+        triggerRect.left - dynamicOffset - margin
+      );
+    } else {
+      if (left + calculatedWidth > viewportWidth - margin) {
+        left = triggerRect.right - calculatedWidth;
+      }
+    }
+    if (left !== void 0 && left < margin) {
+      left = margin;
+    }
+    let top = triggerRect.bottom + offset;
+    let finalMaxHeight = calculatedMaxHeight;
+    let isAbove = false;
+    if (spaceAbove > spaceBelow && top + calculatedMaxHeight > viewportHeight - margin) {
+      isAbove = true;
+      top = triggerRect.top - calculatedMaxHeight - offset;
+      finalMaxHeight = Math.min(calculatedMaxHeight, spaceAbove);
+      if (top < margin) {
+        top = margin;
+        finalMaxHeight = triggerRect.top - margin - offset;
+      }
+    } else {
+      finalMaxHeight = Math.min(calculatedMaxHeight, spaceBelow);
+      if (top + finalMaxHeight > viewportHeight - margin) {
+        top = viewportHeight - margin - finalMaxHeight;
+      }
+    }
+    if (position === "top-right") {
+      left = triggerRect.right - calculatedWidth;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "top-left") {
+      left = triggerRect.left;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "bottom-right") {
+      left = triggerRect.right - calculatedWidth;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    } else if (position === "bottom-left") {
+      left = triggerRect.left;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    } else if (position === "top-left-aligned") {
+      right = viewportWidth - triggerRect.right;
+      left = 0;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "bottom-left-aligned") {
+      right = viewportWidth - triggerRect.right;
+      left = 0;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    }
+    setDropdownPosition({
+      top,
+      left,
+      right,
+      width: calculatedWidth,
+      maxHeight: finalMaxHeight,
+      isAbove
+    });
+  }, [width, maxHeight, margin, offset, position]);
+  React4.useEffect(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isInsideDropdown = dropdownRef.current?.contains(target);
+      const isInsideTrigger = triggerRef.current?.contains(target);
+      if (!isInsideDropdown && !isInsideTrigger) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  React4.useEffect(() => {
+    if (isOpen) {
+      calculateDropdownPosition();
+    }
+  }, [isOpen, calculateDropdownPosition]);
+  React4.useEffect(() => {
+    if (!isOpen) return;
+    const handleResize = () => {
+      calculateDropdownPosition();
+    };
+    const handleScroll = () => {
+      calculateDropdownPosition();
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [isOpen, calculateDropdownPosition]);
+  React4.useEffect(() => {
+    if (!isOpen || !dropdownRef.current || !triggerRef.current) return;
+    if (dropdownPosition.isAbove) {
+      const adjustPosition = () => {
+        const dropdownRect = dropdownRef.current?.getBoundingClientRect();
+        const triggerRect = triggerRef.current?.getBoundingClientRect();
+        if (!dropdownRect || !triggerRect) return;
+        const actualHeight = dropdownRect.height;
+        const newTop = triggerRect.top - actualHeight - offset;
+        if (newTop !== dropdownPosition.top && newTop >= margin) {
+          setDropdownPosition((prev) => ({
+            ...prev,
+            top: newTop
+          }));
+        }
+      };
+      const resizeObserver = new ResizeObserver(() => {
+        setTimeout(adjustPosition, 0);
+      });
+      resizeObserver.observe(dropdownRef.current);
+      adjustPosition();
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [isOpen, dropdownPosition.isAbove, dropdownPosition.top, offset, margin]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "w-full",
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": "dropdown-listbox",
+        children: trigger
+      }
+    ),
+    isOpen && typeof window !== "undefined" && reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+        "div",
         {
-          id: name,
-          name,
-          type: showPassword ? "text" : "password",
-          value,
-          onChange,
-          placeholder,
-          required,
-          disabled: disabled || readOnly,
-          readOnly,
-          maxLength,
-          autoComplete,
-          autoFocus,
-          onKeyDown,
-          onBlur,
-          "aria-invalid": error ? "true" : "false",
-          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
-          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-20" : "pr-10"} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
-        }
-      ),
-      shouldShowIcons(type) && (() => {
-        const iconConfig = getIconConfig(icon);
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          renderIcon(iconConfig.left, "left"),
-          renderIcon(iconConfig.right, "right")
-        ] });
-      })(),
-      copyable && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleCopy,
-          className: "absolute inset-y-0 right-8 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
-          "aria-label": `Copy ${label}`,
-          title: copied ? "Copied!" : `Copy ${label}`,
-          children: copied ? /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowPassword(!showPassword),
-          className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
-          "aria-label": showPassword ? "Hide password" : "Show password",
-          title: showPassword ? "Hide password" : "Show password",
-          children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(ri.RiEyeOffLine, { className: "w-4 h-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiEyeLine, { className: "w-4 h-4", "aria-hidden": "true" })
-        }
-      ),
-      onGeneratePassword && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onGeneratePassword,
-          className: `absolute inset-y-0 ${copyable ? "right-16" : "right-8"} flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10`,
-          "aria-label": "Generate new password",
-          title: "Generate new password",
-          children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiRefreshLine, { className: "w-4 h-4", "aria-hidden": "true" })
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: name,
-          name,
-          type,
-          value,
-          onChange,
-          placeholder,
-          required,
-          disabled: disabled || readOnly,
-          readOnly,
-          min,
-          max,
-          step,
-          maxLength,
-          autoComplete,
-          autoFocus,
-          onKeyDown,
-          onBlur,
-          "aria-invalid": error ? "true" : "false",
-          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
-          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-10" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
-        }
-      ),
-      shouldShowIcons(type) && (() => {
-        const iconConfig = getIconConfig(icon);
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          renderIcon(iconConfig.left, "left"),
-          renderIcon(iconConfig.right, "right")
-        ] });
-      })(),
-      copyable && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleCopy,
-          className: `absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-all duration-200 z-10`,
-          "aria-label": `Copy ${label}`,
-          title: copied ? "Copied!" : `Copy ${label}`,
-          children: copied ? /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
-        }
-      ),
-      clearable && !copyable && value !== "" && value !== null && value !== void 0 && !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            const syntheticEvent = {
-              target: { name, value: "" }
-            };
-            onChange(syntheticEvent);
+          ref: dropdownRef,
+          id,
+          "data-smart-dropdown": true,
+          role: "listbox",
+          "aria-label": "Dropdown options",
+          className: `fixed z-[1000001] card overflow-hidden`,
+          style: {
+            top: dropdownPosition.top,
+            ...dropdownPosition.left !== void 0 ? { left: dropdownPosition.left } : {},
+            ...dropdownPosition.right !== void 0 ? { right: dropdownPosition.right } : {},
+            width: width === "fit-content" ? "auto" : dropdownPosition.width,
+            maxHeight: dropdownPosition.maxHeight
           },
-          className: `absolute inset-y-0 ${type === "number" ? "right-4" : "right-0"} flex items-center pr-3 text-muted-foreground hover:text-muted-foreground transition-all duration-200 z-10 opacity-0 group-hover:opacity-100`,
-          "aria-label": `Clear ${label}`,
-          title: `Clear ${label}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiCloseLine, { className: "w-4 h-4", "aria-hidden": "true" })
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: className ? className : "overflow-y-auto",
+              style: { maxHeight: dropdownPosition.maxHeight },
+              children: typeof children === "function" ? children({ isAbove: dropdownPosition.isAbove }) : children
+            }
+          )
         }
-      )
-    ] }),
-    footerDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1", children: footerDescription }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) : error })
-  ] }) });
+      ),
+      document.body
+    )
+  ] });
 }
-function Switch({
-  checked,
+function SmartSelect({
+  options,
+  value,
   onChange,
-  disabled = false,
-  label,
-  description,
+  placeholder = "Select option...",
   className = "",
-  size = "md"
+  description,
+  disabled = false,
+  multiple = false,
+  width,
+  searchable = false,
+  keepOpen = false,
+  clearable = true,
+  // API integration props
+  onOpen,
+  onClose,
+  onSearch,
+  isLoading = false
 }) {
-  const toggle = () => {
-    if (!disabled) {
-      onChange(!checked);
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [triggerWidth, setTriggerWidth] = React4.useState(
+    void 0
+  );
+  const [searchTerm, setSearchTerm] = React4.useState("");
+  const [displayValue, setDisplayValue] = React4.useState("");
+  const inputRef = React4.useRef(null);
+  const buttonRef = React4.useRef(null);
+  const selectedValues = multiple ? value || [] : [value];
+  const selectedOptions = options.filter(
+    (opt) => selectedValues.includes(opt.value)
+  );
+  const hasSelection = multiple ? selectedValues.length > 0 : value && value !== "";
+  const filteredOptions = searchable && searchTerm.trim() ? options.filter(
+    (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) || option.value.toLowerCase().includes(searchTerm.toLowerCase()) || option.description?.toLowerCase().includes(searchTerm.toLowerCase())
+  ) : options;
+  const { focusedIndex, handleKeyDown, resetFocus } = useKeyboardNavigation({
+    isOpen,
+    optionsLength: filteredOptions.length,
+    onSelect: (index) => handleSelect(filteredOptions[index].value),
+    onClose: () => setIsOpen(false),
+    onOpen: () => setIsOpen(true)
+  });
+  React4.useEffect(() => {
+    if (selectedOptions.length > 0) {
+      if (multiple) {
+        setDisplayValue(selectedOptions.map((opt) => opt.label).join(", "));
+      } else {
+        setDisplayValue(selectedOptions[0].label);
+      }
+    } else {
+      setDisplayValue("");
+    }
+  }, [selectedOptions, multiple]);
+  const handleSelect = (optionValue) => {
+    if (multiple) {
+      const currentValues = value || [];
+      const newValues = currentValues.includes(optionValue) ? currentValues.filter((v) => v !== optionValue) : [...currentValues, optionValue];
+      onChange(newValues);
+    } else {
+      onChange(optionValue);
+      setSearchTerm("");
+      setIsOpen(false);
     }
   };
-  const sizes = {
-    sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
-    md: { track: "w-11 h-6", thumb: "w-5 h-5", translate: "translate-x-5" },
-    lg: { track: "w-14 h-8", thumb: "w-7 h-7", translate: "translate-x-6" }
+  const currentTriggerRef = searchable ? inputRef : buttonRef;
+  React4.useEffect(() => {
+    if (currentTriggerRef.current) {
+      const rect = currentTriggerRef.current.getBoundingClientRect();
+      setTriggerWidth(rect.width);
+    }
+  }, [isOpen, currentTriggerRef]);
+  React4.useEffect(() => {
+    if (!currentTriggerRef.current) return;
+    const resizeObserver = new ResizeObserver(() => {
+      if (currentTriggerRef.current) {
+        const rect = currentTriggerRef.current.getBoundingClientRect();
+        setTriggerWidth(rect.width);
+      }
+    });
+    resizeObserver.observe(currentTriggerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [currentTriggerRef]);
+  React4.useEffect(() => {
+    if (isOpen && searchable && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+    } else if (!isOpen) {
+      setSearchTerm("");
+      resetFocus();
+    }
+  }, [isOpen, searchable, resetFocus]);
+  const handleOpen = () => {
+    setIsOpen(true);
+    onOpen?.();
   };
-  const currentSize = sizes[size];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-start ${className}`, children: [
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+  const handleSearchChange = (search) => {
+    setSearchTerm(search);
+    onSearch?.(search);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", "data-smart-select": true, children: [
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "form-description", children: description }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+      SmartDropdown,
       {
-        type: "button",
-        role: "switch",
-        "aria-checked": checked,
-        disabled,
-        onClick: toggle,
-        className: `
-          relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
-          transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
-          ${checked ? "bg-primary" : "bg-muted"}
-          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-          ${currentSize.track}
-        `,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        isOpen,
+        onClose: handleClose,
+        width: width !== void 0 ? width : triggerWidth,
+        maxHeight: 200,
+        trigger: searchable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: isOpen ? searchTerm : displayValue,
+              onChange: (e) => {
+                if (isOpen) {
+                  handleSearchChange(e.target.value);
+                  resetFocus();
+                }
+              },
+              onFocus: () => !disabled && handleOpen(),
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && handleOpen();
+              },
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": "dropdown-listbox",
+              "aria-autocomplete": "list",
+              "aria-activedescendant": focusedIndex >= 0 ? `option-${focusedIndex}` : void 0,
+              className: `form-input truncate ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`
+            }
+          ),
+          hasSelection && clearable && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange(multiple ? [] : "");
+              },
+              className: "absolute right-6 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors",
+              "aria-label": "Clear selection",
+              title: "Clear selection",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiCloseLine, { className: "w-4 h-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && setIsOpen(!isOpen);
+              },
+              className: `absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+              disabled,
+              "aria-label": isOpen ? "Close dropdown" : "Open dropdown",
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                DropDownArrow,
+                {
+                  isOpen,
+                  disabled,
+                  size: "sm",
+                  color: "gray",
+                  "aria-hidden": true
+                }
+              )
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && (isOpen ? handleClose() : handleOpen());
+              },
+              onKeyDown: handleKeyDown,
+              disabled,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": "dropdown-listbox",
+              "aria-label": placeholder,
+              "aria-activedescendant": focusedIndex >= 0 ? `option-${focusedIndex}` : void 0,
+              className: `form-input flex items-center justify-between text-left ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "opacity-60 cursor-not-allowed" : ""} ${className}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `flex items-center gap-2 min-w-0 flex-1 ${selectedOptions.length > 0 ? "" : "text-muted-foreground opacity-60"}`,
+                  children: multiple ? selectedOptions.length > 0 ? (() => {
+                    const displayText = selectedOptions.map((opt) => opt.label).join(", ");
+                    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+                      selectedOptions[0].icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: selectedOptions[0].icon }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: displayText })
+                    ] });
+                  })() : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: placeholder }) : selectedOptions[0] ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+                    selectedOptions[0].icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: selectedOptions[0].icon }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selectedOptions[0].label })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: placeholder })
+                }
+              )
+            }
+          ),
+          hasSelection && clearable && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange(multiple ? [] : "");
+              },
+              className: "absolute right-6 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-all duration-200 opacity-0 group-hover:opacity-100",
+              "aria-label": "Clear selection",
+              title: "Clear selection",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiCloseLine, { className: "w-4 h-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && setIsOpen(!isOpen);
+              },
+              className: `absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+              disabled,
+              "aria-label": isOpen ? "Close dropdown" : "Open dropdown",
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                DropDownArrow,
+                {
+                  isOpen,
+                  disabled,
+                  size: "sm",
+                  color: "gray",
+                  "aria-hidden": true
+                }
+              )
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
-            "aria-hidden": "true",
-            className: `
-            pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 
-            transition duration-200 ease-in-out
-            ${checked ? currentSize.translate : "translate-x-0"}
-            ${currentSize.thumb}
-          `
-          }
-        )
+            id: `option-${index}`,
+            type: "button",
+            role: "option",
+            "aria-selected": selectedValues.includes(option.value),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleSelect(option.value);
+            },
+            className: `w-full px-3 py-2 text-left text-sm hover:bg-accent flex items-center justify-between min-h-[40px] transition-colors ${selectedValues.includes(option.value) ? "bg-accent border-l-2 border-l-ring" : index === focusedIndex ? "bg-muted ring-2 ring-ring" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+                option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: option.icon }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-foreground truncate", children: option.label }),
+                    option.metadata?.isDefault && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium success-badge flex-shrink-0", children: "Default" })
+                  ] }),
+                  option.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: option.description }),
+                  option.metadata?.args && option.metadata.args.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-secondary-foreground mb-1", children: "Arguments:" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1", children: [
+                      option.metadata.args.slice(0, 3).map((arg, argIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-muted-foreground",
+                          children: arg
+                        },
+                        argIndex
+                      )),
+                      option.metadata.args.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-secondary-foreground", children: [
+                        "+",
+                        option.metadata.args.length - 3,
+                        " more"
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              multiple ? /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedValues.includes(option.value),
+                  onChange: () => {
+                  },
+                  className: "w-4 h-4 text-primary bg-muted border-border rounded focus:ring-primary focus:ring-2"
+                }
+              ) : selectedValues.includes(option.value) && /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-primary flex-shrink-0" })
+            ]
+          },
+          option.value
+        )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-secondary-foreground flex items-center gap-2", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ri.RiLoader4Line, { className: "w-4 h-4 animate-spin" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." })
+        ] }) : searchTerm.trim() ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No options available" }) }) })
       }
-    ),
-    (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-3 text-sm leading-6", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "font-medium text-foreground cursor-pointer", onClick: toggle, children: label }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: description })
-    ] })
+    )
   ] });
 }
-var sizeClasses3 = {
-  sm: "max-w-md",
-  md: "max-w-2xl",
-  lg: "max-w-4xl",
-  xl: "max-w-6xl",
-  full: "max-w-full mx-4"
-};
-function Modal({
-  isOpen,
-  onClose,
-  children,
-  title,
-  header,
-  blocking = false,
-  size = "md",
+function Skeleton({ className = "", children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `animate-pulse ${className}`, children });
+}
+function SkeletonItem({
   className = "",
-  footer,
-  fullScreen = false,
-  noPadding = false,
-  footerBg = "gray",
-  variant = "default",
-  scrollable = true,
-  "aria-describedby": ariaDescribedBy,
-  customStyles = {}
+  width = "w-full",
+  height = "h-4",
+  rounded = true,
+  animate = true
 }) {
-  const modalContentRef = React4.useRef(null);
-  const previousActiveElementRef = React4.useRef(null);
-  const hasPerformedInitialFocusRef = React4.useRef(false);
-  const getFocusableElements = () => {
-    if (!modalContentRef.current) return [];
-    const focusableSelectors = [
-      "button:not([disabled])",
-      "a[href]",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      "textarea:not([disabled])",
-      '[tabindex]:not([tabindex="-1"])'
-    ].join(", ");
-    return Array.from(
-      modalContentRef.current.querySelectorAll(focusableSelectors)
-    );
-  };
-  React4.useEffect(() => {
-    if (!isOpen) {
-      hasPerformedInitialFocusRef.current = false;
-      return;
+  const isArbitraryHeight = height.includes("[") && height.includes("]");
+  const baseClasses = isArbitraryHeight ? `bg-muted ${width}` : `${height} bg-muted ${width}`;
+  const roundedClasses = rounded ? "rounded" : "";
+  const animateClasses = animate ? "animate-pulse" : "";
+  const style = isArbitraryHeight ? { height: height.replace("h-[", "").replace("]", "") } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `${baseClasses} ${roundedClasses} ${animateClasses} ${className}`,
+      style
     }
-    if (!hasPerformedInitialFocusRef.current) {
-      previousActiveElementRef.current = document.activeElement;
+  );
+}
+function SkeletonCard({ className = "", children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `card card-padding ${className}`, children });
+}
+function SkeletonTable({
+  rows = 5,
+  columns = 4,
+  className = "",
+  showHeader = true
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `card overflow-hidden ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full divide-y divide-border", children: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4" }) }, i)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "table-body-card", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-full", height: "h-4" }),
+      colIndex === 0 && /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-3/4", height: "h-3" })
+    ] }) }, colIndex)) }, rowIndex)) })
+  ] }) }) });
+}
+function SkeletonList({
+  items = 5,
+  className = "",
+  itemHeight = "h-20"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card card-padding-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-12", rounded: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-1/3", height: "h-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-1/2", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-8" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-8" })
+    ] })
+  ] }) }, i)) });
+}
+function SkeletonSearchCard({ className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SkeletonCard, { className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-48", height: "h-6" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-4" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-10" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-full", height: "h-10" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-10" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-10" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-10", height: "h-10" })
+    ] })
+  ] }) });
+}
+function SkeletonGameServerCard({
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `card overflow-hidden h-[380px] flex flex-col ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative px-5 py-4 border-b border-border bg-muted overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-3 relative z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-6", className: "mb-2" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-4", height: "h-4", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4" })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative px-4 py-3 pt-0 flex-grow", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 grid-cols-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonItem,
+                {
+                  width: "w-12",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto mb-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-6", height: "h-3", className: "mx-auto" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonItem,
+                {
+                  width: "w-12",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border pt-4 space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 bg-card border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] })
+        ] }) })
+      ]
     }
-    let timeoutId = null;
-    if (!hasPerformedInitialFocusRef.current) {
-      const focusableElements = getFocusableElements();
-      const firstFocusable = focusableElements[0];
-      timeoutId = setTimeout(() => {
-        const activeElement = document.activeElement;
-        const isHTMLElement = activeElement instanceof HTMLElement;
-        const isUserTyping = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || isHTMLElement && activeElement.isContentEditable);
-        const isFocusInModal = modalContentRef.current?.contains(activeElement);
-        if (!isUserTyping && !isFocusInModal) {
-          if (firstFocusable) {
-            firstFocusable.focus();
-            hasPerformedInitialFocusRef.current = true;
-          } else if (modalContentRef.current) {
-            modalContentRef.current.focus();
-            hasPerformedInitialFocusRef.current = true;
+  );
+}
+function SkeletonGameCard({ className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `card card-padding-sm ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-12", rounded: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-40", height: "h-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-64", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-6", rounded: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true })
+    ] })
+  ] }) });
+}
+function SkeletonUserCard({ className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `card card-padding-sm ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-12", rounded: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-40", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-6", rounded: true })
+    ] })
+  ] }) });
+}
+function SkeletonNodeCard({ className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `card overflow-hidden min-h-[320px] ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-border bg-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-5", className: "mb-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4", className: "mb-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SkeletonItem,
+            {
+              width: "w-16",
+              height: "h-16",
+              rounded: true,
+              className: "mx-auto mb-1"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto mb-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-6", height: "h-3", className: "mx-auto" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SkeletonItem,
+            {
+              width: "w-16",
+              height: "h-16",
+              rounded: true,
+              className: "mx-auto mb-1"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto mb-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-6", height: "h-3", className: "mx-auto" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SkeletonItem,
+            {
+              width: "w-16",
+              height: "h-16",
+              rounded: true,
+              className: "mx-auto mb-1"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-3", className: "mx-auto mb-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted rounded-lg p-3 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-4" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonItem,
+          {
+            width: "w-full",
+            height: "h-2",
+            rounded: true,
+            className: "mb-1"
           }
-        } else if (isFocusInModal) {
-          hasPerformedInitialFocusRef.current = true;
-        }
-      }, 100);
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-3" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end items-center pt-3 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+      ] }) })
+    ] })
+  ] });
+}
+function SkeletonTenantCard({ className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `card card-padding-sm ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-12", rounded: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-40", height: "h-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-56", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-28", height: "h-6", rounded: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true })
+    ] })
+  ] }) });
+}
+function SkeletonStats({ className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${className}`,
+      children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card card-padding", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-8" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-3" })
+      ] }) }, i))
     }
-    const handleTab = (event) => {
-      if (event.key !== "Tab") return;
-      const focusableElements = getFocusableElements();
-      if (focusableElements.length === 0) return;
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-      if (event.shiftKey) {
-        if (document.activeElement === firstElement) {
-          event.preventDefault();
-          lastElement.focus();
-        }
-      } else {
-        if (document.activeElement === lastElement) {
-          event.preventDefault();
-          firstElement.focus();
-        }
-      }
-    };
-    const handleEsc = (event) => {
-      if (event.key === "Escape" && !blocking) {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleTab);
-    document.addEventListener("keydown", handleEsc);
-    document.body.style.overflow = "hidden";
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      document.removeEventListener("keydown", handleTab);
-      document.removeEventListener("keydown", handleEsc);
-      document.body.style.overflow = "unset";
-      if (!isOpen && previousActiveElementRef.current) {
-        previousActiveElementRef.current.focus();
-      }
-    };
-  }, [isOpen, onClose, blocking]);
-  const modalRoot = (() => {
-    if (typeof document === "undefined") return null;
-    let root = document.getElementById("modal-root");
-    if (!root) {
-      root = document.createElement("div");
-      root.id = "modal-root";
-      document.body.appendChild(root);
+  );
+}
+function SkeletonRecentActivity({
+  items = 5,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-full", height: "h-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-1/2", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-4" })
+  ] }, i)) });
+}
+function SkeletonForm({
+  fields = 4,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SkeletonCard, { className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    Array.from({ length: fields }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-full", height: "h-10" })
+    ] }, i)),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end space-x-3 pt-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-10" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-10" })
+    ] })
+  ] }) });
+}
+function SkeletonGameServerCards({
+  items = 4,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6 ${className}`,
+      children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonGameServerCard, {}, i))
     }
-    return root;
-  })();
-  if (!modalRoot) {
-    return null;
-  }
-  const backdropVariants = {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1 }
-  };
-  const modalVariants = {
-    hidden: {
-      opacity: 0,
-      scale: 0.95,
-      y: 20
-    },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      y: 0,
-      transition: {
-        duration: 0.2,
-        ease: "easeOut"
-      }
-    },
-    exit: {
-      opacity: 0,
-      scale: 0.9,
-      y: 100,
-      // Slide down much further for reverse effect
-      transition: {
-        duration: 0.3,
-        ease: "easeIn"
-      }
+  );
+}
+function SkeletonNodeCards({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6 ${className}`,
+      children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonNodeCard, {}, i))
     }
-  };
-  if (!isOpen) return null;
-  if (variant === "plain") {
-    return reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.div,
-        {
-          className: `modal-backdrop fixed inset-0 w-screen h-screen flex items-center ${customStyles.backdrop?.includes("justify-") ? customStyles.backdrop : customStyles.backdrop ? `${customStyles.backdrop} justify-center` : "justify-center bg-black/10"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
-          variants: backdropVariants,
-          initial: "hidden",
-          animate: isOpen ? "visible" : "hidden",
-          exit: "hidden",
-          onClick: blocking ? void 0 : onClose,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
-            {
-              ref: modalContentRef,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-labelledby": title ? "modal-title-plain" : void 0,
-              "aria-describedby": ariaDescribedBy || "modal-content-plain",
-              tabIndex: -1,
-              className: `w-full flex flex-col overflow-hidden relative z-[1000000] ${customStyles.container || "bg-card shadow-xl"} ${fullScreen ? "h-full rounded-none" : `rounded-lg ${className} ${sizeClasses3[size]} max-h-[90vh]`}`,
-              variants: modalVariants,
-              initial: "hidden",
-              animate: isOpen ? "visible" : "exit",
-              exit: "exit",
-              onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  id: "modal-content-plain",
-                  className: `flex-1 ${customStyles.content || ""}`,
-                  children
+  );
+}
+function SkeletonNodeTable({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 border-b border-border bg-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-5", className: "mb-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-28", height: "h-4", className: "mb-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-6", height: "h-6", className: "mr-2" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-4" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-4 gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-4", className: "mb-3" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start space-x-6", children: Array.from({ length: 3 }).map((_2, chartIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonItem,
+              {
+                width: "w-14",
+                height: "h-14",
+                rounded: true,
+                className: "mx-auto mb-1"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonItem,
+              {
+                width: "w-8",
+                height: "h-3",
+                className: "mx-auto mb-1"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonItem,
+              {
+                width: "w-10",
+                height: "h-3",
+                className: "mx-auto"
+              }
+            )
+          ] }, chartIndex)) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4", className: "mb-3" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-5" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-4", className: "mb-3" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end items-center pt-4 border-t border-border mt-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+      ] }) })
+    ] })
+  ] }, i)) });
+}
+function SkeletonGameServerTable({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "card overflow-hidden min-h-[200px] flex flex-col",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative px-5 py-4 border-b border-border bg-muted overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-3 relative z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-6", className: "mb-2" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-4", height: "h-4", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4" })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative px-4 py-3 pt-0 flex-grow", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-full md:w-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2 grid-cols-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonItem,
+                {
+                  width: "w-12",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonItem,
+                {
+                  width: "w-8",
+                  height: "h-3",
+                  className: "mx-auto"
                 }
               )
-            },
-            "modal-content"
-          )
-        },
-        "modal-backdrop"
-      ) }),
-      modalRoot
-    );
-  }
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.div,
-      {
-        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
-        variants: backdropVariants,
-        initial: "hidden",
-        animate: isOpen ? "visible" : "hidden",
-        exit: "hidden",
-        onClick: blocking ? void 0 : onClose,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.motion.div,
-          {
-            ref: modalContentRef,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": title ? "modal-title" : void 0,
-            "aria-describedby": ariaDescribedBy || "modal-content",
-            tabIndex: -1,
-            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative z-[1000000] ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
-            variants: modalVariants,
-            initial: "hidden",
-            animate: isOpen ? "visible" : "exit",
-            exit: "exit",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: header }) : title ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonItem,
                 {
-                  className: `px-6 py-4 border-b border-border flex justify-between items-center flex-shrink-0 ${customStyles.header || ""}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "h2",
-                      {
-                        id: "modal-title",
-                        className: "text-xl font-semibold text-foreground",
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        onClick: onClose,
-                        className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors",
-                        title: "Close",
-                        "aria-label": "Close modal",
-                        disabled: blocking,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiCloseLine, { className: "w-5 h-5", "aria-hidden": "true" })
-                      }
-                    )
-                  ]
+                  width: "w-8",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
                 }
-              ) : null,
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+                SkeletonItem,
                 {
-                  id: "modal-content",
-                  className: `bg-background text-foreground flex-1 ${scrollable ? "overflow-y-auto" : ""} ${fullScreen || noPadding ? "p-0" : "px-6 py-4"}`,
-                  children
+                  width: "w-6",
+                  height: "h-3",
+                  className: "mx-auto"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonItem,
+                {
+                  width: "w-12",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
                 }
               ),
-              footer && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonItem,
                 {
-                  className: `flex-shrink-0 px-6 py-4 border-t border-border ${footerBg === "white" ? "bg-card" : "bg-muted"} ${customStyles.footer || ""}`,
-                  children: footer
+                  width: "w-8",
+                  height: "h-3",
+                  className: "mx-auto"
                 }
               )
-            ]
-          },
-          "modal-content"
-        )
-      },
-      "modal-backdrop"
-    ) }),
-    modalRoot
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground flex-1 w-full grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-12", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 bg-card border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] })
+        ] }) })
+      ]
+    },
+    i
+  )) });
+}
+function SkeletonGamesTable({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg ${className}`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-300", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Game" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Port" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Mode" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Status" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Created" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 rounded-md bg-muted backdrop-blur-sm text-center text-xs font-medium text-muted-foreground uppercase tracking-wider sticky right-0", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "table-body-card", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-muted", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 h-10 w-10", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-10", height: "h-10", rounded: true }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-4", className: "mb-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-48", height: "h-3" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-6 py-4 whitespace-nowrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-4", className: "mb-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-6", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-3" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-6 py-4 whitespace-nowrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonItem,
+              {
+                width: "w-16",
+                height: "h-6",
+                rounded: true,
+                className: "mb-1"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-3" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-6", rounded: true }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium sticky right-0 bg-card", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end space-x-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] }) })
+        ] }, i)) })
+      ] })
+    }
   );
 }
-var LoadingSpinner = ({
-  message = "Initializing...",
-  className,
-  showMessage = false
-}) => {
-  const containerClasses = className !== void 0 ? className : "flex items-center justify-center h-screen min-h-screen";
+function SkeletonEnvironmentsList({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-5", height: "h-5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full pr-6 md:pr-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-5" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-16", height: "h-5", rounded: true })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-48", height: "h-3" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-20", height: "h-3" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: Array.from({ length: 2 + i % 3 }).map((_2, varIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 last:mb-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-32", height: "h-4", className: "mb-1" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-48", height: "h-3" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-5 flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-4" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }) })
+    ] }) }, varIndex)) })
+  ] }, i)) });
+}
+function FormInput({
+  label,
+  name,
+  type = "text",
+  value,
+  onChange,
+  placeholder,
+  required = false,
+  disabled = false,
+  error,
+  className = "",
+  inputClassName = "",
+  min,
+  max,
+  step,
+  maxLength,
+  autoComplete,
+  description,
+  footerDescription,
+  autoFocus = false,
+  onKeyDown,
+  onBlur,
+  icon,
+  options = [],
+  multiSelect = false,
+  selectWidth,
+  searchable = false,
+  clearable = true,
+  rows = 3,
+  showHidePassword = false,
+  onGeneratePassword,
+  isLoading = false,
+  copyable = false,
+  readOnly = false
+}) {
+  const [showPassword, setShowPassword] = React4.useState(false);
+  const [copied, setCopied] = React4.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(String(value));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const shouldShowIcons = (inputType) => {
+    return inputType !== "checkbox" && inputType !== "textarea";
+  };
+  const getIconConfig = (iconProp) => {
+    if (!iconProp) return { left: null, right: null };
+    if (React4__default.default.isValidElement(iconProp)) {
+      return { left: iconProp, right: null };
+    }
+    if (typeof iconProp === "object" && iconProp !== null && ("left" in iconProp || "right" in iconProp)) {
+      return { left: iconProp.left || null, right: iconProp.right || null };
+    }
+    return {
+      left: React4__default.default.isValidElement(iconProp) ? iconProp : null,
+      right: null
+    };
+  };
+  const renderIcon = (iconNode, position) => {
+    if (!iconNode) return null;
+    const rightPositionClass = position === "right" && type === "number" ? "right-4 pr-3" : position === "right" ? "right-0 pr-3" : "left-0 pl-3";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `absolute inset-y-0 ${rightPositionClass} flex items-center pointer-events-none`,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: iconNode })
+      }
+    );
+  };
+  const getInputPaddingClasses = (inputType, iconConfig) => {
+    if (!shouldShowIcons(inputType)) return "";
+    const paddingClasses3 = [];
+    if (iconConfig.left) paddingClasses3.push("pl-10");
+    if (iconConfig.right) {
+      paddingClasses3.push(inputType === "number" ? "pr-12" : "pr-10");
+    }
+    return paddingClasses3.join(" ");
+  };
+  const SkeletonInput = () => {
+    const iconConfig = getIconConfig(icon);
+    const hasLeftIcon = iconConfig.left;
+    const hasRightIcon = iconConfig.right;
+    if (type === "checkbox") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white border border-border translate-x-1" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description })
+        ] })
+      ] });
+    }
+    if (type === "textarea") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonItem,
+          {
+            width: "w-full",
+            height: "h-24",
+            className: `rounded-md`
+          }
+        ) }),
+        footerDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-foreground", children: footerDescription })
+      ] });
+    }
+    if (type === "color") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-10", height: "h-10", className: "rounded-md" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-24", height: "h-10", className: "rounded-md" }) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
+        label,
+        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonItem,
+          {
+            width: "w-full",
+            height: "h-10",
+            className: `rounded-md ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}`
+          }
+        ),
+        hasLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-5", height: "h-5", className: "rounded-full" }) }),
+        hasRightIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-5", height: "h-5", className: "rounded-full" }) })
+      ] }),
+      footerDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-foreground", children: footerDescription })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `form-group ${className}`, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonInput, {}) : type === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: name,
+        name,
+        type: "checkbox",
+        checked: Boolean(value),
+        onChange: (e) => {
+          const newValue = e.target.checked;
+          const syntheticEvent = {
+            target: {
+              name: e.target.name,
+              value: newValue,
+              checked: newValue
+            },
+            currentTarget: {
+              name: e.target.name,
+              value: newValue,
+              checked: newValue
+            }
+          };
+          onChange(syntheticEvent);
+        },
+        required,
+        disabled,
+        onKeyDown,
+        className: "sr-only",
+        "aria-label": label,
+        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+        "aria-invalid": error ? "true" : "false"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          if (!disabled) {
+            const checkbox = document.getElementById(
+              name
+            );
+            if (checkbox) {
+              checkbox.click();
+            }
+          }
+        },
+        disabled,
+        className: `
+              relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+              ${Boolean(value) ? "bg-primary" : "bg-muted"}
+              ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+              ${error ? "ring-2 ring-destructive" : ""}
+            `,
+        "aria-label": `${label}${required ? " (required)" : ""}`,
+        "aria-describedby": name,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `
+                inline-block h-4 w-4 transform rounded-full bg-background border border-border transition duration-200 ease-in-out
+                ${Boolean(value) ? "translate-x-6" : "translate-x-1"}
+              `
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-sm font-medium text-foreground cursor-pointer",
+          onClick: () => {
+            if (!disabled) {
+              const checkbox = document.getElementById(
+                name
+              );
+              if (checkbox) {
+                checkbox.click();
+              }
+            }
+          },
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", "aria-label": "required", children: "*" })
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: `${name}-description`,
+          className: "text-xs text-muted-foreground",
+          children: description
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) : error })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: "form-label", children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "form-label-required", children: "*" })
+    ] }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-description`, className: "form-description", children: description }),
+    type === "select" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SmartSelect,
+        {
+          value: multiSelect ? Array.isArray(value) ? value : value ? String(value).split(",") : [] : String(value),
+          onChange: multiSelect ? (selectedValue) => {
+            const syntheticEvent = {
+              target: {
+                name,
+                value: Array.isArray(selectedValue) ? selectedValue.join(",") : selectedValue
+              }
+            };
+            onChange(syntheticEvent);
+          } : (selectedValue) => {
+            const syntheticEvent = {
+              target: {
+                name,
+                value: selectedValue
+              }
+            };
+            onChange(syntheticEvent);
+          },
+          options,
+          placeholder: placeholder || "Select an option...",
+          className: `form-input ${error ? "form-input-error" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`,
+          multiple: multiSelect,
+          width: selectWidth,
+          searchable,
+          clearable
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })()
+    ] }) : type === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        id: name,
+        name,
+        value,
+        onChange,
+        placeholder,
+        required,
+        disabled,
+        autoFocus,
+        onKeyDown,
+        onBlur,
+        rows,
+        maxLength,
+        "aria-invalid": error ? "true" : "false",
+        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+        className: `form-input ${error ? "form-input-error" : ""} ${inputClassName}`
+      }
+    ) : type === "color" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-10 h-10 border border-input rounded-md overflow-hidden bg-card", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: name,
+            name,
+            type: "color",
+            value,
+            onChange,
+            required,
+            disabled,
+            className: "absolute inset-0 w-full h-full cursor-pointer opacity-0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "w-full h-full rounded-md",
+            style: { backgroundColor: value }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: `${name}-text`,
+            name: `${name}-text`,
+            type: "text",
+            value,
+            onChange,
+            placeholder,
+            required,
+            disabled,
+            maxLength,
+            autoComplete,
+            autoFocus,
+            onKeyDown,
+            onBlur,
+            className: `form-input max-w-24 ${error ? "form-input-error" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`,
+            "aria-label": `${label} text input`
+          }
+        ),
+        shouldShowIcons(type) && (() => {
+          const iconConfig = getIconConfig(icon);
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            renderIcon(iconConfig.left, "left"),
+            renderIcon(iconConfig.right, "right")
+          ] });
+        })()
+      ] })
+    ] }) : showHidePassword && type === "password" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: name,
+          name,
+          type: showPassword ? "text" : "password",
+          value,
+          onChange,
+          placeholder,
+          required,
+          disabled: disabled || readOnly,
+          readOnly,
+          maxLength,
+          autoComplete,
+          autoFocus,
+          onKeyDown,
+          onBlur,
+          "aria-invalid": error ? "true" : "false",
+          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-20" : "pr-10"} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })(),
+      copyable && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: "absolute inset-y-0 right-8 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
+          "aria-label": `Copy ${label}`,
+          title: copied ? "Copied!" : `Copy ${label}`,
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          title: showPassword ? "Hide password" : "Show password",
+          children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(ri.RiEyeOffLine, { className: "w-4 h-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiEyeLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      onGeneratePassword && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onGeneratePassword,
+          className: `absolute inset-y-0 ${copyable ? "right-16" : "right-8"} flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10`,
+          "aria-label": "Generate new password",
+          title: "Generate new password",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiRefreshLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: name,
+          name,
+          type,
+          value,
+          onChange,
+          placeholder,
+          required,
+          disabled: disabled || readOnly,
+          readOnly,
+          min,
+          max,
+          step,
+          maxLength,
+          autoComplete,
+          autoFocus,
+          onKeyDown,
+          onBlur,
+          "aria-invalid": error ? "true" : "false",
+          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-10" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })(),
+      copyable && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: `absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-all duration-200 z-10`,
+          "aria-label": `Copy ${label}`,
+          title: copied ? "Copied!" : `Copy ${label}`,
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      clearable && !copyable && value !== "" && value !== null && value !== void 0 && !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const syntheticEvent = {
+              target: { name, value: "" }
+            };
+            onChange(syntheticEvent);
+          },
+          className: `absolute inset-y-0 ${type === "number" ? "right-4" : "right-0"} flex items-center pr-3 text-muted-foreground hover:text-muted-foreground transition-all duration-200 z-10 opacity-0 group-hover:opacity-100`,
+          "aria-label": `Clear ${label}`,
+          title: `Clear ${label}`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiCloseLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    footerDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1", children: footerDescription }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) : error })
+  ] }) });
+}
+function FormSection({
+  title,
+  description,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-4 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium ", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children })
+  ] });
+}
+function Grid({
+  children,
+  cols = 1,
+  gap = 4,
+  className = ""
+}) {
+  const colClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+    5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
+    6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
+    12: "grid-cols-12"
+  };
+  const gapClasses = {
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    6: "gap-6",
+    8: "gap-8"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
+}
+var variantStyles = {
+  default: "bg-accent border-border text-muted-foreground",
+  warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-300",
+  info: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300",
+  success: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300"
+};
+var titleStyles = {
+  default: "text-foreground",
+  warning: "text-yellow-800 dark:text-yellow-200",
+  info: "text-blue-800 dark:text-blue-200",
+  success: "text-green-800 dark:text-green-200"
+};
+function InfoBox({
+  title,
+  children,
+  variant = "default",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border rounded-md p-4 ${variantStyles[variant]} ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: `font-medium mb-2 ${titleStyles[variant]}`, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm space-y-1 [&>ul]:list-disc [&>ul]:list-outside [&>ul]:pl-3 [&>ol]:list-decimal [&>ol]:list-outside [&>ol]:pl-4", children })
+  ] });
+}
+var variantClasses3 = {
+  default: "text-foreground hover:text-primary",
+  primary: "text-primary hover:text-primary/80",
+  muted: "text-muted-foreground hover:text-foreground"
+};
+var Link = React4.forwardRef(
+  ({
+    href,
+    variant = "default",
+    underline = false,
+    external = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const classes = [
+      "transition-colors",
+      variantClasses3[variant],
+      underline ? "underline underline-offset-4" : "hover:underline hover:underline-offset-4",
+      className
+    ].filter(Boolean).join(" ");
+    if (external || href.startsWith("http")) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          ref,
+          href,
+          className: classes,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(NextLink__default.default, { ref, href, className: classes, ...props, children });
+  }
+);
+Link.displayName = "Link";
+var Link_default = Link;
+var LoadingSpinner = ({
+  message = "Initializing...",
+  className,
+  showMessage = false
+}) => {
+  const containerClasses = className !== void 0 ? className : "flex items-center justify-center h-screen min-h-screen";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: containerClasses,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": message,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center justify-center space-x-2 mb-6",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0s]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.2s]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.4s]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.6s]" })
+            ]
+          }
+        ),
+        showMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "text-sm text-secondary-foreground animate-pulse",
+            "aria-live": "polite",
+            children: message
+          }
+        ) })
+      ] })
+    }
+  );
+};
+var LoadingSpinner_default = LoadingSpinner;
+function PageHeader({
+  icon: Icon,
+  title,
+  subtitle,
+  rightContent,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mb-6 lg:mb-8 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "header-layout", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
+      Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-6 h-6 lg:w-8 lg:h-8 flex-shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl lg:text-3xl font-bold text-foreground  truncate", children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm lg:text-base text-muted-foreground", children: subtitle })
+      ] })
+    ] }),
+    rightContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 lg:space-x-3 flex-shrink-0", children: rightContent })
+  ] }) });
+}
+function Switch({
+  checked,
+  onChange,
+  disabled = false,
+  label,
+  description,
+  className = "",
+  size = "md"
+}) {
+  const toggle = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+  const sizes = {
+    sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
+    md: { track: "w-11 h-6", thumb: "w-5 h-5", translate: "translate-x-5" },
+    lg: { track: "w-14 h-8", thumb: "w-7 h-7", translate: "translate-x-6" }
+  };
+  const currentSize = sizes[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-start ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        disabled,
+        onClick: toggle,
+        className: `
+          relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
+          transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+          ${checked ? "bg-primary" : "bg-muted"}
+          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+          ${currentSize.track}
+        `,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `
+            pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 
+            transition duration-200 ease-in-out
+            ${checked ? currentSize.translate : "translate-x-0"}
+            ${currentSize.thumb}
+          `
+          }
+        )
+      }
+    ),
+    (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-3 text-sm leading-6", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "font-medium text-foreground cursor-pointer", onClick: toggle, children: label }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: description })
+    ] })
+  ] });
+}
+var variantClasses4 = {
+  default: "text-foreground",
+  muted: "text-muted-foreground",
+  bold: "font-semibold"
+};
+var sizeClasses4 = {
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl"
+};
+function Typography({
+  as: Element = "p",
+  variant = "default",
+  size = "base",
+  children,
+  className = ""
+}) {
+  const classes = `${variantClasses4[variant]} ${sizeClasses4[size]} ${className}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(Element, { className: classes, children });
+}
+var Spinner = ({
+  size = "md",
+  color = "primary",
+  className = ""
+}) => {
+  const sizeClasses5 = {
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    lg: "h-12 w-12",
+    xl: "h-16 w-16"
+  };
+  const colorClasses2 = {
+    primary: "border-primary-600",
+    blue: "border-ring",
+    white: "border-white",
+    current: "border-current"
+  };
+  const baseClasses = "animate-spin rounded-full border-2 border-t-transparent";
+  const sizeClass = sizeClasses5[size];
+  const colorClass = colorClasses2[color];
+  const finalClasses = `${baseClasses} ${sizeClass} ${colorClass} ${className}`.trim();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: finalClasses });
+};
+var Spinner_default = Spinner;
+function DataTable({
+  children,
+  className = "",
+  containerClassName = "",
+  stickyActions = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `card overflow-hidden ${containerClassName}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      role: "table",
+      "aria-label": "Data table",
+      className: `w-full divide-y divide-border ${className} ${stickyActions ? "relative" : ""}`,
+      children
+    }
+  ) }) });
+}
+function DataTableHeader({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: `bg-muted ${className}`, children });
+}
+function DataTableBody({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `table-body-card ${className}`, children });
+}
+function DataTableRow({
+  children,
+  className = "",
+  onClick,
+  hover = true
+}) {
+  const baseClasses = "hover:bg-muted transition-colors duration-150";
+  const clickableClasses = onClick ? "cursor-pointer" : "";
+  const hoverClasses = hover ? baseClasses : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: `${hoverClasses} ${clickableClasses} ${className}`,
+      onClick,
+      children
+    }
+  );
+}
+function DataTableHeaderCell({
+  children,
+  className = "",
+  align = "left",
+  padding = "md",
+  sticky,
+  stickyOffset = 0
+}) {
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  const paddingClasses3 = {
+    sm: "px-3 py-2",
+    md: "px-6 py-3",
+    lg: "px-8 py-4"
+  };
+  const stickyClasses = sticky ? `sticky ${sticky === "left" ? "left-0" : "right-0"} z-10` : "";
+  const stickyOffsetClasses = sticky && stickyOffset > 0 ? sticky === "left" ? `left-${stickyOffset}` : `right-${stickyOffset}` : "";
+  const stickyStyling = "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      scope: "col",
+      className: `${paddingClasses3[padding]} ${alignClasses[align]} text-xs font-medium text-muted-foreground uppercase tracking-wider ${stickyClasses} ${stickyOffsetClasses} ${stickyStyling} ${className}`,
+      children
+    }
+  );
+}
+function DataTableCell({
+  children,
+  className = "",
+  align = "left",
+  padding = "md",
+  sticky,
+  stickyOffset = 0
+}) {
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  const paddingClasses3 = {
+    sm: "px-3 py-2",
+    md: "px-6 py-4",
+    lg: "px-8 py-6"
+  };
+  const stickyClasses = sticky ? `sticky ${sticky === "left" ? "left-0" : "right-0"} z-10` : "";
+  const stickyOffsetClasses = sticky && stickyOffset > 0 ? sticky === "left" ? `left-${stickyOffset}` : `right-${stickyOffset}` : "";
+  const stickyStyling = "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      className: `${paddingClasses3[padding]} whitespace-nowrap ${alignClasses[align]} text-sm ${stickyClasses} ${stickyOffsetClasses} ${stickyStyling} ${className}`,
+      children
+    }
+  );
+}
+function DataTableEmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  variant = "table"
+}) {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-20 h-20 text-primary-500 mx-auto mb-4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-6", children: description }),
+    action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: action })
+  ] });
+  if (variant === "div") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card card-padding text-center lg:p-24", children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 100, className: "px-6 py-12 text-center", children: content }) });
+}
+function DataTableLoadingState({
+  message = "Loading...",
+  rows = 5,
+  columns = 4
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card card-padding", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, { size: "md", color: "primary", className: "mx-auto mb-2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: message })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonTable, { rows, columns, showHeader: false })
+  ] });
+}
+function StatusBadge({
+  status,
+  variant = "default"
+}) {
+  const variantClasses5 = {
+    default: "bg-muted text-muted-foreground",
+    success: "bg-success text-success-dark",
+    warning: "bg-yellow-100 text-yellow-800",
+    error: "bg-red-100 text-red-800",
+    info: "bg-primary-100 text-primary-800"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `badge ${variantClasses5[variant]}`, children: status });
+}
+function DataTableActions({
+  children,
+  className = "",
+  enhanced = false
+}) {
+  const baseClasses = "flex items-center justify-end space-x-2 dt-actions";
+  const enhancedClasses = enhanced ? "px-2 py-1 rounded-md bg-card backdrop-blur-sm" : "";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${baseClasses} ${enhancedClasses} ${className}`, children });
+}
+function StickyActionsColumn({
+  children,
+  className = ""
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: containerClasses,
-      role: "status",
-      "aria-live": "polite",
-      "aria-label": message,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+      className: `border-l border-border shadow-[-1px_0_3px_-1px_rgba(0,0,0,0.02)] ${className}`,
+      children
+    }
+  );
+}
+function SharedTooltip({
+  id,
+  place = "top",
+  offset = 8,
+  delayShow = 200,
+  delayHide = 100,
+  className = "",
+  style = {},
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactTooltip.Tooltip,
+    {
+      id,
+      place,
+      offset,
+      delayShow,
+      delayHide,
+      className: `!bg-popover !text-popover-foreground !border !border-border !shadow-md !text-xs !px-2 !py-1 !rounded-md z-50 ${className}`,
+      style,
+      positionStrategy: "fixed",
+      render: children ? () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : void 0
+    }
+  );
+}
+function CountBadge({
+  count,
+  className = "",
+  size = "sm",
+  variant = "primary"
+}) {
+  const sizeClasses5 = {
+    sm: "text-xs px-1.5 py-0.5 min-w-[18px]",
+    md: "text-sm px-2 py-1 min-w-[20px]",
+    lg: "text-base px-2.5 py-1.5 min-w-[24px]"
+  };
+  const variantClasses5 = {
+    primary: "bg-ring ",
+    secondary: "bg-muted0 ",
+    success: "bg-green-500 ",
+    warning: "bg-yellow-500 ",
+    error: "bg-red-500 "
+  };
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-label": `Count: ${count}`,
+      className: `${sizeClasses5[size]} ${variantClasses5[variant]} rounded-full text-center font-medium ${className}`,
+      children: count
+    }
+  );
+}
+function ClearButton({
+  onClick,
+  className = "",
+  size = "sm",
+  variant = "overlay",
+  tooltipId,
+  tooltipContent = "Clear"
+}) {
+  const sizeClasses5 = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+  const iconSizeClasses2 = {
+    sm: "w-3 h-3",
+    md: "w-4 h-4",
+    lg: "w-5 h-5"
+  };
+  const variantClasses5 = {
+    overlay: "absolute -top-1 -right-1 bg-red-500  rounded-full flex items-center justify-center hover:bg-red-600 transition-colors cursor-pointer",
+    inline: "bg-red-500  rounded-full flex items-center justify-center hover:bg-red-600 transition-colors",
+    ghost: "text-muted-foreground hover:text-muted-foreground transition-colors"
+  };
+  const baseProps = {
+    onClick: (e) => {
+      e.stopPropagation();
+      onClick(e);
+    },
+    className: `${sizeClasses5[size]} ${variantClasses5[variant]} ${className}`,
+    title: tooltipContent
+  };
+  const tooltipProps = tooltipId ? {
+    "data-tooltip-id": tooltipId,
+    "data-tooltip-content": tooltipContent
+  } : {};
+  const Element = variant === "overlay" ? "span" : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(Element, { ...baseProps, ...tooltipProps, children: /* @__PURE__ */ jsxRuntime.jsx(ri.RiCloseLine, { className: iconSizeClasses2[size] }) });
+}
+function IconButtonWithCount({
+  icon,
+  label,
+  count = 0,
+  onClick,
+  onClear,
+  showLabel = true,
+  className = "",
+  buttonClassName = "",
+  countVariant = "primary",
+  clearVariant = "overlay",
+  tooltipId,
+  tooltipContent,
+  clearTooltipId,
+  clearTooltipContent = "Clear"
+}) {
+  const hasActiveCount = count > 0;
+  const shouldShowLabel = showLabel && !hasActiveCount;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      className: `btn-alt btn-md flex items-center space-x-1 relative ${buttonClassName} ${className}`,
+      "data-tooltip-id": tooltipId,
+      "data-tooltip-content": tooltipContent,
+      children: [
+        icon,
+        shouldShowLabel && label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: label }),
+        hasActiveCount && /* @__PURE__ */ jsxRuntime.jsx(CountBadge, { count, variant: countVariant }),
+        hasActiveCount && onClear && /* @__PURE__ */ jsxRuntime.jsx(
+          ClearButton,
+          {
+            onClick: onClear,
+            variant: clearVariant,
+            tooltipId: clearTooltipId,
+            tooltipContent: clearTooltipContent
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionButton({
+  icon: IconComponent,
+  label,
+  onClick,
+  href,
+  disabled = false,
+  size = "md",
+  iconOnly = false,
+  className = "",
+  title,
+  tooltipId,
+  tooltipPlace = "bottom",
+  tooltipOffset = 12,
+  tooltipDelayShow = 200,
+  tooltipDelayHide = 100,
+  type = "button",
+  variant,
+  terminalMode = false,
+  fill = false,
+  loading: externalLoading,
+  // Extract loading prop to prevent it from being passed to DOM
+  loadingIcon: LoadingIconComponent,
+  // Custom loading icon
+  disableLoadingSpin = false,
+  // Disable spin animation for custom loading icons
+  ...restProps
+}) {
+  const [loading, setLoading] = React4.useState(false);
+  const handleClick = React4.useCallback(async () => {
+    if (onClick && !disabled && !loading) {
+      setLoading(true);
+      try {
+        await onClick();
+      } catch (error) {
+        console.error("ActionButton onClick error:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [onClick, disabled, loading]);
+  const iconSizes = {
+    sm: terminalMode ? "w-4 h-4" : "w-4 h-4",
+    md: terminalMode ? "w-4 h-4" : "w-4 h-4",
+    lg: terminalMode ? "w-5 h-5" : "w-5 h-5"
+  };
+  const heightClasses = {
+    sm: terminalMode ? "" : "btn-sm",
+    md: terminalMode ? "" : "btn-md",
+    lg: terminalMode ? "" : "btn-lg"
+  };
+  const paddingClasses3 = iconOnly ? terminalMode ? "" : "p-2" : "px-3 py-1.5";
+  const t = nextIntlayer.useIntlayer("action-button");
+  const getVariantConfig = () => {
+    switch (variant) {
+      case "edit":
+        return {
+          icon: fill ? ri.RiEditFill : ri.RiEditLine,
+          label: t.edit,
+          className: "btn-secondary"
+        };
+      case "delete":
+        return {
+          icon: fill ? ri.RiDeleteBinFill : ri.RiDeleteBinLine,
+          label: t.delete,
+          className: "btn-danger"
+        };
+      case "deactivate":
+        return {
+          icon: fill ? ri.RiStopCircleFill : ri.RiStopCircleLine,
+          label: t.deactivate,
+          className: "bg-slate-50  text-slate-600 hover:bg-slate-100 hover:text-slate-700 border border-slate-200 transition-all duration-300 ease-in-out"
+        };
+      case "activate":
+        return {
+          icon: fill ? ri.RiPlayCircleFill : ri.RiPlayCircleLine,
+          label: t.activate,
+          className: "bg-emerald-50  text-emerald-600 hover:bg-emerald-100 hover:text-emerald-700 border border-emerald-200 transition-all duration-300 ease-in-out"
+        };
+      case "view":
+        return {
+          icon: fill ? ri.RiEyeFill : ri.RiEyeLine,
+          label: t.view,
+          className: "bg-muted  text-muted-foreground hover:bg-gray-100 hover:text-foreground border border-border transition-all duration-300 ease-in-out"
+        };
+      case "metrics":
+        return {
+          icon: fill ? ri.RiBarChartFill : ri.RiBarChartLine,
+          label: t.metrics,
+          className: "bg-purple-50  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
+        };
+      case "start":
+        return {
+          icon: fill ? ri.RiPlayFill : ri.RiPlayLine,
+          label: t.start,
+          className: "bg-green-50  text-green-600 hover:bg-green-100 hover:text-green-700 border border-green-200 transition-all duration-300 ease-in-out"
+        };
+      case "stop":
+        return {
+          icon: fill ? ri.RiStopFill : ri.RiStopLine,
+          label: t.stop,
+          className: "bg-red-50  text-red-600 hover:bg-red-100 hover:text-red-700 border border-red-200 transition-all duration-300 ease-in-out"
+        };
+      case "restart":
+        return {
+          icon: fill ? ri.RiRestartFill : ri.RiRestartLine,
+          label: t.restart,
+          className: "bg-orange-50  text-orange-600 hover:bg-orange-100 hover:text-orange-700 border border-orange-200 transition-all duration-300 ease-in-out"
+        };
+      case "pause":
+        return {
+          icon: fill ? ri.RiPauseFill : ri.RiPauseLine,
+          label: t.pause,
+          className: "bg-yellow-50  text-yellow-600 hover:bg-yellow-100 hover:text-yellow-700 border border-yellow-200 transition-all duration-300 ease-in-out"
+        };
+      case "clone":
+        return {
+          icon: fill ? ri.RiFileCopyFill : ri.RiFileCopyLine,
+          label: t.clone,
+          className: "bg-indigo-50  text-indigo-600 hover:bg-indigo-100 hover:text-indigo-700 border border-indigo-200 transition-all duration-300 ease-in-out"
+        };
+      default:
+        return null;
+    }
+  };
+  const variantConfig = getVariantConfig();
+  const variantClasses5 = {
+    primary: "btn-primary",
+    secondary: "btn-secondary",
+    danger: "btn-danger",
+    success: "bg-green-50  text-green-600 hover:bg-green-100 hover:text-green-700 border border-green-200 transition-all duration-300 ease-in-out",
+    warning: "bg-yellow-50  text-yellow-600 hover:bg-yellow-100 hover:text-yellow-700 border border-yellow-200 transition-all duration-300 ease-in-out",
+    info: "bg-muted  text-muted-foreground hover:bg-primary hover:text-primary-foreground border border-ring transition-all duration-300 ease-in-out",
+    metrics: "bg-purple-50  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
+  };
+  let variantClass = variantConfig ? variantConfig.className : variant ? variantClasses5[variant] : "";
+  if (terminalMode && variantClass) {
+    const hoverMatch = variantClass.match(/hover:text-(\w+)-(\d+)/);
+    const hoverColor = hoverMatch ? `hover:text-${hoverMatch[1]}-${hoverMatch[2]}` : "hover:text-muted-foreground";
+    variantClass = `text-muted-foreground ${hoverColor} transition-colors duration-200`;
+  }
+  const isDisabled = disabled || loading || externalLoading;
+  const buttonContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    loading || externalLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${iconSizes[size]} flex items-center justify-center flex-shrink-0 ${terminalMode ? "text-muted-foreground p-0.5" : ""}`,
+        "aria-hidden": "true",
+        children: LoadingIconComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+          LoadingIconComponent,
+          {
+            className: `w-full h-full ${disableLoadingSpin ? "" : "animate-spin-slow"}`,
+            "aria-hidden": "true"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex items-center justify-center space-x-2 mb-6",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0s]" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.2s]" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.4s]" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.6s]" })
-            ]
+            className: "w-full h-full border-2 border-current border-t-transparent rounded-full animate-spin",
+            "aria-hidden": "true"
           }
-        ),
-        showMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
+        )
+      }
+    ) : (variantConfig?.icon || IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${iconSizes[size]} flex items-center justify-center flex-shrink-0`,
+        "aria-hidden": "true",
+        children: variantConfig?.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          variantConfig.icon,
           {
-            className: "text-sm text-secondary-foreground animate-pulse",
-            "aria-live": "polite",
-            children: message
+            className: "w-full h-full",
+            "aria-hidden": "true"
           }
-        ) })
-      ] })
-    }
-  );
-};
-var LoadingSpinner_default = LoadingSpinner;
-function PageHeader({
+        ) : IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "w-full h-full", "aria-hidden": "true" }) : null
+      }
+    ),
+    !iconOnly && (restProps.children ? restProps.children : (variantConfig?.label || label) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children: variantConfig?.label || label }))
+  ] });
+  const accessibleLabel = title || (iconOnly ? variantConfig?.label || label : void 0);
+  const buttonAriaLabel = iconOnly && !accessibleLabel ? variantConfig?.label || label || "Action button" : accessibleLabel;
+  const tooltipContent = title || (iconOnly ? variantConfig?.label || label : void 0);
+  const buttonClassName = `
+
+    ${terminalMode ? "btn-terminal" : `btn ${variantClass} ${paddingClasses3} ${heightClasses[size]}  ${className} ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`}`;
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NextLink__default.default,
+        {
+          href,
+          title: typeof title === "string" ? title : void 0,
+          "aria-label": iconOnly ? typeof buttonAriaLabel === "string" ? buttonAriaLabel : void 0 : void 0,
+          onClick: handleClick,
+          className: buttonClassName,
+          "data-tooltip-id": tooltipId,
+          "aria-busy": loading || externalLoading ? "true" : void 0,
+          ...restProps,
+          children: buttonContent
+        }
+      ),
+      tooltipId && /* @__PURE__ */ jsxRuntime.jsx(
+        SharedTooltip,
+        {
+          id: tooltipId,
+          place: tooltipPlace,
+          offset: tooltipOffset,
+          delayShow: tooltipDelayShow,
+          delayHide: tooltipDelayHide,
+          children: tooltipContent
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type,
+        onClick: handleClick,
+        title: typeof title === "string" ? title : void 0,
+        "aria-label": iconOnly ? typeof buttonAriaLabel === "string" ? buttonAriaLabel : void 0 : void 0,
+        className: buttonClassName,
+        "data-tooltip-id": tooltipId,
+        "aria-busy": loading || externalLoading ? "true" : void 0,
+        ...restProps,
+        disabled: isDisabled,
+        children: buttonContent
+      }
+    ),
+    tooltipId && /* @__PURE__ */ jsxRuntime.jsx(
+      SharedTooltip,
+      {
+        id: tooltipId,
+        place: tooltipPlace,
+        offset: tooltipOffset,
+        delayShow: tooltipDelayShow,
+        delayHide: tooltipDelayHide,
+        children: tooltipContent
+      }
+    )
+  ] });
+}
+function SearchCard({
+  title,
+  count,
+  total,
+  actionButton,
+  children,
+  className = "",
   icon: Icon,
+  description
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `card p-4 lg:p-6 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SearchCardHeader,
+      {
+        title,
+        count,
+        total,
+        actionButton,
+        icon: Icon,
+        description
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SearchCardContent, { children })
+  ] });
+}
+function SearchCardHeader({
   title,
-  subtitle,
-  rightContent,
-  className = ""
+  count,
+  total,
+  actionButton,
+  icon: Icon,
+  description
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mb-6 lg:mb-8 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "header-layout", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
-      Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-6 h-6 lg:w-8 lg:h-8 flex-shrink-0" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 mb-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 min-w-0 flex-1", children: [
+      Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-6 h-6 lg:w-8 lg:h-8 text-foreground flex-shrink-0" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl lg:text-3xl font-bold text-foreground  truncate", children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm lg:text-base text-muted-foreground", children: subtitle })
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg lg:text-2xl font-bold  truncate", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground hidden md:block", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 lg:mt-2 text-xs text-secondary-foreground", children: [
+          count,
+          " of ",
+          total,
+          " ",
+          title.toLowerCase()
+        ] })
       ] })
     ] }),
-    rightContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 lg:space-x-3 flex-shrink-0", children: rightContent })
-  ] }) });
+    actionButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 lg:gap-3 flex-shrink-0", children: actionButton })
+  ] });
 }
-function FormSection({
-  title,
-  description,
+function SearchCardContent({
   children,
   className = ""
 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+}
+function SearchInput({
+  placeholder,
+  value,
+  onChange,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    FormInput,
+    {
+      label: "",
+      name: "search",
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      icon: {
+        left: /* @__PURE__ */ jsxRuntime.jsx(ri.RiSearchLine, { className: "w-4 h-4 text-muted-foreground" })
+      },
+      className: "mb-0"
+    }
+  ) });
+}
+function FilterSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  className = "",
+  multiple = false,
+  searchable = true
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SmartSelect,
+    {
+      value,
+      onChange,
+      options,
+      placeholder,
+      className: `form-input form-input-md ${className}`,
+      keepOpen: multiple,
+      multiple,
+      searchable
+    }
+  );
+}
+function RefreshButton({
+  onClick,
+  isLoading = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ActionButton,
+    {
+      icon: ri.RiRefreshLine,
+      onClick,
+      disabled: isLoading,
+      loading: isLoading,
+      iconOnly: true,
+      size: "md",
+      variant: "secondary",
+      tooltipId: "refresh-button-tooltip",
+      title: "Refresh",
+      tooltipPlace: "top",
+      className: `btn-alt ${className}`
+    }
+  );
+}
+function FilterToggleButton({
+  isOpen,
+  onClick,
+  onClear,
+  activeCount = 0,
+  className = ""
+}) {
+  const tooltipText = activeCount > 0 ? `${activeCount} filter${activeCount === 1 ? "" : "s"} active` : "Filters";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      IconButtonWithCount,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(ri.RiFilterLine, { className: "w-4 h-4" }),
+        label: "Filters",
+        count: activeCount,
+        onClick,
+        onClear,
+        className,
+        tooltipId: "filter-button-tooltip",
+        tooltipContent: tooltipText,
+        clearTooltipId: "clear-filters-tooltip",
+        clearTooltipContent: "Clear all filters"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SharedTooltip, { id: "filter-button-tooltip" })
+  ] });
+}
+function MobileSearchLayout({
+  searchInput,
+  filters,
+  viewControls,
+  activeFilterCount = 0,
+  onClearFilters,
+  className = "",
+  filterInline = false,
+  searchButton
+}) {
+  const [showFilters, setShowFilters] = React4.useState(false);
+  if (filterInline) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-4 ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: searchInput }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SmartDropdown,
+            {
+              isOpen: showFilters,
+              onClose: () => setShowFilters(false),
+              width: 600,
+              maxHeight: 320,
+              trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                FilterToggleButton,
+                {
+                  isOpen: showFilters,
+                  onClick: () => setShowFilters(!showFilters),
+                  activeCount: activeFilterCount,
+                  onClear: onClearFilters
+                }
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: filters }) }) })
+            }
+          ) }),
+          viewControls && viewControls
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-col lg:gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col lg:flex-row gap-3", children: filters }),
+        searchButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: searchButton })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(SharedTooltip, { id: "clear-filters-tooltip" })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-4 ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium ", children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: searchInput }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SmartDropdown,
+          {
+            isOpen: showFilters,
+            onClose: () => setShowFilters(false),
+            width: 600,
+            maxHeight: 320,
+            trigger: /* @__PURE__ */ jsxRuntime.jsx(
+              FilterToggleButton,
+              {
+                isOpen: showFilters,
+                onClick: () => setShowFilters(!showFilters),
+                activeCount: activeFilterCount,
+                onClear: onClearFilters
+              }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: filters }) }) })
+          }
+        ),
+        viewControls && viewControls
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children })
+    /* @__PURE__ */ jsxRuntime.jsx(SharedTooltip, { id: "clear-filters-tooltip" })
   ] });
 }
-function Grid({
-  children,
-  cols = 1,
-  gap = 4,
+function ViewToggle({
+  currentView,
+  onViewChange,
   className = ""
 }) {
-  const colClasses = {
-    1: "grid-cols-1",
-    2: "grid-cols-1 md:grid-cols-2",
-    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
-    5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
-    6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
-    12: "grid-cols-12"
-  };
-  const gapClasses = {
-    1: "gap-1",
-    2: "gap-2",
-    3: "gap-3",
-    4: "gap-4",
-    6: "gap-6",
-    8: "gap-8"
+  const toggleView = () => {
+    onViewChange(currentView === "cards" ? "list" : "cards");
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
-}
-function GridItem({
-  children,
-  span = 1,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `col-span-${span} ${className}`, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ActionButton,
+    {
+      icon: currentView === "cards" ? ri.RiGridFill : ri.RiListUnordered,
+      onClick: toggleView,
+      iconOnly: true,
+      size: "md",
+      variant: "secondary",
+      tooltipId: "view-toggle-tooltip",
+      title: currentView === "cards" ? "Switch to List View" : "Switch to Card View",
+      tooltipPlace: "top",
+      className: `btn-alt ${className}`
+    }
+  );
 }
 
-exports.AccordionCard = AccordionCard;
+// src/index.ts
+var VERSION = "0.1.3";
+
+exports.ActionButton = ActionButton;
 exports.Badge = Badge;
 exports.Button = Button_default;
 exports.Card = Card;
-exports.ClickableCard = ClickableCard;
-exports.ErrorBadge = ErrorBadge;
+exports.ConfirmDialog = ConfirmDialog_default;
+exports.Container = Container;
+exports.DataTable = DataTable;
+exports.DataTableActions = DataTableActions;
+exports.DataTableBody = DataTableBody;
+exports.DataTableCell = DataTableCell;
+exports.DataTableEmptyState = DataTableEmptyState;
+exports.DataTableHeader = DataTableHeader;
+exports.DataTableHeaderCell = DataTableHeaderCell;
+exports.DataTableLoadingState = DataTableLoadingState;
+exports.DataTableRow = DataTableRow;
+exports.EmptyState = EmptyState_default;
+exports.FilterSelect = FilterSelect;
+exports.FilterToggleButton = FilterToggleButton;
 exports.FormInput = FormInput;
 exports.FormSection = FormSection;
-exports.GrayBadge = GrayBadge;
 exports.Grid = Grid;
-exports.GridItem = GridItem;
-exports.HeaderCard = HeaderCard;
-exports.InfoBadge = InfoBadge;
+exports.IconButtonWithCount = IconButtonWithCount;
+exports.InfoBox = InfoBox;
 exports.Link = Link_default;
 exports.LoadingSpinner = LoadingSpinner_default;
+exports.MobileSearchLayout = MobileSearchLayout;
 exports.Modal = Modal;
 exports.PageHeader = PageHeader;
-exports.PrimaryBadge = PrimaryBadge;
-exports.SimpleCard = SimpleCard;
+exports.RefreshButton = RefreshButton;
+exports.SearchCard = SearchCard;
+exports.SearchCardContent = SearchCardContent;
+exports.SearchCardHeader = SearchCardHeader;
+exports.SearchInput = SearchInput;
+exports.SharedTooltip = SharedTooltip;
+exports.Skeleton = Skeleton;
+exports.SkeletonCard = SkeletonCard;
+exports.SkeletonEnvironmentsList = SkeletonEnvironmentsList;
+exports.SkeletonForm = SkeletonForm;
+exports.SkeletonGameCard = SkeletonGameCard;
+exports.SkeletonGameServerCard = SkeletonGameServerCard;
+exports.SkeletonGameServerCards = SkeletonGameServerCards;
+exports.SkeletonGameServerTable = SkeletonGameServerTable;
+exports.SkeletonGamesTable = SkeletonGamesTable;
+exports.SkeletonItem = SkeletonItem;
+exports.SkeletonList = SkeletonList;
+exports.SkeletonNodeCard = SkeletonNodeCard;
+exports.SkeletonNodeCards = SkeletonNodeCards;
+exports.SkeletonNodeTable = SkeletonNodeTable;
+exports.SkeletonRecentActivity = SkeletonRecentActivity;
+exports.SkeletonSearchCard = SkeletonSearchCard;
+exports.SkeletonStats = SkeletonStats;
+exports.SkeletonTable = SkeletonTable;
+exports.SkeletonTenantCard = SkeletonTenantCard;
+exports.SkeletonUserCard = SkeletonUserCard;
+exports.SmartDropdown = SmartDropdown;
+exports.SmartSelect = SmartSelect;
+exports.Spinner = Spinner_default;
 exports.StatusBadge = StatusBadge;
-exports.StatusCard = StatusCard;
-exports.SuccessBadge = SuccessBadge;
+exports.StickyActionsColumn = StickyActionsColumn;
 exports.Switch = Switch;
-exports.WarningBadge = WarningBadge;
+exports.Typography = Typography;
+exports.VERSION = VERSION;
+exports.ViewToggle = ViewToggle;
+exports.useConfirmDialog = useConfirmDialog;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map