@kjaniec-dev/ui 0.9.1 → 0.9.3

package/dist/index.js

@@ -2,6 +2,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React52 from 'react';
+import React52__default, { useState, useEffect, useRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -93,20 +94,17 @@ var Badge = React52.forwardRef(
   ] })
 );
 Badge.displayName = "Badge";
-var alertVariants = cva(
-  "flex gap-3 items-start p-[0.9rem_1.1rem] rounded-kj-md border text-sm",
-  {
-    variants: {
-      variant: {
-        info: "bg-info-surface border-info/30",
-        success: "bg-success-surface border-success/30",
-        warning: "bg-warning-surface border-warning/30",
-        danger: "bg-danger-surface border-danger/30"
-      }
-    },
-    defaultVariants: { variant: "info" }
-  }
-);
+var alertVariants = cva("flex gap-3 items-start p-[0.9rem_1.1rem] rounded-kj-md border text-sm", {
+  variants: {
+    variant: {
+      info: "bg-info-surface border-info/30",
+      success: "bg-success-surface border-success/30",
+      warning: "bg-warning-surface border-warning/30",
+      danger: "bg-danger-surface border-danger/30"
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
 var iconColor = {
   info: "text-info",
   success: "text-success",
@@ -115,7 +113,16 @@ var iconColor = {
 };
 var Alert = React52.forwardRef(
   ({ className, variant = "info", icon, title, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: [
-    icon && /* @__PURE__ */ jsx("span", { className: cn("shrink-0 mt-0.5 [&_svg]:h-[1.15rem] [&_svg]:w-[1.15rem]", iconColor[variant ?? "info"]), children: icon }),
+    icon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "shrink-0 mt-0.5 [&_svg]:h-[1.15rem] [&_svg]:w-[1.15rem]",
+          iconColor[variant ?? "info"]
+        ),
+        children: icon
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "text-foreground", children: [
       title && /* @__PURE__ */ jsx("p", { className: "font-bold m-0 mb-0.5 text-sm", children: title }),
       children && /* @__PURE__ */ jsx("p", { className: "m-0 opacity-85", children })
@@ -171,10 +178,18 @@ var Progress = React52.forwardRef(
 );
 Progress.displayName = "Progress";
 var Label = React52.forwardRef(
-  ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs("label", { ref, className: cn("text-[0.8rem] font-semibold text-foreground", className), ...props, children: [
-    children,
-    required && /* @__PURE__ */ jsx("span", { className: "text-danger", children: " *" })
-  ] })
+  ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ref,
+      className: cn("text-[0.8rem] font-semibold text-foreground", className),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { className: "text-danger", children: " *" })
+      ]
+    }
+  )
 );
 Label.displayName = "Label";
 var Hint = React52.forwardRef(
@@ -200,11 +215,7 @@ var FormField = React52.forwardRef(
     const child = React52.Children.only(children);
     const clonedChild = React52.cloneElement(child, {
       id: child.props.id ?? id,
-      "aria-describedby": cn(
-        hint && hintId,
-        error && errorId,
-        child.props["aria-describedby"]
-      ) || void 0,
+      "aria-describedby": cn(hint && hintId, error && errorId, child.props["aria-describedby"]) || void 0,
       "aria-invalid": error ? "true" : void 0,
       required: child.props.required ?? required
     });
@@ -340,11 +351,21 @@ var ProgressRing = React52.forwardRef(
 ProgressRing.displayName = "ProgressRing";
 var ProgressRingField = React52.forwardRef(
   ({ label, hint, error, required, fieldClassName, ...ringProps }, ref) => {
-    return /* @__PURE__ */ jsx(FormField, { label, hint, error, required, className: fieldClassName, children: /* @__PURE__ */ jsx(ProgressRing, { ref, "aria-label": ringProps["aria-label"] ?? label, ...ringProps }) });
+    return /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label,
+        hint,
+        error,
+        required,
+        className: fieldClassName,
+        children: /* @__PURE__ */ jsx(ProgressRing, { ref, "aria-label": ringProps["aria-label"] ?? label, ...ringProps })
+      }
+    );
   }
 );
 ProgressRingField.displayName = "ProgressRingField";
-var baseField = "w-full font-sans text-sm text-foreground bg-surface border rounded-kj-md px-[0.85rem] transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed";
+var baseField = "w-full font-sans text-sm text-foreground bg-surface border rounded-kj-md px-[0.85rem] transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground hover:border-control-border-hover focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed";
 var Input = React52.forwardRef(
   ({ className, error, leadingIcon, ...props }, ref) => {
     const field = /* @__PURE__ */ jsx(
@@ -432,11 +453,33 @@ var Checkbox = React52.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const autoId = React52.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
-      /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", className: "peer sr-only", ...props }),
-      /* @__PURE__ */ jsx("span", { className: "grid place-items-center h-[1.15rem] w-[1.15rem] shrink-0 rounded-[0.4rem] border-[1.5px] border-input bg-surface transition-all duration-150 peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 peer-checked:[&_svg]:opacity-100 peer-checked:[&_svg]:scale-100", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", className: "h-3 w-3 text-primary-foreground opacity-0 scale-50 transition-all duration-150", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
-      label
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "inline-flex items-center gap-2.5 cursor-pointer text-sm select-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", className: "peer sr-only", ...props }),
+          /* @__PURE__ */ jsx("span", { className: "grid place-items-center h-[1.15rem] w-[1.15rem] shrink-0 rounded-[0.4rem] border-[1.5px] border-input bg-surface transition-all duration-150 peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 peer-checked:[&_svg]:opacity-100 peer-checked:[&_svg]:scale-100", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 3,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-3 w-3 text-primary-foreground opacity-0 scale-50 transition-all duration-150",
+              children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+            }
+          ) }),
+          label
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -444,11 +487,21 @@ var Radio = React52.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const autoId = React52.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
-      /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "radio", className: "peer sr-only", ...props }),
-      /* @__PURE__ */ jsx("span", { className: "grid place-items-center h-[1.15rem] w-[1.15rem] shrink-0 rounded-full border-[1.5px] border-input bg-surface transition-all duration-150 peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 peer-checked:[&>span]:opacity-100 peer-checked:[&>span]:scale-100", children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary-foreground opacity-0 scale-[0.4] transition-all duration-150" }) }),
-      label
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "inline-flex items-center gap-2.5 cursor-pointer text-sm select-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "radio", className: "peer sr-only", ...props }),
+          /* @__PURE__ */ jsx("span", { className: "grid place-items-center h-[1.15rem] w-[1.15rem] shrink-0 rounded-full border-[1.5px] border-input bg-surface transition-all duration-150 peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 peer-checked:[&>span]:opacity-100 peer-checked:[&>span]:scale-100", children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary-foreground opacity-0 scale-[0.4] transition-all duration-150" }) }),
+          label
+        ]
+      }
+    );
   }
 );
 Radio.displayName = "Radio";
@@ -479,19 +532,37 @@ var Switch = React52.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const autoId = React52.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
-      /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", role: "switch", className: "peer sr-only", ...props }),
-      /* @__PURE__ */ jsx("span", { className: "relative h-[1.45rem] w-[2.6rem] shrink-0 rounded-full bg-input transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:h-[calc(1.45rem-4px)] after:w-[calc(1.45rem-4px)] after:rounded-full after:bg-white after:shadow-kj-sm after:transition-transform after:duration-200 peer-checked:after:translate-x-[1.15rem]" }),
-      label
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "inline-flex items-center gap-2.5 cursor-pointer text-sm select-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: inputId,
+              type: "checkbox",
+              role: "switch",
+              className: "peer sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "relative h-[1.45rem] w-[2.6rem] shrink-0 rounded-full bg-input transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:h-[calc(1.45rem-4px)] after:w-[calc(1.45rem-4px)] after:rounded-full after:bg-white after:shadow-kj-sm after:transition-transform after:duration-200 peer-checked:after:translate-x-[1.15rem]" }),
+          label
+        ]
+      }
+    );
   }
 );
 Switch.displayName = "Switch";
 var Slider = React52.forwardRef(
   ({ className, style, value, defaultValue, min = 0, max = 100, onChange, ...props }, ref) => {
-    const [localValue, setLocalValue] = React52.useState(
-      Number(defaultValue ?? value ?? 50)
-    );
+    const [localValue, setLocalValue] = React52.useState(Number(defaultValue ?? value ?? 50));
     const isControlled = value !== void 0;
     const currentVal = isControlled ? Number(value) : localValue;
     const numMin = Number(min);
@@ -628,13 +699,9 @@ var CardHeader = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-[1.35rem] flex flex-col gap-1", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React52.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("m-0 text-base font-bold tracking-[-0.01em]", className), ...props, children })
-);
+var CardTitle = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("m-0 text-base font-bold tracking-[-0.01em]", className), ...props, children }));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React52.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("m-0 text-[0.85rem] text-muted-foreground", className), ...props })
-);
+var CardDescription = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("m-0 text-[0.85rem] text-muted-foreground", className), ...props }));
 CardDescription.displayName = "CardDescription";
 var CardContent = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-[1.35rem] pb-[1.35rem]", className), ...props })
@@ -645,7 +712,10 @@ var CardFooter = React52.forwardRef(
     "div",
     {
       ref,
-      className: cn("flex gap-2.5 px-[1.35rem] py-[1.1rem] border-t border-border bg-muted/40", className),
+      className: cn(
+        "flex gap-2.5 px-[1.35rem] py-[1.1rem] border-t border-border bg-muted/40",
+        className
+      ),
       ...props
     }
   )
@@ -693,7 +763,15 @@ var avatarVariants = cva(
 );
 var Avatar = React52.forwardRef(
   ({ className, size, tone, src, alt, status, children, ...props }, ref) => {
-    const node = /* @__PURE__ */ jsx("span", { ref, className: cn(avatarVariants({ size, tone }), "overflow-hidden", className), ...props, children: src ? /* @__PURE__ */ jsx("img", { src, alt, className: "h-full w-full object-cover" }) : children });
+    const node = /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(avatarVariants({ size, tone }), "overflow-hidden", className),
+        ...props,
+        children: src ? /* @__PURE__ */ jsx("img", { src, alt, className: "h-full w-full object-cover" }) : children
+      }
+    );
     if (!status) return node;
     return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
       node,
@@ -712,7 +790,14 @@ function useTabs() {
   if (!ctx) throw new Error("Tabs.* must be used within <Tabs>");
   return ctx;
 }
-function Tabs({ value, defaultValue, onValueChange, className, children, ...props }) {
+function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+  ...props
+}) {
   const [internal, setInternal] = React52.useState(defaultValue ?? "");
   const uid = React52.useId();
   const current = value ?? internal;
@@ -822,7 +907,13 @@ var TabsContent = React52.forwardRef(
 );
 TabsContent.displayName = "TabsContent";
 var AccordionContext = React52.createContext(null);
-function Accordion({ type = "single", defaultValue = [], className, children, ...props }) {
+function Accordion({
+  type = "single",
+  defaultValue = [],
+  className,
+  children,
+  ...props
+}) {
   const [open, setOpen] = React52.useState(defaultValue);
   const toggle = React52.useCallback(
     (v) => {
@@ -834,72 +925,97 @@ function Accordion({ type = "single", defaultValue = [], className, children, ..
     },
     [type]
   );
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { open, toggle }, children: /* @__PURE__ */ jsx("div", { className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props, children }) });
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { open, toggle }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("border border-border rounded-kj-lg overflow-hidden", className),
+      ...props,
+      children
+    }
+  ) });
 }
 var ItemContext = React52.createContext("");
 var AccordionItem = React52.forwardRef(
-  ({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(ItemContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: cn("border-t border-border first:border-t-0", className), ...props }) })
+  ({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(ItemContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("border-t border-border first:border-t-0", className),
+      ...props
+    }
+  ) })
 );
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React52.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const ctx = React52.useContext(AccordionContext);
-    const value = React52.useContext(ItemContext);
-    const isOpen = ctx.open.includes(value);
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref,
-        type: "button",
-        "aria-expanded": isOpen,
-        onClick: () => ctx.toggle(value),
-        className: cn(
-          "w-full flex justify-between items-center gap-4 text-left px-[1.2rem] py-4 bg-card text-foreground text-[0.9rem] font-semibold cursor-pointer hover:bg-muted transition-colors",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: cn("shrink-0 text-muted-foreground transition-transform duration-200", isOpen && "rotate-180"),
-              width: 18,
-              height: 18,
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: 2,
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+var AccordionTrigger = React52.forwardRef(({ className, children, ...props }, ref) => {
+  const ctx = React52.useContext(AccordionContext);
+  const value = React52.useContext(ItemContext);
+  const isOpen = ctx.open.includes(value);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-expanded": isOpen,
+      onClick: () => ctx.toggle(value),
+      className: cn(
+        "w-full flex justify-between items-center gap-4 text-left px-[1.2rem] py-4 bg-card text-foreground text-[0.9rem] font-semibold cursor-pointer hover:bg-muted transition-colors",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn(
+              "shrink-0 text-muted-foreground transition-transform duration-200",
+              isOpen && "rotate-180"
+            ),
+            width: 18,
+            height: 18,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+          }
+        )
+      ]
+    }
+  );
+});
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React52.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const ctx = React52.useContext(AccordionContext);
-    const value = React52.useContext(ItemContext);
-    const isOpen = ctx.open.includes(value);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("grid transition-[grid-template-rows] duration-200 ease-out", isOpen ? "[grid-template-rows:1fr]" : "[grid-template-rows:0fr]"),
-        ...props,
-        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: cn("px-[1.2rem] pt-3 pb-4 text-[0.85rem] text-muted-foreground", className), children }) })
-      }
-    );
-  }
-);
+var AccordionContent = React52.forwardRef(({ className, children, ...props }, ref) => {
+  const ctx = React52.useContext(AccordionContext);
+  const value = React52.useContext(ItemContext);
+  const isOpen = ctx.open.includes(value);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "grid transition-[grid-template-rows] duration-200 ease-out",
+        isOpen ? "[grid-template-rows:1fr]" : "[grid-template-rows:0fr]"
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("px-[1.2rem] pt-3 pb-4 text-[0.85rem] text-muted-foreground", className),
+          children
+        }
+      ) })
+    }
+  );
+});
 AccordionContent.displayName = "AccordionContent";
 var MenuContext = React52.createContext(null);
-function DropdownMenu({ children, className }) {
+function DropdownMenu({
+  children,
+  className
+}) {
   const [open, setOpen] = React52.useState(false);
   const ref = React52.useRef(null);
   React52.useEffect(() => {
@@ -950,14 +1066,21 @@ var DropdownMenuTrigger = React52.forwardRef(({ onClick, asChild, ...props }, re
   );
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-function DropdownMenuContent({ className, align = "start", children, ...props }) {
+function DropdownMenuContent({
+  className,
+  align = "start",
+  children,
+  ...props
+}) {
   const ctx = React52.useContext(MenuContext);
   const ref = React52.useRef(null);
   React52.useEffect(() => {
     if (!ctx.open) return;
     const container = ref.current;
     if (container) {
-      const items = Array.from(container.querySelectorAll('[role="menuitem"]'));
+      const items = Array.from(
+        container.querySelectorAll('[role="menuitem"]')
+      );
       if (items.length > 0) {
         setTimeout(() => items[0].focus(), 50);
       }
@@ -1033,7 +1156,16 @@ function DropdownMenuSeparator({ className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("h-px bg-border my-1.5", className), role: "separator" });
 }
 var Breadcrumb = React52.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex items-center gap-1.5 text-[0.85rem] text-muted-foreground", className), ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      "aria-label": "Breadcrumb",
+      className: cn("flex items-center gap-1.5 text-[0.85rem] text-muted-foreground", className),
+      ...props,
+      children
+    }
+  )
 );
 Breadcrumb.displayName = "Breadcrumb";
 var BreadcrumbItem = React52.forwardRef(
@@ -1041,7 +1173,18 @@ var BreadcrumbItem = React52.forwardRef(
     if (current) {
       return /* @__PURE__ */ jsx("span", { "aria-current": "page", className: cn("text-foreground font-semibold", className), children });
     }
-    return /* @__PURE__ */ jsx("a", { ref, className: cn("text-inherit no-underline hover:text-foreground transition-colors", className), ...props, children });
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        className: cn(
+          "text-inherit no-underline hover:text-foreground transition-colors",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
   }
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
@@ -1062,11 +1205,34 @@ function paginate(page, pageCount) {
   items.push(pageCount);
   return items;
 }
-var Chevron = ({ dir }) => /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: dir === "left" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" }) });
+var Chevron = ({ dir }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("polyline", { points: dir === "left" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" })
+  }
+);
 function Pagination({ page, pageCount, onPageChange, className }) {
   const items = paginate(page, pageCount);
   return /* @__PURE__ */ jsxs("nav", { "aria-label": "Paginacja", className: cn("flex items-center gap-1", className), children: [
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "left" }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": "Previous",
+        disabled: page <= 1,
+        onClick: () => onPageChange(page - 1),
+        children: /* @__PURE__ */ jsx(Chevron, { dir: "left" })
+      }
+    ),
     items.map(
       (it, i) => it === "\u2026" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-muted-foreground select-none", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
         Button,
@@ -1080,7 +1246,17 @@ function Pagination({ page, pageCount, onPageChange, className }) {
         it
       )
     ),
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "right" }) })
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": "Next",
+        disabled: page >= pageCount,
+        onClick: () => onPageChange(page + 1),
+        children: /* @__PURE__ */ jsx(Chevron, { dir: "right" })
+      }
+    )
   ] });
 }
 var BottomNavigation = React52.forwardRef(
@@ -1156,24 +1332,26 @@ var BottomNavigation = React52.forwardRef(
 );
 BottomNavigation.displayName = "BottomNavigation";
 var TableWrap = React52.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("border border-border rounded-kj-lg overflow-x-auto w-full", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "w-full max-w-full overflow-x-auto border border-border rounded-kj-lg",
+        className
+      ),
+      ...props
+    }
+  )
 );
 TableWrap.displayName = "TableWrap";
