@hyddenlabs/hydn-ui 0.3.0-alpha.104 → 0.3.0-alpha.151

package/dist/index.cjs

@@ -1,157 +1,215 @@
 'use strict';
 
+var React6 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var React5 = require('react');
-var iconsReact = require('@tabler/icons-react');
+var TablerIcons = require('@tabler/icons-react');
 var reactRouterDom = require('react-router-dom');
 var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React6__default = /*#__PURE__*/_interopDefault(React6);
+var TablerIcons__namespace = /*#__PURE__*/_interopNamespace(TablerIcons);
 
 // src/components/forms/button/button.tsx
-function Button({
-  children,
-  onClick,
-  ariaLabel,
-  disabled = false,
-  type = "button",
-  className = "",
-  icon,
-  iconPosition = "left",
-  variant = "neutral",
-  style = "solid",
-  size = "md",
-  rounded = "default",
-  loading = false,
-  fullWidth = false,
-  wide = false,
-  active = false
-}) {
-  const isIconOnly = icon && !children;
-  if (isIconOnly && !ariaLabel) {
-    console.warn("Button: Icon-only buttons require an ariaLabel for accessibility");
-  }
-  const solidVariantClasses = {
-    neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90 active:bg-neutral/80",
-    primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
-    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
-    accent: "bg-accent text-accent-foreground hover:bg-accent/90 active:bg-accent/80",
-    info: "bg-info text-info-foreground hover:bg-info/90 active:bg-info/80",
-    success: "bg-success text-success-foreground hover:bg-success/90 active:bg-success/80",
-    warning: "bg-warning text-warning-foreground hover:bg-warning/90 active:bg-warning/80",
-    error: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80"
-  };
-  const outlineVariantClasses = {
-    neutral: "border-2 border-neutral text-neutral bg-transparent hover:bg-neutral hover:text-neutral-foreground",
-    primary: "border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground",
-    secondary: "border-2 border-secondary text-secondary bg-transparent hover:bg-secondary hover:text-secondary-foreground",
-    accent: "border-2 border-accent text-accent bg-transparent hover:bg-accent hover:text-accent-foreground",
-    info: "border-2 border-info text-info bg-transparent hover:bg-info hover:text-info-foreground",
-    success: "border-2 border-success text-success bg-transparent hover:bg-success hover:text-success-foreground",
-    warning: "border-2 border-warning text-warning bg-transparent hover:bg-warning hover:text-warning-foreground",
-    error: "border-2 border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-destructive-foreground"
-  };
-  const ghostVariantClasses = {
-    neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
-    primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
-    secondary: "bg-transparent text-secondary hover:bg-secondary/10 active:bg-secondary/20",
-    accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
-    info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
-    success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
-    warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
-    error: "bg-transparent text-destructive hover:bg-destructive/10 active:bg-destructive/20"
-  };
-  const softVariantClasses = {
-    neutral: "bg-neutral/20 text-foreground hover:bg-neutral/30 active:bg-neutral/40",
-    primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
-    secondary: "bg-secondary/20 text-secondary hover:bg-secondary/30 active:bg-secondary/40",
-    accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
-    info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
-    success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
-    warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
-    error: "bg-destructive/20 text-destructive hover:bg-destructive/30 active:bg-destructive/40"
-  };
-  const linkVariantClasses = {
-    neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
-    primary: "bg-transparent text-primary underline-offset-4 hover:underline",
-    secondary: "bg-transparent text-secondary underline-offset-4 hover:underline",
-    accent: "bg-transparent text-accent underline-offset-4 hover:underline",
-    info: "bg-transparent text-info underline-offset-4 hover:underline",
-    success: "bg-transparent text-success underline-offset-4 hover:underline",
-    warning: "bg-transparent text-warning underline-offset-4 hover:underline",
-    error: "bg-transparent text-destructive underline-offset-4 hover:underline"
-  };
-  const getStyleClasses = () => {
-    const variantKey = variant;
-    switch (style) {
-      case "outline":
-        return `${outlineVariantClasses[variantKey]} active:scale-95`;
-      case "ghost":
-        return ghostVariantClasses[variantKey];
-      case "link":
-        return linkVariantClasses[variantKey];
-      case "soft":
-        return softVariantClasses[variantKey];
-      case "solid":
-      default:
-        return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
+var Button = React6__default.default.forwardRef(
+  ({
+    children,
+    onClick,
+    ariaLabel,
+    disabled = false,
+    type = "button",
+    className = "",
+    icon,
+    iconPosition = "left",
+    variant = "neutral",
+    style = "solid",
+    size = "md",
+    rounded = "default",
+    loading = false,
+    fullWidth = false,
+    wide = false,
+    active = false
+  }, ref) => {
+    const isIconOnly = icon && !children;
+    if (isIconOnly && !ariaLabel) {
+      console.warn("Button: Icon-only buttons require an ariaLabel for accessibility");
     }
-  };
-  const sizeClasses2 = {
-    xs: "h-8 sm:h-6 px-3 sm:px-2 text-sm sm:text-xs min-h-8 sm:min-h-6",
-    sm: "h-10 sm:h-8 px-4 sm:px-3 text-base sm:text-sm min-h-10 sm:min-h-8",
-    md: "h-12 sm:h-10 px-5 sm:px-4 text-base min-h-12 sm:min-h-10",
-    lg: "h-14 sm:h-12 px-7 sm:px-6 text-lg min-h-14 sm:min-h-12",
-    xl: "h-16 sm:h-14 px-9 sm:px-8 text-xl min-h-16 sm:min-h-14"
-  };
-  const roundedClasses = {
-    default: "rounded-md",
-    pill: "rounded-full",
-    square: "rounded-none aspect-square",
-    circle: "rounded-full aspect-square"
-  };
-  const displayIcon = loading ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
+    const solidVariantClasses = {
+      neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90 active:bg-neutral/80",
+      primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
+      accent: "bg-accent text-accent-foreground hover:bg-accent/90 active:bg-accent/80",
+      info: "bg-info text-info-foreground hover:bg-info/90 active:bg-info/80",
+      success: "bg-success text-success-foreground hover:bg-success/90 active:bg-success/80",
+      warning: "bg-warning text-warning-foreground hover:bg-warning/90 active:bg-warning/80",
+      error: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80"
+    };
+    const outlineVariantClasses = {
+      neutral: "border-2 border-neutral text-neutral bg-transparent hover:bg-neutral hover:text-neutral-foreground",
+      primary: "border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground",
+      secondary: "border-2 border-secondary text-secondary bg-transparent hover:bg-secondary hover:text-secondary-foreground",
+      accent: "border-2 border-accent text-accent bg-transparent hover:bg-accent hover:text-accent-foreground",
+      info: "border-2 border-info text-info bg-transparent hover:bg-info hover:text-info-foreground",
+      success: "border-2 border-success text-success bg-transparent hover:bg-success hover:text-success-foreground",
+      warning: "border-2 border-warning text-warning bg-transparent hover:bg-warning hover:text-warning-foreground",
+      error: "border-2 border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-destructive-foreground"
+    };
+    const ghostVariantClasses = {
+      neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
+      primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
+      secondary: "bg-transparent text-secondary hover:bg-secondary/10 active:bg-secondary/20",
+      accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
+      info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
+      success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
+      warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
+      error: "bg-transparent text-destructive hover:bg-destructive/10 active:bg-destructive/20"
+    };
+    const softVariantClasses = {
+      neutral: "bg-neutral/20 text-foreground hover:bg-neutral/30 active:bg-neutral/40",
+      primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
+      secondary: "bg-secondary/20 text-secondary hover:bg-secondary/30 active:bg-secondary/40",
+      accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
+      info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
+      success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
+      warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
+      error: "bg-destructive/20 text-destructive hover:bg-destructive/30 active:bg-destructive/40"
+    };
+    const linkVariantClasses = {
+      neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
+      primary: "bg-transparent text-primary underline-offset-4 hover:underline",
+      secondary: "bg-transparent text-secondary underline-offset-4 hover:underline",
+      accent: "bg-transparent text-accent underline-offset-4 hover:underline",
+      info: "bg-transparent text-info underline-offset-4 hover:underline",
+      success: "bg-transparent text-success underline-offset-4 hover:underline",
+      warning: "bg-transparent text-warning underline-offset-4 hover:underline",
+      error: "bg-transparent text-destructive underline-offset-4 hover:underline"
+    };
+    const getStyleClasses = () => {
+      const variantKey = variant;
+      switch (style) {
+        case "outline":
+          return `${outlineVariantClasses[variantKey]} active:scale-95`;
+        case "ghost":
+          return ghostVariantClasses[variantKey];
+        case "link":
+          return linkVariantClasses[variantKey];
+        case "soft":
+          return softVariantClasses[variantKey];
+        case "solid":
+        default:
+          return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
+      }
+    };
+    const sizeClasses2 = {
+      xs: "h-8 sm:h-6 px-3 sm:px-2 text-sm sm:text-xs min-h-8 sm:min-h-6",
+      sm: "h-10 sm:h-8 px-4 sm:px-3 text-base sm:text-sm min-h-10 sm:min-h-8",
+      md: "h-12 sm:h-10 px-5 sm:px-4 text-base min-h-12 sm:min-h-10",
+      lg: "h-14 sm:h-12 px-7 sm:px-6 text-lg min-h-14 sm:min-h-12",
+      xl: "h-16 sm:h-14 px-9 sm:px-8 text-xl min-h-16 sm:min-h-14"
+    };
+    const roundedClasses = {
+      default: "rounded-md",
+      pill: "rounded-full",
+      square: "rounded-none aspect-square",
+      circle: "rounded-full aspect-square"
+    };
+    const displayIcon = loading ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ] }) : icon;
+    const styleClasses = getStyleClasses();
+    const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
+    const activeClasses = active ? "active:scale-95" : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        className: "opacity-75",
-        fill: "currentColor",
-        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ref,
+        type,
+        onClick,
+        "aria-label": ariaLabel,
+        disabled: disabled || loading,
+        className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses2[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
+        children: [
+          displayIcon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
+          children,
+          displayIcon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex ${children ? "ml-2" : ""}`, children: displayIcon })
+        ]
       }
-    )
-  ] }) : icon;
-  const styleClasses = getStyleClasses();
-  const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
-  const activeClasses = active ? "active:scale-95" : "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    );
+  }
+);
+Button.displayName = "Button";
+var button_default = Button;
+var sizeMap = {
+  xs: 16,
+  sm: 18,
+  md: 22,
+  lg: 26,
+  xl: 30,
+  "2xl": 36
+};
+var Icon = ({
+  name,
+  size = "md",
+  color = "currentColor",
+  strokeWidth = 2,
+  className = "",
+  onClick
+}) => {
+  const pascalName = name.split(/[-_]/).filter((s) => s).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+  const componentName = pascalName.startsWith("Icon") ? pascalName : "Icon" + pascalName;
+  const IconComponent = TablerIcons__namespace[componentName];
+  if (!IconComponent) return null;
+  const pixelSize = typeof size === "number" ? size : sizeMap[size] || sizeMap.md;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconComponent,
     {
-      type,
+      size: pixelSize,
+      color,
+      strokeWidth,
+      className,
       onClick,
-      "aria-label": ariaLabel,
-      disabled: disabled || loading,
-      className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses2[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
-      children: [
-        displayIcon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
-        children,
-        displayIcon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex ${children ? "ml-2" : ""}`, children: displayIcon })
-      ]
+      "aria-hidden": "true"
     }
   );
