@lindle/linoardo 1.0.46 → 1.0.47

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);
 
@@ -49,7 +49,6 @@ var blackAndWhitePaletteClasses = {
   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"
 };
 var paletteVariantClasses = {
@@ -60,8 +59,7 @@ var paletteVariantClasses = {
     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"
+    underlined: "bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25"
   },
   neutral: {
     solid: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
@@ -70,8 +68,7 @@ var paletteVariantClasses = {
     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"
+    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300"
   },
   info: {
     solid: "bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
@@ -80,8 +77,7 @@ var paletteVariantClasses = {
     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"
+    underlined: "bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200"
   },
   success: {
     solid: "bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
@@ -90,8 +86,7 @@ var paletteVariantClasses = {
     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"
+    underlined: "bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200"
   },
   warning: {
     solid: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
@@ -100,8 +95,7 @@ var paletteVariantClasses = {
     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"
+    underlined: "bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200"
   },
   danger: {
     solid: "bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
@@ -110,8 +104,7 @@ var paletteVariantClasses = {
     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"
+    underlined: "bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200"
   },
   surface: {
     solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
@@ -120,8 +113,7 @@ var paletteVariantClasses = {
     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"
+    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200"
   },
   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,7 +224,71 @@ 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
@@ -245,7 +301,6 @@ var blackAndWhitePaletteClasses2 = {
   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"
 };
 var paletteVariantClasses2 = {
@@ -256,8 +311,7 @@ var paletteVariantClasses2 = {
     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"
+    underlined: "bg-transparent text-primary border-0 border-b-2 border-primary px-0 rounded-none hover:text-primary/80"
   },
   neutral: {
     solid: "bg-gray-900 text-white border border-gray-900 hover:bg-gray-800",
@@ -266,8 +320,7 @@ var paletteVariantClasses2 = {
     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"
+    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-500 px-0 rounded-none hover:text-gray-700"
   },
   info: {
     solid: "bg-sky-500 text-white border border-sky-500 hover:bg-sky-600",
@@ -276,8 +329,7 @@ var paletteVariantClasses2 = {
     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"
+    underlined: "bg-transparent text-sky-600 border-0 border-b-2 border-sky-500 px-0 rounded-none hover:text-sky-700"
   },
   success: {
     solid: "bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600",
@@ -286,8 +338,7 @@ var paletteVariantClasses2 = {
     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"
+    underlined: "bg-transparent text-emerald-600 border-0 border-b-2 border-emerald-500 px-0 rounded-none hover:text-emerald-700"
   },
   warning: {
     solid: "bg-amber-500 text-white border border-amber-500 hover:bg-amber-600",
@@ -296,8 +347,7 @@ var paletteVariantClasses2 = {
     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"
+    underlined: "bg-transparent text-amber-700 border-0 border-b-2 border-amber-500 px-0 rounded-none hover:text-amber-800"
   },
   danger: {
     solid: "bg-red-500 text-white border border-red-500 hover:bg-red-600",
@@ -306,8 +356,7 @@ var paletteVariantClasses2 = {
     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"
+    underlined: "bg-transparent text-red-600 border-0 border-b-2 border-red-500 px-0 rounded-none hover:text-red-700"
   },
   surface: {
     solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50",
@@ -316,8 +365,7 @@ var paletteVariantClasses2 = {
     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"
+    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-400 px-0 rounded-none hover:text-gray-600"
   },
   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",
@@ -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;
@@ -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 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";
 var overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]";
-var Menu = React4__namespace.forwardRef((props, ref) => {
+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;
@@ -1196,7 +1269,7 @@ 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;
@@ -1272,7 +1345,7 @@ var ExpansionPanelInner = (props, forwardedRef) => {
     }
   );
 };
-var ExpansionPanelBase = React4.forwardRef(ExpansionPanelInner);
+var ExpansionPanelBase = React.forwardRef(ExpansionPanelInner);
 var ExpansionPanel = Object.assign(ExpansionPanelBase, {
   Item: ExpansionPanelItem_default
 });
@@ -1288,7 +1361,7 @@ var resolveSizeValue = (value) => {
   }
   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,
@@ -1514,7 +1587,7 @@ 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 Overlay = React__namespace.forwardRef((props, ref) => {
   const {
     open,
     keepMounted = false,
@@ -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;
@@ -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);
@@ -2042,7 +2113,7 @@ var panelVariantClasses = {
   pill: "mt-3 rounded-2xl border border-gray-200 bg-white/90 p-4"
 };
 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,
@@ -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,
@@ -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(
@@ -2479,7 +2550,6 @@ var containerVariants = {
   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"
 };
 var frameRadii = {
@@ -2489,7 +2559,6 @@ var frameRadii = {
   ghost: "rounded-2xl",
   filled: "rounded-3xl",
   underlined: "rounded-2xl",
-  rounded: "rounded-3xl",
   sharp: "rounded-none"
 };
 var badgeVariants = {
@@ -2499,7 +2568,6 @@ var badgeVariants = {
   ghost: "bg-primary/15 text-primary border border-primary/25",
   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"
 };
 var Hero = ({
@@ -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));
     }
@@ -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));
       }
@@ -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,