-var Table = React52.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full border-collapse text-[0.85rem]", className), ...props })
-);
+var Table = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full border-collapse text-[0.85rem]", className), ...props }));
 Table.displayName = "Table";
-var TableHeader = React52.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className, ...props })
-);
+var TableHeader = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className, ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React52.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className, ...props })
-);
+var TableBody = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className, ...props }));
 TableBody.displayName = "TableBody";
-var TableRow = React52.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: cn("transition-colors hover:bg-muted/50", className), ...props })
-);
+var TableRow = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: cn("transition-colors hover:bg-muted/50", className), ...props }));
 TableRow.displayName = "TableRow";
 var TableHead = React52.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -1227,7 +1405,14 @@ function Tooltip({ content, children, className }) {
   );
 }
 var ModalContext = React52.createContext(null);
-function Modal({ open, onClose, children, width = 440, className, showClose = true }) {
+function Modal({
+  open,
+  onClose,
+  children,
+  width = 440,
+  className,
+  showClose = true
+}) {
   const titleId = React52.useId();
   const descId = React52.useId();
   const containerRef = React52.useRef(null);
@@ -1311,7 +1496,7 @@ function Modal({ open, onClose, children, width = 440, className, showClose = tr
           tabIndex: -1,
           style: { maxWidth: width },
           className: cn(
-            "relative w-full p-7 rounded-kj-2xl bg-surface border border-border shadow-kj-lg transition-transform duration-200 outline-none",
+            "relative w-full p-7 rounded-kj-2xl bg-surface text-foreground border border-border shadow-kj-lg transition-transform duration-200 outline-none",
             open ? "scale-100 translate-y-0" : "scale-95 translate-y-2",
             className
           ),
@@ -1323,7 +1508,20 @@ function Modal({ open, onClose, children, width = 440, className, showClose = tr
                 onClick: onClose,
                 "aria-label": "Close",
                 className: "absolute top-4 right-4 p-1.5 rounded-kj-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
-                children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: 16,
+                    height: 16,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                  }
+                )
               }
             ),
             children
@@ -1333,13 +1531,40 @@ function Modal({ open, onClose, children, width = 440, className, showClose = tr
     }
   );
 }
-function ModalTitle({ className, id, children, ...props }) {
-  const ctx = React52.useContext(ModalContext);
-  return /* @__PURE__ */ jsx("h3", { id: id ?? ctx?.titleId, className: cn("m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props, children });
-}
-function ModalDescription({ className, id, ...props }) {
+function ModalTitle({
+  className,
+  id,
+  children,
+  ...props
+}) {
   const ctx = React52.useContext(ModalContext);
-  return /* @__PURE__ */ jsx("p", { id: id ?? ctx?.descId, className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      id: id ?? ctx?.titleId,
+      className: cn(
+        "m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em] text-foreground",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function ModalDescription({
+  className,
+  id,
+  ...props
+}) {
+  const ctx = React52.useContext(ModalContext);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      id: id ?? ctx?.descId,
+      className: cn("m-0 text-[0.9rem] text-muted-foreground", className),
+      ...props
+    }
+  );
 }
 function ModalActions({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2.5 justify-end mt-6", className), ...props });
@@ -1351,15 +1576,57 @@ function useToast() {
   return ctx;
 }
 var icons = {
-  default: /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-primary", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })
-  ] }),
-  success: /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-success", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }),
-  danger: /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-danger", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx("path", { d: "m15 9-6 6M9 9l6 6" })
-  ] })
+  default: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 18,
+      height: 18,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "text-primary",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })
+      ]
+    }
+  ),
+  success: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 18,
+      height: 18,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "text-success",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  ),
+  danger: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 18,
+      height: 18,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "text-danger",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "m15 9-6 6M9 9l6 6" })
+      ]
+    }
+  )
 };
 var toneBorder = {
   default: "border-l-primary",
@@ -1493,20 +1760,11 @@ var SectionHeader = React52.forwardRef(
         ),
         ...props,
         children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "space-y-2",
-                isCentered && "flex flex-col items-center"
-              ),
-              children: [
-                kicker && /* @__PURE__ */ jsx(SectionHeaderKicker, { children: kicker }),
-                title && /* @__PURE__ */ jsx(SectionHeaderTitle, { as: headingLevel, children: title }),
-                description && /* @__PURE__ */ jsx(SectionHeaderDescription, { children: description })
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", isCentered && "flex flex-col items-center"), children: [
+            kicker && /* @__PURE__ */ jsx(SectionHeaderKicker, { children: kicker }),
+            title && /* @__PURE__ */ jsx(SectionHeaderTitle, { as: headingLevel, children: title }),
+            description && /* @__PURE__ */ jsx(SectionHeaderDescription, { children: description })
+          ] }),
           actions && /* @__PURE__ */ jsx(SectionHeaderActions, { className: cn(isCentered && "justify-center mt-4"), children: actions })
         ] })
       }
@@ -1552,7 +1810,13 @@ var MetricCard = React52.forwardRef(
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2.5 mb-1.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold tracking-tight text-foreground", children: value }),
-        trend && /* @__PURE__ */ jsx("span", { className: cn("text-[0.75rem] font-bold px-2 py-0.5 rounded-full border", trendColor), children: trend })
+        trend && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("text-[0.75rem] font-bold px-2 py-0.5 rounded-full border", trendColor),
+            children: trend
+          }
+        )
       ] }),
       description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
     ] });
@@ -1626,130 +1890,160 @@ function DataTable({
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 w-full", className), children: [
     toolbar && /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3", children: toolbar }),
-    /* @__PURE__ */ jsxs(TableWrap, { className: "relative overflow-hidden", ...props, children: [
-      /* @__PURE__ */ jsxs(Table, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-          isSelectionActive && /* @__PURE__ */ jsx(TableHead, { className: "w-12 px-4 text-center", children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              ref: headerCheckboxRef,
-              checked: allSelected,
-              onChange: handleSelectAll,
-              "aria-label": "Select all rows",
-              className: "h-4 w-4 rounded border-input text-primary focus:ring-ring"
-            }
-          ) }) }),
-          columns.map((col, idx) => {
-            const alignClass = {
-              left: "text-left",
-              center: "text-center",
-              right: "text-right"
-            }[col.align || "left"];
-            const isSortable = col.sortable && onSort && col.sortKey;
-            const isSortedActive = sortBy && col.sortKey === sortBy;
-            const ariaSort = isSortable ? isSortedActive ? sortDirection === "asc" ? "ascending" : "descending" : "none" : void 0;
-            return /* @__PURE__ */ jsx(
-              TableHead,
-              {
-                className: cn(
-                  alignClass,
-                  isSortable && "p-0 hover:bg-muted/30 transition-colors",
-                  col.className
-                ),
-                "aria-sort": ariaSort,
-                children: isSortable ? /* @__PURE__ */ jsxs(
-                  "button",
+    /* @__PURE__ */ jsxs(
+      TableWrap,
+      {
+        className: "relative overflow-x-auto overflow-y-hidden [scroll-behavior:smooth] [-webkit-overflow-scrolling:touch]",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(Table, { children: [
+            /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+              isSelectionActive && /* @__PURE__ */ jsx(TableHead, { className: "w-12 px-4 text-center", children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  ref: headerCheckboxRef,
+                  checked: allSelected,
+                  onChange: handleSelectAll,
+                  "aria-label": "Select all rows",
+                  className: "h-4 w-4 rounded border-input text-primary focus:ring-ring"
+                }
+              ) }) }),
+              columns.map((col, idx) => {
+                const alignClass = {
+                  left: "text-left",
+                  center: "text-center",
+                  right: "text-right"
+                }[col.align || "left"];
+                const isSortable = col.sortable && onSort && col.sortKey;
+                const isSortedActive = sortBy && col.sortKey === sortBy;
+                const ariaSort = isSortable ? isSortedActive ? sortDirection === "asc" ? "ascending" : "descending" : "none" : void 0;
+                return /* @__PURE__ */ jsx(
+                  TableHead,
                   {
-                    type: "button",
-                    onClick: () => {
-                      if (!col.sortKey) return;
-                      const nextDirection = isSortedActive && sortDirection === "asc" ? "desc" : "asc";
-                      onSort(col.sortKey, nextDirection);
-                    },
                     className: cn(
-                      "w-full px-4 py-3 flex items-center gap-1.5 font-semibold text-[0.72rem] uppercase tracking-[0.05em] text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 transition-colors cursor-pointer",
+                      alignClass,
+                      isSortable && "p-0 hover:bg-muted/30 transition-colors",
+                      col.className
+                    ),
+                    "aria-sort": ariaSort,
+                    children: isSortable ? /* @__PURE__ */ jsxs(
+                      "button",
                       {
-                        "justify-start text-left": col.align === "left" || !col.align,
-                        "justify-center text-center": col.align === "center",
-                        "justify-end text-right": col.align === "right"
+                        type: "button",
+                        onClick: () => {
+                          if (!col.sortKey) return;
+                          const nextDirection = isSortedActive && sortDirection === "asc" ? "desc" : "asc";
+                          onSort(col.sortKey, nextDirection);
+                        },
+                        className: cn(
+                          "w-full px-4 py-3 flex items-center gap-1.5 font-semibold text-[0.72rem] uppercase tracking-[0.05em] text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 transition-colors cursor-pointer",
+                          {
+                            "justify-start text-left": col.align === "left" || !col.align,
+                            "justify-center text-center": col.align === "center",
+                            "justify-end text-right": col.align === "right"
+                          }
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { children: col.header }),
+                          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground shrink-0 select-none", children: isSortedActive ? sortDirection === "asc" ? "\u25B2" : "\u25BC" : "\u21C5" })
+                        ]
                       }
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { children: col.header }),
-                      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground shrink-0 select-none", children: isSortedActive ? sortDirection === "asc" ? "\u25B2" : "\u25BC" : "\u21C5" })
-                    ]
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center gap-1.5", alignClass === "text-right" && "justify-end w-full"), children: col.header })
-              },
-              idx
-            );
-          })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableBody, { children: loading && data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (isSelectionActive ? 1 : 0), className: "h-64 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3", children: [
-          /* @__PURE__ */ jsx(Spinner, { size: 32 }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading dataset..." })
-        ] }) }) }) : error ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (isSelectionActive ? 1 : 0), className: "p-8", children: /* @__PURE__ */ jsx(Alert, { variant: "danger", title: "Error loading data", children: error }) }) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (isSelectionActive ? 1 : 0), className: "p-0", children: /* @__PURE__ */ jsx(
-          EmptyState,
-          {
-            title: emptyTitle,
-            description: emptyDescription,
-            action: emptyAction,
-            className: "border-none bg-transparent rounded-none py-16"
-          }
-        ) }) }) : data.map((row, rowIdx) => {
-          const rowKey = getRowId(row, rowIdx);
-          const isSelected = isSelectionActive && selectedRows.has(rowKey);
-          return /* @__PURE__ */ jsxs(
-            TableRow,
-            {
-              onClick: () => onRowClick && onRowClick(row),
-              className: cn(
-                onRowClick && "cursor-pointer hover:bg-muted/40 transition-colors",
-                isSelected && "bg-primary/5 hover:bg-primary/10"
-              ),
-              children: [
-                isSelectionActive && /* @__PURE__ */ jsx(
-                  TableCell,
-                  {
-                    className: "w-12 px-4 text-center",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                    },
-                    children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(
-                      "input",
+                    ) : /* @__PURE__ */ jsx(
+                      "div",
                       {
-                        type: "checkbox",
-                        checked: isSelected,
-                        onChange: (e) => handleSelectRow(row, rowIdx, e.target.checked),
-                        "aria-label": `Select row ${rowIdx + 1}`,
-                        className: "h-4 w-4 rounded border-input text-primary focus:ring-ring"
+                        className: cn(
+                          "inline-flex items-center gap-1.5",
+                          alignClass === "text-right" && "justify-end w-full"
+                        ),
+                        children: col.header
                       }
-                    ) })
-                  }
-                ),
-                columns.map((col, colIdx) => {
-                  const alignClass = {
-                    left: "text-left",
-                    center: "text-center",
-                    right: "text-right"
-                  }[col.align || "left"];
-                  return /* @__PURE__ */ jsx(TableCell, { className: cn(alignClass, col.className), children: col.accessor(row) }, colIdx);
-                })
-              ]
-            },
-            rowKey
-          );
-        }) })
-      ] }),
-      loading && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/50 backdrop-blur-[1px] grid place-items-center z-10 transition-opacity duration-150", children: /* @__PURE__ */ jsx(Spinner, { size: 36 }) })
-    ] }),
+                    )
+                  },
+                  idx
+                );
+              })
+            ] }) }),
+            /* @__PURE__ */ jsx(TableBody, { children: loading && data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                colSpan: columns.length + (isSelectionActive ? 1 : 0),
+                className: "h-64 text-center",
+                children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+                  /* @__PURE__ */ jsx(Spinner, { size: 32 }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading dataset..." })
+                ] })
+              }
+            ) }) : error ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (isSelectionActive ? 1 : 0), className: "p-8", children: /* @__PURE__ */ jsx(Alert, { variant: "danger", title: "Error loading data", children: error }) }) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (isSelectionActive ? 1 : 0), className: "p-0", children: /* @__PURE__ */ jsx(
+              EmptyState,
+              {
+                title: emptyTitle,
+                description: emptyDescription,
+                action: emptyAction,
+                className: "border-none bg-transparent rounded-none py-16"
+              }
+            ) }) }) : data.map((row, rowIdx) => {
+              const rowKey = getRowId(row, rowIdx);
+              const isSelected = isSelectionActive && selectedRows.has(rowKey);
+              return /* @__PURE__ */ jsxs(
+                TableRow,
+                {
+                  onClick: () => onRowClick && onRowClick(row),
+                  className: cn(
+                    onRowClick && "cursor-pointer hover:bg-muted/40 transition-colors",
+                    isSelected && "bg-primary/5 hover:bg-primary/10"
+                  ),
+                  children: [
+                    isSelectionActive && /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        className: "w-12 px-4 text-center",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                        },
+                        children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: isSelected,
+                            onChange: (e) => handleSelectRow(row, rowIdx, e.target.checked),
+                            "aria-label": `Select row ${rowIdx + 1}`,
+                            className: "h-4 w-4 rounded border-input text-primary focus:ring-ring"
+                          }
+                        ) })
+                      }
+                    ),
+                    columns.map((col, colIdx) => {
+                      const alignClass = {
+                        left: "text-left",
+                        center: "text-center",
+                        right: "text-right"
+                      }[col.align || "left"];
+                      return /* @__PURE__ */ jsx(TableCell, { className: cn(alignClass, col.className), children: col.accessor(row) }, colIdx);
+                    })
+                  ]
+                },
+                rowKey
+              );
+            }) })
+          ] }),
+          loading && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/50 backdrop-blur-[1px] grid place-items-center z-10 transition-opacity duration-150", children: /* @__PURE__ */ jsx(Spinner, { size: 36 }) })
+        ]
+      }
+    ),
     pagination && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end w-full", children: pagination })
   ] });
 }
 DataTable.displayName = "DataTable";
 var ErrorState = React52.forwardRef(
-  ({ className, title = "Wyst\u0105pi\u0142 b\u0142\u0105d", message, onRetry, retryLabel = "Spr\xF3buj ponownie", ...props }, ref) => /* @__PURE__ */ jsxs(
+  ({
+    className,
+    title = "Wyst\u0105pi\u0142 b\u0142\u0105d",
+    message,
+    onRetry,
+    retryLabel = "Spr\xF3buj ponownie",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
@@ -1759,7 +2053,24 @@ var ErrorState = React52.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-danger-surface border border-danger/30 text-danger mb-4", children: /* @__PURE__ */ jsx("svg", { fill: "none", stroke: "currentColor", strokeWidth: 2.5, viewBox: "0 0 24 24", className: "h-6 w-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-danger-surface border border-danger/30 text-danger mb-4", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2.5,
+            viewBox: "0 0 24 24",
+            className: "h-6 w-6",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+              }
+            )
+          }
+        ) }),
         /* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground mb-1", children: title }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm mb-6 leading-relaxed", children: message }),
         onRetry && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", onClick: onRetry, children: retryLabel })
@@ -1769,12 +2080,14 @@ var ErrorState = React52.forwardRef(
 );
 ErrorState.displayName = "ErrorState";
 var Skeleton = React52.forwardRef(
-  ({ className, variant = "rectangular", width, height, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, variant = "rectangular", animation = "shimmer", width, height, style, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       className: cn(
-        "animate-pulse bg-muted/40",
+        "bg-muted-foreground/15 dark:bg-muted-foreground/20",
+        animation === "pulse" && "animate-pulse",
+        animation === "shimmer" && "relative overflow-hidden after:absolute after:inset-0 after:-translate-x-full after:animate-[kjshimmer_2s_ease-in-out_infinite_alternate] after:bg-gradient-to-r after:from-transparent after:via-foreground/10 after:to-transparent",
         variant === "text" && "h-3 w-4/5 rounded-sm my-1.5",
         variant === "circular" && "rounded-full",
         variant === "rectangular" && "rounded-kj-md",
@@ -1826,7 +2139,16 @@ var DashboardShell = React52.forwardRef(
                 mobileSidebar ? "hidden md:flex" : "w-full md:flex",
                 sidebarWidth
               ),
-              children: /* @__PURE__ */ jsx("div", { className: cn("sticky top-0 w-full flex flex-col", mobileSidebar ? "h-screen" : "h-auto md:h-screen"), children: sidebar })
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "sticky top-0 w-full flex flex-col",
+                    mobileSidebar ? "h-screen" : "h-auto md:h-screen"
+                  ),
+                  children: sidebar
+                }
+              )
             }
           ),
           mobileSidebar && mobileOpen && /* @__PURE__ */ jsx(
@@ -1848,7 +2170,20 @@ var DashboardShell = React52.forwardRef(
                           type: "button",
                           onClick: () => setMobileOpen(false),
                           className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
-                          children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                          children: /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              width: 16,
+                              height: 16,
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: 2.5,
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                            }
+                          )
                         }
                       )
                     ] }),
