@lindle/linoardo 1.0.46 → 1.0.48

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React4 = require('react');
+var React = require('react');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
@@ -29,7 +29,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var TurndownService__default = /*#__PURE__*/_interopDefault(TurndownService);
 
@@ -41,87 +41,79 @@ var iconBaseClasses = {
 };
 
 // src/Containment/Button/states.button.ts
-var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
+var base = "btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
 var blackAndWhitePaletteClasses = {
-  solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent",
-  text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent",
-  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
-  underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20",
-  rounded: "rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40"
+  solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
+  outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white dark:border-white dark:text-white dark:bg-transparent dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
+  ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent dark:text-white dark:bg-neutral-800 dark:hover:bg-neutral-700",
+  text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent dark:text-white dark:hover:bg-neutral-800",
+  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20 dark:bg-white/10 dark:text-white dark:border-white/30 dark:hover:bg-white/20",
+  underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20 dark:text-white dark:hover:bg-neutral-800",
+  sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40 dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40"
 };
 var paletteVariantClasses = {
   primary: {
     solid: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
     sharp: "rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
-    outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary",
-    ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent",
-    text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent",
-    filled: "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25",
-    underlined: "bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25",
-    rounded: "rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25"
+    outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary dark:bg-gray-900 dark:text-primary dark:border-primary/60 dark:hover:bg-primary dark:hover:text-white",
+    ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent dark:bg-primary/20 dark:hover:bg-primary/30",
+    text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent dark:hover:bg-primary/20",
+    filled: "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25 dark:bg-primary/20 dark:border-primary/40 dark:hover:bg-primary/30",
+    underlined: "bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25 dark:hover:bg-primary/15"
   },
   neutral: {
     solid: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
     sharp: "rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
-    outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400",
-    ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent",
-    text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent",
-    filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300",
-    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300",
-    rounded: "rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300"
+    outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200 dark:hover:text-gray-900",
+    ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
+    text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent dark:text-gray-200 dark:hover:bg-gray-800",
+    filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
+    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300 dark:text-gray-100 dark:hover:bg-gray-800"
   },
   info: {
     solid: "bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
     sharp: "rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
-    outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400",
-    ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent",
-    text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent",
-    filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200",
-    underlined: "bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200",
-    rounded: "rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200"
+    outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400 dark:bg-gray-900 dark:text-sky-400 dark:border-sky-500/70 dark:hover:bg-sky-500 dark:hover:text-white",
+    ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent dark:text-sky-300 dark:bg-sky-900/40 dark:hover:bg-sky-900/55",
+    text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent dark:text-sky-300 dark:hover:bg-sky-900/35",
+    filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200 dark:bg-sky-900/35 dark:text-sky-200 dark:border-sky-700/60 dark:hover:bg-sky-900/50",
+    underlined: "bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200 dark:text-sky-300 dark:hover:bg-sky-900/30"
   },
   success: {
     solid: "bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
     sharp: "rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
-    outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400",
-    ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent",
-    text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent",
-    filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200",
-    underlined: "bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200",
-    rounded: "rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200"
+    outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400 dark:bg-gray-900 dark:text-emerald-400 dark:border-emerald-500/70 dark:hover:bg-emerald-500 dark:hover:text-white",
+    ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent dark:text-emerald-300 dark:bg-emerald-900/35 dark:hover:bg-emerald-900/50",
+    text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent dark:text-emerald-300 dark:hover:bg-emerald-900/30",
+    filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200 dark:bg-emerald-900/35 dark:text-emerald-200 dark:border-emerald-700/60 dark:hover:bg-emerald-900/50",
+    underlined: "bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200 dark:text-emerald-300 dark:hover:bg-emerald-900/30"
   },
   warning: {
     solid: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
     sharp: "rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
-    outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400",
-    ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent",
-    text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent",
-    filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200",
-    underlined: "bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200",
-    rounded: "rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200"
+    outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400 dark:bg-gray-900 dark:text-amber-300 dark:border-amber-500/70 dark:hover:bg-amber-500 dark:hover:text-white",
+    ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent dark:text-amber-300 dark:bg-amber-900/35 dark:hover:bg-amber-900/50",
+    text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent dark:text-amber-300 dark:hover:bg-amber-900/30",
+    filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200 dark:bg-amber-900/35 dark:text-amber-200 dark:border-amber-700/60 dark:hover:bg-amber-900/50",
+    underlined: "bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200 dark:text-amber-300 dark:hover:bg-amber-900/30"
   },
   danger: {
     solid: "bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
     sharp: "rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
-    outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400",
-    ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent",
-    text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent",
-    filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200",
-    underlined: "bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200",
-    rounded: "rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200"
+    outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400 dark:bg-gray-900 dark:text-red-400 dark:border-red-500/70 dark:hover:bg-red-500 dark:hover:text-white",
+    ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent dark:text-red-300 dark:bg-red-900/35 dark:hover:bg-red-900/50",
+    text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent dark:text-red-300 dark:hover:bg-red-900/30",
+    filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200 dark:bg-red-900/35 dark:text-red-200 dark:border-red-700/60 dark:hover:bg-red-900/50",
+    underlined: "bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200 dark:text-red-300 dark:hover:bg-red-900/30"
   },
   surface: {
-    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
-    sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
-    outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200",
-    ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent",
-    text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent",
-    filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200",
-    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200",
-    rounded: "rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200"
+    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+    sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+    outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200 dark:border-gray-600 dark:text-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800",
+    ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent dark:text-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700",
+    text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent dark:text-gray-100 dark:hover:bg-gray-800",
+    filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
+    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200 dark:text-gray-100 dark:hover:bg-gray-800"
   },
   bw: blackAndWhitePaletteClasses
 };
@@ -177,7 +169,7 @@ var iconOnlyIconSizeClasses = {
   large: "text-xl",
   "x-large": "text-2xl"
 };
-var Button = React4__namespace.forwardRef(
+var ButtonBase = React__namespace.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -232,92 +224,148 @@ var Button = React4__namespace.forwardRef(
     );
   }
 );
-Button.displayName = "Button";
+ButtonBase.displayName = "Button";
+var isButtonElement = (element) => {
+  if (!React__namespace.isValidElement(element)) {
+    return false;
+  }
+  const elementType = element.type;
+  return element.type === ButtonBase || elementType.displayName === ButtonBase.displayName;
+};
+var ButtonGroup = React__namespace.forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    block = false,
+    disabled = false,
+    loading = false,
+    iconOnly,
+    vertical = false,
+    attached = true,
+    className,
+    role,
+    children,
+    ...rest
+  } = props;
+  const groupBase = vertical ? "inline-flex w-fit flex-col" : "inline-flex w-fit items-stretch";
+  const blockClass = block ? "w-full [&>*]:flex-1" : void 0;
+  const attachedClass = attached ? vertical ? "[&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none" : "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none" : void 0;
+  const enhanceChild = (child) => {
+    if (!React__namespace.isValidElement(child)) {
+      return child;
+    }
+    if (isButtonElement(child)) {
+      return React__namespace.cloneElement(child, {
+        variant: child.props.variant ?? variant,
+        color: child.props.color ?? color,
+        size: child.props.size ?? size,
+        block: child.props.block ?? block,
+        disabled: child.props.disabled ?? disabled,
+        loading: child.props.loading ?? loading,
+        iconOnly: child.props.iconOnly ?? iconOnly
+      });
+    }
+    if (child.props && typeof child.props === "object" && "children" in child.props) {
+      const nestedChildren = React__namespace.Children.map(child.props.children, enhanceChild);
+      if (nestedChildren !== child.props.children) {
+        return React__namespace.cloneElement(child, void 0, nestedChildren);
+      }
+    }
+    return child;
+  };
+  const resolvedChildren = React__namespace.Children.map(children, enhanceChild);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: role ?? "group",
+      className: tailwindMerge.twMerge(groupBase, blockClass, attachedClass, className),
+      children: resolvedChildren
+    }
+  );
+});
+ButtonGroup.displayName = "Button.Group";
+var Button = ButtonBase;
+Button.Group = ButtonGroup;
 var Button_default = Button;
 
 // src/Containment/Chip/states.chip.ts