-}
-Button.displayName = "Button";
-var button_default = Button;
+};
+Icon.displayName = "Icon";
 function Input({
   value,
   onChange,
+  onFocus,
   placeholder,
   disabled = false,
   type = "text",
   className = "",
   ariaLabel,
+  ref,
   id,
   name,
   required = false,
@@ -174,7 +232,9 @@ function Input({
     {
       type,
       value,
+      ref,
       onChange,
+      onFocus,
       placeholder,
       disabled,
       "aria-label": ariaLabel,
@@ -221,9 +281,9 @@ function Checkbox({
 }
 Checkbox.displayName = "Checkbox";
 var checkbox_default = Checkbox;
-var RadioGroupContext = React5.createContext(null);
+var RadioGroupContext = React6.createContext(null);
 var useRadioGroup = () => {
-  const context = React5.useContext(RadioGroupContext);
+  const context = React6.useContext(RadioGroupContext);
   return context;
 };
 function RadioGroup({
@@ -269,7 +329,7 @@ function Radio({
     success: "border-success focus:ring-success",
     warning: "border-warning focus:ring-warning"
   };
-  const generatedId = React5.useId();
+  const generatedId = React6.useId();
   const inputId = id || `radio-${value || generatedId}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -368,13 +428,13 @@ function MultiSelect({
   size = "md",
   className = ""
 }) {
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const [searchQuery, setSearchQuery] = React5.useState("");
-  const [focusedIndex, setFocusedIndex] = React5.useState(-1);
-  const containerRef = React5.useRef(null);
-  const searchInputRef = React5.useRef(null);
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const [searchQuery, setSearchQuery] = React6.useState("");
+  const [focusedIndex, setFocusedIndex] = React6.useState(-1);
+  const containerRef = React6.useRef(null);
+  const searchInputRef = React6.useRef(null);
   const selectedValues = value || [];
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -387,7 +447,7 @@ function MultiSelect({
     }
     return void 0;
   }, [isOpen]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (isOpen && searchInputRef.current) {
       searchInputRef.current.focus();
     }
@@ -497,7 +557,7 @@ function MultiSelect({
                     className: "hover:bg-primary/20 rounded-sm transition-colors duration-150",
                     "aria-label": `Remove ${label}`,
                     tabIndex: -1,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: currentSize.icon - 4 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconX, { size: currentSize.icon - 4 })
                   }
                 )
               ]
@@ -513,11 +573,11 @@ function MultiSelect({
                 className: "p-1 hover:bg-muted rounded transition-colors",
                 "aria-label": "Clear all",
                 tabIndex: -1,
-                children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: currentSize.icon })
+                children: /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconX, { size: currentSize.icon })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              iconsReact.IconChevronDown,
+              TablerIcons.IconChevronDown,
               {
                 size: currentSize.icon,
                 className: `text-muted-foreground transition-transform ${isOpen ? "rotate-180" : ""}`
@@ -564,7 +624,7 @@ function MultiSelect({
             disabled: isDisabled,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }),
-              isSelected && /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { size: currentSize.icon, className: "flex-shrink-0 animate-scaleIn" })
+              isSelected && /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconCheck, { size: currentSize.icon, className: "flex-shrink-0 animate-scaleIn" })
             ]
           },
           option.value
@@ -780,48 +840,153 @@ ButtonGroup.displayName = "ButtonGroup";
 var button_group_default = ButtonGroup;
 function Text({
   children,
+  as = "p",
   variant = "body",
   size,
   weight = "semibold",
-  // elevated default weight
+  align,
+  leading,
+  tracking,
+  transform,
+  decoration,
+  italic = false,
+  truncate = false,
+  lineClamp,
+  wrap,
+  wordBreak,
+  opacity,
+  hasMargin = false,
+  selectable,
   className = "",
-  noMargin = false
+  id,
+  htmlFor
 }) {
   const variantClasses = {
     body: "text-foreground",
     muted: "text-muted-foreground",
-    small: "text-muted-foreground"
+    small: "text-muted-foreground",
+    primary: "text-primary",
+    secondary: "text-secondary-foreground",
+    success: "text-success",
+    warning: "text-warning",
+    error: "text-destructive",
+    inherit: "text-inherit"
   };
   const sizeClasses2 = {
     xs: "text-sm sm:text-xs",
     sm: "text-base sm:text-sm",
     base: "text-base",
     lg: "text-lg",
-    xl: "text-xl"
+    xl: "text-xl",
+    "2xl": "text-2xl"
   };
   const weightClasses = {
+    light: "font-light",
     normal: "font-normal",
     medium: "font-medium",
     semibold: "font-semibold",
-    bold: "font-bold"
+    bold: "font-bold",
+    extrabold: "font-extrabold"
+  };
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify"
+  };
+  const leadingClasses = {
+    none: "leading-none",
+    tight: "leading-tight",
+    snug: "leading-snug",
+    normal: "leading-normal",
+    relaxed: "leading-relaxed",
+    loose: "leading-loose"
+  };
+  const trackingClasses = {
+    tighter: "tracking-tighter",
+    tight: "tracking-tight",
+    normal: "tracking-normal",
+    wide: "tracking-wide",
+    wider: "tracking-wider",
+    widest: "tracking-widest"
+  };
+  const transformClasses = {
+    uppercase: "uppercase",
+    lowercase: "lowercase",
+    capitalize: "capitalize",
+    normal: "normal-case"
+  };
+  const decorationClasses = {
+    underline: "underline",
+    "line-through": "line-through",
+    none: "no-underline"
+  };
+  const wrapClasses = {
+    wrap: "text-wrap",
+    nowrap: "text-nowrap",
+    balance: "text-balance",
+    pretty: "text-pretty"
+  };
+  const wordBreakClasses = {
+    normal: "break-normal",
+    words: "break-words",
+    all: "break-all",
+    keep: "break-keep"
+  };
+  const opacityClasses = {
+    0: "opacity-0",
+    25: "opacity-25",
+    50: "opacity-50",
+    75: "opacity-75",
+    100: "opacity-100"
+  };
+  const lineClampClasses = {
+    1: "line-clamp-1",
+    2: "line-clamp-2",
+    3: "line-clamp-3",
+    4: "line-clamp-4",
+    5: "line-clamp-5",
+    6: "line-clamp-6"
   };
   const defaultSizes = {
     body: "lg",
-    // bigger default body text
     muted: "base",
-    // muted still readable
-    small: "sm"
-    // small bumped up slightly
+    small: "sm",
+    primary: "base",
+    secondary: "base",
+    success: "base",
+    warning: "base",
+    error: "base",
+    inherit: "base"
   };
   const finalSize = size || defaultSizes[variant];
-  const margin = noMargin ? "" : "mb-4";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      className: `${variantClasses[variant]} ${sizeClasses2[finalSize]} ${weightClasses[weight]} ${margin} ${className}`,
-      children
-    }
-  );
+  const margin = hasMargin ? "mb-3 sm:mb-4" : "";
+  const classes = [
+    variantClasses[variant],
+    sizeClasses2[finalSize],
+    weightClasses[weight],
+    margin,
+    align && alignClasses[align],
+    leading && leadingClasses[leading],
+    tracking && trackingClasses[tracking],
+    transform && transformClasses[transform],
+    decoration && decorationClasses[decoration],
+    italic && "italic",
+    truncate && "truncate",
+    lineClamp && lineClampClasses[lineClamp],
+    wrap && wrapClasses[wrap],
+    wordBreak && wordBreakClasses[wordBreak],
+    opacity !== void 0 && opacityClasses[opacity],
+    selectable === true && "select-all",
+    selectable === false && "select-none",
+    className
+  ].filter(Boolean).join(" ");
+  const elementProps = {
+    className: classes,
+    ...id && { id },
+    ...htmlFor && as === "label" && { htmlFor }
+  };
+  return React6.createElement(as, elementProps, children);
 }
 Text.displayName = "Text";
 var text_default = Text;
@@ -859,7 +1024,7 @@ function Stack({
     "div",
     {
       "data-component": "Stack",
-      className: `flex ${directionClass} ${spacingClasses[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
+      className: `flex flex-wrap ${directionClass} ${spacingClasses[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
       children
     }
   );
@@ -877,17 +1042,17 @@ function FormField({
   validationState = "default"
 }) {
   const effectiveValidationState = error ? "error" : validationState;
-  const childWithValidation = React5.isValidElement(children) ? React5.cloneElement(children, {
+  const childWithValidation = React6.isValidElement(children) ? React6.cloneElement(children, {
     validationState: effectiveValidationState
   }) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { direction: "vertical", spacing: "sm", className, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, children: /* @__PURE__ */ jsxRuntime.jsxs(text_default, { variant: "body", size: "sm", noMargin: true, className: "font-medium", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, children: /* @__PURE__ */ jsxRuntime.jsxs(text_default, { variant: "body", size: "sm", className: "font-medium", children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
     ] }) }),
     childWithValidation,
-    error && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "body", size: "sm", noMargin: true, className: "text-destructive", children: error }),
-    !error && helperText && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", size: "sm", noMargin: true, children: helperText })
+    error && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "body", size: "sm", className: "text-destructive", children: error }),
+    !error && helperText && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", size: "sm", children: helperText })
   ] });
 }
 FormField.displayName = "FormField";
@@ -927,8 +1092,8 @@ function InputGroup({ children, prefix, suffix, className = "" }) {
 InputGroup.displayName = "InputGroup";
 var input_group_default = InputGroup;
 function Calendar({ value, onChange, minDate, maxDate, disabled = false, className = "" }) {
-  const [currentMonth, setCurrentMonth] = React5.useState(value || /* @__PURE__ */ new Date());
-  const [selectedDate, setSelectedDate] = React5.useState(value);
+  const [currentMonth, setCurrentMonth] = React6.useState(value || /* @__PURE__ */ new Date());
+  const [selectedDate, setSelectedDate] = React6.useState(value);
   const getDaysInMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
   };
@@ -1064,14 +1229,14 @@ function DatePicker({
   className = "",
   size = "md"
 }) {
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const [selectedDate, setSelectedDate] = React5.useState(value);
-  const containerRef = React5.useRef(null);
-  const inputRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const [selectedDate, setSelectedDate] = React6.useState(value);
+  const containerRef = React6.useRef(null);
+  const inputRef = React6.useRef(null);
+  React6.useEffect(() => {
     setSelectedDate(value);
   }, [value]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1083,7 +1248,7 @@ function DatePicker({
     }
     return void 0;
   }, [isOpen]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -1196,7 +1361,7 @@ function DatePicker({
                 )
               }
             ) : clearable ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 flex-shrink-0" }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCalendar, { size: currentSize.icon, className: "text-muted-foreground flex-shrink-0" })
+            /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconCalendar, { size: currentSize.icon, className: "text-muted-foreground flex-shrink-0" })
           ] })
         ]
       }
@@ -1417,7 +1582,7 @@ function NavbarToggle({
         className: `lg:hidden flex items-center justify-center w-9 h-9 md:w-8 md:h-8 rounded text-foreground/70 hover:text-foreground hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-ring ${className}`.trim(),
         "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
         type: "button",
-        children: mobileMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 20, className: "md:w-5 md:h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMenu2, { size: 20, className: "md:w-5 md:h-5" })
+        children: mobileMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconX, { size: 20, className: "md:w-5 md:h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconMenu2, { size: 20, className: "md:w-5 md:h-5" })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1427,7 +1592,7 @@ function NavbarToggle({
         className: `hidden lg:flex items-center justify-center w-8 h-8 rounded text-foreground/70 hover:text-foreground hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-ring ${className}`.trim(),
         "aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
         type: "button",
-        children: sidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLayoutSidebarRightExpand, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLayoutSidebarRightCollapse, { size: 20 })
+        children: sidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconLayoutSidebarRightExpand, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconLayoutSidebarRightCollapse, { size: 20 })
       }
     )
   ] });
@@ -1440,8 +1605,8 @@ var PageTransition = ({
   type = "fade",
   className = ""
 }) => {
-  const [isVisible, setIsVisible] = React5__default.default.useState(false);
-  React5__default.default.useEffect(() => {
+  const [isVisible, setIsVisible] = React6__default.default.useState(false);
+  React6__default.default.useEffect(() => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         setIsVisible(true);
@@ -1472,7 +1637,7 @@ var PageTransition = ({
 PageTransition.displayName = "PageTransition";
 var page_transition_default = PageTransition;
 function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs", noBorder = false }) {
-  const [activeTab, setActiveTab] = React5.useState(defaultTab || tabs[0]?.id);
+  const [activeTab, setActiveTab] = React6.useState(defaultTab || tabs[0]?.id);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", "aria-label": ariaLabel, className: `flex ${noBorder ? "" : "border-b-2 border-border/50"}`, children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1502,7 +1667,7 @@ function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs", noBorder =
 }
 Tabs.displayName = "Tabs";
 var tabs_default = Tabs;
-var DropdownContext = React5.createContext(null);
+var DropdownContext = React6.createContext(null);
 function Dropdown({
   trigger,
   children,
@@ -1510,18 +1675,21 @@ function Dropdown({
   align = "start",
   autoClose = true,
   size = "md",
+  variant = "neutral",
+  buttonStyle = "solid",
   minWidth,
   maxWidth,
   menuClassName = ""
 }) {
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const dropdownRef = React5.useRef(null);
-  const menuRef = React5.useRef(null);
-  const itemsRef = React5.useRef([]);
-  const [activeIndex, setActiveIndex] = React5.useState(-1);
-  const close = React5.useCallback(() => setIsOpen(false), []);
-  const open = React5.useCallback(() => setIsOpen(true), []);
-  React5.useEffect(() => {
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const dropdownRef = React6.useRef(null);
+  const triggerRef = React6.useRef(null);
+  const menuRef = React6.useRef(null);
+  const itemsRef = React6.useRef([]);
+  const [activeIndex, setActiveIndex] = React6.useState(-1);
+  const close = React6.useCallback(() => setIsOpen(false), []);
+  const open = React6.useCallback(() => setIsOpen(true), []);
+  React6.useEffect(() => {
     if (!isOpen) return;
     const handleKey = (e) => {
       if (!menuRef.current) return;
@@ -1541,7 +1709,7 @@ function Dropdown({
       if (e.key === "Escape") {
         e.preventDefault();
         close();
-        dropdownRef.current?.querySelector('button[data-trigger="true"]')?.focus();
+        triggerRef.current?.focus();
       }
       if (e.key === "Tab") {
         e.preventDefault();
@@ -1556,7 +1724,7 @@ function Dropdown({
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [isOpen, activeIndex, close]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -1566,7 +1734,7 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, close]);
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     let raf;
     if (isOpen) {
       const itemEls = itemsRef.current.filter(Boolean);
@@ -1583,7 +1751,7 @@ function Dropdown({
       if (raf) cancelAnimationFrame(raf);
     };
   }, [isOpen]);
-  const registerItem = React5.useCallback((el, index) => {
+  const registerItem = React6.useCallback((el, index) => {
     if (typeof index === "number" && index >= 0) {
       itemsRef.current[index] = el;
       return;
@@ -1594,18 +1762,35 @@ function Dropdown({
     }
     if (!itemsRef.current.includes(el)) itemsRef.current.push(el);
   }, []);
+  const { title, subtitle, icon, hideChevron } = trigger;
+  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: 16, color: "currentColor" }) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: `relative ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      button_default,
       {
-        "data-trigger": "true",
+        ref: triggerRef,
+        variant,
+        style: buttonStyle,
         onClick: () => isOpen ? close() : open(),
-        className: "bg-transparent border-0 p-0 cursor-pointer outline-none",
-        type: "button",
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         "aria-controls": isOpen ? "dropdown-menu" : void 0,
-        children: trigger
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+            iconNode && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: iconNode }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: subtitle ? "text-left" : "", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: subtitle ? "block font-semibold" : "", children: title }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground font-normal", children: subtitle })
+            ] })
+          ] }),
+          !hideChevron && /* @__PURE__ */ jsxRuntime.jsx(
+            TablerIcons.IconChevronDown,
+            {
+              size: 14,
+              className: `ml-1 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
       }
     ),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: { requestClose: close, autoClose, registerItem, minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1613,7 +1798,7 @@ function Dropdown({
       {
         id: "dropdown-menu",
         ref: menuRef,
-        className: `absolute mt-2 bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === "sm" ? "min-w-[140px] text-xs py-1" : "min-w-[180px]"} max-h-[320px] overflow-y-auto origin-top animate-scaleIn focus:outline-none ${align === "start" ? "left-0" : align === "end" ? "right-0" : "left-1/2 -translate-x-1/2"} ${menuClassName}`,
+        className: `absolute mt-2 bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === "sm" ? "min-w-[140px] text-xs py-1" : "min-w-[180px]"} max-h-80 overflow-y-auto origin-top animate-scaleIn focus:outline-none ${align === "start" ? "left-0" : align === "end" ? "right-0" : "left-1/2 -translate-x-1/2"} ${menuClassName}`,
         style: {
           minWidth: minWidth || void 0,
           maxWidth: maxWidth || void 0
@@ -1639,7 +1824,7 @@ function DropdownItem({
   endIcon,
   size = "md"
 }) {
-  const ctx = React5.useContext(DropdownContext);
+  const ctx = React6.useContext(DropdownContext);
   const base = `${size === "sm" ? "text-[11px] leading-tight px-2.5 py-1.5 rounded-md" : "px-3.5 py-2 rounded-md"} w-full text-left select-none transition-colors outline-none disabled:opacity-40 disabled:pointer-events-none`;
   const focus = "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover";
   const palette = {
@@ -1655,6 +1840,8 @@ function DropdownItem({
   };
   const variantClasses = palette[variant] || palette.default;
   const hasIcons = icon || endIcon;
+  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: 16, color: "currentColor" }) : null;
+  const endIconNode = endIcon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: endIcon, size: 16, color: "currentColor" }) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -1669,12 +1856,12 @@ function DropdownItem({
       },
       className: `${base} ${focus} ${variantClasses} ${hasIcons ? "flex flex-row items-center gap-2.5" : "flex flex-col"} ${className}`,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex-shrink-0 ${size === "sm" ? "text-[14px]" : "text-[16px]"}`, children: icon }),
+        iconNode && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `shrink-0 ${size === "sm" ? "text-[14px]" : "text-[16px]"}`, children: iconNode }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block ${size === "sm" ? "font-medium" : "font-medium"} leading-snug`, children }),
           description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block ${size === "sm" ? "text-[10px]" : "text-xs"} text-foreground/60 mt-0.5 line-clamp-2`, children: description })
         ] }),