@@ -1874,11 +2209,24 @@ var DashboardShell = React52.forwardRef(
                       onClick: () => setMobileOpen(true),
                       className: "md:hidden p-1.5 -ml-1.5 rounded-kj-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
                       "aria-label": "Open navigation",
-                      children: /* @__PURE__ */ jsxs("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
-                        /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-                        /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-                        /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
-                      ] })
+                      children: /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          width: 20,
+                          height: 20,
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: 2.5,
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: [
+                            /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+                            /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                            /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+                          ]
+                        }
+                      )
                     }
                   ),
                   topbar
@@ -1909,7 +2257,18 @@ var SettingsLayout = React52.forwardRef(
 );
 SettingsLayout.displayName = "SettingsLayout";
 var DetailPageLayout = React52.forwardRef(
-  ({ className, title, description, backHref, backLabel = "Back", onBackClick, actions, aside, children, ...props }, ref) => {
+  ({
+    className,
+    title,
+    description,
+    backHref,
+    backLabel = "Back",
+    onBackClick,
+    actions,
+    aside,
+    children,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-6 w-full", className), ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
         (backHref || onBackClick) && /* @__PURE__ */ jsx("div", { children: backHref ? /* @__PURE__ */ jsxs(
@@ -1921,7 +2280,24 @@ var DetailPageLayout = React52.forwardRef(
               "-ml-3 h-8 text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5"
             ),
             children: [
-              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  className: "h-4 w-4",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M15.75 19.5 8.25 12l7.5-7.5"
+                    }
+                  )
+                }
+              ),
               backLabel
             ]
           }
@@ -1933,7 +2309,24 @@ var DetailPageLayout = React52.forwardRef(
             className: "-ml-3 h-8 text-muted-foreground hover:text-foreground",
             onClick: onBackClick,
             children: [
-              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "h-4 w-4 mr-1.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  className: "h-4 w-4 mr-1.5",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M15.75 19.5 8.25 12l7.5-7.5"
+                    }
+                  )
+                }
+              ),
               backLabel
             ]
           }
@@ -1955,7 +2348,15 @@ var DetailPageLayout = React52.forwardRef(
 );
 DetailPageLayout.displayName = "DetailPageLayout";
 var TableToolbar = React52.forwardRef(
-  ({ className, searchQuery, onSearchChange, searchPlaceholder = "Search...", actions, filters, ...props }, ref) => {
+  ({
+    className,
+    searchQuery,
+    onSearchChange,
+    searchPlaceholder = "Search...",
+    actions,
+    filters,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1975,7 +2376,24 @@ var TableToolbar = React52.forwardRef(
                 value: searchQuery,
                 onChange: (e) => onSearchChange(e.target.value),
                 className: "sm:w-64",
-                leadingIcon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) })
+                leadingIcon: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    className: "h-4 w-4",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+                      }
+                    )
+                  }
+                )
               }
             ),
             filters && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: filters })
@@ -2085,14 +2503,8 @@ function Drawer({
     };
   }, [open, onClose]);
   const sideClasses = {
-    right: cn(
-      "right-0 h-full border-l",
-      open ? "translate-x-0" : "translate-x-full"
-    ),
-    left: cn(
-      "left-0 h-full border-r",
-      open ? "translate-x-0" : "-translate-x-full"
-    )
+    right: cn("right-0 h-full border-l", open ? "translate-x-0" : "translate-x-full"),
+    left: cn("left-0 h-full border-r", open ? "translate-x-0" : "-translate-x-full")
   }[side];
   return /* @__PURE__ */ jsx(
     "div",
@@ -2131,7 +2543,20 @@ function Drawer({
                   onClick: onClose,
                   "aria-label": "Close",
                   className: "p-1.5 rounded-kj-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
-                  children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: 16,
+                      height: 16,
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 2.5,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                    }
+                  )
                 }
               )
             ] }),
@@ -2143,7 +2568,12 @@ function Drawer({
   );
 }
 Drawer.displayName = "Drawer";
-function CommandPalette({ open, onClose, items, placeholder = "Type a command or search..." }) {
+function CommandPalette({
+  open,
+  onClose,
+  items,
+  placeholder = "Type a command or search..."
+}) {
   const [search, setSearch] = React52.useState("");
   const [activeIndex, setActiveIndex] = React52.useState(0);
   const containerRef = React52.useRef(null);
@@ -2176,10 +2606,14 @@ function CommandPalette({ open, onClose, items, placeholder = "Type a command or
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setActiveIndex((prev) => filteredItems.length === 0 ? 0 : (prev + 1) % filteredItems.length);
+        setActiveIndex(
+          (prev) => filteredItems.length === 0 ? 0 : (prev + 1) % filteredItems.length
+        );
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        setActiveIndex((prev) => filteredItems.length === 0 ? 0 : (prev - 1 + filteredItems.length) % filteredItems.length);
+        setActiveIndex(
+          (prev) => filteredItems.length === 0 ? 0 : (prev - 1 + filteredItems.length) % filteredItems.length
+        );
       } else if (e.key === "Enter") {
         e.preventDefault();
         if (filteredItems[activeIndex]) {
@@ -2222,7 +2656,24 @@ function CommandPalette({ open, onClose, items, placeholder = "Type a command or
           className: "w-[95vw] max-w-lg bg-surface border border-border rounded-kj-xl shadow-kj-lg flex flex-col overflow-hidden max-h-[500px]",
           children: [
             /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-border flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "h-5 w-5 text-muted-foreground shrink-0 ml-1", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  className: "h-5 w-5 text-muted-foreground shrink-0 ml-1",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+                    }
+                  )
+                }
+              ),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -2252,54 +2703,72 @@ function CommandPalette({ open, onClose, items, placeholder = "Type a command or
                 role: "listbox",
                 "aria-label": "Commands",
                 className: "space-y-4",
-                children: Object.entries(groups).map(([cat, itemsInCat]) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `cmd-cat-${cat}`, className: "space-y-1", children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      id: `cmd-cat-${cat}`,
-                      className: "px-3 py-1 text-[0.65rem] font-bold uppercase tracking-wider text-muted-foreground",
-                      children: cat
-                    }
-                  ),
-                  itemsInCat.map((item) => {
-                    const currentIdx = absoluteItemIndex++;
-                    const isActive = currentIdx === activeIndex;
-                    return /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        id: `cmd-item-${currentIdx}`,
-                        role: "option",
-                        "aria-selected": isActive,
-                        onClick: () => {
-                          item.action();
-                          onClose();
-                        },
-                        className: cn(
-                          "flex items-center justify-between gap-3 px-3 py-2.5 rounded-kj-md cursor-pointer select-none transition-colors",
-                          isActive ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-                            item.icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground [&_svg]:h-[1.1rem] [&_svg]:w-[1.1rem]", children: item.icon }),
-                            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col", children: [
-                              /* @__PURE__ */ jsx("span", { className: cn("text-[0.85rem] font-semibold", isActive ? "text-primary" : "text-foreground"), children: item.title }),
-                              item.subtitle && /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] text-muted-foreground truncate", children: item.subtitle })
-                            ] })
-                          ] }),
-                          item.shortcut && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: item.shortcut.map((sc, scIdx) => /* @__PURE__ */ jsx(
-                            "kbd",
-                            {
-                              className: "px-1.5 py-0.5 rounded border border-border bg-subtle text-[10px] font-mono leading-none shadow-kj-xs text-muted-foreground",
-                              children: sc
+                children: Object.entries(groups).map(([cat, itemsInCat]) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "group",
+                    "aria-labelledby": `cmd-cat-${cat}`,
+                    className: "space-y-1",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          id: `cmd-cat-${cat}`,
+                          className: "px-3 py-1 text-[0.65rem] font-bold uppercase tracking-wider text-muted-foreground",
+                          children: cat
+                        }
+                      ),
+                      itemsInCat.map((item) => {
+                        const currentIdx = absoluteItemIndex++;
+                        const isActive = currentIdx === activeIndex;
+                        return /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            id: `cmd-item-${currentIdx}`,
+                            role: "option",
+                            "aria-selected": isActive,
+                            onClick: () => {
+                              item.action();
+                              onClose();
                             },
-                            scIdx
-                          )) })
-                        ]
-                      },
-                      item.id
-                    );
-                  })
-                ] }, cat))
+                            className: cn(
+                              "flex items-center justify-between gap-3 px-3 py-2.5 rounded-kj-md cursor-pointer select-none transition-colors",
+                              isActive ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                                item.icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground [&_svg]:h-[1.1rem] [&_svg]:w-[1.1rem]", children: item.icon }),
+                                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col", children: [
+                                  /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      className: cn(
+                                        "text-[0.85rem] font-semibold",
+                                        isActive ? "text-primary" : "text-foreground"
+                                      ),
+                                      children: item.title
+                                    }
+                                  ),
+                                  item.subtitle && /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] text-muted-foreground truncate", children: item.subtitle })
+                                ] })
+                              ] }),
+                              item.shortcut && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: item.shortcut.map((sc, scIdx) => /* @__PURE__ */ jsx(
+                                "kbd",
+                                {
+                                  className: "px-1.5 py-0.5 rounded border border-border bg-subtle text-[10px] font-mono leading-none shadow-kj-xs text-muted-foreground",
+                                  children: sc
+                                },
+                                scIdx
+                              )) })
+                            ]
+                          },
+                          item.id
+                        );
+                      })
+                    ]
+                  },
+                  cat
+                ))
               }
             ) }),
             /* @__PURE__ */ jsxs("div", { className: "px-4 py-2.5 border-t border-border bg-subtle flex items-center justify-between text-[11px] text-muted-foreground font-medium", children: [
@@ -2310,7 +2779,8 @@ function CommandPalette({ open, onClose, items, placeholder = "Type a command or
                 ] }),
                 /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsx("kbd", { className: "font-mono text-[9px] px-1 border rounded bg-surface", children: "Enter" }),
-                  " Select"
+                  " ",
+                  "Select"
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
@@ -2332,10 +2802,16 @@ function SidebarNav({ className, groups, currentHref, ...props }) {
       const isActive = item.active || item.href && currentHref && currentHref === item.href;
       const content = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2.5 min-w-0", children: [
-          item.icon && /* @__PURE__ */ jsx("span", { className: cn(
-            "[&_svg]:h-[1.1rem] [&_svg]:w-[1.1rem] shrink-0",
-            isActive ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
-          ), children: item.icon }),
+          item.icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "[&_svg]:h-[1.1rem] [&_svg]:w-[1.1rem] shrink-0",
+                isActive ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
+              ),
+              children: item.icon
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
         ] }),
         item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center justify-center", children: item.badge })
@@ -2347,16 +2823,7 @@ function SidebarNav({ className, groups, currentHref, ...props }) {
       if (item.href) {
         return /* @__PURE__ */ jsx("a", { href: item.href, className: itemClass, children: content }, item.id);
       }
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: item.onClick,
-          className: itemClass,
-          children: content
-        },
-        item.id
-      );
+      return /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onClick, className: itemClass, children: content }, item.id);
     }) })
   ] }, groupIdx)) });
 }
@@ -2552,7 +3019,20 @@ function BottomSheet({
                 onClick: onClose,
                 "aria-label": "Close",
                 className: "absolute top-4 right-4 p-1.5 rounded-kj-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer z-10",
-                children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: 16,
+                    height: 16,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                  }
+                )
               }
             ),
             children
@@ -2565,19 +3045,49 @@ function BottomSheet({
 function BottomSheetHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("p-6 flex flex-col gap-1.5 border-b border-border", className), ...props });
 }
-function BottomSheetTitle({ className, id, children, ...props }) {
+function BottomSheetTitle({
+  className,
+  id,
+  children,
+  ...props
+}) {
   const ctx = React52.useContext(BottomSheetContext);
-  return /* @__PURE__ */ jsx("h2", { id: id ?? ctx?.titleId, className: cn("m-0 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props, children });
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      id: id ?? ctx?.titleId,
+      className: cn("m-0 text-[1.15rem] font-bold tracking-[-0.01em]", className),
+      ...props,
+      children
+    }
+  );
 }
-function BottomSheetDescription({ className, id, ...props }) {
+function BottomSheetDescription({
+  className,
+  id,
+  ...props
+}) {
   const ctx = React52.useContext(BottomSheetContext);
-  return /* @__PURE__ */ jsx("p", { id: id ?? ctx?.descId, className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      id: id ?? ctx?.descId,
+      className: cn("m-0 text-[0.9rem] text-muted-foreground", className),
+      ...props
+    }
+  );
 }
 function BottomSheetContent({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("p-6 overflow-y-auto flex-1", className), ...props });
 }
 function BottomSheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("p-6 border-t border-border flex gap-2.5 justify-end mt-auto", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("p-6 border-t border-border flex gap-2.5 justify-end mt-auto", className),
+      ...props
+    }
+  );
 }
 var kbdVariants = cva(
   "inline-flex items-center justify-center font-mono font-medium text-muted-foreground bg-muted border border-border border-b-2 rounded-kj-sm select-none",
@@ -2656,7 +3166,11 @@ var CodeBlock = React52.forwardRef(
   }
 );
 CodeBlock.displayName = "CodeBlock";