-var chipBaseClasses = "inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
-var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2";
+var chipBaseClasses = "inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900";
+var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900";
 var blackAndWhitePaletteClasses2 = {
-  solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20",
-  text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20",
-  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
-  underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20",
-  rounded: "rounded-full bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white"
+  solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
+  outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-transparent dark:text-white dark:border-white dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
+  ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700",
+  text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20 dark:text-white dark:hover:bg-neutral-800",
+  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20 dark:bg-white/10 dark:text-white dark:border-white/30 dark:hover:bg-white/20",
+  underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20 dark:text-white dark:border-white dark:hover:text-white/80",
+  sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900"
 };
 var paletteVariantClasses2 = {
   primary: {
     solid: "bg-primary text-white border border-primary hover:bg-primary/90",
     sharp: "rounded-none bg-primary text-white border border-primary hover:bg-primary/90",
-    outline: "bg-transparent text-primary border border-primary hover:bg-primary/10",
-    ghost: "bg-primary/15 text-primary border border-transparent hover:bg-primary/25",
-    text: "bg-transparent text-primary border border-transparent hover:text-primary/80",
-    filled: "bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20",
-    underlined: "bg-transparent text-primary border-0 border-b-2 border-primary px-0 rounded-none hover:text-primary/80",
-    rounded: "bg-white text-primary border border-primary/40 shadow-sm hover:bg-primary/5"
+    outline: "bg-transparent text-primary border border-primary hover:bg-primary/10 dark:border-primary/60 dark:hover:bg-primary/20",
+    ghost: "bg-primary/15 text-primary border border-transparent hover:bg-primary/25 dark:bg-primary/25 dark:hover:bg-primary/35",
+    text: "bg-transparent text-primary border border-transparent hover:text-primary/80 dark:hover:bg-primary/15",
+    filled: "bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20 dark:bg-primary/20 dark:border-primary/40 dark:hover:bg-primary/30",
+    underlined: "bg-transparent text-primary border-0 border-b-2 border-primary px-0 rounded-none hover:text-primary/80 dark:hover:bg-primary/15"
   },
   neutral: {
     solid: "bg-gray-900 text-white border border-gray-900 hover:bg-gray-800",
     sharp: "rounded-none bg-gray-900 text-white border border-gray-900 hover:bg-gray-800",
-    outline: "bg-transparent text-gray-900 border border-gray-500 hover:bg-gray-100",
-    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200",
-    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-700",
-    filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300",
-    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-500 px-0 rounded-none hover:text-gray-700",
-    rounded: "bg-white text-gray-900 border border-gray-300 shadow-sm hover:bg-gray-100"
+    outline: "bg-transparent text-gray-900 border border-gray-500 hover:bg-gray-100 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-800",
+    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
+    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-700 dark:text-gray-100 dark:hover:bg-gray-800",
+    filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
+    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-500 px-0 rounded-none hover:text-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-800"
   },
   info: {
     solid: "bg-sky-500 text-white border border-sky-500 hover:bg-sky-600",
     sharp: "rounded-none bg-sky-500 text-white border border-sky-500 hover:bg-sky-600",
-    outline: "bg-transparent text-sky-600 border border-sky-500 hover:bg-sky-50",
-    ghost: "bg-sky-100 text-sky-700 border border-transparent hover:bg-sky-200",
-    text: "bg-transparent text-sky-600 border border-transparent hover:text-sky-700",
-    filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200",
-    underlined: "bg-transparent text-sky-600 border-0 border-b-2 border-sky-500 px-0 rounded-none hover:text-sky-700",
-    rounded: "bg-white text-sky-700 border border-sky-200 shadow-sm hover:bg-sky-50"
+    outline: "bg-transparent text-sky-600 border border-sky-500 hover:bg-sky-50 dark:text-sky-300 dark:border-sky-500/70 dark:hover:bg-sky-900/30",
+    ghost: "bg-sky-100 text-sky-700 border border-transparent hover:bg-sky-200 dark:bg-sky-900/35 dark:text-sky-200 dark:hover:bg-sky-900/50",
+    text: "bg-transparent text-sky-600 border border-transparent hover:text-sky-700 dark:text-sky-300 dark:hover:bg-sky-900/30",
+    filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 dark:bg-sky-900/35 dark:text-sky-200 dark:border-sky-700/60 dark:hover:bg-sky-900/50",
+    underlined: "bg-transparent text-sky-600 border-0 border-b-2 border-sky-500 px-0 rounded-none hover:text-sky-700 dark:text-sky-300 dark:border-sky-500/70 dark:hover:bg-sky-900/30"
   },
   success: {
     solid: "bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600",
     sharp: "rounded-none bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600",
-    outline: "bg-transparent text-emerald-600 border border-emerald-500 hover:bg-emerald-50",
-    ghost: "bg-emerald-100 text-emerald-700 border border-transparent hover:bg-emerald-200",
-    text: "bg-transparent text-emerald-600 border border-transparent hover:text-emerald-700",
-    filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200",
-    underlined: "bg-transparent text-emerald-600 border-0 border-b-2 border-emerald-500 px-0 rounded-none hover:text-emerald-700",
-    rounded: "bg-white text-emerald-700 border border-emerald-200 shadow-sm hover:bg-emerald-50"
+    outline: "bg-transparent text-emerald-600 border border-emerald-500 hover:bg-emerald-50 dark:text-emerald-300 dark:border-emerald-500/70 dark:hover:bg-emerald-900/30",
+    ghost: "bg-emerald-100 text-emerald-700 border border-transparent hover:bg-emerald-200 dark:bg-emerald-900/35 dark:text-emerald-200 dark:hover:bg-emerald-900/50",
+    text: "bg-transparent text-emerald-600 border border-transparent hover:text-emerald-700 dark:text-emerald-300 dark:hover:bg-emerald-900/30",
+    filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 dark:bg-emerald-900/35 dark:text-emerald-200 dark:border-emerald-700/60 dark:hover:bg-emerald-900/50",
+    underlined: "bg-transparent text-emerald-600 border-0 border-b-2 border-emerald-500 px-0 rounded-none hover:text-emerald-700 dark:text-emerald-300 dark:border-emerald-500/70 dark:hover:bg-emerald-900/30"
   },
   warning: {
     solid: "bg-amber-500 text-white border border-amber-500 hover:bg-amber-600",
     sharp: "rounded-none bg-amber-500 text-white border border-amber-500 hover:bg-amber-600",
-    outline: "bg-transparent text-amber-700 border border-amber-500 hover:bg-amber-50",
-    ghost: "bg-amber-100 text-amber-800 border border-transparent hover:bg-amber-200",
-    text: "bg-transparent text-amber-700 border border-transparent hover:text-amber-800",
-    filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200",
-    underlined: "bg-transparent text-amber-700 border-0 border-b-2 border-amber-500 px-0 rounded-none hover:text-amber-800",
-    rounded: "bg-white text-amber-700 border border-amber-200 shadow-sm hover:bg-amber-50"
+    outline: "bg-transparent text-amber-700 border border-amber-500 hover:bg-amber-50 dark:text-amber-300 dark:border-amber-500/70 dark:hover:bg-amber-900/30",
+    ghost: "bg-amber-100 text-amber-800 border border-transparent hover:bg-amber-200 dark:bg-amber-900/35 dark:text-amber-200 dark:hover:bg-amber-900/50",
+    text: "bg-transparent text-amber-700 border border-transparent hover:text-amber-800 dark:text-amber-300 dark:hover:bg-amber-900/30",
+    filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 dark:bg-amber-900/35 dark:text-amber-200 dark:border-amber-700/60 dark:hover:bg-amber-900/50",
+    underlined: "bg-transparent text-amber-700 border-0 border-b-2 border-amber-500 px-0 rounded-none hover:text-amber-800 dark:text-amber-300 dark:border-amber-500/70 dark:hover:bg-amber-900/30"
   },
   danger: {
     solid: "bg-red-500 text-white border border-red-500 hover:bg-red-600",
     sharp: "rounded-none bg-red-500 text-white border border-red-500 hover:bg-red-600",
-    outline: "bg-transparent text-red-600 border border-red-500 hover:bg-red-50",
-    ghost: "bg-red-100 text-red-700 border border-transparent hover:bg-red-200",
-    text: "bg-transparent text-red-600 border border-transparent hover:text-red-700",
-    filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200",
-    underlined: "bg-transparent text-red-600 border-0 border-b-2 border-red-500 px-0 rounded-none hover:text-red-700",
-    rounded: "bg-white text-red-600 border border-red-200 shadow-sm hover:bg-red-50"
+    outline: "bg-transparent text-red-600 border border-red-500 hover:bg-red-50 dark:text-red-300 dark:border-red-500/70 dark:hover:bg-red-900/30",
+    ghost: "bg-red-100 text-red-700 border border-transparent hover:bg-red-200 dark:bg-red-900/35 dark:text-red-200 dark:hover:bg-red-900/50",
+    text: "bg-transparent text-red-600 border border-transparent hover:text-red-700 dark:text-red-300 dark:hover:bg-red-900/30",
+    filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 dark:bg-red-900/35 dark:text-red-200 dark:border-red-700/60 dark:hover:bg-red-900/50",
+    underlined: "bg-transparent text-red-600 border-0 border-b-2 border-red-500 px-0 rounded-none hover:text-red-700 dark:text-red-300 dark:border-red-500/70 dark:hover:bg-red-900/30"
   },
   surface: {
-    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50",
-    sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50",
-    outline: "bg-transparent text-gray-900 border border-gray-300 hover:bg-gray-50",
-    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200",
-    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-600",
-    filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white",
-    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-400 px-0 rounded-none hover:text-gray-600",
-    rounded: "bg-white text-gray-900 border border-gray-200 shadow-sm hover:bg-gray-50"
+    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+    sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+    outline: "bg-transparent text-gray-900 border border-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-800",
+    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
+    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-600 dark:text-gray-100 dark:hover:bg-gray-800",
+    filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
+    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-400 px-0 rounded-none hover:text-gray-600 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-800"
   },
   bw: blackAndWhitePaletteClasses2
 };
@@ -357,7 +405,7 @@ var chipSizeClasses = {
   large: "h-8 text-sm px-3",
   "x-large": "h-9 text-base px-3.5"
 };