-        endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex-shrink-0 ${size === "sm" ? "text-[14px]" : "text-[16px]"}`, children: endIcon })
+        endIconNode && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `shrink-0 ${size === "sm" ? "text-[14px]" : "text-[16px]"}`, children: endIconNode })
       ]
     }
   );
@@ -1768,8 +1955,8 @@ Pagination.displayName = "Pagination";
 var pagination_default = Pagination;
 function Sidebar({ children, className = "", width = "16rem" }) {
   const widthClass = width === "16rem" ? "w-64" : width === "4rem" ? "w-16" : "";
-  const enhancedChildren = React5__default.default.Children.map(children, (child) => {
-    if (!React5__default.default.isValidElement(child)) return child;
+  const enhancedChildren = React6__default.default.Children.map(children, (child) => {
+    if (!React6__default.default.isValidElement(child)) return child;
     const childProps = child.props || {};
     if ("href" in childProps) {
       const existing = typeof childProps.className === "string" ? childProps.className : "";
@@ -1780,7 +1967,7 @@ function Sidebar({ children, className = "", width = "16rem" }) {
         ...child.props,
         className: `${existing} ${sidebarItemClasses}`.trim()
       };
-      return React5__default.default.cloneElement(child, newProps, wrappedChildren);
+      return React6__default.default.cloneElement(child, newProps, wrappedChildren);
     }
     return child;
   });
@@ -1882,7 +2069,7 @@ function Stepper({
                 transition-colors transition-[background-color,border-color] duration-300 ease-in-out
                 ${styles.circle}
               `,