-function Separator({ orientation = "horizontal", decorative = true, className }) {
+function Separator({
+  orientation = "horizontal",
+  decorative = true,
+  className
+}) {
   const semanticProps = decorative ? { role: "none", "aria-hidden": true } : { role: "separator", "aria-orientation": orientation };
   return /* @__PURE__ */ jsx(
     "div",
@@ -2974,7 +3488,18 @@ var Combobox = React52.forwardRef(
                         removeValue(value);
                       },
                       className: "rounded-full p-0.5 leading-none hover:bg-primary/20",
-                      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          viewBox: "0 0 24 24",
+                          className: "h-3 w-3",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2.5",
+                          strokeLinecap: "round",
+                          children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+                        }
+                      )
                     }
                   )
                 ]
@@ -3005,7 +3530,19 @@ var Combobox = React52.forwardRef(
             ),
             name && multiple && selected.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v }, v)),
             name && !multiple && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected[0] ?? "" }),
-            /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) })
+            /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4 w-4",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+              }
+            ) })
           ]
         }
       ),
@@ -3058,7 +3595,19 @@ var Combobox = React52.forwardRef(
                   ),
                   children: [
                     /* @__PURE__ */ jsx("span", { children: opt.label }),
-                    isSelected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 text-primary shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m5 12 5 5L20 7" }) })
+                    isSelected && /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        viewBox: "0 0 24 24",
+                        className: "h-4 w-4 text-primary shrink-0",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: /* @__PURE__ */ jsx("path", { d: "m5 12 5 5L20 7" })
+                      }
+                    )
                   ]
                 },
                 opt.value
@@ -3126,7 +3675,10 @@ function toISODateString(d) {
   const day = String(d.getDate()).padStart(2, "0");
   return `${y}-${m}-${day}`;
 }
-var monthLabelFormat = new Intl.DateTimeFormat(void 0, { month: "long", year: "numeric" });
+var monthLabelFormat = new Intl.DateTimeFormat(void 0, {
+  month: "long",
+  year: "numeric"
+});
 var fullDateFormat = new Intl.DateTimeFormat(void 0, { dateStyle: "full" });
 var weekdayShortFormat = new Intl.DateTimeFormat(void 0, { weekday: "short" });
 var weekdayLongFormat = new Intl.DateTimeFormat(void 0, { weekday: "long" });
@@ -3134,334 +3686,387 @@ var weekdayLabels = Array.from({ length: 7 }, (_, i) => {
   const d = addDays(startOfWeek(/* @__PURE__ */ new Date()), i);
   return { key: i, short: weekdayShortFormat.format(d), long: weekdayLongFormat.format(d) };
 });
-var CalendarGrid = React52.forwardRef(function CalendarGrid2({ viewMonth, isDayDisabled, cellState, onSelectDay, onFocusDay, initialFocusDate, className }, ref) {
-  const gridDays = React52.useMemo(() => buildGridDays(viewMonth), [viewMonth]);
-  const inViewMonth = (d) => d.getMonth() === viewMonth.getMonth() && d.getFullYear() === viewMonth.getFullYear();
-  const [focusedDate, setFocusedDate] = React52.useState(() => startOfDay(initialFocusDate));
-  const pendingFocusRef = React52.useRef(false);
-  const gridRef = React52.useRef(null);
-  const rovingTarget = inViewMonth(focusedDate) && !isDayDisabled(focusedDate) ? focusedDate : gridDays.find((d) => inViewMonth(d) && !isDayDisabled(d)) ?? gridDays.find((d) => inViewMonth(d)) ?? gridDays[0];
-  const moveFocusTo = (next, viaKeyboard) => {
-    pendingFocusRef.current = viaKeyboard;
-    setFocusedDate(next);
-    onFocusDay?.(next);
-  };
-  React52.useEffect(() => {
-    if (!pendingFocusRef.current) return;
-    pendingFocusRef.current = false;
-    const el = gridRef.current?.querySelector(`[data-date="${dateKey(rovingTarget)}"]`);
-    el?.focus();
-  }, [rovingTarget]);
-  const step = (from, delta) => {
-    let next = addDays(from, delta);
-    let guard = 0;
-    while (isDayDisabled(next) && guard < 1e3) {
-      next = addDays(next, delta);
-      guard++;
-    }
-    return isDayDisabled(next) ? from : next;
-  };
-  const selectDay = (d) => {
-    if (isDayDisabled(d)) return;
-    moveFocusTo(d, false);
-    onSelectDay(d);
-  };
-  const onGridKeyDown = (e) => {
-    switch (e.key) {
-      case "ArrowRight":
-        e.preventDefault();
-        moveFocusTo(step(rovingTarget, 1), true);
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        moveFocusTo(step(rovingTarget, -1), true);
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        moveFocusTo(step(rovingTarget, 7), true);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        moveFocusTo(step(rovingTarget, -7), true);
-        break;
-      case "Home": {
-        e.preventDefault();
-        const target = startOfWeek(rovingTarget);
-        moveFocusTo(isDayDisabled(target) ? step(target, 1) : target, true);
-        break;
-      }
-      case "End": {
-        e.preventDefault();
-        const target = addDays(startOfWeek(rovingTarget), 6);
-        moveFocusTo(isDayDisabled(target) ? step(target, -1) : target, true);
-        break;
-      }
-      case "PageUp": {
-        e.preventDefault();
-        const target = e.shiftKey ? addYearsClamped(rovingTarget, -1) : addMonthsClamped(rovingTarget, -1);
-        moveFocusTo(isDayDisabled(target) ? step(target, -1) : target, true);
-        break;
+var CalendarGrid = React52.forwardRef(
+  function CalendarGrid2({ viewMonth, isDayDisabled, cellState, onSelectDay, onFocusDay, initialFocusDate, className }, ref) {
+    const gridDays = React52.useMemo(() => buildGridDays(viewMonth), [viewMonth]);
+    const inViewMonth = (d) => d.getMonth() === viewMonth.getMonth() && d.getFullYear() === viewMonth.getFullYear();
+    const [focusedDate, setFocusedDate] = React52.useState(() => startOfDay(initialFocusDate));
+    const pendingFocusRef = React52.useRef(false);
+    const gridRef = React52.useRef(null);
+    const rovingTarget = inViewMonth(focusedDate) && !isDayDisabled(focusedDate) ? focusedDate : gridDays.find((d) => inViewMonth(d) && !isDayDisabled(d)) ?? gridDays.find((d) => inViewMonth(d)) ?? gridDays[0];
+    const moveFocusTo = (next, viaKeyboard) => {
+      pendingFocusRef.current = viaKeyboard;
+      setFocusedDate(next);
+      onFocusDay?.(next);
+    };
+    React52.useEffect(() => {
+      if (!pendingFocusRef.current) return;
+      pendingFocusRef.current = false;
+      const el = gridRef.current?.querySelector(
+        `[data-date="${dateKey(rovingTarget)}"]`
+      );
+      el?.focus();
+    }, [rovingTarget]);
+    const step = (from, delta) => {
+      let next = addDays(from, delta);
+      let guard = 0;
+      while (isDayDisabled(next) && guard < 1e3) {
+        next = addDays(next, delta);
+        guard++;
       }
-      case "PageDown": {
-        e.preventDefault();
-        const target = e.shiftKey ? addYearsClamped(rovingTarget, 1) : addMonthsClamped(rovingTarget, 1);
-        moveFocusTo(isDayDisabled(target) ? step(target, 1) : target, true);
-        break;
+      return isDayDisabled(next) ? from : next;
+    };
+    const selectDay = (d) => {
+      if (isDayDisabled(d)) return;
+      moveFocusTo(d, false);
+      onSelectDay(d);
+    };
+    const onGridKeyDown = (e) => {
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault();
+          moveFocusTo(step(rovingTarget, 1), true);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          moveFocusTo(step(rovingTarget, -1), true);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          moveFocusTo(step(rovingTarget, 7), true);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          moveFocusTo(step(rovingTarget, -7), true);
+          break;
+        case "Home": {
+          e.preventDefault();
+          const target = startOfWeek(rovingTarget);
+          moveFocusTo(isDayDisabled(target) ? step(target, 1) : target, true);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const target = addDays(startOfWeek(rovingTarget), 6);
+          moveFocusTo(isDayDisabled(target) ? step(target, -1) : target, true);
+          break;
+        }
+        case "PageUp": {
+          e.preventDefault();
+          const target = e.shiftKey ? addYearsClamped(rovingTarget, -1) : addMonthsClamped(rovingTarget, -1);
+          moveFocusTo(isDayDisabled(target) ? step(target, -1) : target, true);
+          break;
+        }
+        case "PageDown": {
+          e.preventDefault();
+          const target = e.shiftKey ? addYearsClamped(rovingTarget, 1) : addMonthsClamped(rovingTarget, 1);
+          moveFocusTo(isDayDisabled(target) ? step(target, 1) : target, true);
+          break;
+        }
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          selectDay(rovingTarget);
+          break;
       }
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        selectDay(rovingTarget);
-        break;
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), children: /* @__PURE__ */ jsxs("div", { ref: gridRef, role: "grid", "aria-label": monthLabelFormat.format(viewMonth), onKeyDown: onGridKeyDown, children: [
-    /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: weekdayLabels.map((w) => /* @__PURE__ */ jsx(
+    };
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(className), children: /* @__PURE__ */ jsxs(
       "div",
       {
-        role: "columnheader",
-        "aria-label": w.long,
-        className: "h-8 flex items-center justify-center text-xs font-medium text-muted-foreground",
-        children: w.short
-      },
-      w.key
-    )) }),
-    Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: gridDays.slice(week * 7, week * 7 + 7).map((day) => {
-      if (!inViewMonth(day)) {
-        return /* @__PURE__ */ jsx("div", { role: "gridcell", "aria-hidden": "true", className: "h-9" }, dateKey(day));
+        ref: gridRef,
+        role: "grid",
+        "aria-label": monthLabelFormat.format(viewMonth),
+        onKeyDown: onGridKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: weekdayLabels.map((w) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "columnheader",
+              "aria-label": w.long,
+              className: "h-8 flex items-center justify-center text-xs font-medium text-muted-foreground",
+              children: w.short
+            },
+            w.key
+          )) }),
+          Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: gridDays.slice(week * 7, week * 7 + 7).map((day) => {
+            if (!inViewMonth(day)) {
+              return /* @__PURE__ */ jsx("div", { role: "gridcell", "aria-hidden": "true", className: "h-9" }, dateKey(day));
+            }
+            const disabled = isDayDisabled(day);
+            const state = cellState(day);
+            const isRoving = isSameDay(day, rovingTarget);
+            const isEndpoint = !!(state.selected || state.rangeStart || state.rangeEnd);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "gridcell",
+                "data-date": dateKey(day),
+                tabIndex: isRoving ? 0 : -1,
+                "aria-selected": isEndpoint,
+                "aria-disabled": disabled || void 0,
+                "aria-label": fullDateFormat.format(day),
+                onMouseEnter: () => onFocusDay?.(day),
+                onClick: () => selectDay(day),
+                className: cn(
+                  "h-9 w-9 mx-auto flex items-center justify-center text-sm",
+                  state.inRange && !isEndpoint ? "rounded-none" : "rounded-full",
+                  "focus:outline-none focus:ring-[3px] focus:ring-ring/30",
+                  disabled && "text-muted-foreground opacity-40 cursor-not-allowed",
+                  !disabled && isEndpoint && "bg-primary text-primary-foreground",
+                  !disabled && state.inRange && !isEndpoint && "bg-primary/15 text-foreground",
+                  !disabled && !isEndpoint && !state.inRange && state.today && "ring-1 ring-primary text-primary font-medium",
+                  !disabled && !isEndpoint && !state.inRange && !state.today && "text-foreground hover:bg-muted"
+                ),
+                children: day.getDate()
+              },
+              dateKey(day)
+            );
+          }) }, week))
+        ]
       }
-      const disabled = isDayDisabled(day);
-      const state = cellState(day);
-      const isRoving = isSameDay(day, rovingTarget);
-      const isEndpoint = !!(state.selected || state.rangeStart || state.rangeEnd);
-      return /* @__PURE__ */ jsx(
+    ) });
+  }
+);
+CalendarGrid.displayName = "CalendarGrid";
+var Calendar = React52.forwardRef(function Calendar2({
+  value,
+  defaultValue,
+  onChange,
+  month,
+  defaultMonth,
+  onMonthChange,
+  min,
+  max,
+  disabledDates,
+  className
+}, ref) {
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = React52.useState(defaultValue);
+  const selected = controlled ? value : internalValue;
+  const monthControlled = month !== void 0;
+  const [internalMonth, setInternalMonth] = React52.useState(
+    () => startOfMonth(month ?? defaultMonth ?? selected ?? /* @__PURE__ */ new Date())
+  );
+  const viewMonth = monthControlled ? startOfMonth(month) : internalMonth;
+  const setViewMonth = (next) => {
+    const normalized = startOfMonth(next);
+    if (!monthControlled) setInternalMonth(normalized);
+    onMonthChange?.(normalized);
+  };
+  const isDayDisabled = React52.useCallback(
+    (d) => {
+      if (min && d < startOfDay(min)) return true;
+      if (max && d > startOfDay(max)) return true;
+      return disabledDates?.(d) ?? false;
+    },
+    [min, max, disabledDates]
+  );
+  const commitValue = (d) => {
+    if (!controlled) setInternalValue(d);
+    onChange?.(d);
+  };
+  const today = /* @__PURE__ */ new Date();
+  const cellState = (d) => ({
+    selected: selected ? isSameDay(d, selected) : false,
+    today: isSameDay(d, today)
+  });
+  const inViewMonth = (d) => d.getMonth() === viewMonth.getMonth() && d.getFullYear() === viewMonth.getFullYear();
+  const handleFocusDay = (d) => {
+    if (!inViewMonth(d)) setViewMonth(d);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-[280px] select-none", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          role: "gridcell",
-          "data-date": dateKey(day),
-          tabIndex: isRoving ? 0 : -1,
-          "aria-selected": isEndpoint,
-          "aria-disabled": disabled || void 0,
-          "aria-label": fullDateFormat.format(day),
-          onMouseEnter: () => onFocusDay?.(day),
-          onClick: () => selectDay(day),
-          className: cn(
-            "h-9 w-9 mx-auto flex items-center justify-center text-sm",
-            state.inRange && !isEndpoint ? "rounded-none" : "rounded-full",
-            "focus:outline-none focus:ring-[3px] focus:ring-ring/30",
-            disabled && "text-muted-foreground opacity-40 cursor-not-allowed",
-            !disabled && isEndpoint && "bg-primary text-primary-foreground",
-            !disabled && state.inRange && !isEndpoint && "bg-primary/15 text-foreground",
-            !disabled && !isEndpoint && !state.inRange && state.today && "ring-1 ring-primary text-primary font-medium",
-            !disabled && !isEndpoint && !state.inRange && !state.today && "text-foreground hover:bg-muted"
-          ),
-          children: day.getDate()
-        },
-        dateKey(day)
-      );
-    }) }, week))
-  ] }) });
-});
-CalendarGrid.displayName = "CalendarGrid";
-var Calendar = React52.forwardRef(
-  function Calendar2({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, min, max, disabledDates, className }, ref) {
-    const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = React52.useState(defaultValue);
-    const selected = controlled ? value : internalValue;
-    const monthControlled = month !== void 0;
-    const [internalMonth, setInternalMonth] = React52.useState(
-      () => startOfMonth(month ?? defaultMonth ?? selected ?? /* @__PURE__ */ new Date())
-    );
-    const viewMonth = monthControlled ? startOfMonth(month) : internalMonth;
-    const setViewMonth = (next) => {
-      const normalized = startOfMonth(next);
-      if (!monthControlled) setInternalMonth(normalized);
-      onMonthChange?.(normalized);
-    };
-    const isDayDisabled = React52.useCallback(
-      (d) => {
-        if (min && d < startOfDay(min)) return true;
-        if (max && d > startOfDay(max)) return true;
-        return disabledDates?.(d) ?? false;
-      },
-      [min, max, disabledDates]
-    );
-    const commitValue = (d) => {
-      if (!controlled) setInternalValue(d);
-      onChange?.(d);
-    };
-    const today = /* @__PURE__ */ new Date();
-    const cellState = (d) => ({
-      selected: selected ? isSameDay(d, selected) : false,
-      today: isSameDay(d, today)
-    });
-    const inViewMonth = (d) => d.getMonth() === viewMonth.getMonth() && d.getFullYear() === viewMonth.getFullYear();
-    const handleFocusDay = (d) => {
-      if (!inViewMonth(d)) setViewMonth(d);
-    };
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-[280px] select-none", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Previous month",
-            onClick: () => setViewMonth(addMonths(viewMonth, -1)),
-            className: "p-1.5 rounded-kj-sm text-muted-foreground hover:bg-muted hover:text-foreground",
-            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) })
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(viewMonth) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Next month",
-            onClick: () => setViewMonth(addMonths(viewMonth, 1)),
-            className: "p-1.5 rounded-kj-sm text-muted-foreground hover:bg-muted hover:text-foreground",
-            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
-          }
-        )
-      ] }),
+          "aria-label": "Previous month",
+          onClick: () => setViewMonth(addMonths(viewMonth, -1)),
+          className: "p-1.5 rounded-kj-sm text-muted-foreground hover:bg-muted hover:text-foreground",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              className: "h-4 w-4",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(viewMonth) }),
       /* @__PURE__ */ jsx(
-        CalendarGrid,
+        "button",
         {
-          viewMonth,
-          isDayDisabled,
-          cellState,
-          onSelectDay: commitValue,
-          onFocusDay: handleFocusDay,
-          initialFocusDate: selected ?? /* @__PURE__ */ new Date()
+          type: "button",
+          "aria-label": "Next month",
+          onClick: () => setViewMonth(addMonths(viewMonth, 1)),
+          className: "p-1.5 rounded-kj-sm text-muted-foreground hover:bg-muted hover:text-foreground",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              className: "h-4 w-4",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+            }
+          )
         }
       )
