@lindle/linoardo 1.0.9 → 1.0.11

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as React5 from 'react';
+import * as React4 from 'react';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -8,60 +8,90 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 var iconBaseClasses = {
   mdi: ["mdi"]
 };
-
-// src/Containment/Button/states.button.ts
-var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-md transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
-var blackAndWhiteVariantClass = "bg-white     text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white";
+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 blackAndWhiteVariantClass = "bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white";
+var blackAndWhitePaletteClasses = {
+  solid: twMerge(blackAndWhiteVariantClass, "bg-black text-white"),
+  outline: blackAndWhiteVariantClass,
+  ghost: "bg-neutral-300 text-white",
+  text: blackAndWhiteVariantClass,
+  filled: "bg-black text-white",
+  underlined: twMerge(blackAndWhiteVariantClass, "b"),
+  rounded: blackAndWhiteVariantClass,
+  sharp: "bg-black text-white rounded-none"
+};
 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",
-    text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2",
-    bw: blackAndWhiteVariantClass
+    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"
   },
   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",
-    text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2",
-    bw: blackAndWhiteVariantClass
+    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"
   },
   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",
-    text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2",
-    bw: blackAndWhiteVariantClass
+    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"
   },
   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",
-    text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2",
-    bw: blackAndWhiteVariantClass
+    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"
   },
   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",
-    text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2",
-    bw: blackAndWhiteVariantClass
+    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"
   },
   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",
-    text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2",
-    bw: blackAndWhiteVariantClass
+    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"
   },
   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",
-    text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2",
-    bw: blackAndWhiteVariantClass
-  }
+    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"
+  },
+  bw: blackAndWhitePaletteClasses
 };
 var resolveVariantClass = (variant, palette) => {
   const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;
@@ -99,7 +129,7 @@ var sizeClasses = {
   large: "px-6 py-3 text-lg",
   "x-large": "px-7 py-3.5 text-xl"
 };
-var Button = React5.forwardRef(
+var Button = React4.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -134,7 +164,7 @@ var Button = React5.forwardRef(
         ref,
         onClick,
         disabled: isDisabled,
-        className: twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className, "border-2 border-l"),
+        className: twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
         "data-loading": loading || void 0,
         "aria-busy": loading || void 0,
         children: [
@@ -158,56 +188,88 @@ var chipSizeClasses = {
 };
 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 blackAndWhiteChipVariantClass = "bg-white text-black border border-black hover:bg-white focus-visible:ring-black/40 focus-visible:ring-offset-white";
+var blackAndWhitePaletteClasses2 = {
+  solid: blackAndWhiteChipVariantClass,
+  outline: blackAndWhiteChipVariantClass,
+  ghost: blackAndWhiteChipVariantClass,
+  text: blackAndWhiteChipVariantClass,
+  filled: blackAndWhiteChipVariantClass,
+  underlined: blackAndWhiteChipVariantClass,
+  rounded: blackAndWhiteChipVariantClass,
+  sharp: `${blackAndWhiteChipVariantClass} rounded-none`
+};
 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",
-    bw: blackAndWhiteChipVariantClass
+    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"
   },
   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",
-    bw: blackAndWhiteChipVariantClass
+    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"
   },
   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",
-    bw: blackAndWhiteChipVariantClass
+    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"
   },
   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",
-    bw: blackAndWhiteChipVariantClass
+    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"
   },
   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",
-    bw: blackAndWhiteChipVariantClass
+    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"
   },
   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",
-    bw: blackAndWhiteChipVariantClass
+    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"
   },
   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",