-                  children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
+                  children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
                 }
               ),
               index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1923,7 +2110,7 @@ function Stepper({
               transition-colors transition-[background-color,border-color] duration-300 ease-in-out
               ${styles.circle}
             `,
-                children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
+                children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
               }
             ),
             index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1957,20 +2144,20 @@ function Stepper({
 Stepper.displayName = "Stepper";
 var stepper_default = Stepper;
 function Toast({ message, children, type = "info", onClose, className = "", duration = 5e3 }) {
-  const [isClosing, setIsClosing] = React5.useState(false);
+  const [isClosing, setIsClosing] = React6.useState(false);
   const typeClasses = {
     info: "bg-info text-info-foreground",
     success: "bg-success text-success-foreground",
     warning: "bg-warning text-warning-foreground",
     error: "bg-destructive text-destructive-foreground"
   };
-  const handleClose = React5.useCallback(() => {
+  const handleClose = React6.useCallback(() => {
     setIsClosing(true);
     setTimeout(() => {
       onClose?.();
     }, 300);
   }, [onClose]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (duration > 0) {
       const timer = setTimeout(() => {
         handleClose();
@@ -2004,11 +2191,11 @@ function Tooltip({
   usePortal = false,
   className = ""
 }) {
-  const [showTooltip, setShowTooltip] = React5.useState(false);
-  const [tooltipPosition, setTooltipPosition] = React5.useState({ top: 0, left: 0 });
-  const triggerRef = React5.useRef(null);
+  const [showTooltip, setShowTooltip] = React6.useState(false);
+  const [tooltipPosition, setTooltipPosition] = React6.useState({ top: 0, left: 0 });
+  const triggerRef = React6.useRef(null);
   const isVisible = open || showTooltip;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (usePortal && isVisible && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       const positions = {
@@ -2140,11 +2327,11 @@ function useOverlay(options) {
     exitDuration = 300,
     unmountOnExit = true
   } = options;
-  const previouslyFocusedRef = React5.useRef(null);
-  const containerRef = React5.useRef(null);
-  const [shouldRender, setShouldRender] = React5.useState(isOpen);
-  const [phase, setPhase] = React5.useState("mount");
-  React5.useLayoutEffect(() => {
+  const previouslyFocusedRef = React6.useRef(null);
+  const containerRef = React6.useRef(null);
+  const [shouldRender, setShouldRender] = React6.useState(isOpen);
+  const [phase, setPhase] = React6.useState("mount");
+  React6.useLayoutEffect(() => {
     if (isOpen && !shouldRender) {
       setShouldRender(true);
       setPhase("mount");
@@ -2170,7 +2357,7 @@ function useOverlay(options) {
       setPhase("animating-out");
     }
   }, [isOpen, shouldRender, phase, animationFrames]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (phase === "animating-out" && unmountOnExit) {
       const timeout = setTimeout(() => {
         setShouldRender(false);
@@ -2180,7 +2367,7 @@ function useOverlay(options) {
     }
     return void 0;
   }, [phase, exitDuration, unmountOnExit]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (isOpen) {
       if (typeof document !== "undefined") {
         if (restoreFocus) previouslyFocusedRef.current = document.activeElement;
@@ -2196,7 +2383,7 @@ function useOverlay(options) {
       }
     };
   }, [isOpen, lockScroll, restoreFocus]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (phase === "visible" && containerRef.current) {
       const el = containerRef.current;
       try {
@@ -2206,7 +2393,7 @@ function useOverlay(options) {
       }
     }
   }, [phase]);
-  const handleKeyDown = React5.useCallback(
+  const handleKeyDown = React6.useCallback(
     (e) => {
       if (!focusTrap || phase !== "visible" || e.key !== "Tab" || !containerRef.current) return;
       const node = containerRef.current;
@@ -2228,14 +2415,14 @@ function useOverlay(options) {
     },
     [focusTrap, phase]
   );
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (focusTrap && phase === "visible") {
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     }
     return void 0;
   }, [phase, focusTrap, handleKeyDown]);
-  const getPhaseClass = React5.useCallback(
+  const getPhaseClass = React6.useCallback(
     (openClass, closedClass) => {
       return phase === "animating-in" || phase === "visible" ? openClass : closedClass;
     },
@@ -2269,7 +2456,7 @@ function Modal({
     animationFrames: 2,
     restoreFocus: true
   });
-  React5__default.default.useEffect(() => {
+  React6__default.default.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -2362,7 +2549,7 @@ function DeleteDialog({
             onClick: onClose,
             disabled: isLoading,
             className: "bg-muted hover:bg-muted/80 text-muted-foreground",
-            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 16 }),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconX, { size: 16 }),
             children: cancelText
           }
         ),
@@ -2372,7 +2559,7 @@ function DeleteDialog({
             onClick: onConfirm,
             disabled: isLoading,
             className: "bg-destructive hover:bg-destructive/90 text-destructive-foreground",
-            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconTrash, { size: 16 }),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconTrash, { size: 16 }),
             children: isLoading ? "Deleting..." : confirmText
           }
         )
@@ -2384,10 +2571,10 @@ function DeleteDialog({
 DeleteDialog.displayName = "DeleteDialog";
 var delete_dialog_default = DeleteDialog;
 function Popover({ trigger, children, content, position = "bottom", className = "" }) {
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const popoverRef = React5.useRef(null);
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const popoverRef = React6.useRef(null);
   const triggerContent = children || trigger;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleClickOutside = (event) => {
       if (popoverRef.current && !popoverRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2447,7 +2634,7 @@ function Alert({
   position = "relative",
   duration = 0
 }) {
-  const [isClosing, setIsClosing] = React5.useState(false);
+  const [isClosing, setIsClosing] = React6.useState(false);
   const typeClasses = {
     info: "bg-info/20 text-foreground border-info/50 backdrop-blur-sm",
     success: "bg-success/20 text-foreground border-success/50 backdrop-blur-sm",
@@ -2460,13 +2647,13 @@ function Alert({
     warning: "text-warning",
     error: "text-destructive"
   };
-  const handleClose = React5.useCallback(() => {
+  const handleClose = React6.useCallback(() => {
     setIsClosing(true);
     setTimeout(() => {
       onClose?.();
     }, 300);
   }, [onClose]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (duration > 0 && onClose) {
       const timer = setTimeout(() => {
         handleClose();
@@ -2577,13 +2764,7 @@ function Spinner({ size = "md", variant = "primary", className = "", speed, ...p
 }
 Spinner.displayName = "Spinner";
 var spinner_default = Spinner;
-function ProgressBar({
-  value,
-  max = 100,
-  showLabel = false,
-  variant = "default",
-  className = ""
-}) {
+function ProgressBar({ value, max = 100, showLabel, variant = "default", className = "" }) {
   const percentage = Math.min(value / max * 100, 100);
   const variantClasses = {
     default: "bg-primary",
@@ -2591,8 +2772,8 @@ function ProgressBar({
     warning: "bg-warning",
     error: "bg-destructive"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         role: "progressbar",
@@ -2603,7 +2784,7 @@ function ProgressBar({
         style: { width: `${percentage}%` }
       }
     ) }),
-    showLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground mt-2 text-right font-medium", children: [
+    showLabel && /* @__PURE__ */ jsxRuntime.jsxs(text_default, { variant: "muted", weight: "medium", size: "sm", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -2936,12 +3117,12 @@ function TableCell({ children, className = "", align = "left", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses[align]} ${className}`, ...props, children });
 }
 function useTable({ data, initialSort, pageSize = 10 }) {
-  const [sortConfig, setSortConfig] = React5.useState(
+  const [sortConfig, setSortConfig] = React6.useState(
     initialSort ? { key: initialSort.key, direction: initialSort.direction } : null
   );
-  const [currentPage, setCurrentPage] = React5.useState(1);
-  const [selectedRows, setSelectedRows] = React5.useState(/* @__PURE__ */ new Set());
-  const sortedData = React5.useMemo(() => {
+  const [currentPage, setCurrentPage] = React6.useState(1);
+  const [selectedRows, setSelectedRows] = React6.useState(/* @__PURE__ */ new Set());
+  const sortedData = React6.useMemo(() => {
     if (!sortConfig) return data;
     const sorted = [...data].sort((a, b) => {
       const aValue = a[sortConfig.key];
@@ -3095,12 +3276,12 @@ function DataTable({
     if (!sortable) return null;
     const isSorted = sortConfig?.key === columnKey;
     if (!isSorted) {
-      return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSelector, { className: "w-4 h-4 ml-1 text-muted-foreground" });
+      return /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconSelector, { className: "w-4 h-4 ml-1 text-muted-foreground" });
     }
     if (sortConfig?.direction === "asc") {
-      return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronUp, { className: "w-4 h-4 ml-1 text-primary" });
+      return /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconChevronUp, { className: "w-4 h-4 ml-1 text-primary" });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "w-4 h-4 ml-1 text-primary" });
+    return /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconChevronDown, { className: "w-4 h-4 ml-1 text-primary" });
   };
   if (data.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(empty_state_default, { title: emptyMessage, icon: emptyIcon, className: "py-12" }) });
@@ -3272,7 +3453,7 @@ function Chip({
             ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
           `,
             "aria-label": "Remove",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: size === "sm" ? "w-2.5 h-2.5" : size === "md" ? "w-3 h-3" : "w-3.5 h-3.5" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconX, { className: size === "sm" ? "w-2.5 h-2.5" : size === "md" ? "w-3 h-3" : "w-3.5 h-3.5" })
           }
         )
       ]
@@ -3399,7 +3580,7 @@ function Grid({
 }
 Grid.displayName = "Grid";
 var grid_default = Grid;
-function Heading({ children, level = 1, className = "", noMargin = false }) {
+function Heading({ children, level = 1, className = "", hasMargin = false }) {
   const levelClasses = {
     1: "text-3xl sm:text-4xl lg:text-5xl font-bold",
     2: "text-2xl sm:text-3xl lg:text-4xl font-bold",
@@ -3409,15 +3590,15 @@ function Heading({ children, level = 1, className = "", noMargin = false }) {
     6: "text-sm sm:text-base font-medium"
   };
   const marginClasses = {
-    1: "mb-4",
-    2: "mb-3",
-    3: "mb-3",
-    4: "mb-2",
-    5: "mb-2",
-    6: "mb-2"
-  };
-  const margin = noMargin ? "" : marginClasses[level];
-  return React5.createElement(
+    1: "mb-3 sm:mb-4",
+    2: "mb-2 sm:mb-3",
+    3: "mb-2 sm:mb-3",
+    4: "mb-1 sm:mb-2",
+    5: "mb-1 sm:mb-2",
+    6: "mb-1 sm:mb-2"
+  };
+  const margin = hasMargin ? marginClasses[level] : "";
+  return React6.createElement(
     `h${level}`,
     {
       className: `text-foreground ${levelClasses[level]} ${margin} ${className}`
@@ -3430,8 +3611,8 @@ var heading_default = Heading;
 function PricingTable({ title, description, children, columns = 3, className = "" }) {
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs(container_default, { size: "xl", children: [
     (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-12 md:mb-16 max-w-3xl mx-auto", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl text-muted", children: description })
+      title && /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 2, hasMargin: true, className: "text-3xl md:text-4xl font-bold", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { hasMargin: true, className: "text-lg md:text-xl text-muted", children: description })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(grid_default, { itemSize: "lg", maxCols: columns, gap: "lg", className: "items-stretch", children })
   ] }) });
@@ -3457,18 +3638,18 @@ function Card({
     filled: "bg-muted text-foreground"
   };
   const sizeClasses2 = {
-    xs: "w-full sm:w-36",
-    sm: "w-full sm:w-64",
-    md: "w-full sm:w-96",
-    lg: "w-full sm:w-[28rem]",
-    xl: "w-full sm:w-[32rem]"
+    xs: "w-full sm:max-w-36",
+    sm: "w-full sm:max-w-64",
+    md: "w-full sm:max-w-96",
+    lg: "w-full sm:max-w-[28rem]",
+    xl: "w-full sm:max-w-[32rem]"
   };
   const widthClasses = {
-    auto: size !== "md" ? sizeClasses2[size] : "max-w-full",
+    auto: size ? sizeClasses2[size] : "max-w-full",
     full: "w-full",
     fit: "w-fit"
   };
-  const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer" : "transition-shadow duration-200";
+  const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1" : "transition-shadow duration-200";
   const imagePositionClasses = {
     top: "flex-col",
     bottom: "flex-col-reverse",
@@ -3575,8 +3756,10 @@ function PricingTier({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(card_header_default, { className: `relative text-center border-none bg-transparent px-6 pt-12 pb-0`, children: [
           badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(badge_default, { variant: "primary", className: "px-4 py-1 shadow-md", children: badge }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 3, className: "text-2xl font-bold mb-3 text-foreground", children: name }),
-          description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", className: "text-sm mb-1", children: description })
+          /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { direction: "horizontal", spacing: "sm", justify: "between", align: "center", className: "w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(text_default, { size: "2xl", weight: "extrabold", variant: "body", children: name }),
+            description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", className: "text-sm", children: description })
+          ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-3 pb-8 text-center px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-5xl font-bold text-foreground", children: price }),
@@ -3584,7 +3767,7 @@ function PricingTier({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 space-y-4 py-6 px-6 border-t border-border/50", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            iconsReact.IconCheck,
+            TablerIcons.IconCheck,
             {
               size: 20,
               className: `flex-shrink-0 mt-0.5 ${feature.included ? "text-success" : "text-muted-foreground opacity-30"}`
@@ -3610,7 +3793,7 @@ function PricingTier({
 PricingTier.displayName = "PricingTier";
 var pricing_tier_default = PricingTier;
 function CodeBlock({ code, className = "", showCopy = true }) {
-  const [copied, setCopied] = React5.useState(false);
+  const [copied, setCopied] = React6.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -3866,7 +4049,7 @@ function Page({ children, className = "" }) {
 Page.displayName = "Page";
 var page_default = Page;
 function AccordionItem({ title, children, defaultOpen = false }) {
-  const [isOpen, setIsOpen] = React5.useState(defaultOpen);
+  const [isOpen, setIsOpen] = React6.useState(defaultOpen);
   return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "border-b border-border", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -3928,9 +4111,9 @@ function Hero({
     variant === "gradient" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
     /* @__PURE__ */ jsxRuntime.jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: centered ? "text-center mx-auto max-w-4xl" : "max-w-4xl", children: [
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl font-semibold text-primary mb-4", weight: "semibold", children: subtitle }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx(text_default, { hasMargin: true, className: "text-lg md:text-xl font-semibold text-primary", weight: "semibold", children: subtitle }),
       /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-extrabold mb-6 tracking-tight`, children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto", children: description }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { hasMargin: true, className: "text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto", children: description }),
       (primaryAction || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
         primaryAction && /* @__PURE__ */ jsxRuntime.jsx(
           button_default,
@@ -3974,16 +4157,10 @@ function FeatureSection({
   className = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs(container_default, { size: "xl", children: [
-    (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: `mb-12 md:mb-16 ${centered ? "text-center" : ""} ${centered ? "max-w-3xl mx-auto" : "max-w-3xl"}`,
-        children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl", children: description })
-        ]
-      }
-    ),
+    (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { spacing: "md", className: `mb-12 md:mb-16 ${centered ? "text-center max-w-3xl mx-auto" : "max-w-3xl"}`, children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 2, hasMargin: true, children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl", children: description })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(grid_default, { itemSize: "md", maxCols: columns, gap: "lg", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("article", { className: centered ? "text-center" : "", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
@@ -4084,7 +4261,7 @@ function Footer({ sections, copyright, social, className = "" }) {
       {
         className: `${sections && sections.length > 0 ? "border-t border-border" : ""} py-6 flex flex-col md:flex-row items-center justify-between gap-4`,
         children: [
-          copyright && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", className: "text-sm text-center md:text-left", children: copyright }),
+          copyright && /* @__PURE__ */ jsxRuntime.jsx(text_default, { hasMargin: true, variant: "muted", className: "text-sm text-center md:text-left", children: copyright }),
           social && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-4", children: social })
         ]
       }
@@ -4094,7 +4271,7 @@ function Footer({ sections, copyright, social, className = "" }) {
 Footer.displayName = "Footer";
 var footer_default = Footer;
 function useScrollReset(deps, container) {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     let cancelled = false;
     const maxRaf = 6;
     let rafCount = 0;
@@ -4103,6 +4280,23 @@ function useScrollReset(deps, container) {
     };
     const setAllScrollTop = () => {
       if (cancelled) return;
+      try {
+        const hash = typeof window !== "undefined" ? window.location.hash : "";
+        if (hash && hash.startsWith("#")) {
+          const id = decodeURIComponent(hash.slice(1));
+          const resolved2 = isRef(container) ? container.current : container;
+          const root = resolved2 ?? document;
+          const target = root.querySelector ? root.querySelector(`#${CSS.escape(id)}`) : null;
+          if (target) {
+            try {
+              target.scrollIntoView({ block: "start" });
+            } catch (e) {
+            }
+            return;
+          }
+        }
+      } catch (e) {
+      }
       window.scrollTo(0, 0);
       const resolved = isRef(container) ? container.current : container;
       if (resolved) resolved.scrollTop = 0;
@@ -4142,10 +4336,10 @@ function LeftNavLayout({
   embedded = false,
   mainContentRef
 }) {
-  const [internalCollapsed, setInternalCollapsed] = React5.useState(false);
-  const navRef = React5.useRef(null);
-  const scrollPosRef = React5.useRef(0);
-  const internalContentRef = React5.useRef(null);
+  const [internalCollapsed, setInternalCollapsed] = React6.useState(false);
+  const navRef = React6.useRef(null);
+  const scrollPosRef = React6.useRef(0);
+  const internalContentRef = React6.useRef(null);
   const contentRef = mainContentRef || internalContentRef;
   const collapsed = controlledCollapsed ?? internalCollapsed;
   const setCollapsed = (value) => {
@@ -4157,7 +4351,7 @@ function LeftNavLayout({
   };
   const mobileMenuOpen = controlledMobileMenuOpen ?? false;
   const toggleCollapsed = () => setCollapsed(!collapsed);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (navRef.current) {
       navRef.current.scrollTop = scrollPosRef.current;
     }
@@ -4216,7 +4410,7 @@ function LeftNavLayout({
               `,
                     "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
                     type: "button",
-                    children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronRight, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronLeft, { size: 20 })
+                    children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconChevronRight, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconChevronLeft, { size: 20 })
                   }
                 )
               ]
@@ -4259,15 +4453,15 @@ function LeftNavItem({
   title,
   preventNavigation = false
 }) {
-  const navRef = React5.useRef(null);
-  const [isCollapsed, setIsCollapsed] = React5.useState(() => {
+  const navRef = React6.useRef(null);
+  const [isCollapsed, setIsCollapsed] = React6.useState(() => {
     if (typeof window !== "undefined") {
       const navElement = document.querySelector("nav[data-collapsed]");
       return navElement?.getAttribute("data-collapsed") === "true";
     }
     return false;
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const checkCollapsed = () => {
       const navElement2 = navRef.current?.closest("nav");
       if (navElement2) {
@@ -4381,26 +4575,26 @@ function Logo({ size = "md", className = "" }) {
   const sizeClass = sizeClasses[size];
   return /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/icons/logo.svg", alt: "Hydden Logo", className: `${sizeClass} ${className}`, loading: "lazy" });
 }
-var ThemeContext = React5.createContext(void 0);
+var ThemeContext = React6.createContext(void 0);
 function ThemeProvider({
   children,
   defaultTheme = "light",
   storageKey = "hydn-theme",
   themes = ["light", "dark"]
 }) {
-  const [theme, setThemeState] = React5.useState(() => {
+  const [theme, setThemeState] = React6.useState(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem(storageKey);
       return stored && themes.includes(stored) ? stored : defaultTheme;
     }
     return defaultTheme;
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const root = window.document.documentElement;
     root.classList.remove(...themes);
     root.classList.add(theme);
   }, [theme, themes]);
-  const setTheme = React5.useCallback(
+  const setTheme = React6.useCallback(
     (newTheme) => {
       if (themes.includes(newTheme)) {
         localStorage.setItem(storageKey, newTheme);
@@ -4411,7 +4605,7 @@ function ThemeProvider({
     },
     [themes, storageKey]
   );
-  const value = React5.useMemo(
+  const value = React6.useMemo(
     () => ({
       theme,
       setTheme,
@@ -4422,7 +4616,7 @@ function ThemeProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  const context = React5.useContext(ThemeContext);
+  const context = React6.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -4485,7 +4679,7 @@ function ColorModeToggle({ className = "" }) {
 }
 ColorModeToggle.displayName = "ColorModeToggle";
 var color_mode_toggle_default = ColorModeToggle;
-var AuthContext = React5.createContext(void 0);
+var AuthContext = React6.createContext(void 0);
 function AuthProvider({ config, children }) {
   const {
     onLogin,
@@ -4495,11 +4689,11 @@ function AuthProvider({ config, children }) {
     useSessionStorage = false,
     autoRefresh = true
   } = config;
-  const [user, setUser] = React5.useState(null);
-  const [isLoading, setIsLoading] = React5.useState(true);
-  const [error, setError] = React5.useState(null);
+  const [user, setUser] = React6.useState(null);
+  const [isLoading, setIsLoading] = React6.useState(true);
+  const [error, setError] = React6.useState(null);
   const storage = useSessionStorage ? sessionStorage : localStorage;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const loadUser = async () => {
       try {
         if (onRefresh && autoRefresh) {
@@ -4519,7 +4713,7 @@ function AuthProvider({ config, children }) {
     };
     loadUser();
   }, [storageKey, storage, onRefresh, autoRefresh]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (user) {
       storage.setItem(storageKey, JSON.stringify(user));
     } else {
@@ -4590,7 +4784,7 @@ function AuthProvider({ config, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
 }
 function useAuth() {
-  const context = React5.useContext(AuthContext);
+  const context = React6.useContext(AuthContext);
   if (!context) {
     throw new Error("useAuth must be used within an AuthProvider");
   }