-    ] });
-  }
-);
+    ] }),
+    /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        viewMonth,
+        isDayDisabled,
+        cellState,
+        onSelectDay: commitValue,
+        onFocusDay: handleFocusDay,
+        initialFocusDate: selected ?? /* @__PURE__ */ new Date()
+      }
+    )
+  ] });
+});
 Calendar.displayName = "Calendar";
 var displayFormat = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
-var DatePicker = React52.forwardRef(
-  function DatePicker2({
-    value,
-    defaultValue,
-    onChange,
-    min,
-    max,
-    disabledDates,
-    placeholder = "Pick a date\u2026",
-    disabled = false,
-    error = false,
-    required = false,
-    className,
-    id,
-    name,
-    "aria-describedby": describedBy
-  }, ref) {
-    const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = React52.useState(defaultValue);
-    const selected = controlled ? value : internalValue;
-    const [open, setOpen] = React52.useState(false);
-    const containerRef = React52.useRef(null);
-    const triggerRef = React52.useRef(null);
-    const setTriggerRef = (node) => {
-      triggerRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    };
-    const commitValue = (d) => {
-      if (!controlled) setInternalValue(d);
-      onChange?.(d);
-    };
-    const closePopup = React52.useCallback(() => setOpen(false), []);
-    const openPopup = () => {
-      if (!disabled) setOpen(true);
+var DatePicker = React52.forwardRef(function DatePicker2({
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  disabledDates,
+  placeholder = "Pick a date\u2026",
+  disabled = false,
+  error = false,
+  required = false,
+  className,
+  id,
+  name,
+  "aria-describedby": describedBy
+}, ref) {
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = React52.useState(defaultValue);
+  const selected = controlled ? value : internalValue;
+  const [open, setOpen] = React52.useState(false);
+  const containerRef = React52.useRef(null);
+  const triggerRef = React52.useRef(null);
+  const setTriggerRef = (node) => {
+    triggerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const commitValue = (d) => {
+    if (!controlled) setInternalValue(d);
+    onChange?.(d);
+  };
+  const closePopup = React52.useCallback(() => setOpen(false), []);
+  const openPopup = () => {
+    if (!disabled) setOpen(true);
+  };
+  const handleCalendarChange = (d) => {
+    commitValue(d);
+    closePopup();
+    triggerRef.current?.focus();
+  };
+  React52.useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) closePopup();
     };
-    const handleCalendarChange = (d) => {
-      commitValue(d);
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open, closePopup]);
+  const onTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openPopup();
+    } else if (e.key === "Escape" && open) {
+      e.preventDefault();
+      closePopup();
+    }
+  };
+  const onPanelKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
       closePopup();
       triggerRef.current?.focus();
-    };
-    React52.useEffect(() => {
-      if (!open) return;
-      const onDown = (e) => {
-        if (containerRef.current && !containerRef.current.contains(e.target)) closePopup();
-      };
-      document.addEventListener("mousedown", onDown);
-      return () => document.removeEventListener("mousedown", onDown);
-    }, [open, closePopup]);
-    const onTriggerKeyDown = (e) => {
-      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        openPopup();
-      } else if (e.key === "Escape" && open) {
-        e.preventDefault();
-        closePopup();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative inline-block w-full", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: setTriggerRef,
+        type: "button",
+        id,
+        disabled,
+        "aria-haspopup": "grid",
+        "aria-expanded": open,
+        "aria-invalid": error || void 0,
+        "aria-required": required || void 0,
+        "aria-describedby": describedBy,
+        onClick: () => open ? closePopup() : openPopup(),
+        onKeyDown: onTriggerKeyDown,
+        className: cn(
+          "w-full flex items-center justify-between gap-2 border rounded-kj-md bg-surface text-left text-sm",
+          "pl-[0.85rem] pr-3 py-[calc(0.6rem*var(--kj-density,1))]",
+          "transition-[border-color,box-shadow] duration-150",
+          "focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30",
+          disabled && "bg-muted text-muted-foreground cursor-not-allowed",
+          error ? "border-danger" : "border-input",
+          !selected && "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: selected ? displayFormat.format(selected) : placeholder }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              className: "h-4 w-4 text-muted-foreground shrink-0",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M3 10h18M8 2v4M16 2v4" })
+              ]
+            }
+          )
+        ]
       }
-    };
-    const onPanelKeyDown = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        closePopup();
-        triggerRef.current?.focus();
+    ),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected ? toISODateString(selected) : "" }),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        onKeyDown: onPanelKeyDown,
+        className: "absolute z-40 top-[calc(100%+6px)] left-0 bg-surface border border-border rounded-kj-md shadow-kj-lg p-3 animate-[kjpop_.12s_ease]",
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            value: selected,
+            onChange: handleCalendarChange,
+            min,
+            max,
+            disabledDates
+          }
+        )
       }
-    };
-    return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative inline-block w-full", className), children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          ref: setTriggerRef,
-          type: "button",
-          id,
-          disabled,
-          "aria-haspopup": "grid",
-          "aria-expanded": open,
-          "aria-invalid": error || void 0,
-          "aria-required": required || void 0,
-          "aria-describedby": describedBy,
-          onClick: () => open ? closePopup() : openPopup(),
-          onKeyDown: onTriggerKeyDown,
-          className: cn(
-            "w-full flex items-center justify-between gap-2 border rounded-kj-md bg-surface text-left text-sm",
-            "pl-[0.85rem] pr-3 py-[calc(0.6rem*var(--kj-density,1))]",
-            "transition-[border-color,box-shadow] duration-150",
-            "focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30",
-            disabled && "bg-muted text-muted-foreground cursor-not-allowed",
-            error ? "border-danger" : "border-input",
-            !selected && "text-muted-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ jsx("span", { children: selected ? displayFormat.format(selected) : placeholder }),
-            /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                viewBox: "0 0 24 24",
-                className: "h-4 w-4 text-muted-foreground shrink-0",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: [
-                  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
-                  /* @__PURE__ */ jsx("path", { d: "M3 10h18M8 2v4M16 2v4" })
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected ? toISODateString(selected) : "" }),
-      open && /* @__PURE__ */ jsx(
-        "div",
-        {
-          onKeyDown: onPanelKeyDown,
-          className: "absolute z-40 top-[calc(100%+6px)] left-0 bg-surface border border-border rounded-kj-md shadow-kj-lg p-3 animate-[kjpop_.12s_ease]",
-          children: /* @__PURE__ */ jsx(Calendar, { value: selected, onChange: handleCalendarChange, min, max, disabledDates })
-        }
-      )
-    ] });
-  }
-);
+    )
+  ] });
+});
 DatePicker.displayName = "DatePicker";
 var DatePickerField = React52.forwardRef(
   function DatePickerField2({ label, hint, error, required, className, ...props }, ref) {
@@ -3474,7 +4079,19 @@ function isBetweenExclusive(d, lo, hi) {
   return t > startOfDay(lo).getTime() && t < startOfDay(hi).getTime();
 }
 var RangeCalendar = React52.forwardRef(
-  function RangeCalendar2({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, min, max, disabledDates, className }, ref) {
+  function RangeCalendar2({
+    value,
+    defaultValue,
+    onChange,
+    month,
+    defaultMonth,
+    onMonthChange,
+    min,
+    max,
+    disabledDates,
+    singleMonth,
+    className
+  }, ref) {
     const controlled = value !== void 0;
     const [internalValue, setInternalValue] = React52.useState(defaultValue ?? {});
     const range2 = controlled ? value : internalValue;
@@ -3559,47 +4176,70 @@ var RangeCalendar = React52.forwardRef(
         "aria-label": direction === "prev" ? "Previous month" : "Next month",
         onClick: () => setViewMonth(addMonths(leftMonth, direction === "prev" ? -1 : 1)),
         className: "p-1.5 rounded-kj-sm text-muted-foreground hover:bg-muted hover:text-foreground",
-        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: direction === "prev" ? /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
-      }
-    );
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex gap-6 select-none", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "w-[280px]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-          navButton("prev"),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(leftMonth) }),
-          /* @__PURE__ */ jsx("span", { className: "w-[26px]", "aria-hidden": "true" })
-        ] }),
-        /* @__PURE__ */ jsx(
-          CalendarGrid,
-          {
-            viewMonth: leftMonth,
-            isDayDisabled,
-            cellState,
-            onSelectDay: handleSelectDay,
-            onFocusDay: handleFocusDay,
-            initialFocusDate: pendingStart ?? range2.start ?? /* @__PURE__ */ new Date()
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "w-[280px]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "w-[26px]", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(rightMonth) }),
-          navButton("next")
-        ] }),
-        /* @__PURE__ */ jsx(
-          CalendarGrid,
+        children: /* @__PURE__ */ jsx(
+          "svg",
           {
-            viewMonth: rightMonth,
-            isDayDisabled,
-            cellState,
-            onSelectDay: handleSelectDay,
-            onFocusDay: handleFocusDay,
-            initialFocusDate: pendingStart ?? range2.start ?? /* @__PURE__ */ new Date()
+            viewBox: "0 0 24 24",
+            className: "h-4 w-4",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: direction === "prev" ? /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
           }
         )
-      ] })
-    ] });
+      }
+    );
+    const showSingleMonth = singleMonth;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col sm:flex-row gap-4 sm:gap-6 select-none max-w-full overflow-hidden",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "w-full sm:w-[280px]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+              navButton("prev"),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(leftMonth) }),
+              /* @__PURE__ */ jsx("span", { className: showSingleMonth ? "" : "sm:hidden", children: navButton("next") })
+            ] }),
+            /* @__PURE__ */ jsx(
+              CalendarGrid,
+              {
+                viewMonth: leftMonth,
+                isDayDisabled,
+                cellState,
+                onSelectDay: handleSelectDay,
+                onFocusDay: handleFocusDay,
+                initialFocusDate: pendingStart ?? range2.start ?? /* @__PURE__ */ new Date()
+              }
+            )
+          ] }),
+          !showSingleMonth && /* @__PURE__ */ jsxs("div", { className: "hidden sm:block w-[280px]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-[26px]", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(rightMonth) }),
+              navButton("next")
+            ] }),
+            /* @__PURE__ */ jsx(
+              CalendarGrid,
+              {
+                viewMonth: rightMonth,
+                isDayDisabled,
+                cellState,
+                onSelectDay: handleSelectDay,
+                onFocusDay: handleFocusDay,
+                initialFocusDate: pendingStart ?? range2.start ?? /* @__PURE__ */ new Date()
+              }
+            )
+          ] })
+        ]
+      }
+    );
   }
 );
 RangeCalendar.displayName = "RangeCalendar";
@@ -3721,15 +4361,38 @@ var DateRangePicker = React52.forwardRef(
         }
       ),
       name && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}Start`, value: selected.start ? toISODateString(selected.start) : "" }),
-        /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}End`, value: selected.end ? toISODateString(selected.end) : "" })
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "hidden",
+            name: `${name}Start`,
+            value: selected.start ? toISODateString(selected.start) : ""
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "hidden",
+            name: `${name}End`,
+            value: selected.end ? toISODateString(selected.end) : ""
+          }
+        )
       ] }),
       open && /* @__PURE__ */ jsx(
         "div",
         {
           onKeyDown: onPanelKeyDown,
-          className: "absolute z-40 top-[calc(100%+6px)] left-0 bg-surface border border-border rounded-kj-md shadow-kj-lg p-3 animate-[kjpop_.12s_ease]",
-          children: /* @__PURE__ */ jsx(RangeCalendar, { value: selected, onChange: handleRangeChange, min, max, disabledDates })
+          className: "absolute z-40 top-[calc(100%+6px)] left-0 sm:left-auto right-0 sm:right-auto max-w-[calc(100vw-2rem)] bg-surface border border-border rounded-kj-md shadow-kj-lg p-3 animate-[kjpop_.12s_ease]",
+          children: /* @__PURE__ */ jsx(
+            RangeCalendar,
+            {
+              value: selected,
+              onChange: handleRangeChange,
+              min,
+              max,
+              disabledDates
+            }
+          )
         }
       )
     ] });
@@ -3742,108 +4405,118 @@ var DateRangePickerField = React52.forwardRef(
   }
 );
 DateRangePickerField.displayName = "DateRangePickerField";
-var Dropzone = React52.forwardRef(
-  function Dropzone2({
-    onFiles,
-    accept,
-    multiple = true,
-    disabled = false,
-    className,
-    children,
-    id,
-    "aria-describedby": describedBy,
-    "aria-invalid": ariaInvalid,
-    "aria-required": ariaRequired
-  }, ref) {
-    const inputRef = React52.useRef(null);
-    const [dragActive, setDragActive] = React52.useState(false);
-    const dragCounter = React52.useRef(0);
-    const invalid = ariaInvalid === true || ariaInvalid === "true";
-    const openPicker = () => {
-      if (!disabled) inputRef.current?.click();
-    };
-    const handleInputChange = (e) => {
-      const files = e.target.files ? Array.from(e.target.files) : [];
-      if (files.length > 0) onFiles(files);
-      e.target.value = "";
-    };
-    const handleDragEnter = (e) => {
-      e.preventDefault();
-      if (disabled) return;
-      dragCounter.current += 1;
-      setDragActive(true);
-    };
-    const handleDragOver = (e) => {
-      e.preventDefault();
-    };
-    const handleDragLeave = (e) => {
-      e.preventDefault();
-      if (disabled) return;
-      dragCounter.current -= 1;
-      if (dragCounter.current <= 0) {
-        dragCounter.current = 0;
-        setDragActive(false);
-      }
-    };
-    const handleDrop = (e) => {
-      e.preventDefault();
+var Dropzone = React52.forwardRef(function Dropzone2({
+  onFiles,
+  accept,
+  multiple = true,
+  disabled = false,
+  className,
+  children,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
+}, ref) {
+  const inputRef = React52.useRef(null);
+  const [dragActive, setDragActive] = React52.useState(false);
+  const dragCounter = React52.useRef(0);
+  const invalid = ariaInvalid === true || ariaInvalid === "true";
+  const openPicker = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  const handleInputChange = (e) => {
+    const files = e.target.files ? Array.from(e.target.files) : [];
+    if (files.length > 0) onFiles(files);
+    e.target.value = "";
+  };
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    if (disabled) return;
+    dragCounter.current += 1;
+    setDragActive(true);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    if (disabled) return;
+    dragCounter.current -= 1;
+    if (dragCounter.current <= 0) {
       dragCounter.current = 0;
       setDragActive(false);
-      if (disabled) return;
-      const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
-      if (files.length > 0) onFiles(files);
-    };
-    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          ref,
-          type: "button",
-          id,
-          disabled,
-          "aria-describedby": describedBy,
-          "aria-invalid": ariaInvalid,
-          "aria-required": ariaRequired,
-          "data-drag-active": dragActive || void 0,
-          onClick: openPicker,
-          onDragEnter: handleDragEnter,
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          onDrop: handleDrop,
-          className: cn(
-            "w-full flex flex-col items-center justify-center gap-2 rounded-kj-md border-2 border-dashed px-6 py-8 text-center text-sm transition-colors",
-            "focus:outline-none focus:ring-[3px] focus:ring-ring/30",
-            disabled ? "border-input bg-muted text-muted-foreground cursor-not-allowed" : dragActive ? "border-primary bg-primary/5 text-foreground cursor-pointer" : invalid ? "border-danger bg-surface text-muted-foreground hover:text-foreground cursor-pointer" : "border-input bg-surface text-muted-foreground hover:border-primary hover:text-foreground cursor-pointer"
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    dragCounter.current = 0;
+    setDragActive(false);
+    if (disabled) return;
+    const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+    if (files.length > 0) onFiles(files);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        id,
+        disabled,
+        "aria-describedby": describedBy,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired,
+        "data-drag-active": dragActive || void 0,
+        onClick: openPicker,
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        className: cn(
+          "w-full flex flex-col items-center justify-center gap-2 rounded-kj-md border-2 border-dashed px-6 py-8 text-center text-sm transition-colors",
+          "focus:outline-none focus:ring-[3px] focus:ring-ring/30",
+          disabled ? "border-input bg-muted text-muted-foreground cursor-not-allowed" : dragActive ? "border-primary bg-primary/5 text-foreground cursor-pointer" : invalid ? "border-danger bg-surface text-muted-foreground hover:text-foreground cursor-pointer" : "border-input bg-surface text-muted-foreground hover:border-primary hover:text-foreground cursor-pointer"
+        ),
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              className: "h-7 w-7",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5" }),
+                /* @__PURE__ */ jsx("path", { d: "M20 16v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3" })
+              ]
+            }
           ),
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-7 w-7", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5" }),
-              /* @__PURE__ */ jsx("path", { d: "M20 16v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3" })
-            ] }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Drag and drop files here" }),
-              ", or click to browse"
-            ] })
+          /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Drag and drop files here" }),
+            ", or click to browse"
           ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          type: "file",