-var Chip = React4.forwardRef(
+var Chip = React.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -383,7 +431,7 @@ var Chip = React4.forwardRef(
     const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;
     const pillClass = pill ? "rounded-full" : "rounded-lg";
     const cursorClass = disabled ? "pointer-events-none opacity-50" : isInteractive ? "cursor-pointer" : "cursor-default";
-    const selectedClass = selected ? "ring-2 ring-current/50 ring-offset-2 ring-offset-white" : void 0;
+    const selectedClass = selected ? "ring-2 ring-current/50 ring-offset-2 ring-offset-white dark:ring-offset-gray-900" : void 0;
     const resolvedRole = disabled ? role : role ?? (isInteractive ? "button" : void 0);
     const resolvedTabIndex = disabled ? -1 : tabIndex ?? (isInteractive ? 0 : void 0);
     const prependIconClassName = resolveIconClassName2(prependIcon);
@@ -485,14 +533,14 @@ var placementGeometries = {
   }
 };
 var badgePaletteClasses = {
-  primary: "bg-primary text-white",
-  neutral: "bg-gray-500 text-white",
-  info: "bg-sky-500 text-white",
-  success: "bg-emerald-500 text-white",
-  warning: "bg-amber-500 text-white",
-  danger: "bg-red-500 text-white",
-  surface: "bg-white text-gray-900 border border-gray-200",
-  bw: "bg-white text-black border border-black"
+  primary: "bg-primary text-white dark:bg-primary dark:text-white",
+  neutral: "bg-gray-500 text-white dark:bg-gray-600 dark:text-white",
+  info: "bg-sky-500 text-white dark:bg-sky-500 dark:text-white",
+  success: "bg-emerald-500 text-white dark:bg-emerald-500 dark:text-white",
+  warning: "bg-amber-500 text-white dark:bg-amber-500 dark:text-white",
+  danger: "bg-red-500 text-white dark:bg-red-500 dark:text-white",
+  surface: "bg-white text-gray-900 border border-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700",
+  bw: "bg-white text-black border border-black dark:bg-black dark:text-white dark:border-white/70"
 };
 var resolvePlacementGeometry = (placement, overlap) => {
   const group = placementGeometries[placement] ?? placementGeometries["top-end"];
@@ -554,7 +602,7 @@ var Badge = ({
   className,
   ...rest
 }) => {
-  const hasChildren = React4__namespace.Children.count(children) > 0;
+  const hasChildren = React__namespace.Children.count(children) > 0;
   const iconClassName = resolveIconClassName3(icon);
   const isNumberContent = typeof content === "number" && Number.isFinite(content);
   let displayValue = content;
@@ -612,13 +660,13 @@ var Badge = ({
   const badgeContentClasses = tailwindMerge.twMerge(
     "inline-flex items-center justify-center whitespace-nowrap rounded-full px-2.5 py-1.5 text-xs font-semibold leading-none min-w-6 min-h-6",
     paletteClass,
-    bordered ? "ring-2 ring-white ring-offset-0" : void 0,
+    bordered ? "ring-2 ring-white ring-offset-0 dark:ring-gray-900" : void 0,
     badgeClassName
   );
   const badgeDotClasses = tailwindMerge.twMerge(
     "inline-block h-2 w-2 rounded-full",
     paletteClass,
-    bordered ? "ring-2 ring-white ring-offset-0" : void 0,
+    bordered ? "ring-2 ring-white ring-offset-0 dark:ring-gray-900" : void 0,
     badgeClassName
   );
   const rootClasses = tailwindMerge.twMerge(
@@ -635,9 +683,9 @@ var Badge = ({
 };
 var Badge_default = Badge;
 var Alert = ({ className, children, ...rest }) => {
-  const classBase = "text-center p-4 bg-neutral-200 rounded-md  ";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: tailwindMerge.twMerge("grid grid-cols-7 bg-neutral-200", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 pt-4 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-google text-2xl" }) }),
+  const classBase = "text-center p-4 bg-neutral-200 text-gray-900 rounded-md dark:bg-neutral-800 dark:text-gray-100";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: tailwindMerge.twMerge("grid grid-cols-7 bg-neutral-200 dark:bg-neutral-800", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 pt-4 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-google text-2xl text-gray-700 dark:text-gray-200" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("col-span-6", classBase), children })
   ] });
 };
@@ -695,7 +743,7 @@ var accentClasses = {
     indicator: "bg-gray-900 dark:bg-gray-100"
   }
 };
-var ListItem = React4__namespace.forwardRef((props, ref) => {
+var ListItem = React__namespace.forwardRef((props, ref) => {
   const {
     component,
     href,
@@ -809,8 +857,7 @@ var listVariantClasses = {
   ghost: "bg-gray-50 border border-transparent dark:bg-gray-900/60",
   text: "bg-transparent border border-transparent",
   filled: "bg-gray-50 border border-gray-200 shadow-inner shadow-gray-900/5 dark:bg-gray-900/70 dark:border-gray-800 dark:shadow-black/30",
-  underlined: "bg-transparent border border-transparent border-b border-gray-200 rounded-none dark:border-gray-800",
-  rounded: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/30"
+  underlined: "bg-transparent border border-transparent border-b border-gray-200 rounded-none dark:border-gray-800"
 };
 var listRoundedClasses = {
   none: "rounded-none",
@@ -821,13 +868,13 @@ var listRoundedClasses = {
   pill: "rounded-full"
 };
 var isListItemElement = (element) => {
-  if (!React4__namespace.isValidElement(element)) {
+  if (!React__namespace.isValidElement(element)) {
     return false;
   }
   const elementType = element.type;
   return element.type === Item_default || elementType.displayName === Item_default.displayName;
 };
-var List = React4__namespace.forwardRef((props, ref) => {
+var List = React__namespace.forwardRef((props, ref) => {
   const {
     variant = "solid",
     density = "default",
@@ -849,11 +896,11 @@ var List = React4__namespace.forwardRef((props, ref) => {
   const navClass = nav ? "py-1" : void 0;
   const accentColor = color;
   const enhanceChild = (child) => {
-    if (!React4__namespace.isValidElement(child)) {
+    if (!React__namespace.isValidElement(child)) {
       return child;
     }
     if (isListItemElement(child)) {
-      return React4__namespace.cloneElement(child, {
+      return React__namespace.cloneElement(child, {
         density: child.props.density ?? density,
         lines: child.props.lines ?? lines,
         nav: child.props.nav ?? nav,
@@ -863,14 +910,14 @@ var List = React4__namespace.forwardRef((props, ref) => {
       });
     }
     if (child.props && typeof child.props === "object" && "children" in child.props) {
-      const nestedChildren = React4__namespace.Children.map(child.props.children, enhanceChild);
+      const nestedChildren = React__namespace.Children.map(child.props.children, enhanceChild);
       if (nestedChildren !== child.props.children) {
-        return React4__namespace.cloneElement(child, void 0, nestedChildren);
+        return React__namespace.cloneElement(child, void 0, nestedChildren);
       }
     }
     return child;
   };
-  const resolvedChildren = React4__namespace.Children.map(children, enhanceChild);
+  const resolvedChildren = React__namespace.Children.map(children, enhanceChild);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -887,20 +934,29 @@ var ListWithItem = List;
 ListWithItem.Item = Item_default;
 var List_default = ListWithItem;
 var placementClasses = {
-  "bottom-start": "left-0 top-full origin-top-left",
-  bottom: "left-1/2 top-full -translate-x-1/2 origin-top",
-  "bottom-end": "right-0 top-full origin-top-right",
-  "top-start": "left-0 bottom-full origin-bottom-left",
-  top: "left-1/2 bottom-full -translate-x-1/2 origin-bottom",
-  "top-end": "right-0 bottom-full origin-bottom-right"
+  "bottom-start": "left-0 top-full",
+  bottom: "left-1/2 top-full -translate-x-1/2",
+  "bottom-end": "right-0 top-full",
+  "top-start": "left-0 bottom-full",
+  top: "left-1/2 bottom-full -translate-x-1/2",
+  "top-end": "right-0 bottom-full"
+};
+var originClasses = {
+  "bottom-start": "origin-top-left",
+  bottom: "origin-top",
+  "bottom-end": "origin-top-right",
+  "top-start": "origin-bottom-left",
+  top: "origin-bottom",
+  "top-end": "origin-bottom-right"
 };
 var offsetClasses = {
-  top: "mb-2",
-  bottom: "mt-2"
+  top: "pb-2",
+  bottom: "pt-2"
 };
-var menuBaseClasses = "absolute z-50 min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
-var overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]";
-var Menu = React4__namespace.forwardRef((props, ref) => {
+var menuWrapperBaseClasses = "absolute z-50";
+var menuBaseClasses = "min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700/80 dark:bg-gray-900/95 dark:text-gray-100 dark:shadow-black/30 dark:ring-white/10 dark:focus-visible:ring-offset-gray-900";
+var overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px] dark:bg-black/50";
+var Menu = React__namespace.forwardRef((props, ref) => {
   const {
     activator,
     children,
@@ -925,11 +981,17 @@ var Menu = React4__namespace.forwardRef((props, ref) => {
   const shouldRenderContent = hasContent && (keepMounted || isOpen || allowHoverTrigger || allowFocusTrigger);
   const shouldRenderOverlay = scrim && hasContent && (isOpen || allowHoverTrigger || allowFocusTrigger);
   const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
-  const visibilityClasses = tailwindMerge.twMerge(
-    "pointer-events-none opacity-0 scale-95",
-    isOpen ? "pointer-events-auto opacity-100 scale-100" : void 0,
-    allowHoverTrigger ? "group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100" : void 0,
-    allowFocusTrigger ? "group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : void 0
+  const interactiveVisibilityClasses = tailwindMerge.twMerge(
+    "pointer-events-none",
+    isOpen ? "pointer-events-auto" : void 0,
+    allowHoverTrigger ? "group-hover/menu:pointer-events-auto" : void 0,
+    allowFocusTrigger ? "group-focus-within/menu:pointer-events-auto" : void 0
+  );
+  const visualVisibilityClasses = tailwindMerge.twMerge(
+    "opacity-0 scale-95",
+    isOpen ? "opacity-100 scale-100" : void 0,
+    allowHoverTrigger ? "group-hover/menu:opacity-100 group-hover/menu:scale-100" : void 0,
+    allowFocusTrigger ? "group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : void 0
   );
   const overlayVisibilityClasses = tailwindMerge.twMerge(
     "pointer-events-none opacity-0 transition-opacity duration-150",
@@ -964,21 +1026,32 @@ var Menu = React4__namespace.forwardRef((props, ref) => {
         shouldRenderContent ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            ...restContentProps,
             className: tailwindMerge.twMerge(
-              menuBaseClasses,
+              menuWrapperBaseClasses,
               placementClasses[placement],
               offsetClasses[verticalPlacement],
               matchActivatorWidth ? "min-w-full" : void 0,
-              visibilityClasses,
-              contentClassName,
-              contentExtraClassName
+              interactiveVisibilityClasses
             ),
-            "data-state": isOpen ? "open" : "closed",
-            role: contentRole ?? "menu",
-            tabIndex: contentTabIndex ?? -1,
-            style: contentStyle,
-            children
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ...restContentProps,
+                className: tailwindMerge.twMerge(
+                  menuBaseClasses,
+                  originClasses[placement],
+                  visualVisibilityClasses,
+                  matchActivatorWidth ? "min-w-full" : void 0,
+                  contentClassName,
+                  contentExtraClassName
+                ),
+                "data-state": isOpen ? "open" : "closed",
+                role: contentRole ?? "menu",
+                tabIndex: contentTabIndex ?? -1,
+                style: contentStyle,
+                children
+              }
+            )
           }
         ) : null
       ]
@@ -1017,7 +1090,7 @@ var traverseNode = (node, value) => {
   if (node === null || node === void 0 || typeof node === "boolean" || typeof node === "string" || typeof node === "number") {
     return { node, changed: false };
   }
-  if (!React4.isValidElement(node)) {
+  if (!React.isValidElement(node)) {
     return { node, changed: false };
   }
   const element = node;
@@ -1030,7 +1103,7 @@ var traverseNode = (node, value) => {
     return { node, changed: false };
   }
   const injectedProps = shouldInject ? { [EXPANSION_PANEL_CONTEXT_PROP]: value } : void 0;
-  const cloned = mappedChildren === void 0 ? React4.cloneElement(element, injectedProps) : React4.cloneElement(element, injectedProps, mappedChildren);
+  const cloned = mappedChildren === void 0 ? React.cloneElement(element, injectedProps) : React.cloneElement(element, injectedProps, mappedChildren);
   return { node: cloned, changed: true };
 };
 var injectExpansionPanelContext = (children, value) => traverseNode(children, value).node;
@@ -1053,20 +1126,20 @@ var roundedClasses = {
   xl: "rounded-xl"
 };
 var itemVariantClasses = {
-  elevated: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5",
-  outlined: "bg-white border border-gray-200",
-  tonal: "bg-gray-50 border border-gray-100",
+  elevated: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/20",
+  outlined: "bg-white border border-gray-200 dark:bg-gray-900 dark:border-gray-800",
+  tonal: "bg-gray-50 border border-gray-100 dark:bg-gray-900/70 dark:border-gray-800",
   plain: "bg-transparent border border-transparent"
 };
 var accentClasses2 = {
-  primary: { text: "text-primary", bg: "bg-primary/5", border: "border-primary/30" },
-  neutral: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
-  info: { text: "text-sky-600", bg: "bg-sky-50", border: "border-sky-200" },
-  success: { text: "text-emerald-600", bg: "bg-emerald-50", border: "border-emerald-200" },
-  warning: { text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
-  danger: { text: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
-  surface: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
-  bw: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" }
+  primary: { text: "text-primary", bg: "bg-primary/5 dark:bg-primary/15", border: "border-primary/30 dark:border-primary/40" },
+  neutral: { text: "text-gray-900 dark:text-gray-100", bg: "bg-gray-100 dark:bg-gray-800", border: "border-gray-200 dark:border-gray-700" },
+  info: { text: "text-sky-600 dark:text-sky-300", bg: "bg-sky-50 dark:bg-sky-900/30", border: "border-sky-200 dark:border-sky-700/60" },
+  success: { text: "text-emerald-600 dark:text-emerald-300", bg: "bg-emerald-50 dark:bg-emerald-900/30", border: "border-emerald-200 dark:border-emerald-700/60" },
+  warning: { text: "text-amber-600 dark:text-amber-300", bg: "bg-amber-50 dark:bg-amber-900/30", border: "border-amber-200 dark:border-amber-700/60" },
+  danger: { text: "text-red-600 dark:text-red-300", bg: "bg-red-50 dark:bg-red-900/30", border: "border-red-200 dark:border-red-700/60" },
+  surface: { text: "text-gray-900 dark:text-gray-100", bg: "bg-gray-100 dark:bg-gray-800", border: "border-gray-200 dark:border-gray-700" },
+  bw: { text: "text-gray-900 dark:text-gray-100", bg: "bg-gray-100 dark:bg-gray-800", border: "border-gray-200 dark:border-gray-700" }
 };
 var uniqueIdCounter = 0;
 var generateId = (prefix) => `${prefix}-${++uniqueIdCounter}`;
@@ -1123,7 +1196,7 @@ var ExpansionPanelItemInner = (props) => {
   const toggleIconNode = hideToggleIcon ? null : isExpanded && collapseIcon ? collapseIcon : expandIcon ?? defaultToggleIcon;
   const shouldRotateDefaultIcon = !expandIcon && !collapseIcon && !hideToggleIcon;
   const toggleWrapperClass = tailwindMerge.twMerge(
-    "expansion-panel-item__icon ml-3 flex h-6 w-6 items-center justify-center text-gray-500 transition-transform duration-200",
+    "expansion-panel-item__icon ml-3 flex h-6 w-6 items-center justify-center text-gray-500 dark:text-gray-400 transition-transform duration-200",
     shouldRotateDefaultIcon && isExpanded ? "rotate-180" : void 0
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1164,12 +1237,12 @@ var ExpansionPanelItemInner = (props) => {
             "aria-disabled": disabled || void 0,
             "data-state": isExpanded ? "open" : "closed",
             children: [
-              prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
+              prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500 dark:text-gray-400", children: prepend }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
-                title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
-                subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: subtitle })
+                title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate font-medium text-gray-900 dark:text-gray-100", titleClass), children: title }),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: subtitle })
               ] }),
-              append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
+              append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: append }),
               !hideToggleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
             ]
           }
@@ -1177,13 +1250,13 @@ var ExpansionPanelItemInner = (props) => {
         hasContent && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "expansion-panel-item__content overflow-hidden border-t border-gray-100",
+            className: "expansion-panel-item__content overflow-hidden border-t border-gray-100 dark:border-gray-800",
             "data-state": isExpanded ? "open" : "closed",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: tailwindMerge.twMerge(
-                  "expansion-panel-item__body min-h-0 px-4 pt-0 text-sm text-gray-600",
+                  "expansion-panel-item__body min-h-0 px-4 pt-0 text-sm text-gray-600 dark:text-gray-300",
                   activeBorderClass,
                   contentClassName
                 ),
@@ -1196,14 +1269,14 @@ var ExpansionPanelItemInner = (props) => {
     }
   );
 };
-var ExpansionPanelItem = React4.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
+var ExpansionPanelItem = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
 ExpansionPanelItem.displayName = "ExpansionPanelItem";
 markExpansionPanelItem(ExpansionPanelItem);
 var ExpansionPanelItem_default = ExpansionPanelItem;
 var variantContainerClasses = {
-  elevated: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10",
-  outlined: "bg-white border border-gray-200",
-  tonal: "bg-gray-50 border border-gray-100",
+  elevated: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/30",
+  outlined: "bg-white border border-gray-200 dark:bg-gray-900 dark:border-gray-800",
+  tonal: "bg-gray-50 border border-gray-100 dark:bg-gray-900/70 dark:border-gray-800",
   plain: "bg-transparent border border-transparent"
 };
 var roundedClasses2 = {
@@ -1254,7 +1327,7 @@ var ExpansionPanelInner = (props, forwardedRef) => {
   };
   const variantClass = divider ? variantContainerClasses[variant] : "bg-transparent border border-transparent shadow-none";
   const shapeClass = roundedClasses2[rounded] ?? roundedClasses2.lg;
-  const layoutClass = divider ? "divide-y divide-gray-100 overflow-hidden" : "gap-4";
+  const layoutClass = divider ? "divide-y divide-gray-100 dark:divide-gray-800 overflow-hidden" : "gap-4";
   const enhancedChildren = injectExpansionPanelContext(children, providerValue);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1262,7 +1335,7 @@ var ExpansionPanelInner = (props, forwardedRef) => {
       ...rest,
       ref: forwardedRef,
       className: tailwindMerge.twMerge(
-        "expansion-panel flex w-full flex-col text-gray-900",
+        "expansion-panel flex w-full flex-col text-gray-900 dark:text-gray-100",
         variantClass,
         shapeClass,
         layoutClass,
@@ -1272,23 +1345,23 @@ var ExpansionPanelInner = (props, forwardedRef) => {
     }
   );
 };
-var ExpansionPanelBase = React4.forwardRef(ExpansionPanelInner);
+var ExpansionPanelBase = React.forwardRef(ExpansionPanelInner);
 var ExpansionPanel = Object.assign(ExpansionPanelBase, {
   Item: ExpansionPanelItem_default
 });
 ExpansionPanel.displayName = "ExpansionPanel";
 var ExpansionPanel_default = ExpansionPanel;
 var containerBaseClasses = "fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none";
-var overlayBaseClasses2 = "absolute inset-0 bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
+var overlayBaseClasses2 = "absolute inset-0 bg-gray-900/55 dark:bg-black/70 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
 var panelWrapperClasses = "relative z-10 flex w-full max-h-[95vh] justify-center transition-transform transition-opacity duration-200 data-[state=closed]:translate-y-4 data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100";
-var panelBaseClasses = "pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
+var panelBaseClasses = "pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-gray-900 dark:text-gray-100 dark:shadow-black/40 dark:ring-white/10 dark:focus-visible:ring-offset-gray-900";
 var resolveSizeValue = (value) => {
   if (value === void 0) {
     return void 0;
   }
   return typeof value === "number" ? `${value}px` : value;
 };
-var Dialog = React4__namespace.forwardRef((props, forwardedRef) => {
+var Dialog = React__namespace.forwardRef((props, forwardedRef) => {
   const {
     activator,
     children,
@@ -1413,7 +1486,7 @@ var resolveSizeValue2 = (value) => {
   }
   return typeof value === "number" ? `${value}px` : value;
 };
-var Drawer = React4__namespace.forwardRef((props, ref) => {
+var Drawer = React__namespace.forwardRef((props, ref) => {
   const {
     location = "left",
     floating = false,
@@ -1513,8 +1586,8 @@ var Drawer = React4__namespace.forwardRef((props, ref) => {
 Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 var overlayBaseClasses4 = "inset-0 z-[55] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
-var scrimClasses = "bg-gray-900/55 backdrop-blur-[2px]";
-var Overlay = React4__namespace.forwardRef((props, ref) => {
+var scrimClasses = "bg-gray-900/55 dark:bg-black/70 backdrop-blur-[2px]";
+var Overlay = React__namespace.forwardRef((props, ref) => {
   const {
     open,
     keepMounted = false,
@@ -1565,9 +1638,9 @@ var Overlay = React4__namespace.forwardRef((props, ref) => {
 });
 Overlay.displayName = "Overlay";
 var Overlay_default = Overlay;
-var tooltipBaseClasses = "absolute z-[60] max-w-xs rounded-lg border border-white/10 bg-gray-900 px-3 py-2 text-xs font-medium text-white shadow-lg shadow-black/30 ring-1 ring-black/40 transition-all duration-150";
+var tooltipBaseClasses = "absolute z-[60] max-w-xs rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-900 shadow-lg shadow-gray-900/20 ring-1 ring-black/5 transition-all duration-150 dark:border-white/10 dark:bg-gray-900 dark:text-white dark:shadow-black/30 dark:ring-black/40";
 var wrapperBaseClasses = "relative inline-flex max-w-full align-middle";
-var arrowBaseClasses = "pointer-events-none absolute h-2 w-2 rotate-45 border border-white/10 bg-gray-900 shadow-lg shadow-black/20";
+var arrowBaseClasses = "pointer-events-none absolute h-2 w-2 rotate-45 border border-gray-200 bg-white shadow-lg shadow-gray-900/15 dark:border-white/10 dark:bg-gray-900 dark:shadow-black/20";
 var resolveSizeValue3 = (value) => {
   if (value === void 0) {
     return void 0;
@@ -1602,7 +1675,7 @@ var arrowPlacementClasses = {
   "right-start": "right-full top-4 translate-x-1/2",
   "right-end": "right-full bottom-4 translate-x-1/2"
 };
-var ToolTip = React4__namespace.forwardRef((props, forwardedRef) => {
+var ToolTip = React__namespace.forwardRef((props, forwardedRef) => {
   const {
     activator,
     children,
@@ -1708,7 +1781,6 @@ var variantClasses = {
   text: "rounded-2xl border border-transparent bg-transparent dark:border-transparent dark:bg-transparent",
   filled: "rounded-2xl border border-gray-200 bg-gray-50 dark:border-slate-800 dark:bg-slate-800",
   underlined: " border border-transparent border-b border-b-gray-200 dark:border-transparent dark:border-b-slate-700 dark:bg-transparent",
-  rounded: "rounded-3xl border border-gray-200 bg-white dark:border-slate-800 dark:bg-slate-900",
   sharp: "rounded-none border border-gray-200 bg-white dark:border-slate-800 dark:bg-slate-900"
 };
 var elevationClasses = {
@@ -1720,7 +1792,7 @@ var elevationClasses = {
   5: "shadow-xl",
   6: "shadow-2xl"
 };
-var CardRoot = React4.forwardRef(function Card({ className, children, variant = "solid", padding = "md", overflow = "hidden", interactive = false, dividers = true, elevation = 0, ...rest }, ref) {
+var CardRoot = React.forwardRef(function Card({ className, children, variant = "solid", padding = "md", overflow = "hidden", interactive = false, dividers = true, elevation = 0, ...rest }, ref) {
   const variantClass = variantClasses[variant] ?? variantClasses.solid;
   const paddingClass = paddingClasses[padding] ?? paddingClasses.md;
   const overflowClass = overflowClasses[overflow] ?? overflowClasses.hidden;
@@ -1791,13 +1863,13 @@ var Card2 = Object.assign(CardRoot, {
 });
 var Card_default = Card2;
 function applyDividers(children, dividers) {
-  return React4.Children.map(children, (child) => {
-    if (!React4.isValidElement(child)) return child;
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
     if (isDividerSection(child)) {
-      return React4.cloneElement(child, { dividers: child.props.dividers ?? dividers });
+      return React.cloneElement(child, { dividers: child.props.dividers ?? dividers });
     }
     if (hasNestedChildren(child)) {
-      return React4.cloneElement(child, {
+      return React.cloneElement(child, {
         children: applyDividers(child.props.children, dividers)
       });
     }
@@ -1829,10 +1901,9 @@ var variantClasses2 = {
   ghost: "rounded-xl bg-white/20 backdrop-opacity-5 border border-white/20 dark:bg-slate-900/30 dark:border-white/10",
   filled: "rounded-xl bg-white/60 backdrop-opacity-5 border border-white/40 dark:bg-slate-900/70 dark:border-white/15",
   underlined: "rounded-xl bg-white/20 backdrop-opacity-5 border-b border-white/40 dark:bg-slate-900/30 dark:border-white/20",
-  rounded: "rounded-3xl bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10",
   sharp: "rounded-none bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10"
 };
-var Block = React4__namespace.forwardRef(function Block2({ className, variant = "solid", blur = "sm", interactive = false, children, ...rest }, ref) {
+var Block = React__namespace.forwardRef(function Block2({ className, variant = "solid", blur = "sm", interactive = false, children, ...rest }, ref) {
   const variantClass = variantClasses2[variant] ?? variantClasses2.solid;
   const blurClass = blurClasses[blur] ?? blurClasses.sm;
   const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900" : void 0;
@@ -1850,7 +1921,7 @@ var Block = React4__namespace.forwardRef(function Block2({ className, variant =
 });
 Block.displayName = "Block";
 var Block_default = Block;
-var masonryBaseClass = "masonry-grid w-full";
+var masonryBaseClass = "masonry-grid w-full text-gray-900 dark:text-gray-100";
 var itemBaseClass = "masonry-item block break-inside-avoid";
 var MasonryBase = (props, ref) => {
   const {
@@ -1890,10 +1961,10 @@ var MasonryBase = (props, ref) => {
   const renderedItems = items && items.length ? items.map((item, index) => {
     const content = resolveItemContent(item, index, renderItem);
     return wrapItem(content, resolveItemKey(item, index, getKey));
-  }) : React4__namespace.Children.map(children, (child, index) => wrapItem(child, resolveChildKey(child, index))) ?? null;
+  }) : React__namespace.Children.map(children, (child, index) => wrapItem(child, resolveChildKey(child, index))) ?? null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ref, role, className: tailwindMerge.twMerge(masonryBaseClass, className), style: layoutStyle, children: renderedItems });
 };
-var Masonry = React4__namespace.forwardRef(MasonryBase);
+var Masonry = React__namespace.forwardRef(MasonryBase);
 Masonry.displayName = "Masonry";
 var Masonry_default = Masonry;
 function toCssLength(value) {
@@ -1918,13 +1989,13 @@ function resolveColumnCount(column, maxColumn, hasColumnWidth) {
 }
 function resolveItemKey(item, index, getKey) {
   if (getKey) return getKey(item, index);
-  if (React4__namespace.isValidElement(item) && item.key != null) {
+  if (React__namespace.isValidElement(item) && item.key != null) {
     return item.key;
   }
   return index;
 }
 function resolveChildKey(child, index) {
-  if (React4__namespace.isValidElement(child) && child.key != null) {
+  if (React__namespace.isValidElement(child) && child.key != null) {
     return child.key;
   }
   return index;
@@ -1950,7 +2021,7 @@ var hasMarker2 = (type) => {
   return false;
 };
 var isTabsTabElement = (element) => {
-  if (!React4.isValidElement(element)) {
+  if (!React.isValidElement(element)) {
     return false;
   }
   return hasMarker2(element.type);
@@ -1969,80 +2040,80 @@ var sizeClasses2 = {
   "x-large": { tab: "h-11 px-4 text-base", icon: "text-lg" }
 };
 var variantListClasses = {
-  line: "border-b border-gray-200",
-  card: "rounded-xl bg-gray-100 p-1",
-  pill: "rounded-full bg-gray-100/80 p-1"
+  line: "border-b border-gray-200 dark:border-gray-700",
+  card: "rounded-xl bg-gray-100 p-1 dark:bg-gray-800/70",
+  pill: "rounded-full bg-gray-100/80 p-1 dark:bg-gray-800/70"
 };
 var variantTabBaseClasses = {
   line: "border-b-2 border-transparent -mb-px",
-  card: "rounded-lg border border-transparent bg-white/70",
+  card: "rounded-lg border border-transparent bg-white/70 dark:bg-gray-900/70",
   pill: "rounded-full"
 };
 var paletteClasses = {
   primary: {
     text: "text-primary",
     border: "border-primary",
-    bg: "bg-primary/10",
-    ring: "ring-primary/30",
+    bg: "bg-primary/10 dark:bg-primary/20",
+    ring: "ring-primary/30 dark:ring-primary/40",
     ink: "bg-primary"
   },
   neutral: {
-    text: "text-gray-900",
-    border: "border-gray-900",
-    bg: "bg-gray-100",
-    ring: "ring-gray-900/20",
-    ink: "bg-gray-900"
+    text: "text-gray-900 dark:text-gray-100",
+    border: "border-gray-900 dark:border-gray-100",
+    bg: "bg-gray-100 dark:bg-gray-800",
+    ring: "ring-gray-900/20 dark:ring-gray-200/25",
+    ink: "bg-gray-900 dark:bg-gray-100"
   },
   info: {
-    text: "text-sky-600",
-    border: "border-sky-500",
-    bg: "bg-sky-50",
-    ring: "ring-sky-500/20",
+    text: "text-sky-600 dark:text-sky-300",
+    border: "border-sky-500 dark:border-sky-400",
+    bg: "bg-sky-50 dark:bg-sky-900/30",
+    ring: "ring-sky-500/20 dark:ring-sky-400/30",
     ink: "bg-sky-500"
   },
   success: {
-    text: "text-emerald-600",
-    border: "border-emerald-500",
-    bg: "bg-emerald-50",
-    ring: "ring-emerald-500/20",
+    text: "text-emerald-600 dark:text-emerald-300",
+    border: "border-emerald-500 dark:border-emerald-400",
+    bg: "bg-emerald-50 dark:bg-emerald-900/30",
+    ring: "ring-emerald-500/20 dark:ring-emerald-400/30",
     ink: "bg-emerald-500"
   },
   warning: {
-    text: "text-amber-600",
-    border: "border-amber-500",
-    bg: "bg-amber-50",
-    ring: "ring-amber-500/20",
+    text: "text-amber-600 dark:text-amber-300",
+    border: "border-amber-500 dark:border-amber-400",
+    bg: "bg-amber-50 dark:bg-amber-900/30",
+    ring: "ring-amber-500/20 dark:ring-amber-400/30",
     ink: "bg-amber-500"
   },
   danger: {
-    text: "text-red-600",
-    border: "border-red-500",
-    bg: "bg-red-50",
-    ring: "ring-red-500/20",
+    text: "text-red-600 dark:text-red-300",
+    border: "border-red-500 dark:border-red-400",
+    bg: "bg-red-50 dark:bg-red-900/30",
+    ring: "ring-red-500/20 dark:ring-red-400/30",
     ink: "bg-red-500"
   },
   surface: {
-    text: "text-gray-900",
-    border: "border-gray-300",
-    bg: "bg-white",
-    ring: "ring-gray-300/30",
-    ink: "bg-gray-400"
+    text: "text-gray-900 dark:text-gray-100",
+    border: "border-gray-300 dark:border-gray-600",
+    bg: "bg-white dark:bg-gray-900",
+    ring: "ring-gray-300/30 dark:ring-gray-600/40",
+    ink: "bg-gray-400 dark:bg-gray-500"
   },
   bw: {
-    text: "text-black",
-    border: "border-black",
-    bg: "bg-black/10",
-    ring: "ring-black/20",
-    ink: "bg-black"
+    text: "text-black dark:text-white",
+    border: "border-black dark:border-white",
+    bg: "bg-black/10 dark:bg-white/10",
+    ring: "ring-black/20 dark:ring-white/30",
+    ink: "bg-black dark:bg-white"
   }
 };
 var panelVariantClasses = {
   line: "pt-4",
-  card: "mt-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm",
-  pill: "mt-3 rounded-2xl border border-gray-200 bg-white/90 p-4"
+  card: "mt-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900",
+  pill: "mt-3 rounded-2xl border border-gray-200 bg-white/90 p-4 dark:border-gray-700 dark:bg-gray-900/90"
 };
 var isExtraContentObject = (value) => {
-  return !!value && typeof value === "object" && !React4__namespace.isValidElement(value) && ("left" in value || "right" in value);
+  return !!value && typeof value === "object" && !React__namespace.isValidElement(value) && ("left" in value || "right" in value);
 };
 var resolveFirstEnabledTab = (tabs) => tabs.find((tab) => !tab.disabled)?.value;
 var clampActive = (value, tabs) => {
@@ -2069,7 +2140,7 @@ var collectTabs = (children, tabsId) => {
       return;
     }
     if (!isTabsTabElement(node)) {
-      if (React4__namespace.isValidElement(node)) {
+      if (React__namespace.isValidElement(node)) {
         const props = node.props;
         if (props && Object.prototype.hasOwnProperty.call(props, "children")) {
           walk(props.children);
@@ -2113,7 +2184,7 @@ var injectTabs = (children, context, tabs) => {
       });
       return changed ? next : node;
     }
-    if (!React4__namespace.isValidElement(node)) {
+    if (!React__namespace.isValidElement(node)) {
       return node;
     }
     if (isTabsTabElement(node)) {
@@ -2129,14 +2200,14 @@ var injectTabs = (children, context, tabs) => {
         __tabsTabId: tab.tabId,
         __tabsPanelId: tab.panelId
       };
-      return React4__namespace.cloneElement(node, injectedProps);
+      return React__namespace.cloneElement(node, injectedProps);
     }
     if (node.props) {
       const props = node.props;
       if (props && Object.prototype.hasOwnProperty.call(props, "children")) {
         const mappedChildren = walk(props.children);
         if (mappedChildren !== props.children) {
-          return React4__namespace.cloneElement(node, void 0, mappedChildren);
+          return React__namespace.cloneElement(node, void 0, mappedChildren);
         }
       }
     }
@@ -2170,7 +2241,7 @@ var handleTabListKeyDown = (event) => {
   tabs[nextIndex]?.focus();
   event.preventDefault();
 };
-var Tabs = React4__namespace.forwardRef((props, ref) => {
+var Tabs = React__namespace.forwardRef((props, ref) => {
   const {
     activeKey,
     defaultActiveKey,
@@ -2215,7 +2286,7 @@ var Tabs = React4__namespace.forwardRef((props, ref) => {
       ...rest,
       id,
       ref,
-      className: tailwindMerge.twMerge("tabs flex w-full flex-col text-gray-900", className),
+      className: tailwindMerge.twMerge("tabs flex w-full flex-col text-gray-900 dark:text-gray-100", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           extraLeft ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: extraLeft }) : null,
@@ -2236,8 +2307,8 @@ var Tabs = React4__namespace.forwardRef((props, ref) => {
                 const isActive = tab.value === resolvedActive;
                 const sizeClass = sizeClasses2[size] ?? sizeClasses2.medium;
                 const iconNode = resolveIconNode(tab.icon, size);
-                const badgeNode = tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-gray-200 px-1.5 py-0.5 text-[0.6rem] font-semibold text-gray-700", children: tab.badge }) : null;
-                const activeText = isActive ? palette.text : "text-gray-600";
+                const badgeNode = tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-gray-200 px-1.5 py-0.5 text-[0.6rem] font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-200", children: tab.badge }) : null;
+                const activeText = isActive ? palette.text : "text-gray-600 dark:text-gray-300";
                 const activeBorder = isActive ? palette.border : "border-transparent";
                 const activeBg = isActive ? palette.bg : void 0;
                 const activeRing = isActive ? palette.ring : void 0;
@@ -2263,12 +2334,12 @@ var Tabs = React4__namespace.forwardRef((props, ref) => {
                       }
                     },
                     className: tailwindMerge.twMerge(
-                      "inline-flex items-center gap-2 whitespace-nowrap font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2",
+                      "inline-flex items-center gap-2 whitespace-nowrap font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
                       sizeClass.tab,
                       variantTabBaseClasses[variant],
                       variantClasses5[variant],
                       activeRing ? `ring-1 ${activeRing}` : void 0,
-                      tab.disabled ? "cursor-not-allowed text-gray-400 opacity-60" : "hover:text-gray-900",
+                      tab.disabled ? "cursor-not-allowed text-gray-400 dark:text-gray-500 opacity-60" : "hover:text-gray-900 dark:hover:text-gray-100",
                       tab.tabClassName
                     ),
                     "data-state": isActive ? "active" : "inactive",
@@ -2291,7 +2362,7 @@ var Tabs = React4__namespace.forwardRef((props, ref) => {
   );
 });
 Tabs.displayName = "Tabs";
-var Tab = React4__namespace.forwardRef((props, ref) => {
+var Tab = React__namespace.forwardRef((props, ref) => {
   const {
     label: _label,
     value,
@@ -2325,7 +2396,7 @@ var Tab = React4__namespace.forwardRef((props, ref) => {
       "aria-labelledby": __tabsTabId,
       "aria-hidden": context ? !isActive : void 0,
       hidden: context ? !isActive : void 0,
-      className: tailwindMerge.twMerge("tabs-panel text-gray-900", className, panelClassName),
+      className: tailwindMerge.twMerge("tabs-panel text-gray-900 dark:text-gray-100", className, panelClassName),
       "data-state": isActive ? "active" : "inactive",
       "data-disabled": disabled || void 0,
       children
@@ -2366,7 +2437,7 @@ var AppBar = ({
   children,
   ...rest
 }) => {
-  const [mobileOpen, setMobileOpen] = React4__namespace.useState(false);
+  const [mobileOpen, setMobileOpen] = React__namespace.useState(false);
   const isDark = color === "primary" || color === "dark";
   const isTransparent = color === "transparent";
   const barClass = tailwindMerge.twMerge(
@@ -2473,14 +2544,13 @@ var AppBar = ({
 AppBar.displayName = "AppBar";
 var AppBar_default = AppBar;
 var containerVariants = {
-  solid: "bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30",
-  outline: "border border-gray-200 bg-white text-gray-900",
-  text: "bg-transparent text-gray-900",
-  ghost: "bg-primary/5 text-gray-900 border border-primary/10",
-  filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/40",
-  underlined: "border-b-4 border-primary/70 bg-white text-gray-900",
-  rounded: "rounded-3xl border border-gray-100 bg-white text-gray-900 shadow-xl",
-  sharp: "rounded-none border border-gray-200 bg-white text-gray-900 shadow"
+  solid: "bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30 dark:from-primary dark:via-primary/90 dark:to-indigo-700",
+  outline: "border border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
+  text: "bg-transparent text-gray-900 dark:text-gray-100",
+  ghost: "bg-primary/5 text-gray-900 border border-primary/10 dark:bg-primary/15 dark:text-gray-100 dark:border-primary/25",
+  filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/40 dark:bg-slate-950",
+  underlined: "border-b-4 border-primary/70 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 dark:border-primary/60",
+  sharp: "rounded-none border border-gray-200 bg-white text-gray-900 shadow dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
 };
 var frameRadii = {
   solid: "rounded-3xl",
@@ -2489,18 +2559,16 @@ var frameRadii = {
   ghost: "rounded-2xl",
   filled: "rounded-3xl",
   underlined: "rounded-2xl",
-  rounded: "rounded-3xl",
   sharp: "rounded-none"
 };
 var badgeVariants = {
   solid: "bg-white/10 text-white border border-white/20",
-  outline: "bg-primary/10 text-primary border border-primary/20",
-  text: "bg-primary/10 text-primary border border-primary/20",
-  ghost: "bg-primary/15 text-primary border border-primary/25",
+  outline: "bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:border-primary/35",
+  text: "bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:border-primary/35",
+  ghost: "bg-primary/15 text-primary border border-primary/25 dark:bg-primary/20 dark:border-primary/35",
   filled: "bg-white/10 text-white border border-white/20",
-  underlined: "bg-primary/10 text-primary border border-primary/20",
-  rounded: "bg-primary/10 text-primary border border-primary/20",
-  sharp: "bg-primary/10 text-primary border border-primary/20"
+  underlined: "bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:border-primary/35",
+  sharp: "bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:border-primary/35"
 };
 var Hero = ({
   title,
@@ -2524,12 +2592,12 @@ var Hero = ({
     badgeVariants[variant] ?? badgeVariants.solid
   );
   const isDark = variant === "solid" || variant === "filled";
-  const subdued = isDark ? "text-white/80" : "text-gray-600";
-  const statMuted = isDark ? "text-white/70" : "text-gray-500";
-  const actionPrimary = isDark ? "bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70" : "bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50";
-  const actionSecondary = isDark ? "border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60" : "border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50";
+  const subdued = isDark ? "text-white/80" : "text-gray-600 dark:text-gray-300";
+  const statMuted = isDark ? "text-white/70" : "text-gray-500 dark:text-gray-400";
+  const actionPrimary = isDark ? "bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70" : "bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50 dark:bg-primary/90 dark:hover:bg-primary";
+  const actionSecondary = isDark ? "border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60" : "border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50 dark:border-gray-600 dark:text-gray-100 dark:hover:border-primary/60 dark:hover:text-primary";
   const frameRadius = frameRadii[variant] ?? "rounded-2xl";
-  const frameDecoration = isDark ? "border-white/10 bg-white/10 shadow-2xl shadow-black/20" : "border-gray-200 bg-white shadow-2xl shadow-gray-200/60";
+  const frameDecoration = isDark ? "border-white/10 bg-white/10 shadow-2xl shadow-black/20" : "border-gray-200 bg-white shadow-2xl shadow-gray-200/60 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30";
   const renderAction = (action, index) => {
     const { href, label, onClick, variant: actionVariant = "primary" } = action;
     const Component = href ? "a" : "button";
@@ -2550,8 +2618,8 @@ var Hero = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { ...rest, className: containerClass, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 blur-3xl" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 blur-3xl" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 dark:bg-primary/25 blur-3xl" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 dark:bg-primary/30 blur-3xl" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-12 px-6 py-16 lg:px-10 lg:py-24", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
@@ -2562,7 +2630,7 @@ var Hero = ({
             {
               className: tailwindMerge.twMerge(
                 "text-4xl font-semibold leading-tight sm:text-5xl",
-                isDark ? "text-white" : "text-gray-900"
+                isDark ? "text-white" : "text-gray-900 dark:text-gray-100"
               ),
               children: title
             }
@@ -2570,7 +2638,7 @@ var Hero = ({
           description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-lg leading-relaxed", subdued), children: description }),
           actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: actions.map(renderAction) }),
           stats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-6 sm:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: tailwindMerge.twMerge("text-3xl font-semibold", isDark ? "text-white" : "text-gray-900"), children: stat.value }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: tailwindMerge.twMerge("text-3xl font-semibold", isDark ? "text-white" : "text-gray-900 dark:text-gray-100"), children: stat.value }),
             /* @__PURE__ */ jsxRuntime.jsx("dt", { className: tailwindMerge.twMerge("text-sm font-medium", statMuted), children: stat.label })
           ] }, stat.label)) })
         ] }),
@@ -2612,7 +2680,6 @@ var variantMap = {
   ghost: "bg-slate-50 text-gray-900 border border-slate-100",
   filled: "bg-slate-900 text-white",
   underlined: "bg-white text-gray-900 border-b-4 border-primary/70",
-  rounded: "bg-white text-gray-900 border border-gray-200 rounded-3xl",
   sharp: "bg-white text-gray-900 border border-gray-200 rounded-none"
 };
 var elevationClasses2 = {
@@ -2631,7 +2698,6 @@ var cardRadiusMap = {
   ghost: "rounded-2xl",
   filled: "rounded-3xl",
   underlined: "rounded-t-2xl",
-  rounded: "rounded-3xl",
   sharp: "rounded-none"
 };
 var avatarRadiusMap = {
@@ -2641,7 +2707,6 @@ var avatarRadiusMap = {
   ghost: "rounded-2xl",
   filled: "rounded-3xl",
   underlined: "rounded-2xl",
-  rounded: "rounded-3xl",
   sharp: "rounded-none"
 };
 var isDarkVariant = (variant) => variant === "filled";
@@ -2650,7 +2715,7 @@ var SocialIcons = ({ socials, dark }) => {
   if (Array.isArray(socials) && socials.length === 0) return null;
   const isSocialLinkArray = Array.isArray(socials) && socials.length > 0 && "href" in socials[0];
   if (isSocialLinkArray) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: socials.map((link) => /* @__PURE__ */ jsxRuntime.jsx(Button_default, { iconOnly: true, icon: link.icon, variant: "rounded", size: "x-small", ...{ href: link.href, as: "a" } }, link.href)) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: socials.map((link) => /* @__PURE__ */ jsxRuntime.jsx(Button_default, { iconOnly: true, icon: link.icon, variant: "outline", size: "x-small", ...{ href: link.href, as: "a" } }, link.href)) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: socials });
 };
@@ -2753,109 +2818,57 @@ var ProfileCard = ({
 };
 ProfileCard.displayName = "ProfileCard";
 var ProfileCard_default = ProfileCard;
-
-// src/Form/Input/states.input.ts
-var resolveIconClassName4 = (icon) => {
-  if (!icon) {
-    return void 0;
-  }
-  if (typeof icon === "string") {
-    const trimmed = icon.trim();
-    if (!trimmed) {
-      return void 0;
-    }
-    if (trimmed.includes(" ")) {
-      return trimmed;
-    }
-    const normalizedName2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
-    return ["mdi", normalizedName2].join(" ");
-  }
-  const [library, iconNameRaw] = icon;
-  const baseClasses = iconBaseClasses[library] ?? [library];
-  const iconName = iconNameRaw.trim();
-  if (!iconName) {
-    return baseClasses.join(" ");
-  }
-  const normalizedName = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
-  const classes = [...baseClasses, normalizedName];
-  return Array.from(new Set(classes)).join(" ");
-};
-var Input = React4__namespace.default.forwardRef(
-  ({
-    variant = "outline",
-    size = "medium",
-    success,
-    error,
-    warn,
-    icon,
-    className,
-    wrapperClassName,
-    label,
-    prefix,
-    suffix,
-    ...props
-  }, ref) => {
+var Input = React__namespace.default.forwardRef(
+  ({ variant = "outline", size = "medium", rounded = "md", success, error, warn, className, wrapperClassName, label, prepend, append, ...props }, ref) => {
     const { placeholder, onFocus, onBlur, ...inputProps } = props;
-    const reactId = React4__namespace.default.useId();
+    const reactId = React__namespace.default.useId();
     const hasLabel = Boolean(label);
     const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
     const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
-    const [isFocused, setIsFocused] = React4__namespace.default.useState(false);
-    const classBase = "input-base focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400";
+    const [isFocused, setIsFocused] = React__namespace.default.useState(false);
+    const classBase = "input-base transition-colors duration-200 w-full has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed";
+    const inputBase = "peer block w-full min-w-0 border-0 bg-transparent p-0 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:ring-0";
     const variantClasses5 = {
-      solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
-      sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
-      outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
-      text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
-      ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
-      filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
-      underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
-      rounded: "rounded-full px-4 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
+      solid: "rounded border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40",
+      sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40",
+      outline: "rounded border-2 border-black bg-white focus-within:border-black focus-within:ring-2 focus-within:ring-black/30 dark:border-black dark:bg-transparent dark:focus-within:border-black dark:focus-within:ring-black/40",
+      text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70",
+      ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-within:bg-white focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-within:bg-slate-700 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/25",
+      filled: "rounded border border-gray-200 bg-gray-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/30",
+      underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70"
+    };
+    const roundedClasses3 = {
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      "2xl": "rounded-2xl",
+      "3xl": "rounded-3xl"
     };
     const sizeClasses5 = {
       "x-small": {
         paddingY: "py-2",
-        paddingLeft: "pl-2",
-        paddingRight: "pr-2",
-        paddingLeftLeading: "pl-8",
-        paddingLeftLeadingDouble: "pl-12",
-        paddingRightTrailing: "pr-8",
+        paddingX: "px-2",
         text: "text-xs"
       },
       small: {
         paddingY: "py-2.5",
-        paddingLeft: "pl-2.5",
-        paddingRight: "pr-2.5",
-        paddingLeftLeading: "pl-9",
-        paddingLeftLeadingDouble: "pl-12",
-        paddingRightTrailing: "pr-9",
+        paddingX: "px-2.5",
         text: "text-sm"
       },
       medium: {
         paddingY: "py-3",
-        paddingLeft: "pl-3",
-        paddingRight: "pr-3",
-        paddingLeftLeading: "pl-10",
-        paddingLeftLeadingDouble: "pl-14",
-        paddingRightTrailing: "pr-10",
+        paddingX: "px-3",
         text: "text-base"
       },
       large: {
         paddingY: "py-3.5",
-        paddingLeft: "pl-3.5",
-        paddingRight: "pr-3.5",
-        paddingLeftLeading: "pl-11",
-        paddingLeftLeadingDouble: "pl-14",
-        paddingRightTrailing: "pr-11",
+        paddingX: "px-3.5",
         text: "text-lg"
       },
       "x-large": {
         paddingY: "py-4",
-        paddingLeft: "pl-4",
-        paddingRight: "pr-4",
-        paddingLeftLeading: "pl-12",
-        paddingLeftLeadingDouble: "pl-16",
-        paddingRightTrailing: "pr-12",
+        paddingX: "px-4",
         text: "text-xl"
       }
     };
@@ -2872,25 +2885,18 @@ var Input = React4__namespace.default.forwardRef(
     };
     const variantClass = variantClasses5[variant] ?? variantClasses5.outline;
     const toneClass = status ? statusClasses[status.tone] : void 0;
-    let prependIconClass = resolveIconClassName4(icon);
-    const hasPrefix = typeof prefix === "string" ? prefix.trim().length > 0 : Boolean(prefix);
-    const hasSuffix = typeof suffix === "string" ? suffix.trim().length > 0 : Boolean(suffix);
-    const hasLeadingIcon = Boolean(prependIconClass);
-    const hasLeadingAdornment = hasLeadingIcon || hasPrefix;
-    const hasTrailingAdornment = hasSuffix;
+    const hasPrepend = typeof prepend === "string" ? prepend.trim().length > 0 : Boolean(prepend);
+    const hasAppend = typeof append === "string" ? append.trim().length > 0 : Boolean(append);
     const sizeConfig = sizeClasses5[size] ?? sizeClasses5.medium;
-    const leftPaddingClass = hasPrefix ? sizeConfig.paddingLeftLeadingDouble : hasLeadingAdornment ? sizeConfig.paddingLeftLeading : sizeConfig.paddingLeft;
-    const rightPaddingClass = hasTrailingAdornment ? sizeConfig.paddingRightTrailing : sizeConfig.paddingRight;
-    const sizeClass = [sizeConfig.paddingY, leftPaddingClass, rightPaddingClass, sizeConfig.text].join(" ");
+    const sizeClass = [sizeConfig.paddingY, sizeConfig.paddingX, sizeConfig.text].join(" ");
+    const roundedClass = variant === "sharp" || variant === "text" || variant === "underlined" ? "rounded-none" : roundedClasses3[rounded];
     const inputName = inputProps.name || reactId;
     const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
     const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
     const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
-    const labelLeftClass = hasLeadingAdornment ? "left-10" : "left-3";
-    const labelFocusLeftClass = hasLeadingAdornment ? "peer-focus:left-10" : "peer-focus:left-3";
-    const renderPrefix = hasPrefix ? typeof prefix === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: prefix }) : prefix : null;
-    const renderSuffix = hasSuffix ? typeof suffix === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: suffix }) : suffix : null;
-    const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
+    const renderPrepend = hasPrepend ? typeof prepend === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: prepend }) : prepend : null;
+    const renderAppend = hasAppend ? typeof append === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: append }) : append : null;
+    const labelBgDefault = "bg-white px-1 dark:bg-slate-900";
     const handleFocus = (event) => {
       if (hidePlaceholderUntilFocus) setIsFocused(true);
       onFocus?.(event);
@@ -2900,62 +2906,43 @@ var Input = React4__namespace.default.forwardRef(
       onBlur?.(event);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-        hasLeadingAdornment && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute left-3 inset-y-0 flex items-center gap-2", children: [
-          prependIconClass && /* @__PURE__ */ jsxRuntime.jsx(
-            "i",
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex w-full items-center gap-2", classBase, variantClass, roundedClass, toneClass, sizeClass, className), children: [
+        hasPrepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", children: renderPrepend }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...inputProps,
+              ref,
+              id: inputName,
+              name: inputName,
+              placeholder: placeholderValue,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              className: tailwindMerge.twMerge(inputBase, placeholderClass)
+            }
+          ),
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
             {
+              htmlFor: inputName,
               className: tailwindMerge.twMerge(
-                "text-gray-500 dark:text-gray-400",
-                status?.tone && statusMessageClasses[status?.tone] || "",
-                prependIconClass
+                "absolute left-0 z-10 transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
+                // Floated state: keep label above the border for readability
+                "-top-2 -translate-y-full text-xs",
+                labelBgDefault,
+                // focus state keeps the same elevated position
+                "peer-focus:left-0 peer-focus:-top-5 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-gray-600 dark:peer-focus:text-gray-300",
+                // when input is empty (placeholder shown) -> center label inside input
+                "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400",
+                // explicit filled state so label remains visible for any variant/value combination
+                "peer-[&:not(:placeholder-shown)]:left-0 peer-[&:not(:placeholder-shown)]:-top-2 peer-[&:not(:placeholder-shown)]:-translate-y-full peer-[&:not(:placeholder-shown)]:text-xs peer-[&:not(:placeholder-shown)]:text-gray-700 dark:peer-[&:not(:placeholder-shown)]:text-gray-200"
               ),
-              "aria-hidden": true
+              children: label
             }
-          ),
-          renderPrefix
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ...inputProps,
-            ref,
-            id: inputName,
-            name: inputName,
-            placeholder: placeholderValue,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            className: tailwindMerge.twMerge(
-              "peer",
-              classBase,
-              variantClass,
-              toneClass,
-              sizeClass,
-              placeholderClass,
-              className
-            )
-          }
-        ),
-        label && /* @__PURE__ */ jsxRuntime.jsx(
-          "label",
-          {
-            htmlFor: inputName,
-            className: tailwindMerge.twMerge(
-              "absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200",
-              labelLeftClass,
-              // Floated state: center label's vertical middle on the top border line
-              "-top-1.5 -translate-y-2/3 text-xs px-1",
-              labelBgDefault,
-              // focus state mirrors floated state (keeps center on border)
-              labelFocusLeftClass,
-              "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300",
-              // when input is empty (placeholder shown) -> center label inside input
-              "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
-            ),
-            children: label
-          }
-        ),
-        hasTrailingAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-3 inset-y-0 flex items-center", children: renderSuffix })
+        hasAppend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", children: renderAppend })
       ] }),
       status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
     ] });
@@ -3058,7 +3045,7 @@ var TextArea = ({
   const modeToggleName = `${textareaId}-mode-toggle`;
   const simpleToggleId = `${modeToggleName}-simple`;
   const advancedToggleId = `${modeToggleName}-advanced`;
-  const turndownService = React4__namespace.default.useMemo(() => {
+  const turndownService = React__namespace.default.useMemo(() => {
     const service = new TurndownService__default.default({
       codeBlockStyle: "fenced",
       emDelimiter: "*",
@@ -3071,8 +3058,8 @@ var TextArea = ({
     });
     return service;
   }, []);
-  const hiddenTextareaRef = React4__namespace.default.useRef(null);
-  const lastMarkdownRef = React4__namespace.default.useRef(contentValue);
+  const hiddenTextareaRef = React__namespace.default.useRef(null);
+  const lastMarkdownRef = React__namespace.default.useRef(contentValue);
   const editorContentClass = tailwindMerge.twMerge(
     baseClass,
     "min-h-45 rounded border-0 bg-transparent outline-none whitespace-pre-wrap wrap-break-words",
@@ -3110,11 +3097,11 @@ var TextArea = ({
       dispatchInputEvent(hiddenTextareaRef.current);
     }
   });
-  React4__namespace.default.useEffect(() => {
+  React__namespace.default.useEffect(() => {
     if (!editor) return;
     editor.setEditable(editorEditable);
   }, [editor, editorEditable]);
-  React4__namespace.default.useEffect(() => {
+  React__namespace.default.useEffect(() => {
     if (!editor) return;
     editor.setOptions({
       editorProps: {
@@ -3129,7 +3116,7 @@ var TextArea = ({
       }
     });
   }, [editor, editorContentClass, label, advancedLabelId]);
-  React4__namespace.default.useEffect(() => {
+  React__namespace.default.useEffect(() => {
     if (!editor || typeof value !== "string") return;
     if (value === lastMarkdownRef.current) return;
     editor.commands.setContent(renderMarkdown(value), { emitUpdate: false });
@@ -3138,7 +3125,7 @@ var TextArea = ({
       hiddenTextareaRef.current.value = value;
     }
   }, [editor, value]);
-  React4__namespace.default.useEffect(() => {
+  React__namespace.default.useEffect(() => {
     if (!hiddenTextareaRef.current) return;
     if (hiddenTextareaRef.current.value === contentValue) return;
     hiddenTextareaRef.current.value = contentValue;
@@ -3439,8 +3426,7 @@ var variantClasses4 = {
   text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
   ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
   filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
-  underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70",
-  rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
+  underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70"
 };
 var sizeClasses3 = {
   "x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
@@ -3459,7 +3445,7 @@ var toIdSafe = (value) => {
   const sanitized = value.replace(/\s+/g, "-").replace(/[^A-Za-z0-9_-]/g, "");
   return sanitized || "opt";
 };
-var resolveIconClassName5 = (icon) => {
+var resolveIconClassName4 = (icon) => {
   if (!icon) {
     return void 0;
   }
@@ -3484,7 +3470,7 @@ var resolveIconClassName5 = (icon) => {
   const classes = [...baseClasses, normalizedName];
   return Array.from(new Set(classes)).join(" ");
 };
-var Select = React4__namespace.default.forwardRef(
+var Select = React__namespace.default.forwardRef(
   ({
     options,
     label,
@@ -3568,7 +3554,7 @@ var Select = React4__namespace.default.forwardRef(
                 const optionValueStr = String(option.value);
                 const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
                 const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
-                const iconClassName = resolveIconClassName5(option.icon);
+                const iconClassName = resolveIconClassName4(option.icon);
                 const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "label",
@@ -3682,19 +3668,19 @@ var Slider = ({
   const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);
   const resolvedStep = toNumber(step, 1);
   const isControlled = typeof value === "number";
-  const [internalValue, setInternalValue] = React4.useState(
+  const [internalValue, setInternalValue] = React.useState(
     clamp(
       typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : resolvedMin,
       resolvedMin,
       resolvedMax
     )
   );
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (isControlled && typeof value === "number") {
       setInternalValue(clamp(value, resolvedMin, resolvedMax));
     }
   }, [isControlled, value, resolvedMin, resolvedMax]);
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (!isControlled) {
       setInternalValue((prev) => clamp(prev, resolvedMin, resolvedMax));
     }
@@ -3725,8 +3711,8 @@ var Slider = ({
   const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-2", wrapperClassName), children: [
     (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
-      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("tabular-nums text-gray-900", sizeToken.valueClass), children: displayValue })
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: label }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("tabular-nums text-gray-900 dark:text-gray-100", sizeToken.valueClass), children: displayValue })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -3748,7 +3734,7 @@ var Slider = ({
         style: cssVars
       }
     ),
-    hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600", children: hint })
+    hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: hint })
   ] });
 };
 var Slider_default = Slider;
@@ -3768,14 +3754,14 @@ var thumbTranslate = {
   large: "translate-x-6"
 };
 var paletteTrackClasses = {
-  primary: { active: "bg-primary", inactive: "bg-gray-300" },
-  neutral: { active: "bg-gray-600", inactive: "bg-gray-300" },
-  info: { active: "bg-sky-500", inactive: "bg-gray-300" },
-  success: { active: "bg-emerald-500", inactive: "bg-gray-300" },
-  warning: { active: "bg-amber-500", inactive: "bg-gray-300" },
-  danger: { active: "bg-red-500", inactive: "bg-gray-300" },
-  surface: { active: "bg-gray-900", inactive: "bg-gray-300" },
-  bw: { active: "bg-black", inactive: "bg-gray-200" }
+  primary: { active: "bg-primary", inactive: "bg-gray-300 dark:bg-gray-700" },
+  neutral: { active: "bg-gray-600 dark:bg-gray-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  info: { active: "bg-sky-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  success: { active: "bg-emerald-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  warning: { active: "bg-amber-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  danger: { active: "bg-red-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  surface: { active: "bg-gray-900 dark:bg-gray-100", inactive: "bg-gray-300 dark:bg-gray-700" },
+  bw: { active: "bg-black dark:bg-white", inactive: "bg-gray-200 dark:bg-gray-700" }
 };
 var focusRingClasses = {
   primary: "peer-focus-visible:ring-primary/40",
@@ -3797,7 +3783,7 @@ var thumbActiveClasses = {
   surface: "border-gray-900 shadow-[0_4px_12px_rgba(15,23,42,0.32)]",
   bw: "border-black shadow-[0_4px_12px_rgba(0,0,0,0.32)]"
 };
-var Switch = React4.forwardRef(
+var Switch = React.forwardRef(
   ({
     color = "primary",
     size = "medium",
@@ -3816,10 +3802,10 @@ var Switch = React4.forwardRef(
     const focusClass = focusRingClasses[color] ?? focusRingClasses.primary;
     const thumbActive = thumbActiveClasses[color] ?? thumbActiveClasses.primary;
     const isControlled = checked !== void 0;
-    const [internalChecked, setInternalChecked] = React4.useState(
+    const [internalChecked, setInternalChecked] = React.useState(
       Boolean((isControlled ? checked : defaultChecked) ?? false)
     );
-    React4.useEffect(() => {
+    React.useEffect(() => {
       if (isControlled) {
         setInternalChecked(Boolean(checked));
       }
@@ -3860,8 +3846,8 @@ var Switch = React4.forwardRef(
                   "block rounded-full border border-transparent transition-all duration-200",
                   sizeTrackClass,
                   currentChecked ? paletteTrack.active : paletteTrack.inactive,
-                  disabled && "bg-gray-200",
-                  "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
+                  disabled && "bg-gray-200 dark:bg-gray-700",
+                  "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-offset-gray-900",
                   focusClass,
                   className
                 ),
@@ -3870,11 +3856,11 @@ var Switch = React4.forwardRef(
                   "span",
                   {
                     className: tailwindMerge.twMerge(
-                      "absolute left-0.5 top-0.5 rounded-full bg-white shadow-md border border-gray-200 transition-transform duration-200",
+                      "absolute left-0.5 top-0.5 rounded-full bg-white dark:bg-gray-900 shadow-md border border-gray-200 dark:border-gray-600 transition-transform duration-200",
                       sizeThumbClass,
                       currentChecked && thumbShiftClass,
                       currentChecked && thumbActive,
-                      disabled && "border-gray-300"
+                      disabled && "border-gray-300 dark:border-gray-600"
                     )
                   }
                 )
@@ -3882,8 +3868,8 @@ var Switch = React4.forwardRef(
             )
           ] }),
           (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tailwindMerge.twMerge("flex flex-col leading-tight", labelClassName), children: [
-            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: description })
+            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: label }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: description })
           ] })
         ]
       }
@@ -3900,14 +3886,14 @@ var sizeClasses4 = {
   "x-large": "text-2xl"
 };
 var colorClasses2 = {
-  primary: "text-primary",
-  neutral: "text-gray-700",
-  info: "text-sky-600",
-  success: "text-emerald-600",
-  warning: "text-amber-600",
-  danger: "text-red-600",
-  surface: "text-gray-900",
-  bw: "text-black"
+  primary: "text-primary dark:text-primary",
+  neutral: "text-gray-700 dark:text-gray-300",
+  info: "text-sky-600 dark:text-sky-400",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  danger: "text-red-600 dark:text-red-400",
+  surface: "text-gray-900 dark:text-gray-100",
+  bw: "text-black dark:text-white"
 };
 var Icon = ({ className, icon, size, color, ...rest }) => {
   const normalizeMdiName = (value) => {
@@ -4040,7 +4026,7 @@ var resolveVariantClass3 = (variant, type) => {
       return "bg-white/95 text-gray-900 border border-gray-200";
   }
 };
-var resolveIconClassName6 = (icon) => {
+var resolveIconClassName5 = (icon) => {
   if (!icon) return void 0;
   if (typeof icon === "string") {
     const trimmed = icon.trim();
@@ -4054,8 +4040,8 @@ var resolveIconClassName6 = (icon) => {
   return `mdi ${library} ${normalized}`.trim();
 };
 var resolveIconNode2 = (icon, fallbackClassName) => {
-  if (React4__namespace.isValidElement(icon)) return icon;
-  const iconClassName = resolveIconClassName6(icon) ?? fallbackClassName;
+  if (React__namespace.isValidElement(icon)) return icon;
+  const iconClassName = resolveIconClassName5(icon) ?? fallbackClassName;
   if (!iconClassName) return null;
   const hasBase = iconClassName.split(" ").some((token) => token.trim() === "mdi");
   const hasGlyph = iconClassName.includes("mdi-");
@@ -4186,7 +4172,7 @@ var Notification = ({
 };
 var Notification_default = Notification;
 var useNotification = (defaultMessage) => {
-  const [messages, setMessages] = React4.useState([]);
+  const [messages, setMessages] = React.useState([]);
   const clearNotifications = (key) => {
     setMessages((prev) => key ? prev.filter((notification) => notification.key !== key) : []);
   };
@@ -4581,7 +4567,7 @@ var resolveIconNode3 = (icon) => {
   const iconClass = resolveIconClassName2(icon);
   return iconClass ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconClass, "aria-hidden": true }) : null;
 };
-var TimeLineItem = React4__namespace.forwardRef((props, ref) => {
+var TimeLineItem = React__namespace.forwardRef((props, ref) => {
   const {
     title,
     subtitle,
@@ -4700,13 +4686,13 @@ var TimeLineItem = React4__namespace.forwardRef((props, ref) => {
 });
 TimeLineItem.displayName = "TimeLine.Item";
 var isTimeLineItem = (child) => {
-  if (!React4__namespace.isValidElement(child)) {
+  if (!React__namespace.isValidElement(child)) {
     return false;
   }
   const elementType = child.type;
   return child.type === TimeLineItem || elementType.displayName === TimeLineItem.displayName;
 };
-var TimeLine = React4__namespace.forwardRef((props, ref) => {
+var TimeLine = React__namespace.forwardRef((props, ref) => {
   const {
     side = "right",
     axis = "center",
@@ -4721,12 +4707,12 @@ var TimeLine = React4__namespace.forwardRef((props, ref) => {
     ...rest
   } = props;
   const resolvedGap = densityGapClasses[density] ?? densityGapClasses.default;
-  const childArray = React4__namespace.Children.toArray(children);
+  const childArray = React__namespace.Children.toArray(children);
   const resolvedChildren = childArray.map((child, index) => {
     if (!isTimeLineItem(child)) {
       return child;
     }
-    return React4__namespace.cloneElement(child, {
+    return React__namespace.cloneElement(child, {
       __timelineSide: side,
       __timelineAxis: axis,
       __timelineAlign: align,