@lindle/linoardo 1.0.8 → 1.0.10

package/dist/index.js

@@ -1,6 +1,7 @@
-import * as React6 from 'react';
+import * as React5 from 'react';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
 // src/Containment/Button/index.tsx
 
@@ -8,60 +9,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 +130,7 @@ var sizeClasses = {
   large: "px-6 py-3 text-lg",
   "x-large": "px-7 py-3.5 text-xl"
 };
-var Button = React6.forwardRef(
+var Button = React5.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -134,7 +165,7 @@ var Button = React6.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 +189,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 +301,7 @@ var resolveIconClassName2 = (icon) => {
   const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
   return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
 };
-var Chip = React6.forwardRef(
+var Chip = React5.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -270,7 +333,7 @@ var Chip = React6.forwardRef(
     const appendIconClassName = resolveIconClassName2(appendIcon);
     const closeIconClassName = resolveIconClassName2(closeIcon);
     const filterIconClassName = filter && selected ? resolveIconClassName2(filterIcon) : void 0;
-    const handleClick = React6.useCallback(
+    const handleClick = React5.useCallback(
       (event) => {
         if (disabled) {
           event.preventDefault();
@@ -281,7 +344,7 @@ var Chip = React6.forwardRef(
       },
       [disabled, onClick]
     );
-    const handleKeyDown = React6.useCallback(
+    const handleKeyDown = React5.useCallback(
       (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented || disabled || !interactive) {
@@ -294,7 +357,7 @@ var Chip = React6.forwardRef(
       },
       [disabled, interactive, onKeyDown]
     );
-    const handleCloseClick = React6.useCallback(
+    const handleCloseClick = React5.useCallback(
       (event) => {
         event.stopPropagation();
         if (disabled) {
@@ -305,7 +368,7 @@ var Chip = React6.forwardRef(
       },
       [disabled, onClose]
     );
-    const handleCloseKeyDown = React6.useCallback((event) => {
+    const handleCloseKeyDown = React5.useCallback((event) => {
       if (event.key === " " || event.key === "Enter") {
         event.stopPropagation();
       }
@@ -356,15 +419,6 @@ var Chip = React6.forwardRef(
 );
 Chip.displayName = "Chip";
 var Chip_default = Chip;
-var defaultListContext = {
-  density: "default",
-  lines: "one",
-  nav: false,
-  divided: false,
-  color: "primary"
-};
-var ListContext = React6.createContext(defaultListContext);
-var useListContext = () => React6.useContext(ListContext);
 var listItemBaseClasses = "relative flex w-full items-center gap-4 bg-transparent text-left text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white hover:bg-neutral-200";
 var densityClasses = {
   default: "px-4 py-3 text-base",
@@ -383,9 +437,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 = React6.forwardRef((props, ref) => {
+var ListItem = React5.forwardRef((props, ref) => {
   const {
     component,
     href,
@@ -402,18 +457,24 @@ var ListItem = React6.forwardRef((props, ref) => {
     inset = false,
     density: densityOverride,
     lines: linesOverride,
+    nav: navOverride,
+    divided: dividedOverride,
+    color: colorOverride,
+    sharp: sharpOverride,
     className,
     children,
     tabIndex,
     role,
     ...rest
   } = props;
-  const listContext = useListContext();
-  const density = densityOverride ?? listContext.density;
-  const lines = linesOverride ?? listContext.lines;
-  const nav = listContext.nav;
-  const accent = accentClasses[listContext.color] ?? accentClasses.primary;
-  const shapeClass = listContext.divided ? "rounded-none" : "rounded-lg";
+  const density = densityOverride ?? "default";
+  const lines = linesOverride ?? "one";
+  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 || 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";
@@ -479,10 +540,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",
@@ -492,7 +556,14 @@ var listRoundedClasses = {
   xl: "rounded-xl",
   pill: "rounded-full"
 };
-var List = React6.forwardRef((props, ref) => {
+var isListItemElement = (element) => {
+  if (!React5.isValidElement(element)) {
+    return false;
+  }
+  const elementType = element.type;
+  return element.type === Item_default || elementType.displayName === Item_default.displayName;
+};
+var List = React5.forwardRef((props, ref) => {
   const {
     variant = "solid",
     density = "default",
@@ -506,37 +577,51 @@ var List = React6.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 contextValue = React6.useMemo(
-    () => ({
-      density,
-      lines,
-      nav,
-      divided,
-      color: accentColor
-    }),
-    [accentColor, density, lines, nav, divided]
-  );
-  return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+  const accentColor = color;
+  const enhanceChild = (child) => {
+    if (!React5.isValidElement(child)) {
+      return child;
+    }
+    if (isListItemElement(child)) {
+      return React5.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,
+        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);
+      if (nestedChildren !== child.props.children) {
+        return React5.cloneElement(child, void 0, nestedChildren);
+      }
+    }
+    return child;
+  };
+  const resolvedChildren = React5.Children.map(children, enhanceChild);
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
       ref,
       role: role ?? "list",
       className: twMerge(listBaseClasses, variantClass, roundedClass, dividerClass, gapClass, navClass, className),
-      children
+      children: resolvedChildren
     }
-  ) });
+  );
 });
 List.displayName = "List";
 var List_default = List;
 var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? React6.useLayoutEffect : React6.useEffect;
+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",
@@ -551,7 +636,7 @@ var offsetClasses = {
 };
 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 overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]";
-var Menu = React6.forwardRef((props, ref) => {
+var Menu = React5.forwardRef((props, ref) => {
   const {
     activator,
     children,
@@ -573,17 +658,17 @@ var Menu = React6.forwardRef((props, ref) => {
     onMouseLeave: rootMouseLeave,
     ...rest
   } = props;
-  const baseId = React6.useId();
+  const baseId = React5.useId();
   const menuId = `${baseId}-menu`;
   const activatorId = `${baseId}-activator`;
   const isControlled = typeof openProp === "boolean";
-  const [internalOpen, setInternalOpen] = React6.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
   const open = isControlled ? Boolean(openProp) : internalOpen;
-  const localRootRef = React6.useRef(null);
-  const menuRef = React6.useRef(null);
-  const activatorRef = React6.useRef(null);
-  const closeTimeoutRef = React6.useRef(null);
-  const mergedRootRef = React6.useCallback(
+  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") {
@@ -594,8 +679,8 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [ref]
   );
-  const [activatorWidth, setActivatorWidth] = React6.useState();
-  const updateActivatorWidth = React6.useCallback(() => {
+  const [activatorWidth, setActivatorWidth] = React5.useState();
+  const updateActivatorWidth = React5.useCallback(() => {
     if (!matchActivatorWidth) {
       setActivatorWidth(void 0);
       return;
@@ -618,7 +703,7 @@ var Menu = React6.forwardRef((props, ref) => {
     observer.observe(activatorRef.current);
     return () => observer.disconnect();
   }, [matchActivatorWidth, updateActivatorWidth]);
-  const setOpen = React6.useCallback(
+  const setOpen = React5.useCallback(
     (nextOpen) => {
       if (disabled || open === nextOpen) {
         return;
@@ -630,7 +715,7 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [disabled, isControlled, onOpenChange, open]
   );
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!disabled || !open) {
       return;
     }
@@ -639,7 +724,7 @@ var Menu = React6.forwardRef((props, ref) => {
     }
     onOpenChange?.(false);
   }, [disabled, open, isControlled, onOpenChange]);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!open) {
       return;
     }
@@ -667,7 +752,7 @@ var Menu = React6.forwardRef((props, ref) => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, setOpen]);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!open) {
       return;
     }
@@ -680,7 +765,7 @@ var Menu = React6.forwardRef((props, ref) => {
     });
     return () => window.cancelAnimationFrame(id);
   }, [open]);
-  const setActivatorNode = React6.useCallback(
+  const setActivatorNode = React5.useCallback(
     (node) => {
       activatorRef.current = node;
       if (node && matchActivatorWidth) {
@@ -689,7 +774,7 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [matchActivatorWidth]
   );
-  const handleActivatorClick = React6.useCallback(
+  const handleActivatorClick = React5.useCallback(
     (event) => {
       event.preventDefault();
       if (disabled) {
@@ -699,7 +784,7 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [disabled, open, setOpen]
   );
-  const handleActivatorKeyDown = React6.useCallback(
+  const handleActivatorKeyDown = React5.useCallback(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -712,7 +797,7 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [open, setOpen]
   );
-  const clearCloseTimeout = React6.useCallback(() => {
+  const clearCloseTimeout = React5.useCallback(() => {
     if (closeTimeoutRef.current !== null) {
       if (isBrowser) {
         window.clearTimeout(closeTimeoutRef.current);
@@ -720,7 +805,7 @@ var Menu = React6.forwardRef((props, ref) => {
       closeTimeoutRef.current = null;
     }
   }, []);
-  const scheduleClose = React6.useCallback(() => {
+  const scheduleClose = React5.useCallback(() => {
     if (!isBrowser) {
       setOpen(false);
       return;
@@ -731,10 +816,10 @@ var Menu = React6.forwardRef((props, ref) => {
       closeTimeoutRef.current = null;
     }, 150);
   }, [clearCloseTimeout, setOpen]);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     return () => clearCloseTimeout();
   }, [clearCloseTimeout]);
-  const isMovingWithinMenu = React6.useCallback(
+  const isMovingWithinMenu = React5.useCallback(
     (event) => {
       const nextTarget = event.relatedTarget;
       if (!nextTarget || !localRootRef.current) {
@@ -744,7 +829,7 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [localRootRef]
   );
-  const handleRootMouseEnter = React6.useCallback(
+  const handleRootMouseEnter = React5.useCallback(
     (event) => {
       rootMouseEnter?.(event);
       if (event.defaultPrevented) {
@@ -757,7 +842,7 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [clearCloseTimeout, openOnHover, rootMouseEnter, setOpen]
   );
-  const handleRootMouseLeave = React6.useCallback(
+  const handleRootMouseLeave = React5.useCallback(
     (event) => {
       rootMouseLeave?.(event);
       if (event.defaultPrevented) {
@@ -772,7 +857,7 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [isMovingWithinMenu, openOnHover, rootMouseLeave, scheduleClose]
   );
-  const handleActivatorMouseEnter = React6.useCallback(
+  const handleActivatorMouseEnter = React5.useCallback(
     (_event) => {
       if (disabled) {
         return;
@@ -782,7 +867,7 @@ var Menu = React6.forwardRef((props, ref) => {
     },
     [clearCloseTimeout, disabled, setOpen]
   );
-  const handleActivatorMouseLeave = React6.useCallback(
+  const handleActivatorMouseLeave = React5.useCallback(
     (event) => {
       if (disabled || !openOnHover) {
         return;
@@ -903,6 +988,847 @@ var Menu = React6.forwardRef((props, ref) => {
 });
 Menu.displayName = "Menu";
 var Menu_default = Menu;
+var ExpansionPanelContext = React5.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 = React5.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 = React5.useContext(ExpansionPanelContext);
+  const generatedValue = React5.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 = React5.useId();
+  const contentId = React5.useId();
+  const [standaloneExpanded, setStandaloneExpanded] = React5.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 = React5.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 = React5.useMemo(() => {
+    if (!isControlled) {
+      return void 0;
+    }
+    return normalizeValues(value, multiple);
+  }, [isControlled, value, multiple]);
+  const [internalValues, setInternalValues] = React5.useState(
+    () => normalizeValues(defaultValue, multiple)
+  );
+  const expandedValues = controlledValues ?? internalValues;
+  React5.useEffect(() => {
+    if (!isControlled) {
+      setInternalValues((prev) => clampValues(prev, multiple));
+    }
+  }, [multiple, isControlled]);
+  const handleValueChange = React5.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInternalValues(next);
+      }
+      if (onChange) {
+        if (multiple) {
+          onChange(next);
+        } else {
+          onChange(next[0] ?? null);
+        }
+      }
+    },
+    [isControlled, multiple, onChange]
+  );
+  const toggle = React5.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 = React5.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 isBrowser2 = typeof window !== "undefined";
+var useIsomorphicLayoutEffect2 = isBrowser2 ? React5.useLayoutEffect : React5.useEffect;
+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 = React5.forwardRef((props, forwardedRef) => {
+  const {
+    activator,
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    persistent = false,
+    closeOnEsc = true,
+    closeOnOutsideClick = true,
+    closeOnContentClick = false,
+    scrim = true,
+    keepMounted = false,
+    fullscreen = false,
+    maxWidth = "32rem",
+    width,
+    containerClassName,
+    overlayClassName,
+    overlayProps,
+    scrollLock = true,
+    disabled = false,
+    className,
+    style,
+    tabIndex: tabIndexProp,
+    role: roleProp,
+    id: idProp,
+    ["aria-modal"]: ariaModalProp,
+    ...rest
+  } = props;
+  const { onClick: panelOnClick, ...panelProps } = rest;
+  const {
+    className: overlayPropsClassName,
+    onPointerDown: overlayOnPointerDown,
+    ...overlayRestProps
+  } = overlayProps ?? {};
+  const baseId = React5.useId();
+  const panelId = idProp ?? `${baseId}-dialog`;
+  const activatorId = `${panelId}-activator`;
+  const role = roleProp ?? "dialog";
+  const resolvedTabIndex = tabIndexProp ?? -1;
+  const isControlled = typeof openProp === "boolean";
+  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
+  const open = isControlled ? Boolean(openProp) : internalOpen;
+  const state = open ? "open" : "closed";
+  const panelRef = React5.useRef(null);
+  const activatorRef = React5.useRef(null);
+  const previouslyFocusedElement = React5.useRef(null);
+  const [mounted, setMounted] = React5.useState(false);
+  useIsomorphicLayoutEffect2(() => {
+    setMounted(true);
+  }, []);
+  const setPanelRef = React5.useCallback(
+    (node) => {
+      panelRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  const setActivatorNode = React5.useCallback((node) => {
+    activatorRef.current = node;
+  }, []);
+  const updateOpen = React5.useCallback(
+    (nextOpen, options) => {
+      if (disabled && nextOpen) {
+        return;
+      }
+      if (!options?.force && !nextOpen && persistent) {
+        return;
+      }
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [disabled, isControlled, onOpenChange, persistent]
+  );
+  React5.useEffect(() => {
+    if (!disabled || !open) {
+      return;
+    }
+    updateOpen(false, { force: true });
+  }, [disabled, open, updateOpen]);
+  React5.useEffect(() => {
+    if (!isBrowser2) {
+      return;
+    }
+    if (open) {
+      previouslyFocusedElement.current = document.activeElement;
+      const node = panelRef.current;
+      if (node) {
+        if (!node.hasAttribute("tabindex")) {
+          node.setAttribute("tabindex", resolvedTabIndex.toString());
+        }
+        requestAnimationFrame(() => node.focus({ preventScroll: true }));
+      }
+      return;
+    }
+    const previous = previouslyFocusedElement.current ?? activatorRef.current;
+    if (previous && typeof previous.focus === "function") {
+      previous.focus();
+    }
+  }, [open, resolvedTabIndex]);
+  React5.useEffect(() => {
+    if (!open || !closeOnEsc || persistent || !isBrowser2) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.stopPropagation();
+      updateOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [closeOnEsc, open, persistent, updateOpen]);
+  React5.useEffect(() => {
+    if (!scrollLock || !open || !isBrowser2) {
+      return;
+    }
+    const { body, documentElement } = document;
+    const previousOverflow = body.style.overflow;
+    const previousPaddingRight = body.style.paddingRight;
+    const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
+    body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      const computedPaddingRight = parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+      body.style.paddingRight = `${computedPaddingRight + scrollbarWidth}px`;
+    }
+    return () => {
+      body.style.overflow = previousOverflow;
+      body.style.paddingRight = previousPaddingRight;
+    };
+  }, [open, scrollLock]);
+  const handleOverlayPointerDown = React5.useCallback(
+    (event) => {
+      overlayOnPointerDown?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (!closeOnOutsideClick || event.button > 0) {
+        return;
+      }
+      updateOpen(false);
+    },
+    [closeOnOutsideClick, overlayOnPointerDown, updateOpen]
+  );
+  const handleContentClick = React5.useCallback(
+    (event) => {
+      panelOnClick?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (closeOnContentClick) {
+        updateOpen(false, { force: true });
+      }
+    },
+    [closeOnContentClick, panelOnClick, updateOpen]
+  );
+  const handleActivatorClick = React5.useCallback(
+    (event) => {
+      if (disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      updateOpen(!open, { force: true });
+    },
+    [disabled, open, updateOpen]
+  );
+  const handleActivatorKeyDown = React5.useCallback(
+    (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      if (disabled) {
+        return;
+      }
+      updateOpen(!open, { force: true });
+    },
+    [disabled, open, updateOpen]
+  );
+  const shouldRenderOverlay = (scrim || closeOnOutsideClick) && isBrowser2;
+  const portalReady = mounted && isBrowser2 && (open || keepMounted);
+  const resolvedPanelStyle = React5.useMemo(() => {
+    const nextStyle = { ...style };
+    if (fullscreen) {
+      if (nextStyle.maxWidth === void 0) {
+        nextStyle.maxWidth = "none";
+      }
+      if (nextStyle.width === void 0) {
+        nextStyle.width = "100%";
+      }
+      if (nextStyle.height === void 0) {
+        nextStyle.height = "100%";
+      }
+      if (nextStyle.maxHeight === void 0) {
+        nextStyle.maxHeight = "100%";
+      }
+    } else {
+      if (nextStyle.maxWidth === void 0) {
+        nextStyle.maxWidth = resolveSizeValue(maxWidth);
+      }
+      if (width !== void 0 && nextStyle.width === void 0) {
+        nextStyle.width = resolveSizeValue(width);
+      }
+    }
+    return nextStyle;
+  }, [fullscreen, maxWidth, style, width]);
+  const ariaModal = ariaModalProp ?? (role === "dialog" || role === "alertdialog" ? true : void 0);
+  const overlayNode = shouldRenderOverlay && portalReady ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...overlayRestProps,
+      className: twMerge(
+        overlayBaseClasses2,
+        scrim ? void 0 : "bg-transparent backdrop-blur-none",
+        overlayClassName,
+        overlayPropsClassName
+      ),
+      "data-state": state,
+      "aria-hidden": true,
+      onPointerDown: handleOverlayPointerDown
+    }
+  ) : null;
+  const dialogNode = portalReady && document.body ? createPortal(
+    /* @__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",
+        {
+          ...panelProps,
+          ref: setPanelRef,
+          id: panelId,
+          role,
+          tabIndex: resolvedTabIndex,
+          "aria-modal": ariaModal,
+          className: twMerge(
+            panelBaseClasses,
+            fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
+            className
+          ),
+          style: resolvedPanelStyle,
+          "data-state": state,
+          onClick: handleContentClick,
+          children
+        }
+      ) })
+    ] }),
+    document.body
+  ) : null;
+  const activatorNode = activator ? activator({
+    ref: setActivatorNode,
+    id: activatorId,
+    disabled,
+    open,
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "aria-controls": panelId,
+    onClick: handleActivatorClick,
+    onKeyDown: handleActivatorKeyDown
+  }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    activatorNode,
+    dialogNode
+  ] });
+});
+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 data-[state=closed]:pointer-events-none data-[state=closed]:scale-95 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:scale-100";
+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 = React5.forwardRef((props, forwardedRef) => {
+  const {
+    activator,
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    placement = "top",
+    openDelay = 120,
+    closeDelay = 100,
+    openOnHover = true,
+    openOnFocus = true,
+    openOnClick = false,
+    interactive = false,
+    arrow = true,
+    disabled = false,
+    keepMounted = false,
+    maxWidth = "18rem",
+    wrapperClassName,
+    closeOnContentClick = false,
+    className,
+    style,
+    id: idProp,
+    ...rest
+  } = props;
+  const { onPointerEnter: tooltipPointerEnter, onPointerLeave: tooltipPointerLeave, onClick: tooltipOnClick, ...tooltipProps } = rest;
+  const baseId = React5.useId();
+  const tooltipId = idProp ?? `${baseId}-tooltip`;
+  const isControlled = typeof openProp === "boolean";
+  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
+  const open = isControlled ? Boolean(openProp) : internalOpen;
+  const state = open ? "open" : "closed";
+  const describedBy = open || keepMounted ? tooltipId : void 0;
+  const openTimeoutRef = React5.useRef(null);
+  const closeTimeoutRef = React5.useRef(null);
+  const clearOpenTimer = React5.useCallback(() => {
+    if (openTimeoutRef.current !== null) {
+      window.clearTimeout(openTimeoutRef.current);
+      openTimeoutRef.current = null;
+    }
+  }, []);
+  const clearCloseTimer = React5.useCallback(() => {
+    if (closeTimeoutRef.current !== null) {
+      window.clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  }, []);
+  const setOpen = React5.useCallback(
+    (nextOpen) => {
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  const scheduleOpen = React5.useCallback(
+    (source) => {
+      if (disabled) {
+        return;
+      }
+      clearCloseTimer();
+      const delay = source === "click" ? 0 : openDelay;
+      if (delay <= 0) {
+        setOpen(true);
+        return;
+      }
+      openTimeoutRef.current = window.setTimeout(() => setOpen(true), delay);
+    },
+    [clearCloseTimer, disabled, openDelay, setOpen]
+  );
+  const scheduleClose = React5.useCallback(
+    (source) => {
+      clearOpenTimer();
+      const delay = source === "click" ? 0 : closeDelay;
+      if (delay <= 0) {
+        setOpen(false);
+        return;
+      }
+      closeTimeoutRef.current = window.setTimeout(() => setOpen(false), delay);
+    },
+    [clearOpenTimer, closeDelay, setOpen]
+  );
+  React5.useEffect(() => {
+    if (!disabled) {
+      return;
+    }
+    clearOpenTimer();
+    clearCloseTimer();
+    if (open) {
+      setOpen(false);
+    }
+  }, [clearCloseTimer, clearOpenTimer, disabled, open, setOpen]);
+  React5.useEffect(
+    () => () => {
+      clearOpenTimer();
+      clearCloseTimer();
+    },
+    [clearCloseTimer, clearOpenTimer]
+  );
+  const handleActivatorPointerEnter = React5.useCallback(
+    (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      if (openOnHover) {
+        scheduleOpen("hover");
+      }
+    },
+    [openOnHover, scheduleOpen]
+  );
+  const handleActivatorPointerLeave = React5.useCallback(
+    (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      if (openOnHover) {
+        scheduleClose("hover");
+      }
+    },
+    [openOnHover, scheduleClose]
+  );
+  const handleActivatorFocus = React5.useCallback(
+    () => {
+      if (openOnFocus) {
+        scheduleOpen("focus");
+      }
+    },
+    [openOnFocus, scheduleOpen]
+  );
+  const handleActivatorBlur = React5.useCallback(
+    () => {
+      if (openOnFocus) {
+        scheduleClose("focus");
+      }
+    },
+    [openOnFocus, scheduleClose]
+  );
+  const handleActivatorClick = React5.useCallback(
+    (event) => {
+      if (!openOnClick) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      if (open) {
+        scheduleClose("click");
+      } else {
+        scheduleOpen("click");
+      }
+    },
+    [disabled, open, openOnClick, scheduleClose, scheduleOpen]
+  );
+  const handleActivatorKeyDown = React5.useCallback(
+    (event) => {
+      if (!openOnClick) {
+        return;
+      }
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      if (open) {
+        scheduleClose("click");
+      } else {
+        scheduleOpen("click");
+      }
+    },
+    [open, openOnClick, scheduleClose, scheduleOpen]
+  );
+  const handleTooltipPointerEnter = React5.useCallback(
+    (event) => {
+      tooltipPointerEnter?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (interactive) {
+        clearCloseTimer();
+      }
+    },
+    [clearCloseTimer, interactive, tooltipPointerEnter]
+  );
+  const handleTooltipPointerLeave = React5.useCallback(
+    (event) => {
+      tooltipPointerLeave?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (interactive) {
+        scheduleClose("hover");
+      }
+    },
+    [interactive, scheduleClose, tooltipPointerLeave]
+  );
+  const handleTooltipClick = React5.useCallback(
+    (event) => {
+      tooltipOnClick?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (closeOnContentClick) {
+        scheduleClose("click");
+      }
+    },
+    [closeOnContentClick, scheduleClose, tooltipOnClick]
+  );
+  const hasRenderableContent = children !== void 0 && children !== null;
+  const shouldRenderTooltip = hasRenderableContent && (open || keepMounted);
+  const pointerClass = interactive ? "pointer-events-auto" : "pointer-events-none";
+  const resolvedStyle = React5.useMemo(() => {
+    const nextStyle = { ...style };
+    if (nextStyle.maxWidth === void 0) {
+      nextStyle.maxWidth = resolveSizeValue2(maxWidth);
+    }
+    return nextStyle;
+  }, [maxWidth, style]);
+  const activatorNode = activator({
+    id: `${tooltipId}-activator`,
+    open,
+    disabled,
+    "aria-describedby": describedBy,
+    onPointerEnter: handleActivatorPointerEnter,
+    onPointerLeave: handleActivatorPointerLeave,
+    onFocus: handleActivatorFocus,
+    onBlur: handleActivatorBlur,
+    onClick: openOnClick ? handleActivatorClick : void 0,
+    onKeyDown: openOnClick ? handleActivatorKeyDown : void 0
+  });
+  return /* @__PURE__ */ jsxs("span", { className: twMerge(wrapperBaseClasses, wrapperClassName), children: [
+    activatorNode,
+    shouldRenderTooltip && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...tooltipProps,
+        ref: forwardedRef,
+        role: "tooltip",
+        id: tooltipId,
+        "aria-hidden": !open,
+        "data-state": state,
+        className: twMerge(tooltipBaseClasses, placementClasses2[placement], pointerClass, className),
+        style: resolvedStyle,
+        onPointerEnter: handleTooltipPointerEnter,
+        onPointerLeave: handleTooltipPointerLeave,
+        onClick: handleTooltipClick,
+        children: [
+          children,
+          arrow && /* @__PURE__ */ jsx("span", { className: twMerge(arrowBaseClasses, arrowPlacementClasses[placement]), "aria-hidden": true, "data-arrow": true })
+        ]
+      }
+    )
+  ] });
+});
+ToolTip.displayName = "ToolTip";
+var ToolTip_default = ToolTip;
 
 // src/Form/Input/states.input.ts
 var resolveIconClassName3 = (icon) => {
@@ -930,6 +1856,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,
@@ -942,9 +1879,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 = {
@@ -961,16 +1903,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