-          accept,
-          multiple,
-          disabled,
-          onChange: handleInputChange,
-          className: "sr-only",
-          tabIndex: -1,
-          "aria-hidden": "true"
-        }
-      )
-    ] });
-  }
-);
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        onChange: handleInputChange,
+        className: "sr-only",
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+});
 Dropzone.displayName = "Dropzone";
 
 // src/components/file-upload-internals.ts
@@ -3908,108 +4581,130 @@ function validateFiles(files, { accept, maxSize, maxFiles, existingCount = 0, mu
   return { accepted, rejected };
 }
 function FileIcon({ className }) {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-    /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })
+      ]
+    }
+  );
 }
-var FileUpload = React52.forwardRef(
-  function FileUpload2({
-    value,
-    defaultValue,
-    onChange,
-    onReject,
-    accept,
-    maxSize,
-    maxFiles,
-    multiple = true,
-    disabled = false,
-    error = false,
-    required = false,
-    className,
-    id,
-    "aria-describedby": describedBy
-  }, ref) {
-    const controlled = value !== void 0;
-    const [internalItems, setInternalItems] = React52.useState(defaultValue ?? []);
-    const items = controlled ? value : internalItems;
-    const commit = (next) => {
-      if (!controlled) setInternalItems(next);
-      onChange?.(next);
-    };
-    const handleFiles = (files) => {
-      const { accepted, rejected } = validateFiles(files, {
+var FileUpload = React52.forwardRef(function FileUpload2({
+  value,
+  defaultValue,
+  onChange,
+  onReject,
+  accept,
+  maxSize,
+  maxFiles,
+  multiple = true,
+  disabled = false,
+  error = false,
+  required = false,
+  className,
+  id,
+  "aria-describedby": describedBy
+}, ref) {
+  const controlled = value !== void 0;
+  const [internalItems, setInternalItems] = React52.useState(defaultValue ?? []);
+  const items = controlled ? value : internalItems;
+  const commit = (next) => {
+    if (!controlled) setInternalItems(next);
+    onChange?.(next);
+  };
+  const handleFiles = (files) => {
+    const { accepted, rejected } = validateFiles(files, {
+      accept,
+      maxSize,
+      maxFiles,
+      existingCount: items.length,
+      multiple
+    });
+    if (rejected.length > 0) onReject?.(rejected);
+    if (accepted.length === 0) return;
+    const newItems = accepted.map((file) => ({
+      id: generateId(),
+      file,
+      status: "pending"
+    }));
+    commit(multiple ? [...items, ...newItems] : newItems.slice(0, 1));
+  };
+  const removeItem = (itemId) => {
+    commit(items.filter((it) => it.id !== itemId));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        ref,
+        onFiles: handleFiles,
         accept,
-        maxSize,
-        maxFiles,
-        existingCount: items.length,
-        multiple
-      });
-      if (rejected.length > 0) onReject?.(rejected);
-      if (accepted.length === 0) return;
-      const newItems = accepted.map((file) => ({
-        id: generateId(),
-        file,
-        status: "pending"
-      }));
-      commit(multiple ? [...items, ...newItems] : newItems.slice(0, 1));
-    };
-    const removeItem = (itemId) => {
-      commit(items.filter((it) => it.id !== itemId));
-    };
-    return /* @__PURE__ */ jsxs("div", { className: cn("w-full flex flex-col gap-3", className), children: [
-      /* @__PURE__ */ jsx(
-        Dropzone,
-        {
-          ref,
-          onFiles: handleFiles,
-          accept,
-          multiple,
-          disabled,
-          id,
-          "aria-describedby": describedBy,
-          "aria-invalid": error || void 0,
-          "aria-required": required || void 0
-        }
-      ),
-      items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsxs(
-        "li",
-        {
-          className: "flex items-center gap-3 rounded-kj-md border border-border bg-surface px-3 py-2",
-          children: [
-            /* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-foreground", children: item.file.name }),
-                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(item.file.size) })
-              ] }),
-              item.status === "uploading" && item.progress != null && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(Progress, { value: item.progress, className: "h-1.5" }),
-                /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
-                  Math.round(item.progress),
-                  "%"
-                ] })
-              ] }),
-              item.status === "success" && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-success", children: "Uploaded" }),
-              item.status === "error" && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-danger", children: item.error ?? "Upload failed" })
+        multiple,
+        disabled,
+        id,
+        "aria-describedby": describedBy,
+        "aria-invalid": error || void 0,
+        "aria-required": required || void 0
+      }
+    ),
+    items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center gap-3 rounded-kj-md border border-border bg-surface px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-foreground", children: item.file.name }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(item.file.size) })
             ] }),
-            !disabled && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": `Remove ${item.file.name}`,
-                onClick: () => removeItem(item.id),
-                className: "shrink-0 rounded-kj-sm p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
-                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
-              }
-            )
-          ]
-        },
-        item.id
-      )) })
-    ] });
-  }
-);
+            item.status === "uploading" && item.progress != null && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Progress, { value: item.progress, className: "h-1.5" }),
+              /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
+                Math.round(item.progress),
+                "%"
+              ] })
+            ] }),
+            item.status === "success" && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-success", children: "Uploaded" }),
+            item.status === "error" && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-danger", children: item.error ?? "Upload failed" })
+          ] }),
+          !disabled && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${item.file.name}`,
+              onClick: () => removeItem(item.id),
+              className: "shrink-0 rounded-kj-sm p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  className: "h-4 w-4",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      },
+      item.id
+    )) })
+  ] });
+});
 FileUpload.displayName = "FileUpload";
 var FileUploadField = React52.forwardRef(
   function FileUploadField2({ label, hint, error, required, className, ...props }, ref) {
@@ -4054,16 +4749,7 @@ var TimelineItem = React52.forwardRef(
       align === "right" && "grid-cols-[1fr_auto] text-right",
       align === "alternate" && "md:grid-cols-[1fr_auto_1fr] grid-cols-[auto_1fr]"
     );
-    return /* @__PURE__ */ jsx(TimelineItemContext.Provider, { value: { isEven, align, isLast }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        role: "listitem",
-        className: cn(gridClass, className),
-        ...props,
-        children
-      }
-    ) });
+    return /* @__PURE__ */ jsx(TimelineItemContext.Provider, { value: { isEven, align, isLast }, children: /* @__PURE__ */ jsx("div", { ref, role: "listitem", className: cn(gridClass, className), ...props, children }) });
   }
 );
 TimelineItem.displayName = "TimelineItem";
@@ -4143,51 +4829,53 @@ var TimelineContent = React52.forwardRef(
   }
 );
 TimelineContent.displayName = "TimelineContent";
-var TimelineTitle = React52.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-    "h4",
-    {
-      ref,
-      className: cn("m-0 text-sm font-semibold tracking-[-0.01em] text-foreground", className),
-      ...props,
-      children
-    }
-  )
-);
+var TimelineTitle = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h4",
+  {
+    ref,
+    className: cn("m-0 text-sm font-semibold tracking-[-0.01em] text-foreground", className),
+    ...props,
+    children
+  }
+));
 TimelineTitle.displayName = "TimelineTitle";
-var TimelineTime = React52.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "time",
-    {
-      ref,
-      className: cn("text-[0.75rem] text-muted-foreground font-normal", className),
-      ...props
-    }
-  )
-);
+var TimelineTime = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "time",
+  {
+    ref,
+    className: cn("text-[0.75rem] text-muted-foreground font-normal", className),
+    ...props
+  }
+));
 TimelineTime.displayName = "TimelineTime";
 function useStepper({ initialStep = 0, stepsCount }) {
   const safeStepsCount = Math.max(1, stepsCount);
   const [activeStep, setActiveStep] = React52.useState(initialStep);
   const [completedSteps, setCompletedSteps] = React52.useState([]);
-  const setStep = React52.useCallback((step) => {
-    if (step >= 0 && step < safeStepsCount) {
-      setActiveStep(step);
-    }
-  }, [safeStepsCount]);
+  const setStep = React52.useCallback(
+    (step) => {
+      if (step >= 0 && step < safeStepsCount) {
+        setActiveStep(step);
+      }
+    },
+    [safeStepsCount]
+  );
   const nextStep = React52.useCallback(() => {
     setActiveStep((prev) => Math.min(prev + 1, safeStepsCount - 1));
   }, [safeStepsCount]);
   const prevStep = React52.useCallback(() => {
     setActiveStep((prev) => Math.max(prev - 1, 0));
   }, []);
-  const completeStep = React52.useCallback((step) => {
-    setCompletedSteps((prev) => {
-      if (step < 0 || step >= safeStepsCount) return prev;
-      if (prev.includes(step)) return prev;
-      return [...prev, step].sort((a, b) => a - b);
-    });
-  }, [safeStepsCount]);
+  const completeStep = React52.useCallback(
+    (step) => {
+      setCompletedSteps((prev) => {
+        if (step < 0 || step >= safeStepsCount) return prev;
+        if (prev.includes(step)) return prev;
+        return [...prev, step].sort((a, b) => a - b);
+      });
+    },
+    [safeStepsCount]
+  );
   const uncompleteStep = React52.useCallback((step) => {
     setCompletedSteps((prev) => prev.filter((s) => s !== step));
   }, []);
@@ -4211,7 +4899,17 @@ function useStepper({ initialStep = 0, stepsCount }) {
 var StepperContext = React52.createContext(null);
 var StepperItemContext = React52.createContext(null);
 var Stepper = React52.forwardRef(
-  ({ value, defaultValue, onValueChange, orientation = "horizontal", linear = true, children, className, ...props }, ref) => {
+  ({
+    value,
+    defaultValue,
+    onValueChange,
+    orientation = "horizontal",
+    responsive = true,
+    linear = true,
+    children,
+    className,
+    ...props
+  }, ref) => {
     const [localValue, setLocalValue] = React52.useState(defaultValue ?? 0);
     const isControlled = value !== void 0;
     const activeStep = isControlled ? value : localValue;
@@ -4232,7 +4930,9 @@ var Stepper = React52.forwardRef(
         if (linear) {
           setCompletedSteps((prev) => {
             const priorSteps = steps.filter((s) => s < step);
-            const nextCompleted = Array.from(/* @__PURE__ */ new Set([...prev, ...priorSteps])).sort((a, b) => a - b);
+            const nextCompleted = Array.from(/* @__PURE__ */ new Set([...prev, ...priorSteps])).sort(
+              (a, b) => a - b
+            );
             return nextCompleted;
           });
         }
@@ -4243,6 +4943,7 @@ var Stepper = React52.forwardRef(
       () => ({
         activeStep,
         orientation,
+        responsive,
         linear,
         setStep,
         completedSteps,
@@ -4250,7 +4951,17 @@ var Stepper = React52.forwardRef(
         unregisterStep,
         steps
       }),
-      [activeStep, orientation, linear, setStep, completedSteps, registerStep, unregisterStep, steps]
+      [
+        activeStep,
+        orientation,
+        responsive,
+        linear,
+        setStep,
+        completedSteps,
+        registerStep,
+        unregisterStep,
+        steps
+      ]
     );
     return /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       "div",
@@ -4292,16 +5003,15 @@ var StepperList = React52.forwardRef(
   ({ className, children, ...props }, ref) => {
     const ctx = React52.useContext(StepperContext);
     if (!ctx) throw new Error("StepperList must be used within a Stepper");
+    const isResponsiveHorizontal = ctx.orientation === "horizontal" && (ctx.responsive ?? true);
+    const orientationClass = isResponsiveHorizontal ? "flex flex-col sm:flex-row items-start sm:items-center justify-between w-full relative gap-4" : ctx.orientation === "horizontal" ? "flex items-center justify-between w-full relative gap-4" : "flex flex-col items-start gap-6 relative w-full";
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         role: "tablist",
-        "aria-orientation": ctx.orientation,
-        className: cn(
-          ctx.orientation === "horizontal" ? "flex items-center justify-between w-full relative gap-4" : "flex flex-col items-start gap-6 relative w-full",
-          className
-        ),
+        "aria-orientation": ctx.orientation,
+        className: cn(orientationClass, className),
         ...props,
         children
       }
@@ -4319,13 +5029,14 @@ var StepperItem = React52.forwardRef(
       return () => unregisterStep(value);
     }, [value, registerStep, unregisterStep]);
     const isLast = ctx.steps[ctx.steps.length - 1] === value;
+    const isResponsiveHorizontal = ctx.orientation === "horizontal" && (ctx.responsive ?? true);
     return /* @__PURE__ */ jsx(StepperItemContext.Provider, { value: { value, disabled, isLast }, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(
           "group relative flex items-center gap-3 z-10",
-          ctx.orientation === "vertical" ? "flex items-start w-full" : "",
+          ctx.orientation === "vertical" ? "flex items-start w-full" : isResponsiveHorizontal ? "w-full sm:w-auto items-start sm:items-center" : "",
           className
         ),
         ...props,
@@ -4339,12 +5050,13 @@ var StepperSeparator = React52.forwardRef(
   ({ className, ...props }, ref) => {
     const ctx = React52.useContext(StepperContext);
     if (!ctx) throw new Error("StepperSeparator must be used within a Stepper");
+    const isResponsiveHorizontal = ctx.orientation === "horizontal" && (ctx.responsive ?? true);
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(
-          ctx.orientation === "horizontal" ? "flex-1 h-[2px] bg-border transition-all duration-300" : "w-[2px] bg-border absolute left-[17px] top-8 bottom-0 -ml-px z-0",
+          isResponsiveHorizontal ? "hidden sm:block flex-1 h-[2px] bg-border transition-all duration-300" : ctx.orientation === "horizontal" ? "flex-1 h-[2px] bg-border transition-all duration-300" : "w-[2px] bg-border absolute left-[17px] top-8 bottom-0 -ml-px z-0",
           className
         ),
         ...props
@@ -4487,7 +5199,11 @@ var AppShellBanner = React52.forwardRef(
       "div",
       {
         ref,
-        className: cn("px-4 py-2 text-sm font-medium text-center flex items-center justify-center relative z-30", variantClass, className),
+        className: cn(
+          "px-4 py-2 text-sm font-medium text-center flex items-center justify-center relative z-30",
+          variantClass,
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
@@ -4498,7 +5214,20 @@ var AppShellBanner = React52.forwardRef(
               onClick: onClose,
               className: "p-1 rounded opacity-80 hover:opacity-100 transition-opacity ml-2 cursor-pointer",
               "aria-label": "Close banner",
-              children: /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: 14,
+                  height: 14,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2.5,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
             }
           )
         ]
@@ -4527,6 +5256,16 @@ var AppShellHeader = React52.forwardRef(
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [mobileOpen]);
+    React52.useEffect(() => {
+      if (mobileOpen) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [mobileOpen]);
     const positionClass = {
       sticky: "sticky top-0 z-40",
       fixed: "fixed top-0 left-0 right-0 z-40",
@@ -4558,11 +5297,24 @@ var AppShellHeader = React52.forwardRef(
                 onClick: () => setMobileOpen(true),
                 className: "md:hidden p-2 -ml-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
                 "aria-label": "Open navigation",
-                children: /* @__PURE__ */ jsxs("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
-                ] })
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: 20,
+                    height: 20,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+                      /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                      /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+                    ]
+                  }
+                )
               }
             ),
             children
@@ -4595,7 +5347,20 @@ var AppShellHeader = React52.forwardRef(
                     onClick: () => setMobileOpen(false),
                     className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
                     "aria-label": "Close navigation",
-                    children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: 16,
+                        height: 16,
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: 2.5,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                      }
+                    )
                   }
                 )
               ] }),
@@ -4620,7 +5385,12 @@ var AppShellMain = React52.forwardRef(
       "main",
       {
         ref,
-        className: cn("flex-1", padded && "px-4 sm:px-6 lg:px-8 py-8 md:py-12", widthClass, className),
+        className: cn(
+          "flex-1",
+          padded && "px-4 sm:px-6 lg:px-8 py-4 sm:py-6 md:py-12",
+          widthClass,
+          className
+        ),
         ...props,
         children
       }
@@ -4658,19 +5428,24 @@ var AppShell = React52.forwardRef(
     headerVariant = "glass",
     paddedContent = true,
     mobileNav,
+    bottomNav,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: cn("min-h-screen bg-canvas text-foreground flex flex-col antialiased", className),
+        className: cn(
+          "min-h-screen bg-canvas text-foreground flex flex-col antialiased",
+          className
+        ),
         ...props,
         children: [
           banner && /* @__PURE__ */ jsx(AppShellBanner, { children: banner }),
           header && /* @__PURE__ */ jsx(AppShellHeader, { variant: headerVariant, position: headerPosition, mobileNav, children: header }),
           /* @__PURE__ */ jsx(AppShellMain, { width: contentWidth, padded: paddedContent, children }),
-          footer && /* @__PURE__ */ jsx(AppShellFooter, { children: footer })
+          footer && /* @__PURE__ */ jsx(AppShellFooter, { children: footer }),
+          bottomNav && /* @__PURE__ */ jsx("div", { className: "md:hidden sticky bottom-0 z-30 w-full bg-surface border-t border-border", children: bottomNav })
         ]
       }
     );
@@ -4819,9 +5594,6 @@ var Rating = React52.forwardRef(
         ref,
         role: readOnly ? "img" : "radiogroup",
         tabIndex: disabled || readOnly ? -1 : 0,
-        "aria-valuenow": displayValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
         "aria-disabled": disabled || void 0,
         "aria-readonly": readOnly || void 0,
         "aria-label": ariaLabel || (readOnly ? `Rated ${displayValue} out of ${max}` : "Rating"),
@@ -4840,10 +5612,7 @@ var Rating = React52.forwardRef(
           name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue }),
           /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-0.5", children: Array.from({ length: max }, (_, index) => {
             const starIndex = index + 1;
-            const fillFraction = Math.max(
-              0,
-              Math.min(1, displayValue - index)
-            );
+            const fillFraction = Math.max(0, Math.min(1, displayValue - index));
             const gradientId = `rating-grad-${instanceId}-${index}-${Math.round(
               fillFraction * 100
             )}`;
@@ -4882,46 +5651,24 @@ var Rating = React52.forwardRef(
                     className: "w-full h-full",
                     xmlns: "http://www.w3.org/2000/svg",
                     children: [
-                      fillFraction > 0 && fillFraction < 1 && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-                        "linearGradient",
-                        {
-                          id: gradientId,
-                          x1: "0%",
-                          y1: "0%",
-                          x2: "100%",
-                          y2: "0%",
-                          children: [
-                            isCssColor(color) ? /* @__PURE__ */ jsx(
-                              "stop",
-                              {
-                                offset: `${fillFraction * 100}%`,
-                                stopColor: color
-                              }
-                            ) : /* @__PURE__ */ jsx(
-                              "stop",
-                              {
-                                offset: `${fillFraction * 100}%`,
-                                stopColor: "currentColor",
-                                className: color
-                              }
-                            ),
-                            isCssColor(emptyColor) ? /* @__PURE__ */ jsx(
-                              "stop",
-                              {
-                                offset: `${fillFraction * 100}%`,
-                                stopColor: emptyColor
-                              }
-                            ) : /* @__PURE__ */ jsx(
-                              "stop",
-                              {
-                                offset: `${fillFraction * 100}%`,
-                                stopColor: "currentColor",
-                                className: emptyColor
-                              }
-                            )
-                          ]
-                        }
-                      ) }),
+                      fillFraction > 0 && fillFraction < 1 && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+                        isCssColor(color) ? /* @__PURE__ */ jsx("stop", { offset: `${fillFraction * 100}%`, stopColor: color }) : /* @__PURE__ */ jsx(
+                          "stop",
+                          {
+                            offset: `${fillFraction * 100}%`,
+                            stopColor: "currentColor",
+                            className: color
+                          }
+                        ),
+                        isCssColor(emptyColor) ? /* @__PURE__ */ jsx("stop", { offset: `${fillFraction * 100}%`, stopColor: emptyColor }) : /* @__PURE__ */ jsx(
+                          "stop",
+                          {
+                            offset: `${fillFraction * 100}%`,
+                            stopColor: "currentColor",
+                            className: emptyColor
+                          }
+                        )
+                      ] }) }),
                       /* @__PURE__ */ jsx(
                         "path",
                         {
@@ -4986,16 +5733,7 @@ var RatingField = React52.forwardRef(
 );
 RatingField.displayName = "RatingField";
 var RatingSummary = React52.forwardRef(
-  ({
-    average,
-    totalCount,
-    distribution,
-    max = 5,
-    size = "md",
-    icon = "star",
-    className,
-    ...props
-  }, ref) => {
+  ({ average, totalCount, distribution, max = 5, size = "md", icon = "star", className, ...props }, ref) => {
     const formattedAverage = Number.isInteger(average) ? average.toString() : average.toFixed(1);
     const formattedTotalCount = totalCount.toLocaleString();
     return /* @__PURE__ */ jsxs(
@@ -5108,7 +5846,15 @@ var PricingCard = React52.forwardRef(
                   children: included ? "\u2713" : "\u2715"
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: cn(included ? "text-foreground" : "text-muted-foreground line-through opacity-70"), children: text })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    included ? "text-foreground" : "text-muted-foreground line-through opacity-70"
+                  ),
+                  children: text
+                }
+              )
             ] }, idx);
           }) }),
           /* @__PURE__ */ jsx("div", { className: "mt-auto pt-2", children: cta ? cta : ctaHref ? (
@@ -5304,9 +6050,7 @@ function useInboxState(initial) {
   const [items, setItems] = React52.useState(initial);
   const unreadCount = items.filter((i) => !i.read).length;
   const markRead = React52.useCallback((id) => {
-    setItems(
-      (prev) => prev.map((item) => item.id === id ? { ...item, read: true } : item)
-    );
+    setItems((prev) => prev.map((item) => item.id === id ? { ...item, read: true } : item));
   }, []);
   const markAllRead = React52.useCallback(() => {
     setItems((prev) => prev.map((item) => ({ ...item, read: true })));
@@ -5439,7 +6183,16 @@ function NotificationItem({ item, onDismiss, className }) {
     }
   ) : item.avatarFallback ? /* @__PURE__ */ jsx("span", { className: "w-7 h-7 rounded-full bg-primary/20 text-primary text-[10px] font-bold flex items-center justify-center flex-shrink-0 select-none", children: item.avatarFallback }) : item.icon ? /* @__PURE__ */ jsx("span", { className: "w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 text-primary", children: item.icon }) : null;
   const textBlock = /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-    /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-snug", item.read ? "text-muted-foreground" : "text-foreground"), children: item.title }),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "text-sm leading-snug",
+          item.read ? "text-muted-foreground" : "text-foreground"
+        ),
+        children: item.title
+      }
+    ),
     item.body && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 truncate", children: item.body }),
     /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: formatRelativeTime(item.timestamp) })
   ] });