-    bw: blackAndWhiteChipVariantClass
-  }
+    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"
+  },
+  bw: blackAndWhitePaletteClasses2
 };
 var resolveVariantClass2 = (variant, palette) => {
   const variants = paletteVariantClasses2[palette] ?? paletteVariantClasses2.primary;
@@ -238,7 +300,7 @@ var resolveIconClassName2 = (icon) => {
   const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
   return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
 };
-var Chip = React5.forwardRef(
+var Chip = React4.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -270,7 +332,7 @@ var Chip = React5.forwardRef(
     const appendIconClassName = resolveIconClassName2(appendIcon);
     const closeIconClassName = resolveIconClassName2(closeIcon);
     const filterIconClassName = filter && selected ? resolveIconClassName2(filterIcon) : void 0;
-    const handleClick = React5.useCallback(
+    const handleClick = React4.useCallback(
       (event) => {
         if (disabled) {
           event.preventDefault();
@@ -281,7 +343,7 @@ var Chip = React5.forwardRef(
       },
       [disabled, onClick]
     );
-    const handleKeyDown = React5.useCallback(
+    const handleKeyDown = React4.useCallback(
       (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented || disabled || !interactive) {
@@ -294,7 +356,7 @@ var Chip = React5.forwardRef(
       },
       [disabled, interactive, onKeyDown]
     );
-    const handleCloseClick = React5.useCallback(
+    const handleCloseClick = React4.useCallback(
       (event) => {
         event.stopPropagation();
         if (disabled) {
@@ -305,7 +367,7 @@ var Chip = React5.forwardRef(
       },
       [disabled, onClose]
     );
-    const handleCloseKeyDown = React5.useCallback((event) => {
+    const handleCloseKeyDown = React4.useCallback((event) => {
       if (event.key === " " || event.key === "Enter") {
         event.stopPropagation();
       }
@@ -374,9 +436,10 @@ var accentClasses = {
   success: { text: "text-emerald-600", bg: "bg-emerald-50", indicator: "bg-emerald-500" },
   warning: { text: "text-amber-700", bg: "bg-amber-50", indicator: "bg-amber-500" },
   danger: { text: "text-red-600", bg: "bg-red-50", indicator: "bg-red-500" },
-  surface: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" }
+  surface: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" },
+  bw: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" }
 };
-var ListItem = React5.forwardRef((props, ref) => {
+var ListItem = React4.forwardRef((props, ref) => {
   const {
     component,
     href,
@@ -396,6 +459,7 @@ var ListItem = React5.forwardRef((props, ref) => {
     nav: navOverride,
     divided: dividedOverride,
     color: colorOverride,
+    sharp: sharpOverride,
     className,
     children,
     tabIndex,
@@ -407,8 +471,9 @@ var ListItem = React5.forwardRef((props, ref) => {
   const nav = navOverride ?? false;
   const divided = dividedOverride ?? false;
   const color = colorOverride ?? "primary";
+  const sharp = sharpOverride ?? false;
   const accent = accentClasses[color] ?? accentClasses.primary;
-  const shapeClass = divided ? "rounded-none" : "rounded-lg";
+  const shapeClass = divided || sharp ? "rounded-none" : "rounded-lg";
   const Component = component ?? (href ? "a" : "div");
   const interactive = typeof rest.onClick === "function" || Component === "a" || Component === "button";
   const resolvedRole = role ?? "listitem";
@@ -474,10 +539,13 @@ var Item_default = ListItem;
 var listBaseClasses = "flex w-full min-w-0 flex-col text-gray-900 transition-colors duration-150";
 var listVariantClasses = {
   solid: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5",
+  sharp: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5 rounded-none",
   outline: "bg-transparent border border-gray-300",
   ghost: "bg-gray-50 border border-transparent",
   text: "bg-transparent border border-transparent",
-  bw: "bg-white text-black border border-black shadow-none"
+  filled: "bg-gray-50 border border-gray-200 shadow-inner shadow-gray-900/5",
+  underlined: "bg-transparent border border-transparent border-b border-gray-200 rounded-none",
+  rounded: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10"
 };
 var listRoundedClasses = {
   none: "rounded-none",
@@ -488,13 +556,13 @@ var listRoundedClasses = {
   pill: "rounded-full"
 };
 var isListItemElement = (element) => {
-  if (!React5.isValidElement(element)) {
+  if (!React4.isValidElement(element)) {
     return false;
   }
   const elementType = element.type;
   return element.type === Item_default || elementType.displayName === Item_default.displayName;
 };
-var List = React5.forwardRef((props, ref) => {
+var List = React4.forwardRef((props, ref) => {
   const {
     variant = "solid",
     density = "default",
@@ -508,34 +576,36 @@ var List = React5.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
+  const isSharpVariant = variant === "sharp";
   const variantClass = listVariantClasses[variant] ?? listVariantClasses.solid;
-  const roundedClass = listRoundedClasses[rounded] ?? listRoundedClasses.lg;
+  const roundedClass = isSharpVariant ? "rounded-none" : listRoundedClasses[rounded] ?? listRoundedClasses.lg;
   const dividerClass = divided ? "divide-y divide-gray-100" : void 0;
   const gapClass = divided ? "p-0" : "gap-1 p-1";
   const navClass = nav ? "py-1" : void 0;
-  const accentColor = variant === "bw" ? "surface" : color;
+  const accentColor = color;
   const enhanceChild = (child) => {
-    if (!React5.isValidElement(child)) {
+    if (!React4.isValidElement(child)) {
       return child;
     }
     if (isListItemElement(child)) {
-      return React5.cloneElement(child, {
+      return React4.cloneElement(child, {
         density: child.props.density ?? density,
         lines: child.props.lines ?? lines,
         nav: child.props.nav ?? nav,
         divided: child.props.divided ?? divided,
-        color: child.props.color ?? accentColor
+        color: child.props.color ?? accentColor,
+        sharp: child.props.sharp ?? isSharpVariant
       });
     }
     if (child.props && typeof child.props === "object" && "children" in child.props) {
-      const nestedChildren = React5.Children.map(child.props.children, enhanceChild);
+      const nestedChildren = React4.Children.map(child.props.children, enhanceChild);
       if (nestedChildren !== child.props.children) {
-        return React5.cloneElement(child, void 0, nestedChildren);
+        return React4.cloneElement(child, void 0, nestedChildren);
       }
     }
     return child;
   };
-  const resolvedChildren = React5.Children.map(children, enhanceChild);
+  const resolvedChildren = React4.Children.map(children, enhanceChild);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -549,8 +619,6 @@ var List = React5.forwardRef((props, ref) => {
 });
 List.displayName = "List";
 var List_default = List;
-var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? React5.useLayoutEffect : React5.useEffect;
 var placementClasses = {
   "bottom-start": "left-0 top-full origin-top-left",
   bottom: "left-1/2 top-full -translate-x-1/2 origin-top",
@@ -563,350 +631,75 @@ var offsetClasses = {
   top: "mb-2",
   bottom: "mt-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 data-[state=closed]:pointer-events-none data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-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 = React5.forwardRef((props, ref) => {
+var Menu = React4.forwardRef((props, ref) => {
   const {
     activator,
     children,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
     placement = "bottom-start",
-    openOnHover = false,
-    closeOnContentClick = true,
+    open,
+    openOnHover = true,
+    openOnFocus = true,
     matchActivatorWidth = false,
     keepMounted = false,
-    disabled = false,
     scrim = false,
     contentClassName,
     contentProps,
     overlayClassName,
     className,
-    onMouseEnter: rootMouseEnter,
-    onMouseLeave: rootMouseLeave,
     ...rest
   } = props;
-  const baseId = React5.useId();
-  const menuId = `${baseId}-menu`;
-  const activatorId = `${baseId}-activator`;
-  const isControlled = typeof openProp === "boolean";
-  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
-  const open = isControlled ? Boolean(openProp) : internalOpen;
-  const localRootRef = React5.useRef(null);
-  const menuRef = React5.useRef(null);
-  const activatorRef = React5.useRef(null);
-  const closeTimeoutRef = React5.useRef(null);
-  const mergedRootRef = React5.useCallback(
-    (node) => {
-      localRootRef.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    },
-    [ref]
-  );
-  const [activatorWidth, setActivatorWidth] = React5.useState();
-  const updateActivatorWidth = React5.useCallback(() => {
-    if (!matchActivatorWidth) {
-      setActivatorWidth(void 0);
-      return;
-    }
-    const node = activatorRef.current;
-    if (!node) {
-      return;
-    }
-    setActivatorWidth(node.getBoundingClientRect().width);
-  }, [matchActivatorWidth]);
-  useIsomorphicLayoutEffect(() => {
-    if (!matchActivatorWidth) {
-      return;
-    }
-    updateActivatorWidth();
-    if (!activatorRef.current || typeof ResizeObserver === "undefined") {
-      return;
-    }
-    const observer = new ResizeObserver(() => updateActivatorWidth());
-    observer.observe(activatorRef.current);
-    return () => observer.disconnect();
-  }, [matchActivatorWidth, updateActivatorWidth]);
-  const setOpen = React5.useCallback(
-    (nextOpen) => {
-      if (disabled || open === nextOpen) {
-        return;
-      }
-      if (!isControlled) {
-        setInternalOpen(nextOpen);
-      }
-      onOpenChange?.(nextOpen);
-    },
-    [disabled, isControlled, onOpenChange, open]
-  );
-  React5.useEffect(() => {
-    if (!disabled || !open) {
-      return;
-    }
-    if (!isControlled) {
-      setInternalOpen(false);
-    }
-    onOpenChange?.(false);
-  }, [disabled, open, isControlled, onOpenChange]);
-  React5.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const handlePointerDown = (event) => {
-      const target = event.target;
-      if (!target) {
-        return;
-      }
-      if (localRootRef.current?.contains(target)) {
-        return;
-      }
-      setOpen(false);
-    };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        setOpen(false);
-        activatorRef.current?.focus();
-      }
-    };
-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open, setOpen]);
-  React5.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const node = menuRef.current;
-    if (!node) {
-      return;
-    }
-    const id = window.requestAnimationFrame(() => {
-      node.focus({ preventScroll: true });
-    });
-    return () => window.cancelAnimationFrame(id);
-  }, [open]);
-  const setActivatorNode = React5.useCallback(
-    (node) => {
-      activatorRef.current = node;
-      if (node && matchActivatorWidth) {
-        setActivatorWidth(node.getBoundingClientRect().width);
-      }
-    },
-    [matchActivatorWidth]
-  );
-  const handleActivatorClick = React5.useCallback(
-    (event) => {
-      event.preventDefault();
-      if (disabled) {
-        return;
-      }
-      setOpen(!open);
-    },
-    [disabled, open, setOpen]
-  );
-  const handleActivatorKeyDown = React5.useCallback(
-    (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        setOpen(!open);
-      }
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        setOpen(true);
-      }
-    },
-    [open, setOpen]
-  );
-  const clearCloseTimeout = React5.useCallback(() => {
-    if (closeTimeoutRef.current !== null) {
-      if (isBrowser) {
-        window.clearTimeout(closeTimeoutRef.current);
-      }
-      closeTimeoutRef.current = null;
-    }
-  }, []);
-  const scheduleClose = React5.useCallback(() => {
-    if (!isBrowser) {
-      setOpen(false);
-      return;
+  const hasContent = children !== void 0 && children !== null;
+  const manual = typeof open === "boolean";
+  const visible = Boolean(open);
+  const shouldRenderContent = hasContent && (keepMounted || visible || !manual && (openOnHover || openOnFocus));
+  const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
+  const visibilityClasses = (() => {
+    if (manual) {
+      return visible ? "pointer-events-auto opacity-100 scale-100" : "pointer-events-none opacity-0 scale-95";
     }
-    clearCloseTimeout();
-    closeTimeoutRef.current = window.setTimeout(() => {
-      setOpen(false);
-      closeTimeoutRef.current = null;
-    }, 150);
-  }, [clearCloseTimeout, setOpen]);
-  React5.useEffect(() => {
-    return () => clearCloseTimeout();
-  }, [clearCloseTimeout]);
-  const isMovingWithinMenu = React5.useCallback(
-    (event) => {
-      const nextTarget = event.relatedTarget;
-      if (!nextTarget || !localRootRef.current) {
-        return false;
-      }
-      return localRootRef.current.contains(nextTarget);
-    },
-    [localRootRef]
-  );
-  const handleRootMouseEnter = React5.useCallback(
-    (event) => {
-      rootMouseEnter?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (openOnHover) {
-        clearCloseTimeout();
-        setOpen(true);
-      }
-    },
-    [clearCloseTimeout, openOnHover, rootMouseEnter, setOpen]
-  );
-  const handleRootMouseLeave = React5.useCallback(
-    (event) => {
-      rootMouseLeave?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (openOnHover) {
-        if (isMovingWithinMenu(event)) {
-          return;
-        }
-        scheduleClose();
-      }
-    },
-    [isMovingWithinMenu, openOnHover, rootMouseLeave, scheduleClose]
-  );
-  const handleActivatorMouseEnter = React5.useCallback(
-    (_event) => {
-      if (disabled) {
-        return;
-      }
-      clearCloseTimeout();
-      setOpen(true);
-    },
-    [clearCloseTimeout, disabled, setOpen]
-  );
-  const handleActivatorMouseLeave = React5.useCallback(
-    (event) => {
-      if (disabled || !openOnHover) {
-        return;
-      }
-      if (isMovingWithinMenu(event)) {
-        return;
-      }
-      scheduleClose();
-    },
-    [disabled, isMovingWithinMenu, openOnHover, scheduleClose]
-  );
+    const base2 = "pointer-events-none opacity-0 scale-95";
+    const hover = openOnHover ? " group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100" : "";
+    const focus = openOnFocus ? " group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : "";
+    return `${base2}${hover}${focus}`;
+  })();
   const {
-    className: contentClass,
+    className: contentExtraClassName,
     style: contentStyle,
-    onClick: contentOnClick,
-    onMouseEnter: contentOnMouseEnter,
-    onMouseLeave: contentOnMouseLeave,
     role: contentRole,
     tabIndex: contentTabIndex,
-    ["aria-labelledby"]: ariaLabelledBy,
     ...restContentProps
   } = contentProps ?? {};
-  const shouldRenderContent = open || keepMounted;
-  const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
-  const activatorElement = activator({
-    ref: setActivatorNode,
-    id: activatorId,
-    "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": menuId,
-    onClick: handleActivatorClick,
-    onKeyDown: handleActivatorKeyDown,
-    onMouseEnter: openOnHover ? handleActivatorMouseEnter : void 0,
-    onMouseLeave: openOnHover ? handleActivatorMouseLeave : void 0,
-    disabled,
-    open
-  });
+  const overlayNode = scrim && visible ? /* @__PURE__ */ jsx("div", { className: twMerge(overlayBaseClasses, overlayClassName), "aria-hidden": true }) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    scrim && open ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: twMerge(overlayBaseClasses, overlayClassName),
-        "aria-hidden": true,
-        onClick: () => setOpen(false),
-        onMouseDown: (event) => event.preventDefault()
-      }
-    ) : null,
+    overlayNode,
     /* @__PURE__ */ jsxs(
       "div",
       {
         ...rest,
-        ref: mergedRootRef,
-        className: twMerge("relative inline-flex min-w-0", className),
-        "data-open": open || void 0,
-        onMouseEnter: openOnHover ? handleRootMouseEnter : rootMouseEnter,
-        onMouseLeave: openOnHover ? handleRootMouseLeave : rootMouseLeave,
+        ref,
+        className: twMerge("relative inline-flex min-w-0 group/menu", className),
+        "data-open": visible || void 0,
         children: [
-          activatorElement,
+          /* @__PURE__ */ jsx("div", { className: "inline-flex w-full min-w-0", children: activator }),
           shouldRenderContent ? /* @__PURE__ */ jsx(
             "div",
             {
               ...restContentProps,
-              ref: menuRef,
-              id: menuId,
-              role: contentRole ?? "menu",
-              tabIndex: contentTabIndex ?? -1,
-              "aria-labelledby": ariaLabelledBy ?? activatorId,
-              "data-state": open ? "open" : "closed",
               className: twMerge(
                 menuBaseClasses,
                 placementClasses[placement],
                 offsetClasses[verticalPlacement],
+                matchActivatorWidth ? "min-w-full" : void 0,
+                visibilityClasses,
                 contentClassName,
-                contentClass
+                contentExtraClassName
               ),
-              style: {
-                ...contentStyle,
-                ...matchActivatorWidth && activatorWidth ? { minWidth: activatorWidth, width: activatorWidth } : void 0
-              },
-              onMouseEnter: (event) => {
-                contentOnMouseEnter?.(event);
-                if (event.defaultPrevented) {
-                  return;
-                }
-                if (openOnHover) {
-                  clearCloseTimeout();
-                  setOpen(true);
-                }
-              },
-              onMouseLeave: (event) => {
-                contentOnMouseLeave?.(event);
-                if (event.defaultPrevented) {
-                  return;
-                }
-                if (openOnHover) {
-                  if (isMovingWithinMenu(event)) {
-                    return;
-                  }
-                  scheduleClose();
-                }
-              },
-              onClick: (event) => {
-                contentOnClick?.(event);
-                if (event.defaultPrevented) {
-                  return;
-                }
-                if (closeOnContentClick) {
-                  setOpen(false);
-                }
-              },
+              "data-state": visible ? "open" : "closed",
+              role: contentRole ?? "menu",
+              tabIndex: contentTabIndex ?? -1,
+              style: contentStyle,
               children
             }
           ) : null
@@ -917,6 +710,462 @@ var Menu = React5.forwardRef((props, ref) => {
 });
 Menu.displayName = "Menu";
 var Menu_default = Menu;
+var ExpansionPanelContext = React4.createContext(null);
+var densityClasses2 = {
+  comfortable: "py-5",
+  default: "py-4",
+  compact: "py-3"
+};
+var roundedClasses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  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",
+  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" }
+};
+var ExpansionPanelItem = React4.forwardRef((props, ref) => {
+  const {
+    value,
+    title,
+    subtitle,
+    text,
+    prepend,
+    append,
+    expandIcon,
+    collapseIcon,
+    hideToggleIcon = false,
+    headerClassName,
+    contentClassName,
+    className,
+    disabled = false,
+    children,
+    color: colorOverride,
+    ...rest
+  } = props;
+  const context = React4.useContext(ExpansionPanelContext);
+  const generatedValue = React4.useId();
+  const panelValue = value ?? generatedValue;
+  const density = context?.density ?? "default";
+  const color = colorOverride ?? context?.color ?? "primary";
+  const divider = context?.divider ?? true;
+  const variant = context?.variant ?? "elevated";
+  const rounded = context?.rounded ?? "lg";
+  const accent = accentClasses2[color] ?? accentClasses2.primary;
+  const headerId = React4.useId();
+  const contentId = React4.useId();
+  const [standaloneExpanded, setStandaloneExpanded] = React4.useState(false);
+  const isExpanded = context ? context.expandedValues.includes(panelValue) : standaloneExpanded;
+  const handleToggle = () => {
+    if (disabled) {
+      return;
+    }
+    if (context) {
+      context.toggle(panelValue, disabled);
+    } else {
+      setStandaloneExpanded((prev) => !prev);
+    }
+  };
+  const rootSurface = divider ? "bg-transparent border-0 shadow-none" : itemVariantClasses[variant];
+  const shapeClass = divider ? void 0 : roundedClasses[rounded] ?? roundedClasses.lg;
+  const densityPadding = densityClasses2[density] ?? densityClasses2.default;
+  const disabledClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
+  const titleClass = isExpanded ? accent.text : void 0;
+  const activeBorderClass = twMerge("border-l-2 border-transparent", isExpanded ? accent.border : void 0);
+  const defaultToggleIcon = /* @__PURE__ */ jsx("i", { className: "mdi mdi-chevron-down text-lg leading-none transition-transform duration-200", "aria-hidden": true });
+  const hasContent = Boolean(children ?? text);
+  const contentAnimationClass = isExpanded ? "pb-5 opacity-100" : "pb-0 opacity-0";
+  const toggleIconNode = hideToggleIcon ? null : isExpanded && collapseIcon ? collapseIcon : expandIcon ?? defaultToggleIcon;
+  const shouldRotateDefaultIcon = !expandIcon && !collapseIcon && !hideToggleIcon;
+  const toggleWrapperClass = twMerge(
+    "ml-3 flex h-6 w-6 items-center justify-center text-gray-500 transition-transform duration-200",
+    shouldRotateDefaultIcon && isExpanded ? "rotate-180" : void 0
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: twMerge(
+        "expansion-panel-item flex flex-col overflow-hidden transition-colors duration-200",
+        rootSurface,
+        shapeClass,
+        className
+      ),
+      "data-state": isExpanded ? "open" : "closed",
+      "data-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: headerId,
+            onClick: handleToggle,
+            disabled,
+            "aria-expanded": isExpanded,
+            "aria-controls": hasContent ? contentId : void 0,
+            className: twMerge(
+              "flex w-full items-center gap-4 px-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+              densityPadding,
+              disabledClass,
+              isExpanded ? accent.bg : void 0,
+              headerClassName
+            ),
+            "data-state": isExpanded ? "open" : "closed",
+            children: [
+              prepend && /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
+                title && /* @__PURE__ */ jsx("span", { className: twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
+                subtitle && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: subtitle })
+              ] }),
+              append && /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
+              !hideToggleIcon && /* @__PURE__ */ jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
+            ]
+          }
+        ),
+        hasContent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid overflow-hidden border-t border-gray-100 transition-all duration-200 ease-in-out",
+            style: { gridTemplateRows: isExpanded ? "1fr" : "0fr" },
+            "aria-hidden": isExpanded ? void 0 : true,
+            "data-state": isExpanded ? "open" : "closed",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: contentId,
+                role: "region",
+                "aria-labelledby": headerId,
+                "data-state": isExpanded ? "open" : "closed",
+                className: twMerge(
+                  "min-h-0 px-4 pt-0 text-sm text-gray-600 transition-all duration-200",
+                  activeBorderClass,
+                  contentAnimationClass,
+                  isExpanded ? "pointer-events-auto" : "pointer-events-none",
+                  contentClassName
+                ),
+                children: children ?? text
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+ExpansionPanelItem.displayName = "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",
+  plain: "bg-transparent border border-transparent"
+};
+var roundedClasses2 = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl"
+};
+var uniqueValues = (values) => Array.from(new Set(values));
+var normalizeValues = (value, allowMultiple) => {
+  if (value === void 0 || value === null) {
+    return [];
+  }
+  const normalized = Array.isArray(value) ? value : [value];
+  if (allowMultiple) {
+    return uniqueValues(normalized);
+  }
+  return normalized.length ? [normalized[0]] : [];
+};
+var clampValues = (values, allowMultiple) => allowMultiple ? uniqueValues(values) : values.length ? [values[0]] : [];
+var ExpansionPanel = React4.forwardRef((props, ref) => {
+  const {
+    variant = "elevated",
+    rounded = "lg",
+    density = "default",
+    color = "primary",
+    divider = true,
+    multiple = false,
+    value,
+    defaultValue,
+    onChange,
+    className,
+    children,
+    ...rest
+  } = props;
+  const isControlled = value !== void 0;
+  const controlledValues = React4.useMemo(() => {
+    if (!isControlled) {
+      return void 0;
+    }
+    return normalizeValues(value, multiple);
+  }, [isControlled, value, multiple]);
+  const [internalValues, setInternalValues] = React4.useState(
+    () => normalizeValues(defaultValue, multiple)
+  );
+  const expandedValues = controlledValues ?? internalValues;
+  React4.useEffect(() => {
+    if (!isControlled) {
+      setInternalValues((prev) => clampValues(prev, multiple));
+    }
+  }, [multiple, isControlled]);
+  const handleValueChange = React4.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInternalValues(next);
+      }
+      if (onChange) {
+        if (multiple) {
+          onChange(next);
+        } else {
+          onChange(next[0] ?? null);
+        }
+      }
+    },
+    [isControlled, multiple, onChange]
+  );
+  const toggle = React4.useCallback(
+    (panelValue, disabled) => {
+      if (disabled) {
+        return;
+      }
+      const isActive = expandedValues.includes(panelValue);
+      const next = multiple ? isActive ? expandedValues.filter((v) => v !== panelValue) : [...expandedValues, panelValue] : isActive ? [] : [panelValue];
+      handleValueChange(next);
+    },
+    [expandedValues, handleValueChange, multiple]
+  );
+  const providerValue = React4.useMemo(
+    () => ({ expandedValues, toggle, density, color, divider, rounded, variant }),
+    [expandedValues, toggle, density, color, divider, rounded, variant]
+  );
+  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";
+  return /* @__PURE__ */ jsx(ExpansionPanelContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: twMerge("expansion-panel flex w-full flex-col text-gray-900", variantClass, shapeClass, layoutClass, className),
+      children
+    }
+  ) });
+});
+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 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 resolveSizeValue = (value) => {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+};
+var Dialog = React4.forwardRef((props, forwardedRef) => {
+  const {
+    activator,
+    children,
+    open = false,
+    keepMounted = false,
+    scrim = true,
+    fullscreen = false,
+    maxWidth = "32rem",
+    width,
+    containerClassName,
+    overlayClassName,
+    overlayProps,
+    className,
+    style,
+    role: roleProp = "dialog",
+    tabIndex = -1,
+    id,
+    ["aria-modal"]: ariaModalProp,
+    ...rest
+  } = props;
+  const state = open ? "open" : "closed";
+  const shouldRenderDialog = keepMounted || open;
+  const resolvedStyle = { ...style };
+  if (fullscreen) {
+    if (resolvedStyle.maxWidth === void 0) {
+      resolvedStyle.maxWidth = "none";
+    }
+    if (resolvedStyle.width === void 0) {
+      resolvedStyle.width = "100%";
+    }
+    if (resolvedStyle.height === void 0) {
+      resolvedStyle.height = "100%";
+    }
+    if (resolvedStyle.maxHeight === void 0) {
+      resolvedStyle.maxHeight = "100%";
+    }
+  } else {
+    if (resolvedStyle.maxWidth === void 0) {
+      resolvedStyle.maxWidth = resolveSizeValue(maxWidth);
+    }
+    if (width !== void 0 && resolvedStyle.width === void 0) {
+      resolvedStyle.width = resolveSizeValue(width);
+    }
+  }
+  const ariaModal = ariaModalProp ?? (roleProp === "dialog" || roleProp === "alertdialog" ? true : void 0);
+  const { className: overlayExtraClassName, ...restOverlayProps } = overlayProps ?? {};
+  const overlayNode = shouldRenderDialog && scrim ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOverlayProps,
+      className: twMerge(overlayBaseClasses2, overlayClassName, overlayExtraClassName),
+      "data-state": state,
+      "aria-hidden": true
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    activator ? /* @__PURE__ */ jsx("div", { className: "inline-flex", children: activator }) : null,
+    shouldRenderDialog ? /* @__PURE__ */ jsxs("div", { className: twMerge(containerBaseClasses, containerClassName), "data-state": state, "aria-hidden": !open, children: [
+      overlayNode,
+      /* @__PURE__ */ jsx("div", { className: twMerge(panelWrapperClasses, fullscreen ? "h-full items-stretch" : "mx-auto"), "data-state": state, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          ref: forwardedRef,
+          id,
+          role: roleProp,
+          tabIndex,
+          "aria-modal": ariaModal,
+          className: twMerge(panelBaseClasses, fullscreen ? "h-full w-full max-w-none rounded-none" : void 0, className),
+          style: resolvedStyle,
+          "data-state": state,
+          children
+        }
+      ) })
+    ] }) : null
+  ] });
+});
+Dialog.displayName = "Dialog";
+var Dialog_default = Dialog;
+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 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 resolveSizeValue2 = (value) => {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+};
+var placementClasses2 = {
+  top: "bottom-full left-1/2 -translate-x-1/2 -translate-y-2 origin-bottom",
+  "top-start": "bottom-full left-0 -translate-y-2 origin-bottom-left",
+  "top-end": "bottom-full right-0 -translate-y-2 origin-bottom-right",
+  bottom: "top-full left-1/2 -translate-x-1/2 translate-y-2 origin-top",
+  "bottom-start": "top-full left-0 translate-y-2 origin-top-left",
+  "bottom-end": "top-full right-0 translate-y-2 origin-top-right",
+  left: "right-full top-1/2 -translate-y-1/2 -translate-x-2 origin-right",
+  "left-start": "right-full top-0 -translate-x-2 origin-top-right",
+  "left-end": "right-full bottom-0 -translate-x-2 origin-bottom-right",
+  right: "left-full top-1/2 -translate-y-1/2 translate-x-2 origin-left",
+  "right-start": "left-full top-0 translate-x-2 origin-top-left",
+  "right-end": "left-full bottom-0 translate-x-2 origin-bottom-left"
+};
+var arrowPlacementClasses = {
+  top: "left-1/2 top-full -translate-x-1/2 -translate-y-1/2",
+  "top-start": "left-4 top-full -translate-y-1/2",
+  "top-end": "right-4 top-full -translate-y-1/2",
+  bottom: "left-1/2 bottom-full -translate-x-1/2 translate-y-1/2",
+  "bottom-start": "left-4 bottom-full translate-y-1/2",
+  "bottom-end": "right-4 bottom-full translate-y-1/2",
+  left: "right-full top-1/2 -translate-y-1/2 translate-x-1/2",
+  "left-start": "right-full top-4 translate-x-1/2",
+  "left-end": "right-full bottom-4 translate-x-1/2",
+  right: "left-full top-1/2 -translate-y-1/2 -translate-x-1/2",
+  "right-start": "left-full top-4 -translate-x-1/2",
+  "right-end": "left-full bottom-4 -translate-x-1/2"
+};
+var ToolTip = React4.forwardRef((props, forwardedRef) => {
+  const {
+    activator,
+    children,
+    placement = "top",
+    arrow = true,
+    disabled = false,
+    persistent = false,
+    showOnHover = true,
+    showOnFocus = true,
+    interactive = false,
+    keepMounted = false,
+    maxWidth = "18rem",
+    wrapperClassName,
+    className,
+    style,
+    id,
+    ...rest
+  } = props;
+  const hasRenderableContent = children !== void 0 && children !== null;
+  const shouldEnableTriggers = !disabled && (persistent || showOnHover || showOnFocus);
+  const shouldRenderTooltip = hasRenderableContent && (shouldEnableTriggers || keepMounted);
+  const resolvedStyle = { ...style };
+  if (resolvedStyle.maxWidth === void 0) {
+    resolvedStyle.maxWidth = resolveSizeValue2(maxWidth);
+  }
+  const baseVisibility = persistent ? "opacity-100 scale-100" : "opacity-0 scale-95";
+  const hoverClasses = !persistent && showOnHover ? " group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100" : "";
+  const focusClasses = !persistent && showOnFocus ? " group-focus-within/tooltip:opacity-100 group-focus-within/tooltip:scale-100" : "";
+  const visibilityClasses = `${baseVisibility}${hoverClasses}${focusClasses}`;
+  const pointerClasses = (() => {
+    if (persistent) {
+      return "pointer-events-auto";
+    }
+    if (!interactive) {
+      return "pointer-events-none";
+    }
+    const classes = ["pointer-events-none"];
+    if (showOnHover) {
+      classes.push("group-hover/tooltip:pointer-events-auto");
+    }
+    if (showOnFocus) {
+      classes.push("group-focus-within/tooltip:pointer-events-auto");
+    }
+    return classes.join(" ");
+  })();
+  return /* @__PURE__ */ jsxs("span", { className: twMerge(wrapperBaseClasses, "group/tooltip", wrapperClassName), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx("span", { className: "inline-flex max-w-full", children: activator }),
+    shouldRenderTooltip ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: forwardedRef,
+        role: "tooltip",
+        id,
+        "aria-hidden": persistent || disabled ? void 0 : true,
+        className: twMerge(tooltipBaseClasses, placementClasses2[placement], visibilityClasses, pointerClasses, className),
+        style: resolvedStyle,
+        children: [
+          children,
+          arrow && /* @__PURE__ */ jsx("span", { className: twMerge(arrowBaseClasses, arrowPlacementClasses[placement]), "aria-hidden": true, "data-arrow": true })
+        ]
+      }
+    ) : null
+  ] });
+});
+ToolTip.displayName = "ToolTip";
+var ToolTip_default = ToolTip;
 
 // src/Form/Input/states.input.ts
 var resolveIconClassName3 = (icon) => {
@@ -944,6 +1193,17 @@ var resolveIconClassName3 = (icon) => {
   const classes = [...baseClasses, normalizedName];
   return Array.from(new Set(classes)).join(" ");
 };
+
+// src/utils/helpers/randomStr.ts
+var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+function generateString(length = 5) {
+  let result = "";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
 var Input = ({
   variant = "outline",
   success,
@@ -956,9 +1216,14 @@ var Input = ({
 }) => {
   const classBase = "input-base px-3 py-2 focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full";
   const variantClasses = {
-    outline: "rounded border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary",
-    filled: "rounded bg-gray-100 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary",
-    underlined: "border-b-1 border-gray-300 focus:border-red-400 focus:outline-none focus:ring-none"
+    solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
+    sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
+    outline: "rounded border border-gray-300 bg-transparent focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
+    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",
+    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",
+    filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25",
+    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",
+    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"
   };
   const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
   const statusClasses = {
@@ -975,16 +1240,24 @@ var Input = ({
   const toneClass = status ? statusClasses[status.tone] : void 0;
   const prependIconClass = resolveIconClassName3(icon);
   const prependPadding = prependIconClass ? "pl-10" : void 0;
+  const inputName = props.name || generateString();
   return /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col gap-1", wrapperClassName), children: [
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
       prependIconClass && /* @__PURE__ */ jsx("i", { className: twMerge("pointer-events-none absolute left-3 ", prependIconClass), "aria-hidden": true }),
-      /* @__PURE__ */ jsx("input", { ...props, className: twMerge(classBase, variantClass, toneClass, prependPadding, className) })
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          className: twMerge(classBase, variantClass, toneClass, prependPadding, className),
+          name: inputName
+        }
+      )
     ] }),
     status?.message && /* @__PURE__ */ jsx("span", { className: twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
   ] });
 };
 var Input_default = Input;
 
-export { Button_default as Button, Chip_default as Chip, Input_default as Input, List_default as List, Item_default as ListItem, Menu_default as Menu };
+export { Button_default as Button, Chip_default as Chip, Dialog_default as Dialog, ExpansionPanel_default as ExpansionPanel, ExpansionPanelItem_default as ExpansionPanelItem, Input_default as Input, List_default as List, Item_default as ListItem, Menu_default as Menu, ToolTip_default as ToolTip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map