@@ -5513,6 +6266,7 @@ function InboxContent({
   viewAllHref,
   viewAllLabel = "View all notifications",
   emptyState,
+  align = "auto",
   width = 360,
   maxHeight = 320,
   className
@@ -5525,13 +6279,32 @@ function InboxContent({
   if (!ctx.open) return null;
   const allRead = items.length === 0 || items.every((i) => i.read);
   const defaultEmptyState = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-5 text-center", children: [
-    /* @__PURE__ */ jsx("span", { className: "w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3 text-muted-foreground", children: /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
-      /* @__PURE__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
-    ] }) }),
+    /* @__PURE__ */ jsx("span", { className: "w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3 text-muted-foreground", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: 18,
+        height: 18,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+          /* @__PURE__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "All caught up" }),
     /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "No new notifications" })
   ] });
+  const alignClass = {
+    start: "left-0 top-[calc(100%+6px)]",
+    end: "right-0 top-[calc(100%+6px)]",
+    auto: "right-0 sm:right-0 left-auto top-[calc(100%+6px)] max-sm:left-1/2 max-sm:-translate-x-1/2"
+  }[align ?? "auto"];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5539,11 +6312,12 @@ function InboxContent({
       role: "dialog",
       "aria-label": "Notifications",
       tabIndex: -1,
-      style: { width },
+      style: { width: typeof width === "number" ? `${width}px` : width },
       className: cn(
-        "absolute right-0 top-[calc(100%+6px)] z-40",
+        "absolute z-40 max-w-[calc(100vw-1.5rem)]",
         "bg-surface border border-border rounded-kj-md shadow-kj-lg outline-none",
         "animate-[kjpop_.12s_ease]",
+        alignClass,
         className
       ),
       children: [
@@ -5564,21 +6338,7 @@ function InboxContent({
             }
           )
         ] }),
-        items.length === 0 ? emptyState ?? defaultEmptyState : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "overflow-y-auto",
-            style: { maxHeight },
-            children: items.map((item) => /* @__PURE__ */ jsx(
-              NotificationItem,
-              {
-                item,
-                onDismiss
-              },
-              item.id
-            ))
-          }
-        ),
+        items.length === 0 ? emptyState ?? defaultEmptyState : /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", style: { maxHeight }, children: items.map((item) => /* @__PURE__ */ jsx(NotificationItem, { item, onDismiss }, item.id)) }),
         items.length > 0 && viewAllHref && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3.5 py-2.5 text-center", children: /* @__PURE__ */ jsxs(
           "a",
           {
@@ -5707,30 +6467,32 @@ function hslToHex(h, s, l) {
   };
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
 }
-var ColorPickerSwatch = React52.forwardRef(({ color, selected = false, size = "md", className, style, ...props }, ref) => {
-  const sizeClasses2 = {
-    sm: "w-5 h-5",
-    md: "w-7 h-7",
-    lg: "w-9 h-9"
-  };
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      "aria-pressed": selected,
-      style: { backgroundColor: color, ...style },
-      className: cn(
-        "relative shrink-0 rounded-full border border-border/50 shadow-sm transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary flex items-center justify-center text-white text-xs font-bold",
-        sizeClasses2[size],
-        selected && "ring-2 ring-primary ring-offset-2 ring-offset-surface",
-        className
-      ),
-      ...props,
-      children: selected && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713" })
-    }
-  );
-});
+var ColorPickerSwatch = React52.forwardRef(
+  ({ color, selected = false, size = "md", className, style, ...props }, ref) => {
+    const sizeClasses2 = {
+      sm: "w-5 h-5",
+      md: "w-7 h-7",
+      lg: "w-9 h-9"
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        style: { backgroundColor: color, ...style },
+        className: cn(
+          "relative shrink-0 rounded-full border border-border/50 shadow-sm transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary flex items-center justify-center text-white text-xs font-bold",
+          sizeClasses2[size],
+          selected && "ring-2 ring-primary ring-offset-2 ring-offset-surface",
+          className
+        ),
+        ...props,
+        children: selected && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713" })
+      }
+    );
+  }
+);
 ColorPickerSwatch.displayName = "ColorPickerSwatch";
 var ColorPicker = React52.forwardRef(
   ({
@@ -5744,9 +6506,7 @@ var ColorPicker = React52.forwardRef(
     ...props
   }, ref) => {
     const isControlled = value !== void 0;
-    const [localColor, setLocalColor] = React52.useState(
-      normalizeHex(defaultValue)
-    );
+    const [localColor, setLocalColor] = React52.useState(normalizeHex(defaultValue));
     const color = isControlled ? normalizeHex(value) : localColor;
     const [hexInputValue, setHexInputValue] = React52.useState(color);
     React52.useEffect(() => {
@@ -5884,14 +6644,16 @@ var ColorPicker = React52.forwardRef(
   }
 );
 ColorPicker.displayName = "ColorPicker";
-var ColorPickerField = React52.forwardRef(({ label, hint, error, required, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(Field, { children: [
-    label && /* @__PURE__ */ jsx(Label, { required, children: label }),
-    /* @__PURE__ */ jsx(ColorPicker, { ref, ...props }),
-    hint && /* @__PURE__ */ jsx(Hint, { children: hint }),
-    error && /* @__PURE__ */ jsx(Hint, { error: true, children: error })
-  ] });
-});
+var ColorPickerField = React52.forwardRef(
+  ({ label, hint, error, required, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Field, { children: [
+      label && /* @__PURE__ */ jsx(Label, { required, children: label }),
+      /* @__PURE__ */ jsx(ColorPicker, { ref, ...props }),
+      hint && /* @__PURE__ */ jsx(Hint, { children: hint }),
+      error && /* @__PURE__ */ jsx(Hint, { error: true, children: error })
+    ] });
+  }
+);
 ColorPickerField.displayName = "ColorPickerField";
 var COLUMN_CLASSES = {
   2: "grid-cols-2",
@@ -6016,7 +6778,20 @@ function ImageGallery({
                 onClick: handleClose,
                 "aria-label": "Close",
                 className: "p-2 rounded-full text-white/80 hover:text-white hover:bg-white/10 transition-colors cursor-pointer",
-                children: /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: 20,
+                    height: 20,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                  }
+                )
               }
             )
           ] }),
@@ -6028,7 +6803,20 @@ function ImageGallery({
                 onClick: handlePrev,
                 "aria-label": "Previous image",
                 className: "p-3 rounded-full text-white/80 hover:text-white hover:bg-white/10 transition-colors cursor-pointer z-10 shrink-0",
-                children: /* @__PURE__ */ jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) })
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: 24,
+                    height: 24,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center justify-center h-full min-h-0 px-2 select-none", children: /* @__PURE__ */ jsx(
@@ -6046,7 +6834,20 @@ function ImageGallery({
                 onClick: handleNext,
                 "aria-label": "Next image",
                 className: "p-3 rounded-full text-white/80 hover:text-white hover:bg-white/10 transition-colors cursor-pointer z-10 shrink-0",
-                children: /* @__PURE__ */ jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: 24,
+                    height: 24,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+                  }
+                )
               }
             )
           ] }),
@@ -6059,7 +6860,430 @@ function ImageGallery({
     )
   ] });
 }
+var OFFICIAL_SCRIPT_URL = "https://geowidget.easypack24.net/js/sdk-for-javascript.js";
+var OFFICIAL_CSS_URL = "https://geowidget.easypack24.net/css/easypack.css";
+var scriptPromise = null;
+function useInPostScript(options = {}) {
+  const [isLoaded, setIsLoaded] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return !!(window.customElements?.get("inpost-geowidget") || window.easyPack);
+  });
+  const [error, setError] = useState(null);
+  const scriptUrl = options.customScriptUrl || OFFICIAL_SCRIPT_URL;
+  const cssUrl = options.customCssUrl || OFFICIAL_CSS_URL;
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.customElements?.get("inpost-geowidget") || window.easyPack) {
+      return;
+    }
+    let linkTag = document.querySelector(`link[href="${cssUrl}"]`);
+    if (!linkTag) {
+      linkTag = document.createElement("link");
+      linkTag.rel = "stylesheet";
+      linkTag.href = cssUrl;
+      linkTag.type = "text/css";
+      document.head.appendChild(linkTag);
+    }
+    if (!scriptPromise) {
+      scriptPromise = new Promise((resolve, reject) => {
+        let scriptTag = document.querySelector(
+          `script[src="${scriptUrl}"]`
+        );
+        if (!scriptTag) {
+          scriptTag = document.createElement("script");
+          scriptTag.src = scriptUrl;
+          scriptTag.async = true;
+          document.head.appendChild(scriptTag);
+        }
+        scriptTag.addEventListener("load", () => resolve());
+        scriptTag.addEventListener(
+          "error",
+          (err) => reject(
+            err instanceof Error ? err : new Error("Failed to load InPost GeoWidget SDK script")
+          )
+        );
+      });
+    }
+    scriptPromise.then(async () => {
+      if (typeof window !== "undefined" && window.customElements?.whenDefined) {
+        try {
+          await Promise.race([
+            window.customElements.whenDefined("inpost-geowidget"),
+            new Promise((r) => setTimeout(r, 100))
+          ]);
+        } catch {
+        }
+      }
+      setIsLoaded(true);
+    }).catch((err) => {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    });
+  }, [scriptUrl, cssUrl]);
+  return { isLoaded, error };
+}
+var MOCK_POINTS = [
+  {
+    name: "WAW01M",
+    address: { line1: "ul. Towarowa 5", line2: "00-838 Warszawa" },
+    address_details: {
+      city: "Warszawa",
+      street: "Towarowa",
+      building_number: "5",
+      post_code: "00-838"
+    },
+    location: { latitude: 52.2297, longitude: 21.0122 },
+    type: ["parcel_locker"],
+    status: "Operating",
+    location_description: "Przy stacji benzynowej BP"
+  },
+  {
+    name: "KRA02N",
+    address: { line1: "ul. Floria\u0144ska 12", line2: "31-021 Krak\xF3w" },
+    address_details: {
+      city: "Krak\xF3w",
+      street: "Floria\u0144ska",
+      building_number: "12",
+      post_code: "31-021"
+    },
+    location: { latitude: 50.0647, longitude: 19.945 },
+    type: ["parcel_locker"],
+    status: "Operating",
+    location_description: "Obok wej\u015Bcia do sklepu"
+  },
+  {
+    name: "GDA03P",
+    address: { line1: "ul. D\u0142uga 8", line2: "80-827 Gda\u0144sk" },
+    address_details: { city: "Gda\u0144sk", street: "D\u0142uga", building_number: "8", post_code: "80-827" },
+    location: { latitude: 54.352, longitude: 18.6466 },
+    type: ["parcel_locker"],
+    status: "Operating",
+    location_description: "R\xF3g ulicy D\u0142ugiej i Tkackiej"
+  },
+  {
+    name: "POZ04S",
+    address: { line1: "ul. P\xF3\u0142wiejska 42", line2: "61-888 Pozna\u0144" },
+    address_details: {
+      city: "Pozna\u0144",
+      street: "P\xF3\u0142wiejska",
+      building_number: "42",
+      post_code: "61-888"
+    },
+    location: { latitude: 52.4064, longitude: 16.9252 },
+    type: ["parcel_locker"],
+    status: "Operating",
+    location_description: "Przy centrum handlowym Stary Browar"
+  }
+];
+var InPostGeowidget = ({
+  token,
+  language = "pl",
+  config = "parcelCollect",
+  sandbox = false,
+  onPointSelect,
+  onReady,
+  onError,
+  className,
+  style,
+  customScriptUrl,
+  customCssUrl
+}) => {
+  const { isLoaded, error } = useInPostScript({
+    customScriptUrl,
+    customCssUrl
+  });
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedMock, setSelectedMock] = useState(null);
+  const widgetRef = useRef(null);
+  const callbackNameRef = useRef(`inpost_cb_${Math.random().toString(36).substring(2, 9)}`);
+  useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+  useEffect(() => {
+    if (isLoaded && onReady) {
+      onReady();
+    }
+  }, [isLoaded, onReady]);
+  useEffect(() => {
+    if (!token) return;
+    const cbName = callbackNameRef.current;
+    window[cbName] = (point) => {
+      if (onPointSelect) {
+        onPointSelect(point);
+      }
+    };
+    const el = widgetRef.current;
+    const handlePointSelect = (event) => {
+      const customEv = event;
+      const point = customEv.detail || customEv.point;
+      if (point && onPointSelect) {
+        onPointSelect(point);
+      }
+    };
+    if (el) {
+      el.addEventListener("inpostgeowidget", handlePointSelect);
+      el.addEventListener("onpointselect", handlePointSelect);
+    }
+    document.addEventListener("onpointselect", handlePointSelect);
+    return () => {
+      delete window[cbName];
+      if (el) {
+        el.removeEventListener("inpostgeowidget", handlePointSelect);
+        el.removeEventListener("onpointselect", handlePointSelect);
+      }
+      document.removeEventListener("onpointselect", handlePointSelect);
+    };
+  }, [onPointSelect, isLoaded, token]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex flex-col items-center justify-center min-h-[450px] bg-danger/10 border-2 border-danger rounded-xl p-6 text-center ${className || ""}`,
+        style,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base font-extrabold text-danger mb-1", children: "B\u0142\u0105d \u0142adowania Geowidget InPost" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-semibold max-w-sm", children: "Nie uda\u0142o si\u0119 pobra\u0107 skryptu mapy z serwera InPost. Sprawd\u017A po\u0142\u0105czenie z sieci\u0105." })
+        ]
+      }
+    );
+  }
+  if (!token) {
+    const filteredPoints = MOCK_POINTS.filter(
+      (p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.address.line1.toLowerCase().includes(searchQuery.toLowerCase()) || p.address_details.city.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex flex-col h-full min-h-[500px] bg-surface border-2 border-border rounded-xl p-4 font-sans text-foreground ${className || ""}`,
+        style,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-r from-amber-400 via-amber-500 to-yellow-500 text-slate-950 rounded-xl p-4 mb-3.5 shadow-sm flex flex-col gap-1 border border-amber-600/30", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-slate-950 animate-pulse" }),
+                /* @__PURE__ */ jsx("span", { className: "font-black text-sm tracking-tight uppercase", children: "InPost Paczkomat\xAE" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-[0.7rem] font-black bg-slate-950 text-amber-400 px-2.5 py-0.5 rounded-md uppercase tracking-wider shadow-sm", children: "Tryb Pokazowy" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-slate-950 font-bold leading-relaxed opacity-95", children: [
+              "Wybierz punkt z listy poni\u017Cej. Do za\u0142adowania produkcyjnej mapy przeka\u017C prop",
+              " ",
+              /* @__PURE__ */ jsx("code", { className: "bg-slate-950 text-amber-400 px-1.5 py-0.5 rounded font-mono text-[0.72rem] font-black", children: 'token="TWOJ_TOKEN"' }),
+              "."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mb-3.5 relative", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "Szukaj Paczkomatu (np. Warszawa, WAW01M, Towarowa)...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              className: "w-full px-4 py-2.5 text-sm bg-surface border-2 border-border rounded-xl outline-none text-foreground placeholder:text-muted-foreground font-bold focus:border-primary focus:ring-2 focus:ring-primary/20 shadow-sm transition-all"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto space-y-3 pr-1 max-h-[420px]", children: filteredPoints.map((p) => {
+            const isSelected = selectedMock?.name === p.name;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => {
+                  setSelectedMock(p);
+                  if (onPointSelect) {
+                    onPointSelect(p);
+                  }
+                },
+                className: `p-4 rounded-xl border-2 transition-all cursor-pointer flex items-center justify-between gap-3 ${isSelected ? "bg-primary text-primary-foreground border-primary shadow-md" : "bg-surface border-border hover:border-primary hover:shadow-md text-foreground"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "font-black text-base flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          className: isSelected ? "text-primary-foreground font-black" : "text-foreground font-black",
+                          children: [
+                            "Paczkomat\xAE ",
+                            p.name
+                          ]
+                        }
+                      ),
+                      p.location_description && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `text-[0.72rem] px-2.5 py-0.5 rounded-full font-bold ${isSelected ? "bg-primary-hover text-primary-foreground" : "bg-muted text-primary"}`,
+                          children: p.location_description
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: `text-xs font-bold ${isSelected ? "text-primary-foreground/90" : "text-muted-foreground"}`,
+                        children: [
+                          p.address.line1,
+                          ", ",
+                          p.address.line2
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: `px-4 py-2 rounded-lg text-xs font-black shrink-0 transition-all shadow-sm ${isSelected ? "bg-amber-400 text-slate-950 border border-amber-500" : "bg-primary hover:bg-primary-hover text-primary-foreground"}`,
+                      children: isSelected ? "Wybrano \u2713" : "Wybierz"
+                    }
+                  )
+                ]
+              },
+              p.name
+            );
+          }) })
+        ]
+      }
+    );
+  }
+  if (!isLoaded) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex items-center justify-center min-h-[450px] bg-surface border-2 border-border rounded-xl p-6 ${className || ""}`,
+        style,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-9 h-9 border-4 border-primary border-t-transparent rounded-full animate-spin" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-extrabold text-foreground", children: "\u0141adowanie mapy InPost GeoWidget..." })
+        ] })
+      }
+    );
+  }
+  const widgetProps = {
+    language,
+    config: String(config).toLowerCase(),
+    // eslint-disable-next-line react-hooks/refs
+    onpointselect: callbackNameRef.current
+  };
+  if (token) {
+    widgetProps.token = token;
+  }
+  if (sandbox) {
+    widgetProps.sandbox = "true";
+  }
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-full min-h-[450px] relative ${className || ""}`, style, children: React52__default.createElement("inpost-geowidget", {
+    ref: widgetRef,
+    ...widgetProps,
+    style: { width: "100%", height: "100%", display: "block", minHeight: "450px" }
+  }) });
+};
+var InPostGeowidgetModal = ({
+  value,
+  onSelect,
+  triggerText = "Wybierz Paczkomat\xAE",
+  modalTitle = "Wybierz punkt odbioru InPost",
+  disabled = false,
+  open: controlledOpen,
+  onOpenChange,
+  showSelectedBadge = true,
+  className = "",
+  buttonVariant = "outline",
+  buttonSize = "md",
+  token,
+  language,
+  config,
+  sandbox,
+  customScriptUrl,
+  customCssUrl
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [selectedPoint, setSelectedPoint] = useState(
+    typeof value === "object" && value ? value : null
+  );
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const handleOpenToggle = (newOpen) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    if (onOpenChange) {
+      onOpenChange(newOpen);
+    }
+  };
+  const handlePointSelect = (point) => {
+    setSelectedPoint(point);
+    if (onSelect) {
+      onSelect(point);
+    }
+    handleOpenToggle(false);
+  };
+  const selectedCode = selectedPoint?.name || (typeof value === "string" ? value : null);
+  const selectedAddress = selectedPoint ? `${selectedPoint.address?.line1 || ""}, ${selectedPoint.address?.line2 || ""}` : null;
+  const isOutline = buttonVariant === "outline";
+  return /* @__PURE__ */ jsxs("div", { className: `inline-flex flex-col gap-3 min-w-[280px] ${className}`, children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: buttonVariant,
+        size: buttonSize,
+        disabled,
+        onClick: () => handleOpenToggle(true),
+        className: `group w-full justify-between gap-4 text-left font-bold shadow-sm hover:shadow-md transition-all py-2.5 px-3.5 rounded-xl ${isOutline ? "bg-surface hover:bg-muted text-foreground border-2 border-border hover:border-primary" : "border-2 border-transparent"}`,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2.5 min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-black text-[0.7rem] bg-amber-400 text-slate-950 px-2.5 py-1 rounded-md shadow-sm tracking-tight uppercase border border-amber-500/40 shrink-0 group-hover:scale-105 transition-transform", children: "InPost" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `truncate font-bold text-sm ${isOutline ? "text-foreground group-hover:text-primary" : ""}`,
+                children: selectedCode ? `Paczkomat\xAE ${selectedCode}` : triggerText
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-xs font-black px-2.5 py-1 rounded-md shrink-0 shadow-sm uppercase tracking-wide transition-all ${isOutline ? "bg-primary text-primary-foreground group-hover:bg-primary-hover" : "bg-amber-400 text-slate-950"}`,
+              children: selectedCode ? "Zmie\u0144" : "Wybierz"
+            }
+          )
+        ]
+      }
+    ),
+    showSelectedBadge && selectedCode && /* @__PURE__ */ jsxs("div", { className: "text-xs bg-surface text-foreground border-2 border-border p-3.5 rounded-xl flex flex-col gap-1.5 shadow-md", children: [
+      /* @__PURE__ */ jsxs("div", { className: "font-bold flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-primary shadow-sm animate-pulse" }),
+          /* @__PURE__ */ jsxs("span", { className: "font-black text-sm text-primary", children: [
+            "Paczkomat\xAE ",
+            selectedCode
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-[0.65rem] bg-amber-400 text-slate-950 font-black px-2 py-0.5 rounded uppercase tracking-wider", children: "Wybrany" })
+      ] }),
+      selectedAddress && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-[0.78rem] font-medium pl-4 border-l-2 border-border", children: selectedAddress })
+    ] }),
+    /* @__PURE__ */ jsxs(Modal, { open: isOpen, onClose: () => handleOpenToggle(false), width: 850, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pb-3.5 border-b border-border", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-black text-xs bg-amber-400 text-slate-950 px-2.5 py-1 rounded-md shadow-sm tracking-tight uppercase border border-amber-500/40 shrink-0", children: "InPost" }),
+        /* @__PURE__ */ jsx(ModalTitle, { className: "m-0 text-xl font-black text-primary tracking-tight", children: modalTitle })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "w-full h-[600px] min-h-[500px] mt-3.5 rounded-xl overflow-hidden", children: isOpen && /* @__PURE__ */ jsx(
+        InPostGeowidget,
+        {
+          token,
+          language,
+          config,
+          sandbox,
+          customScriptUrl,
+          customCssUrl,
+          onPointSelect: handlePointSelect
+        }
+      ) })
+    ] })
+  ] });
+};
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AppShell, AppShellBanner, AppShellFooter, AppShellHeader, AppShellMain, Avatar, AvatarGroup, Badge, BlogCard, BottomNavigation, BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetTitle, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxField, CodeBlock, ColorPicker, ColorPickerField, ColorPickerSwatch, Combobox, ComboboxField, CommandPalette, ConfirmDialog, DEFAULT_COLOR_SWATCHES, DashboardShell, DataTable, DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DetailPageLayout, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Dropzone, EmptyState, ErrorState, Fab, Field, FileUpload, FileUploadField, FormField, Hint, ImageGallery, InboxContent, InboxPopover, InboxTrigger, Input, Kbd, Label, MetricCard, Modal, ModalActions, ModalDescription, ModalTitle, NotificationItem, PageHeader, Pagination, Popover, PopoverContent, PopoverTrigger, PricingCard, Progress, ProgressRing, ProgressRingField, ProjectCard, Radio, RangeCalendar, Rating, RatingField, RatingSummary, SectionHeader, Segmented, Select, SelectField, Separator, SettingsLayout, SidebarNav, Skeleton, Slider, Spinner, Stat, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableToolbar, TableWrap, Tabs, TabsContent, TabsList, TabsTrigger, TextField, Textarea, Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle, ToastProvider, ToggleGroup, Tooltip, badgeVariants, buttonVariants, cn, formatRelativeTime, hexToHsl, hslToHex, isValidHex, normalizeHex, sliderThumbCSS, useInboxState, useStepper, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AppShell, AppShellBanner, AppShellFooter, AppShellHeader, AppShellMain, Avatar, AvatarGroup, Badge, BlogCard, BottomNavigation, BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetTitle, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxField, CodeBlock, ColorPicker, ColorPickerField, ColorPickerSwatch, Combobox, ComboboxField, CommandPalette, ConfirmDialog, DEFAULT_COLOR_SWATCHES, DashboardShell, DataTable, DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DetailPageLayout, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Dropzone, EmptyState, ErrorState, Fab, Field, FileUpload, FileUploadField, FormField, Hint, ImageGallery, InPostGeowidget, InPostGeowidgetModal, InboxContent, InboxPopover, InboxTrigger, Input, Kbd, Label, MetricCard, Modal, ModalActions, ModalDescription, ModalTitle, NotificationItem, PageHeader, Pagination, Popover, PopoverContent, PopoverTrigger, PricingCard, Progress, ProgressRing, ProgressRingField, ProjectCard, Radio, RangeCalendar, Rating, RatingField, RatingSummary, SectionHeader, Segmented, Select, SelectField, Separator, SettingsLayout, SidebarNav, Skeleton, Slider, Spinner, Stat, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableToolbar, TableWrap, Tabs, TabsContent, TabsList, TabsTrigger, TextField, Textarea, Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle, ToastProvider, ToggleGroup, Tooltip, badgeVariants, buttonVariants, cn, formatRelativeTime, hexToHsl, hslToHex, isValidHex, normalizeHex, sliderThumbCSS, useInPostScript, useInboxState, useStepper, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map