@bizapps/design-system-testing 1.0.11 → 1.6.0

package/dist/main.js

@@ -1,18 +1,20 @@
 "use client";
-import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, XIcon, ChevronsUpDownIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, House, Plane, Wallet, LayoutDashboardIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon } from 'lucide-react';
+import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, ChevronsUpDownIcon, XIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Pencil, Clock, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, House, Plane, Wallet, LayoutDashboardIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, useId, useContext, useLayoutEffect } from 'react';
-import { Avatar as Avatar$1, Checkbox as Checkbox$1, Slot, Select as Select$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Popover as Popover$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
-import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, useId, useContext, useLayoutEffect, isValidElement, cloneElement } from 'react';
+import { Avatar as Avatar$1, Checkbox as Checkbox$1, Slot, Select as Select$1, Label as Label$1, Popover as Popover$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
 import { isSameDay, isToday, format, addDays } from 'date-fns';
 import useEmblaCarousel from 'embla-carousel-react';
-import { motion, AnimatePresence } from 'motion/react';
+import { isValidPhoneNumber, validatePhoneNumberLength, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import { Command } from 'cmdk';
+import * as countryFlags from 'country-flag-icons/react/3x2';
+import { motion, AnimatePresence } from 'motion/react';
 import { useDropzone } from 'react-dropzone';
 import Color from 'color';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import { ScheduleXCalendar } from '@schedule-x/react';
 import { createCalendar, viewMonthGrid, viewWeek, viewDay, viewMonthAgenda } from '@schedule-x/calendar';
 import { createEventsServicePlugin } from '@schedule-x/events-service';
@@ -452,174 +454,6 @@ function Button({
     }
   );
 }
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "dropdown",
-  buttonVariant = "ghost",
-  locale,
-  formatters,
-  components,
-  fromYear,
-  toYear,
-  ...props
-}) {
-  const defaultClassNames = getDefaultClassNames();
-  return /* @__PURE__ */ jsx(
-    DayPicker,
-    {
-      showOutsideDays,
-      className: cn(
-        "group/calendar bg-background p-3 font-sans [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      ),
-      captionLayout,
-      startMonth: new Date(fromYear ?? 1900, 0),
-      endMonth: new Date(toYear ?? 2100, 11),
-      locale,
-      formatters: {
-        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
-        ...formatters
-      },
-      classNames: {
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn("relative flex flex-col gap-3 md:flex-row", defaultClassNames.months),
-        month: cn("flex w-full flex-col gap-3", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-2",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-7 p-0 select-none opacity-50 aria-disabled:opacity-30 transition-opacity duration-150 hover:opacity-100",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-7 p-0 select-none opacity-50 aria-disabled:opacity-30 transition-opacity duration-150 hover:opacity-100",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size) tracking-tight",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-semibold",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative rounded-(--cell-radius)",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
-        caption_label: cn(
-          "font-semibold select-none",
-          captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
-          defaultClassNames.caption_label
-        ),
-        weekdays: cn("flex gap-1", defaultClassNames.weekdays),
-        weekday: cn(
-          "flex-1 rounded-(--cell-radius) text-[0.75rem] font-semibold text-muted-foreground/70 select-none tracking-wide",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full gap-1", defaultClassNames.week),
-        week_number_header: cn(
-          "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.75rem] text-muted-foreground/50 select-none",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
-          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "relative isolate z-0 rounded-l-md bg-primary/8 after:absolute after:inset-y-0 after:right-0 after:w-3 after:bg-primary/8",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none bg-primary/8", defaultClassNames.range_middle),
-        range_end: cn(
-          "relative isolate z-0 rounded-r-md bg-primary/8 after:absolute after:inset-y-0 after:left-0 after:w-3 after:bg-primary/8",
-          defaultClassNames.range_end
-        ),
-        today: cn("rounded-md bg-accent text-accent-foreground", defaultClassNames.today),
-        outside: cn(
-          "text-muted-foreground/50 aria-selected:text-muted-foreground/50",
-          defaultClassNames.outside
-        ),
-        disabled: cn("text-muted-foreground/40 opacity-50", defaultClassNames.disabled),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames
-      },
-      components: {
-        Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
-          if (orientation === "left") {
-            return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          if (orientation === "right") {
-            return /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
-        },
-        DayButton: ({ ...props2 }) => /* @__PURE__ */ jsx(CalendarDayButton, { locale, ...props2 }),
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
-        },
-        ...components
-      },
-      ...props
-    }
-  );
-}
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  locale,
-  ...props
-}) {
-  const defaultClassNames = getDefaultClassNames();
-  const ref = useRef(null);
-  useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ref,
-      variant: "ghost",
-      size: "icon-sm",
-      "data-day": day.date.toLocaleDateString(locale?.code),
-      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
-      "data-range-start": modifiers.range_start,
-      "data-range-end": modifiers.range_end,
-      "data-range-middle": modifiers.range_middle,
-      className: cn(
-        "group-data-[focused=true]/day:ring-primary/40 data-[range-end=true]:!bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:!bg-primary/8 data-[range-middle=true]:text-foreground data-[range-start=true]:!bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:!bg-primary data-[selected-single=true]:text-primary-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 !rounded-md border-0 !bg-transparent leading-none font-normal transition-colors duration-150 group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:rounded-md group-data-[focused=true]/day:ring-[2px] hover:!bg-transparent data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[selected-single=true]:rounded-md [&>span]:text-xs [&>span]:font-medium [&>span]:opacity-75",
-        defaultClassNames.day,
-        className
-      ),
-      ...props
-    }
-  );
-}
 function useControllableState({
   prop,
   defaultProp,
@@ -1105,6 +939,22 @@ function Input({ className, type, ...props }) {
     }
   );
 }
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Label$1.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "text-foreground text-sm leading-6 font-medium transition-colors select-none",
+        "group-has-disabled/field:cursor-not-allowed group-has-disabled/field:opacity-50",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "aria-invalid:text-destructive dark:aria-invalid:text-destructive/90",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/utils/urlSecurity.ts
 var SAFE_HREF_PROTOCOLS = /* @__PURE__ */ new Set(["https:", "http:", "mailto:", "tel:"]);
@@ -1186,15 +1036,412 @@ function Link({
         truncate ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children }) : children,
         isExternal && !disabled && /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(
-            ExternalLinkIcon,
+            ExternalLinkIcon,
+            {
+              "aria-hidden": "true",
+              size: externalIconSize,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(opens in new tab)" })
+        ] })
+      ]
+    }
+  );
+}
+function validatePhone(value) {
+  if (!value) {
+    return { isValid: false };
+  }
+  if (isValidPhoneNumber(value)) {
+    return { isValid: true };
+  }
+  return { isValid: false, problem: validatePhoneNumberLength(value) ?? "INVALID" };
+}
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  container,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { container, children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground ring-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-1 rounded-3xl p-4 text-sm shadow-lg ring-1 outline-hidden duration-100",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "popover-header",
+      className: cn("flex flex-col gap-1 text-sm", className),
+      ...props
+    }
+  );
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "popover-title",
+      className: cn("text-base font-medium", className),
+      ...props
+    }
+  );
+}
+function PopoverDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "popover-description",
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function stripLeadingDialCode(raw, dialCode) {
+  if (!raw.startsWith("+")) {
+    return raw.replace(/\D/g, "");
+  }
+  const parsed = parsePhoneNumberFromString(raw);
+  if (parsed) {
+    return parsed.nationalNumber;
+  }
+  const digits = raw.replace(/\D/g, "");
+  const code = dialCode.replace(/\D/g, "");
+  return code && digits.startsWith(code) ? digits.length > code.length ? digits.slice(code.length) : "" : digits;
+}
+var flagByCode = countryFlags;
+function CountryFlag({
+  code,
+  flagUrl,
+  className
+}) {
+  const isoCode = (code || "").toUpperCase();
+  const FlagComponent = flagByCode[isoCode];
+  const flag = flagUrl ? /* @__PURE__ */ jsx("img", { src: flagUrl, alt: "", "aria-hidden": "true", className: "size-full object-cover" }) : FlagComponent ? /* @__PURE__ */ jsx(FlagComponent, { "aria-hidden": "true", className: "size-full" }) : null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "phone-field-country-flag",
+      "data-country": isoCode || void 0,
+      "data-fallback": flag ? void 0 : "true",
+      "aria-hidden": "true",
+      className: cn(
+        "size-4 shrink-0 overflow-hidden rounded-[2px]",
+        !flag && "bg-muted rounded-full",
+        className
+      ),
+      children: flag
+    }
+  );
+}
+function PhoneField({
+  countries,
+  value,
+  onValueChange,
+  onValidityChange,
+  defaultCountry,
+  placeholder = "Phone number",
+  disabled = false,
+  className,
+  container,
+  name,
+  ...inputProps
+}) {
+  const [open, setOpen] = useState(false);
+  const [pickedCode, setPickedCode] = useState(
+    (defaultCountry ?? countries[0]?.code)?.toUpperCase()
+  );
+  const [internalValue, setInternalValue] = useState("");
+  const listRef = useRef(null);
+  const inputRef = useRef(null);
+  const caretRef = useRef(null);
+  const lastValidityRef = useRef(null);
+  const listId = `${useId()}-countries-list`;
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const parsed = currentValue ? parsePhoneNumberFromString(currentValue) : void 0;
+  const parsedCountry = parsed?.country;
+  const parsedCallingCode = parsed?.countryCallingCode;
+  const countryInList = parsedCountry !== void 0 && countries.some((country) => country.code.toUpperCase() === parsedCountry);
+  const callingCodeInList = parsedCallingCode !== void 0 && countries.some(
+    (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
+  );
+  const pickedCountry = pickedCode ? countries.find((country) => country.code.toUpperCase() === pickedCode.toUpperCase()) : void 0;
+  const pickMatchesValue = pickedCountry !== void 0 && pickedCountry.dialCode.replace(/\D/g, "") === parsedCallingCode;
+  const representedCode = countryInList ? parsedCountry : pickMatchesValue ? pickedCountry.code : callingCodeInList ? countries.find(
+    (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
+  )?.code : void 0;
+  const selectedCode = representedCode ?? pickedCode ?? defaultCountry ?? countries[0]?.code;
+  const selectedCountry = countries.find(
+    (country) => country.code.toUpperCase() === selectedCode?.toUpperCase()
+  ) ?? countries[0];
+  const dialCode = selectedCountry ? selectedCountry.dialCode.replace(/\D/g, "") : "";
+  const emitDialCode = parsedCallingCode ?? dialCode;
+  const nationalDigits = parsed ? parsed.nationalNumber : currentValue ? stripLeadingDialCode(currentValue, dialCode) : "";
+  const canFormat = selectedCountry !== void 0 && (!parsed || countryInList || callingCodeInList);
+  const inputValue = selectedCountry && canFormat && nationalDigits ? new AsYouType((selectedCountry.code || "").toUpperCase()).input(
+    nationalDigits
+  ) : nationalDigits;
+  const isInvalid = inputProps["aria-invalid"] === true || inputProps["aria-invalid"] === "true";
+  const { isValid, problem } = validatePhone(currentValue);
+  useEffect(() => {
+    const last = lastValidityRef.current;
+    if (last && last.isValid === isValid && last.problem === problem) {
+      return;
+    }
+    lastValidityRef.current = { isValid, problem };
+    onValidityChange?.({ isValid, problem });
+  }, [isValid, problem, onValidityChange]);
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    const caret = caretRef.current;
+    if (!input || !caret || document.activeElement !== input) {
+      return;
+    }
+    const digitsBefore = caret.raw.slice(0, caret.start).replace(/\D/g, "").length;
+    let position = 0;
+    if (digitsBefore > 0) {
+      let digitsSeen = 0;
+      for (let i = 0; i < inputValue.length; i++) {
+        if (/\d/.test(inputValue[i])) {
+          digitsSeen += 1;
+        }
+        position = i + 1;
+        if (digitsSeen >= digitsBefore) {
+          break;
+        }
+      }
+    }
+    input.setSelectionRange(position, position + (caret.end - caret.start));
+    caretRef.current = null;
+  }, [inputValue]);
+  const handleSearchChange = () => {
+    requestAnimationFrame(() => listRef.current?.scrollTo({ top: 0 }));
+  };
+  function handleCountrySelect(code) {
+    setPickedCode(code);
+    setOpen(false);
+    const nextCountry = countries.find(
+      (country) => country.code.toUpperCase() === code.toUpperCase()
+    );
+    if (nextCountry && nationalDigits) {
+      const next = `+${nextCountry.dialCode.replace(/\D/g, "")}${nationalDigits}`;
+      onValueChange?.(next);
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+    }
+  }
+  function deriveFromE164(e164) {
+    const parsed2 = parsePhoneNumberFromString(e164);
+    if (!parsed2?.nationalNumber) {
+      return void 0;
+    }
+    const countryMatch = parsed2.country ? countries.find((country) => country.code.toUpperCase() === parsed2.country) : void 0;
+    const nextPickedCode = countryMatch ? countryMatch.code : parsed2.countryCallingCode ? countries.find(
+      (country) => country.dialCode.replace(/\D/g, "") === parsed2.countryCallingCode
+    )?.code : void 0;
+    return {
+      nationalNumber: parsed2.nationalNumber,
+      emitCode: parsed2.countryCallingCode,
+      nextPickedCode
+    };
+  }
+  function handleInputChange(raw, nativeEvent) {
+    const input = inputRef.current;
+    if (input) {
+      caretRef.current = {
+        raw,
+        start: input.selectionStart ?? raw.length,
+        end: input.selectionEnd ?? raw.length
+      };
+    }
+    if (!selectedCountry) return;
+    let national = stripLeadingDialCode(raw, dialCode);
+    let emitCode = emitDialCode;
+    let nextPickedCode;
+    const plusIndex = raw.indexOf("+");
+    if (plusIndex === 0) {
+      const derived = deriveFromE164(raw);
+      if (derived) {
+        emitCode = derived.emitCode || emitDialCode;
+        nextPickedCode = derived.nextPickedCode;
+      } else if (nativeEvent?.inputType === "insertFromPaste") {
+        national = "";
+      }
+    } else if (plusIndex > 0) {
+      const pasted = nativeEvent?.inputType === "insertFromPaste" && nativeEvent.data?.startsWith("+") ? nativeEvent.data : void 0;
+      if (pasted) {
+        const derived = deriveFromE164(pasted);
+        const prefixDigits = raw.slice(0, plusIndex).replace(/\D/g, "");
+        const suffixDigits = raw.slice(plusIndex + pasted.length).replace(/\D/g, "");
+        if (derived) {
+          national = prefixDigits + derived.nationalNumber + suffixDigits;
+          emitCode = derived.emitCode || emitDialCode;
+          nextPickedCode = derived.nextPickedCode;
+        } else {
+          national = prefixDigits + suffixDigits;
+        }
+      }
+    }
+    const next = national ? `+${emitCode}${national}` : "";
+    const grew = national.replace(/\D/g, "").length > nationalDigits.length;
+    const isPaste = nativeEvent?.inputType === "insertFromPaste";
+    if (grew && !isPaste && validatePhoneNumberLength(next) === "TOO_LONG") {
+      if (input) {
+        const caret = Math.max(0, (input.selectionStart ?? inputValue.length) - 1);
+        input.value = inputValue;
+        input.setSelectionRange(caret, caret);
+      }
+      caretRef.current = null;
+      return;
+    }
+    if (nextPickedCode) {
+      setPickedCode(nextPickedCode);
+    }
+    onValueChange?.(next);
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "phone-field",
+      "data-invalid": isInvalid || void 0,
+      className: cn(
+        "border-input flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border bg-transparent shadow-xs transition-[color,box-shadow]",
+        "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-3",
+        "data-[invalid=true]:border-destructive data-[invalid=true]:ring-destructive/20 data-[invalid=true]:ring-3",
+        "dark:data-[invalid=true]:border-destructive/50 dark:data-[invalid=true]:ring-destructive/40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "phone-field-country-select",
+              disabled,
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              "aria-controls": open ? listId : void 0,
+              "aria-label": selectedCountry ? `${selectedCountry.name} ${selectedCountry.dialCode}` : void 0,
+              className: cn(
+                "flex h-full shrink-0 cursor-pointer items-center gap-1.5 border-r border-input px-2.5 text-sm font-medium outline-none select-none",
+                "hover:bg-muted",
+                "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+              ),
+              children: selectedCountry && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                /* @__PURE__ */ jsx(
+                  CountryFlag,
+                  {
+                    code: selectedCountry.code,
+                    flagUrl: selectedCountry.flagUrl
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: selectedCountry.dialCode }),
+                /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: 14, className: "text-muted-foreground shrink-0" })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
             {
-              "aria-hidden": "true",
-              size: externalIconSize,
-              className: "shrink-0"
+              className: "w-72 rounded-xl p-0",
+              align: "start",
+              container,
+              children: /* @__PURE__ */ jsxs(Command, { className: "rounded-xl", label: "Search countries", children: [
+                /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center gap-2 border-b px-3", children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { size: 14, className: "text-muted-foreground shrink-0" }),
+                  /* @__PURE__ */ jsx(
+                    Command.Input,
+                    {
+                      placeholder: "Search country...",
+                      onValueChange: handleSearchChange,
+                      className: "placeholder:text-muted-foreground flex h-9 w-full bg-transparent py-2 text-sm outline-none"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { id: listId, children: /* @__PURE__ */ jsxs(Command.List, { ref: listRef, className: "max-h-56 overflow-y-auto p-1", children: [
+                  /* @__PURE__ */ jsx(Command.Empty, { className: "text-muted-foreground py-4 text-center text-sm", children: "No country found." }),
+                  countries.map((country) => /* @__PURE__ */ jsxs(
+                    Command.Item,
+                    {
+                      value: country.code,
+                      keywords: [country.name, country.dialCode],
+                      "data-slot": "phone-field-country-item",
+                      onSelect: () => handleCountrySelect(country.code),
+                      className: cn(
+                        "flex cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none",
+                        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+                        "hover:bg-accent hover:text-accent-foreground"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(CountryFlag, { code: country.code, flagUrl: country.flagUrl }),
+                          /* @__PURE__ */ jsx("span", { className: "truncate", children: country.name })
+                        ] }),
+                        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground tabular-nums", children: country.dialCode }),
+                          selectedCode?.toUpperCase() === country.code.toUpperCase() && /* @__PURE__ */ jsx(
+                            CheckIcon,
+                            {
+                              size: 14,
+                              className: "text-[var(--color-main-blue-primary)] shrink-0"
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    country.code
+                  ))
+                ] }) })
+              ] })
             }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(opens in new tab)" })
-        ] })
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: inputRef,
+            ...inputProps,
+            "data-slot": "phone-field-input",
+            type: "tel",
+            value: inputValue,
+            onChange: (event) => handleInputChange(event.target.value, event.nativeEvent),
+            placeholder,
+            disabled,
+            autoComplete: inputProps.autoComplete ?? "tel",
+            className: cn(
+              "h-full flex-1 rounded-none border-0 bg-transparent shadow-none",
+              "px-3 focus-visible:border-transparent focus-visible:ring-0"
+            )
+          }
+        ),
+        name !== void 0 && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue, "data-slot": "phone-field-hidden-input" })
       ]
     }
   );
@@ -1429,31 +1676,37 @@ function SelectContent({
   className,
   children,
   position = "popper",
+  maxHeight,
+  style,
   ...props
 }) {
+  const resolvedMaxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
   return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
     Select$1.Content,
     {
       "data-slot": "select-content",
       className: cn(
-        "border-border bg-popover text-popover-foreground relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "border-border bg-popover text-popover-foreground relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-md border shadow-md",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
-        position === "popper" && "w-[--radix-select-trigger-width]",
+        position === "popper" && "w-(--radix-select-trigger-width)",
         className
       ),
       position,
+      style: {
+        ...resolvedMaxHeight ? {
+          maxHeight: `min(${resolvedMaxHeight}, var(--radix-select-content-available-height))`
+        } : null,
+        ...style
+      },
       ...props,
       children: [
         /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
         /* @__PURE__ */ jsx(
           Select$1.Viewport,
           {
-            className: cn(
-              "p-1",
-              position === "popper" && "h-[--radix-select-trigger-height]"
-            ),
+            className: cn("scroll-my-1 p-1", position === "popper" && "w-full"),
             children
           }
         ),
@@ -1580,7 +1833,7 @@ var progressVariants = cva("relative flex w-full items-center overflow-x-hidden
     size: "md"
   }
 });
-var progressIndicatorVariants = cva("size-full flex-1 transition-all", {
+var progressIndicatorVariants = cva("size-full flex-1 transition-all rounded-[5px]", {
   variants: {
     variant: {
       default: "bg-[var(--color-main-blue-primary)]",
@@ -1745,7 +1998,8 @@ var ease = {
   smooth: [0.4, 0, 0.2, 1],
   enter: [0, 0, 0.2, 1],
   exit: [0.4, 0, 1, 1],
-  linear: [0, 0, 1, 1]
+  linear: [0, 0, 1, 1],
+  drawer: [0.22, 1, 0.36, 1]
 };
 var spring = {
   gentle: { type: "spring", stiffness: 260, damping: 28 },
@@ -1789,6 +2043,15 @@ var transition = {
   card: {
     duration: duration.fast,
     ease: ease.smooth
+  },
+  // Drawer / slide panel — smooth enter, fast exit
+  drawer: {
+    duration: 0.3,
+    ease: ease.drawer
+  },
+  drawerExit: {
+    duration: 0.2,
+    ease: ease.exit
   }
 };
 var fadeIn = {
@@ -2253,65 +2516,6 @@ function TooltipContent({
     }
   ) });
 }
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
-    Popover$1.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground ring-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-1 rounded-3xl p-4 text-sm shadow-lg ring-1 outline-hidden duration-100",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function PopoverAnchor({ ...props }) {
-  return /* @__PURE__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
-}
-function PopoverHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "popover-header",
-      className: cn("flex flex-col gap-1 text-sm", className),
-      ...props
-    }
-  );
-}
-function PopoverTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "popover-title",
-      className: cn("text-base font-medium", className),
-      ...props
-    }
-  );
-}
-function PopoverDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "popover-description",
-      className: cn("text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 var TEXT_SIZES = [12, 14, 16, 18, 20, 24, 28, 32, 40, 48];
 var TEXT_WEIGHTS = [100, 200, 300, 400, 500, 700, 800, 900];
 function Text({
@@ -2366,7 +2570,7 @@ function DialogTrigger({ ...props }) {
 }
 function DialogPortal({ children, ...props }) {
   const isOpen = useContext(DialogContext);
-  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && children }) });
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpen && children }) });
 }
 function DialogClose({ ...props }) {
   return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
@@ -2393,7 +2597,7 @@ function DialogContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(DialogOverlay, {}, "dialog-overlay"),
     /* @__PURE__ */ jsx(
       Dialog$1.Content,
       {
@@ -2430,7 +2634,8 @@ function DialogContent({
             ]
           }
         )
-      }
+      },
+      "dialog-content"
     )
   ] });
 }
@@ -2533,7 +2738,7 @@ function AlertDialogPortal({
   ...props
 }) {
   const isOpen = useContext(AlertDialogContext);
-  return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { "data-slot": "alert-dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && children }) });
+  return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { "data-slot": "alert-dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpen && children }) });
 }
 function AlertDialogOverlay({
   className,
@@ -2575,7 +2780,8 @@ function AlertDialogContent({
       AlertDialogOverlay,
       {
         className: cn(variant === "dark-glass" && "bg-primary/60 backdrop-blur-md")
-      }
+      },
+      "alert-dialog-overlay"
     ),
     /* @__PURE__ */ jsx(
       AlertDialog$1.Content,
@@ -2609,7 +2815,8 @@ function AlertDialogContent({
             ]
           }
         )
-      }
+      },
+      "alert-dialog-content"
     )
   ] });
 }
@@ -2770,6 +2977,17 @@ function AccordionContent({
     }
   );
 }
+function createMatchFilter(mode) {
+  return (value, search, keywords = []) => {
+    const query = search.toLowerCase().trim();
+    if (!query) return 1;
+    const haystacks = [value, ...keywords].map((s) => s.toLowerCase());
+    const matched = mode === "substring" ? haystacks.some((h) => h.includes(query)) : haystacks.some(
+      (h) => h.startsWith(query) || h.split(/\s+/).some((word) => word.startsWith(query))
+    );
+    return matched ? 1 : 0;
+  };
+}
 function Combobox({
   options,
   value,
@@ -2778,10 +2996,17 @@ function Combobox({
   searchPlaceholder = "Search...",
   emptyMessage = "No results found.",
   disabled = false,
-  className
+  className,
+  container,
+  matchMode = "fuzzy"
 }) {
   const [open, setOpen] = useState(false);
+  const listRef = useRef(null);
   const selected = options.find((opt) => opt.value === value);
+  const filter = matchMode === "fuzzy" ? void 0 : createMatchFilter(matchMode);
+  const handleSearchChange = () => {
+    requestAnimationFrame(() => listRef.current?.scrollTo({ top: 0 }));
+  };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -2801,18 +3026,19 @@ function Combobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-64 rounded-lg p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { className: "rounded-lg", children: [
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-64 rounded-lg p-0", align: "start", container, children: /* @__PURE__ */ jsxs(Command, { className: "rounded-lg", filter, children: [
       /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center gap-2 border-b px-3", children: [
         /* @__PURE__ */ jsx(SearchIcon, { size: 14, className: "text-muted-foreground shrink-0" }),
         /* @__PURE__ */ jsx(
           Command.Input,
           {
             placeholder: searchPlaceholder,
+            onValueChange: handleSearchChange,
             className: "placeholder:text-muted-foreground flex h-9 w-full bg-transparent py-2 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50"
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Command.List, { className: "max-h-56 overflow-y-auto p-1", children: [
+      /* @__PURE__ */ jsxs(Command.List, { ref: listRef, className: "max-h-56 overflow-y-auto p-1", children: [
         /* @__PURE__ */ jsx(Command.Empty, { className: "text-muted-foreground py-4 text-center text-sm", children: emptyMessage }),
         options.map((option) => /* @__PURE__ */ jsxs(
           Command.Item,
@@ -4077,92 +4303,325 @@ var ColorPickerFormat = ({ className, ...props }) => {
           "relative flex w-full items-center gap-1 -space-x-px rounded-md",
           className
         ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            Input2,
-            {
-              className: "bg-muted h-8 w-[5rem] rounded-md px-2 text-xs",
-              readOnly: true,
-              type: "text",
-              value: displayHex
-            }
-          ),
-          /* @__PURE__ */ jsx(PercentageInput, { value: alpha, onChange: setAlpha })
-        ]
-      }
-    );
-  }
-  if (mode === "css") {
-    const rgb = color.rgb().array().map((value) => Math.round(value));
-    return /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-md", className), ...props, children: /* @__PURE__ */ jsx(
-      Input2,
-      {
-        className: "bg-muted h-8 w-full rounded-md px-2 text-xs shadow-none",
-        readOnly: true,
-        type: "text",
-        value: `rgba(${rgb.join(", ")}, ${alpha}%)`,
-        ...props
-      }
-    ) });
-  }
-  return null;
-};
-var ColorPickerPresets = ({ colors, className, ...props }) => {
-  const { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
-  const currentHex = Color.hsl(hue, saturation, lightness, alpha / 100).hex();
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1.5", className), ...props, children: colors.map((hex) => {
-    const isActive = Color(hex).hex().toUpperCase() === currentHex.toUpperCase();
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "size-5 cursor-pointer rounded-[3px] border transition-all",
-          "hover:scale-110 hover:shadow-md",
-          isActive && "ring-ring ring-offset-background ring-2 ring-offset-1"
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            Input2,
+            {
+              className: "bg-muted h-8 w-[5rem] rounded-md px-2 text-xs",
+              readOnly: true,
+              type: "text",
+              value: displayHex
+            }
+          ),
+          /* @__PURE__ */ jsx(PercentageInput, { value: alpha, onChange: setAlpha })
+        ]
+      }
+    );
+  }
+  if (mode === "css") {
+    const rgb = color.rgb().array().map((value) => Math.round(value));
+    return /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-md", className), ...props, children: /* @__PURE__ */ jsx(
+      Input2,
+      {
+        className: "bg-muted h-8 w-full rounded-md px-2 text-xs shadow-none",
+        readOnly: true,
+        type: "text",
+        value: `rgba(${rgb.join(", ")}, ${alpha}%)`,
+        ...props
+      }
+    ) });
+  }
+  return null;
+};
+var ColorPickerPresets = ({ colors, className, ...props }) => {
+  const { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+  const currentHex = Color.hsl(hue, saturation, lightness, alpha / 100).hex();
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1.5", className), ...props, children: colors.map((hex) => {
+    const isActive = Color(hex).hex().toUpperCase() === currentHex.toUpperCase();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "size-5 cursor-pointer rounded-[3px] border transition-all",
+          "hover:scale-110 hover:shadow-md",
+          isActive && "ring-ring ring-offset-background ring-2 ring-offset-1"
+        ),
+        style: { backgroundColor: hex },
+        onClick: () => {
+          const color = Color(hex);
+          const [h, s, l] = color.hsl().array();
+          setHue(h);
+          setSaturation(s);
+          setLightness(l);
+          setAlpha(100);
+        },
+        "aria-label": hex,
+        title: hex
+      },
+      hex
+    );
+  }) });
+};
+ColorPickerPresets.displayName = "ColorPickerPresets";
+function Calendar({
+  className,
+  classNames,
+  modifiersClassNames,
+  showOutsideDays = true,
+  captionLayout = "dropdown",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  fromYear,
+  toYear,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const resolvedComponents = useMemo(
+    () => ({
+      Root: ({ className: className2, rootRef, ...rootProps }) => {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: rootRef,
+            className: cn(className2),
+            ...rootProps
+          }
+        );
+      },
+      Chevron: ({ className: className2, orientation, ...chevronProps }) => {
+        if (orientation === "left") {
+          return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...chevronProps });
+        }
+        if (orientation === "right") {
+          return /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4", className2), ...chevronProps });
+        }
+        return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...chevronProps });
+      },
+      DayButton: (dayButtonProps) => /* @__PURE__ */ jsx(CalendarDayButton, { locale, ...dayButtonProps }),
+      WeekNumber: ({ children, ...weekNumberProps }) => {
+        return /* @__PURE__ */ jsx("td", { ...weekNumberProps, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+      },
+      ...components
+    }),
+    [locale, components]
+  );
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "group/calendar bg-background p-3 font-sans [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      startMonth: new Date(fromYear ?? 1900, 0),
+      endMonth: new Date(toYear ?? 2100, 11),
+      locale,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-3 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-3", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-2",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-7 p-0 select-none opacity-50 aria-disabled:opacity-30 transition-opacity duration-150 hover:opacity-100",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-7 p-0 select-none opacity-50 aria-disabled:opacity-30 transition-opacity duration-150 hover:opacity-100",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size) tracking-tight",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-semibold",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "font-semibold select-none",
+          captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        weekdays: cn("flex gap-1", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.75rem] font-semibold text-muted-foreground/70 select-none tracking-wide",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full gap-1", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.75rem] text-muted-foreground/50 select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-md bg-primary/8 after:absolute after:inset-y-0 after:right-0 after:w-3 after:bg-primary/8",
+          defaultClassNames.range_start
         ),
-        style: { backgroundColor: hex },
-        onClick: () => {
-          const color = Color(hex);
-          const [h, s, l] = color.hsl().array();
-          setHue(h);
-          setSaturation(s);
-          setLightness(l);
-          setAlpha(100);
-        },
-        "aria-label": hex,
-        title: hex
+        range_middle: cn("rounded-none bg-primary/8", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-md bg-primary/8 after:absolute after:inset-y-0 after:left-0 after:w-3 after:bg-primary/8",
+          defaultClassNames.range_end
+        ),
+        today: cn("rounded-md bg-accent text-accent-foreground", defaultClassNames.today),
+        outside: cn(
+          "text-muted-foreground/50 aria-selected:text-muted-foreground/50",
+          defaultClassNames.outside
+        ),
+        disabled: cn("text-muted-foreground/40 opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
       },
-      hex
-    );
-  }) });
-};
-ColorPickerPresets.displayName = "ColorPickerPresets";
-function DatePicker({
-  mode = "single",
-  selected,
-  onSelect,
-  placeholder = "Pick a date",
-  disabled = false,
+      modifiersClassNames: {
+        preview_start: "relative isolate z-0 rounded-l-md bg-primary/8 after:absolute after:inset-y-0 after:right-0 after:w-3 after:bg-primary/8",
+        preview_middle: "rounded-none bg-primary/8",
+        preview_end: "relative isolate z-0 rounded-r-md bg-primary/8 after:absolute after:inset-y-0 after:left-0 after:w-3 after:bg-primary/8",
+        ...modifiersClassNames
+      },
+      components: resolvedComponents,
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
   className,
-  fromDate,
-  toDate
+  day,
+  modifiers,
+  locale,
+  ...props
 }) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  const isPreviewEdge = Boolean(
+    (modifiers.preview_start || modifiers.preview_end) && !modifiers.selected
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon-sm",
+      "data-day": day.date.toLocaleDateString(locale?.code),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      "data-preview-middle": Boolean(modifiers.preview_middle),
+      "data-preview-edge": isPreviewEdge,
+      className: cn(
+        "group-data-[focused=true]/day:ring-primary/40 data-[preview-edge=true]:ring-primary/50 data-[preview-edge=true]:text-primary data-[preview-middle=true]:text-primary data-[range-end=true]:!bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:!bg-primary/8 data-[range-middle=true]:text-foreground data-[range-start=true]:!bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:!bg-primary data-[selected-single=true]:text-primary-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 !rounded-md border-0 !bg-transparent leading-none font-normal transition-colors duration-150 group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:rounded-md group-data-[focused=true]/day:ring-[2px] hover:!bg-transparent data-[preview-edge=true]:rounded-md data-[preview-edge=true]:font-medium data-[preview-edge=true]:ring-[2px] data-[preview-middle=true]:font-medium data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[selected-single=true]:rounded-md [&>span]:text-xs [&>span]:font-medium [&>span]:opacity-75",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DatePicker(props) {
+  const {
+    placeholder = "Pick a date",
+    disabled = false,
+    className,
+    fromDate,
+    toDate,
+    numberOfMonths = 1
+  } = props;
   const [open, setOpen] = useState(false);
+  const [awaitingRangeEnd, setAwaitingRangeEnd] = useState(false);
+  const [previewDate, setPreviewDate] = useState(void 0);
   const label = useMemo(() => {
-    if (mode === "range") {
-      const range = selected;
-      if (range?.from && range?.to)
-        return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
-      if (range?.from) return `${format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
-      return placeholder;
-    }
-    const date = selected;
-    return date ? format(date, "MMM d, yyyy") : placeholder;
-  }, [mode, selected, placeholder]);
-  const hasValue = mode === "range" ? !!selected?.from : !!selected;
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    if (props.mode === "range") {
+      const range = props.selected;
+      if (!range?.from) return placeholder;
+      if (!range.to) return `${format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
+      return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
+    }
+    return props.selected ? format(props.selected, "MMM d, yyyy") : placeholder;
+  }, [props.mode, props.selected, placeholder]);
+  const handleOpenChange = (nextOpen) => {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      setAwaitingRangeEnd(false);
+      setPreviewDate(void 0);
+    }
+  };
+  const handleRangeSelect = (range, triggerDate) => {
+    if (props.mode !== "range") return;
+    const emit = props.onSelect;
+    if (!awaitingRangeEnd) {
+      setAwaitingRangeEnd(true);
+      emit?.({ from: triggerDate, to: void 0 });
+      return;
+    }
+    emit?.(range);
+    if (!range?.from || !range.to) {
+      setAwaitingRangeEnd(!!range?.from);
+      return;
+    }
+    setAwaitingRangeEnd(false);
+    setPreviewDate(void 0);
+    setOpen(false);
+  };
+  const rangeFrom = props.mode === "range" ? props.selected?.from : void 0;
+  const previewModifiers = useMemo(() => {
+    if (!awaitingRangeEnd || !rangeFrom || !previewDate) return void 0;
+    if (isSameDay(rangeFrom, previewDate)) return void 0;
+    const [start, end] = previewDate < rangeFrom ? [previewDate, rangeFrom] : [rangeFrom, previewDate];
+    return {
+      preview_start: start,
+      preview_middle: { after: start, before: end },
+      preview_end: end
+    };
+  }, [awaitingRangeEnd, rangeFrom, previewDate]);
+  const handleDayPreview = (day, dayModifiers) => {
+    if (!awaitingRangeEnd) return;
+    if (dayModifiers.disabled || dayModifiers.hidden) return;
+    setPreviewDate((current) => current && isSameDay(current, day) ? current : day);
+  };
+  const dateConstraints = useMemo(() => {
+    const disabledMatchers = [];
+    if (fromDate) disabledMatchers.push({ before: fromDate });
+    if (toDate) disabledMatchers.push({ after: toDate });
+    return {
+      ...disabledMatchers.length > 0 && { disabled: disabledMatchers },
+      ...fromDate && { startMonth: fromDate },
+      ...toDate && { endMonth: toDate }
+    };
+  }, [fromDate, toDate]);
+  const hasValue = props.mode === "range" ? !!props.selected?.from : !!props.selected;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
@@ -4180,36 +4639,36 @@ function DatePicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { "data-slot": "date-picker-content", className: "w-auto p-0", align: "start", children: mode === "range" ? /* @__PURE__ */ jsx(
-      Calendar,
-      {
-        ...{
+    /* @__PURE__ */ jsx(PopoverContent, { "data-slot": "date-picker-content", className: "w-auto p-0", align: "start", children: props.mode === "range" ? (
+      // Clearing the preview on the wrapper instead of per day
+      // avoids the blank frame `onDayMouseLeave` would cause when
+      // the pointer travels from one day to the next.
+      /* @__PURE__ */ jsx("div", { onMouseLeave: () => setPreviewDate(void 0), children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
           mode: "range",
-          selected,
-          onSelect: (range) => {
-            onSelect?.(range);
-            if (range?.to) setOpen(false);
-          },
-          fromDate,
-          toDate,
-          numberOfMonths: 2,
-          initialFocus: true
+          selected: props.selected,
+          onSelect: handleRangeSelect,
+          modifiers: previewModifiers,
+          onDayMouseEnter: handleDayPreview,
+          onDayFocus: handleDayPreview,
+          numberOfMonths,
+          autoFocus: true,
+          ...dateConstraints
         }
-      }
+      ) })
     ) : /* @__PURE__ */ jsx(
       Calendar,
       {
-        ...{
-          mode: "single",
-          selected,
-          onSelect: (date) => {
-            onSelect?.(date);
-            setOpen(false);
-          },
-          fromDate,
-          toDate,
-          initialFocus: true
-        }
+        mode: "single",
+        selected: props.selected,
+        onSelect: (date) => {
+          props.onSelect?.(date);
+          setOpen(false);
+        },
+        numberOfMonths,
+        autoFocus: true,
+        ...dateConstraints
       }
     ) })
   ] });
@@ -4334,6 +4793,7 @@ var Navbar = forwardRef(
     notifications,
     avatarSrc,
     avatarFallback,
+    showUtilityBar = true,
     onNavLinkClick,
     onSearchClick,
     onHelpClick,
@@ -4405,7 +4865,7 @@ var Navbar = forwardRef(
             ] }),
             /* @__PURE__ */ jsx("nav", { className: "ml-auto flex h-full items-center", children: navigationLinks.map((link, i) => /* @__PURE__ */ jsx(NavLinkItem, { link, onNavLinkClick }, i)) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "bg-background border-border border-b px-4 md:px-6", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-9 max-w-screen-2xl items-center justify-between", children: [
+          showUtilityBar && /* @__PURE__ */ jsx("div", { className: "bg-background border-border border-b px-4 md:px-6", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-9 max-w-screen-2xl items-center justify-between", children: [
             /* @__PURE__ */ jsx("nav", { className: "flex items-center", children: utilityLinks.map((link, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx("span", { className: "text-border mx-3 select-none", children: "|" }),
               /* @__PURE__ */ jsx(
@@ -4650,6 +5110,8 @@ function NavigationMenuIndicator({
     }
   );
 }
+
+// src/components/authorization/policy.ts
 function matchPermission(pattern, permission) {
   if (pattern === "*") return true;
   if (pattern === permission) return true;
@@ -4665,41 +5127,46 @@ function matchesAny(permissionSet, permission) {
   }
   return false;
 }
+function can(permissionSet, perms, mode = "any") {
+  const list = Array.isArray(perms) ? perms : [perms];
+  if (list.length === 0) return false;
+  if (permissionSet.has("*")) return true;
+  if (mode === "all") {
+    return list.every((p) => matchesAny(permissionSet, p));
+  }
+  return list.some((p) => matchesAny(permissionSet, p));
+}
 var AbilityContext = createContext(void 0);
 AbilityContext.displayName = "AbilityContext";
 function AbilityProvider({ children, permissions }) {
   const [permissionSet, setPermissionSet] = useState(
     () => new Set(permissions ?? [])
   );
-  const can = useCallback(
-    (perms, mode = "any") => {
-      const list = Array.isArray(perms) ? perms : [perms];
-      if (list.length === 0) return false;
-      if (permissionSet.has("*")) return true;
-      if (mode === "all") {
-        return list.every((p) => matchesAny(permissionSet, p));
-      }
-      return list.some((p) => matchesAny(permissionSet, p));
-    },
+  const [imperativelyResolved, setImperativelyResolved] = useState(false);
+  const status = permissions !== void 0 || imperativelyResolved ? "ready" : "loading";
+  const can2 = useCallback(
+    (perms, mode = "any") => can(permissionSet, perms, mode),
     [permissionSet]
   );
   const setAbilities = useCallback((perms) => {
     setPermissionSet(new Set(perms));
+    setImperativelyResolved(true);
   }, []);
   const clearAbilities = useCallback(() => {
     setPermissionSet(/* @__PURE__ */ new Set());
+    setImperativelyResolved(true);
   }, []);
-  const syncedKey = useRef(permissions ? permissions.join("|") : null);
+  const permissionKey = permissions === void 0 ? null : [...permissions].sort().join("|");
+  const syncedKey = useRef(permissionKey);
   useEffect(() => {
-    if (permissions === void 0) return;
-    const key = permissions.join("|");
-    if (key === syncedKey.current) return;
-    syncedKey.current = key;
+    if (permissionKey === null) return;
+    if (permissionKey === syncedKey.current) return;
+    syncedKey.current = permissionKey;
     setPermissionSet(new Set(permissions));
-  }, [permissions]);
+  }, [permissionKey, permissions]);
   const value = useMemo(
-    () => ({ can, setAbilities, clearAbilities }),
-    [can, setAbilities, clearAbilities]
+    () => ({ can: can2, setAbilities, clearAbilities, status }),
+    [can2, setAbilities, clearAbilities, status]
   );
   return /* @__PURE__ */ jsx(AbilityContext.Provider, { value, children });
 }
@@ -4711,36 +5178,194 @@ function useAbility() {
   return context;
 }
 function useCan(permissions, mode = "any") {
-  const { can } = useAbility();
-  return can(permissions, mode);
+  const { can: can2 } = useAbility();
+  return can2(permissions, mode);
+}
+function useAbilityStatus() {
+  return useAbility().status;
+}
+
+// src/components/authorization/permissions.generated.ts
+var KNOWN_PERMISSIONS = [];
+
+// src/components/authorization/permission-catalog.ts
+var CATALOG = new Set(KNOWN_PERMISSIONS);
+var warned = /* @__PURE__ */ new Set();
+function warnUnknownPermission(permission) {
+  if (process.env.NODE_ENV === "production") return;
+  if (CATALOG.size === 0) return;
+  const requested = Array.isArray(permission) ? permission : [permission];
+  for (const entry of requested) {
+    if (entry.includes("*")) continue;
+    if (CATALOG.has(entry) || warned.has(entry)) continue;
+    warned.add(entry);
+    console.warn(
+      `[Can] Unknown permission "${entry}". It is not in the generated permission catalog. Check for a typo, or regenerate the catalog with \`pnpm generate-permissions\`.`
+    );
+  }
+}
+var FOCUS_TRAVERSAL_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape"]);
+function blockInteraction(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function blockNonTraversalKey(event) {
+  if (!FOCUS_TRAVERSAL_KEYS.has(event.key)) blockInteraction(event);
+}
+var warnedRenderPropMisuse = /* @__PURE__ */ new Set();
+function warnRenderPropVoidsProps(voided) {
+  if (process.env.NODE_ENV === "production") return;
+  if (voided.length === 0) return;
+  const key = voided.join(",");
+  if (warnedRenderPropMisuse.has(key)) return;
+  warnedRenderPropMisuse.add(key);
+  console.warn(
+    `[Can] \`children\` is a function, so ${voided.map((prop) => `\`${prop}\``).join(", ")} ${voided.length === 1 ? "is" : "are"} ignored. A render prop owns every state: read \`allowed\` and \`status\` and render the disabled, loading and denied cases yourself, or pass an element instead of a function.`
+  );
+}
+function disableElement(child) {
+  return cloneElement(child, {
+    "aria-disabled": "true",
+    className: cn(child.props.className, "cursor-not-allowed opacity-50"),
+    onClickCapture: blockInteraction,
+    onKeyDownCapture: blockNonTraversalKey,
+    onKeyUpCapture: blockNonTraversalKey,
+    onPointerDownCapture: blockInteraction,
+    onMouseDownCapture: blockInteraction
+  });
+}
+function InteractionFirewall({ children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "can-blocked",
+      className: "contents",
+      onClickCapture: blockInteraction,
+      onPointerDownCapture: blockInteraction,
+      onMouseDownCapture: blockInteraction,
+      onKeyDownCapture: blockNonTraversalKey,
+      onKeyUpCapture: blockNonTraversalKey,
+      children
+    }
+  );
+}
+function DisabledSubtree({
+  children,
+  className,
+  ...props
+}) {
+  const { "data-slot": _incomingDataSlot, ...restProps } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "can-disabled",
+      "aria-disabled": "true",
+      className: cn(
+        "inline-flex cursor-not-allowed opacity-50",
+        "*:pointer-events-none",
+        className
+      ),
+      onClickCapture: blockInteraction,
+      onPointerDownCapture: blockInteraction,
+      onMouseDownCapture: blockInteraction,
+      onKeyDownCapture: blockNonTraversalKey,
+      onKeyUpCapture: blockNonTraversalKey,
+      ...restProps,
+      children
+    }
+  );
 }
-function Can({ permission, mode = "any", negate = false, fallback = null, children }) {
-  const { can } = useAbility();
-  const hasPermission = can(permission, mode);
+function Can({
+  permission,
+  mode = "any",
+  negate = false,
+  behavior = "hide",
+  reason = null,
+  fallback = null,
+  loading,
+  children
+}) {
+  warnUnknownPermission(permission);
+  const { can: can2, status } = useAbility();
+  const hasPermission = status === "ready" && can2(permission, mode);
   const show = negate ? !hasPermission : hasPermission;
   if (typeof children === "function") {
-    return /* @__PURE__ */ jsx(Fragment$1, { children: children(show) });
+    warnRenderPropVoidsProps([
+      ...behavior === "disable" ? ["behavior='disable'"] : [],
+      ...reason !== null ? ["reason"] : [],
+      ...fallback !== null ? ["fallback"] : [],
+      ...loading !== void 0 ? ["loading"] : []
+    ]);
+    return /* @__PURE__ */ jsx(Fragment$1, { children: children({ allowed: show, status }) });
+  }
+  if (status === "loading" && loading !== void 0) {
+    return /* @__PURE__ */ jsx(Fragment$1, { children: loading });
   }
-  return show ? /* @__PURE__ */ jsx(Fragment$1, { children }) : /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+  if (show) {
+    return /* @__PURE__ */ jsx(Fragment$1, { children });
+  }
+  if (behavior === "disable") {
+    if (isValidElement(children) && children.type !== Fragment) {
+      const disabledChild = disableElement(children);
+      if (reason === null) {
+        return /* @__PURE__ */ jsx(InteractionFirewall, { children: disabledChild });
+      }
+      return /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(InteractionFirewall, { children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: disabledChild }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: reason })
+      ] });
+    }
+    if (reason === null) {
+      return /* @__PURE__ */ jsx(DisabledSubtree, { children });
+    }
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DisabledSubtree, { children }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: reason })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
 }
 Can.displayName = "Can";
-function CanNot({ permission, mode = "any", fallback = null, children }) {
-  return /* @__PURE__ */ jsx(Can, { permission, mode, negate: true, fallback, children });
+function CanNot({
+  permission,
+  mode = "any",
+  behavior = "hide",
+  reason = null,
+  fallback = null,
+  loading,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Can,
+    {
+      permission,
+      mode,
+      negate: true,
+      behavior,
+      reason,
+      fallback,
+      loading,
+      children
+    }
+  );
 }
 CanNot.displayName = "CanNot";
-var MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(void 0);
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
   useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return !!isMobile;
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+
+// src/hooks/use-mobile.ts
+function useIsMobile() {
+  return useMediaQuery("(max-width: 767px)");
 }
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "sheet", ...props });
@@ -4933,6 +5558,39 @@ function SidebarProvider({
     }
   ) });
 }
+function SidebarResizeHandle() {
+  const dragRef = useRef(null);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-resize-handle",
+      className: "absolute inset-y-0 right-0 w-1 cursor-col-resize opacity-0 transition-opacity hover:opacity-100 hover:bg-sidebar-border group-data-[state=collapsed]:hidden",
+      onPointerDown: (e) => {
+        e.preventDefault();
+        const wrapper = e.currentTarget.closest('[data-slot="sidebar-wrapper"]');
+        if (!wrapper) return;
+        const container = e.currentTarget.closest('[data-slot="sidebar-container"]');
+        const gap = container?.parentElement?.querySelector('[data-slot="sidebar-gap"]') ?? null;
+        const currentWidth = container ? parseFloat(getComputedStyle(container).width) : 256;
+        if (container) container.style.transition = "none";
+        if (gap) gap.style.transition = "none";
+        dragRef.current = { startX: e.clientX, startWidth: currentWidth, wrapper, container: container ?? null, gap };
+        e.currentTarget.setPointerCapture(e.pointerId);
+      },
+      onPointerMove: (e) => {
+        if (!dragRef.current) return;
+        const { startX, startWidth, wrapper } = dragRef.current;
+        const newWidth = Math.max(160, Math.min(480, startWidth + (e.clientX - startX)));
+        wrapper.style.setProperty("--sidebar-width", `${newWidth}px`);
+      },
+      onPointerUp: () => {
+        if (dragRef.current?.container) dragRef.current.container.style.transition = "";
+        if (dragRef.current?.gap) dragRef.current.gap.style.transition = "";
+        dragRef.current = null;
+      }
+    }
+  );
+}
 function Sidebar({
   side = "left",
   variant = "sidebar",
@@ -5003,7 +5661,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -5015,15 +5673,18 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                "data-sidebar": "sidebar",
-                "data-slot": "sidebar-inner",
-                className: "bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1",
-                children
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-sidebar": "sidebar",
+                  "data-slot": "sidebar-inner",
+                  className: "bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1",
+                  children
+                }
+              ),
+              /* @__PURE__ */ jsx(SidebarResizeHandle, {})
+            ]
           }
         )
       ]
@@ -5140,7 +5801,7 @@ function SidebarContent({ className, ...props }) {
       "data-slot": "sidebar-content",
       "data-sidebar": "content",
       className: cn(
-        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:var(--radius-xl)] group-data-[collapsible=icon]:overflow-hidden",
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden [--radius:var(--radius-xl)] group-data-[collapsible=icon]:overflow-hidden",
         className
       ),
       ...props
@@ -5435,6 +6096,7 @@ function AppShell({
   onItemClick,
   brandName = "Total Portal",
   showHeader = true,
+  header,
   open,
   onOpenChange,
   defaultOpen,
@@ -5455,7 +6117,7 @@ function AppShell({
             /* @__PURE__ */ jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0" }),
             /* @__PURE__ */ jsx(SidebarBrand, { brandName })
           ] }),
-          /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => {
+          /* @__PURE__ */ jsx(SidebarContent, { className: "overflow-x:hidden", children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => {
             const menuItem = /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
               SidebarMenuButton,
               {
@@ -5484,7 +6146,7 @@ function AppShell({
           }) }) }) }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-          showHeader ? /* @__PURE__ */ jsxs("header", { className: "flex h-14 items-center gap-2 border-b px-4", children: [
+          header ? header : showHeader ? /* @__PURE__ */ jsxs("header", { className: "flex h-14 items-center gap-2 border-b px-4", children: [
             /* @__PURE__ */ jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0 md:hidden" }),
             /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: brandName })
           ] }) : /* @__PURE__ */ jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0 md:hidden" }),
@@ -6098,14 +6760,9 @@ var eventCalendarStyles = `
     font-weight: 600;
 }
 
-/* \u2500\u2500 Event modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500 Event modal \u2014 hidden; replaced by TCCE Popover in event-calendar.tsx \u2500\u2500 */
 .sx-tcce .sx__event-modal {
-    border-radius: var(--border-radius-article, 0.875rem);
-    border: 1px solid var(--color-border);
-    font-size: 13px;
-    min-width: 220px;
-    max-width: 300px;
-    background: var(--color-background);
+    display: none !important;
 }
 .sx-tcce .sx__event-modal__title {
     font-size: 14px;
@@ -6250,8 +6907,43 @@ function useEventCalendar({
     return () => unsubscribe?.();
   }, []);
   return {
-    calendarApp: calendarApp.current
+    calendarApp: calendarApp.current,
+    eventModal: eventModal.current
+  };
+}
+var EVENT_COLOR = {
+  default: "#22205f",
+  primary: "#22205f",
+  success: "#00a824",
+  warning: "#c8a23b",
+  danger: "#ea3a3d"
+};
+function getFixedAnchorRect(el) {
+  const rect = el.getBoundingClientRect();
+  let ancestor = el.parentElement;
+  while (ancestor && ancestor !== document.documentElement) {
+    if (window.getComputedStyle(ancestor).transform !== "none") {
+      const cb = ancestor.getBoundingClientRect();
+      return new DOMRect(rect.left - cb.left, rect.top - cb.top, rect.width, rect.height);
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return rect;
+}
+function formatEventTime(start, end) {
+  const isAllDay = start.length === 10;
+  if (isAllDay) {
+    const date = /* @__PURE__ */ new Date(`${start}T00:00:00`);
+    return date.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
+  }
+  const fmt = (s) => {
+    const [, time] = s.split(" ");
+    const [h, m] = time.split(":").map(Number);
+    const ampm = h >= 12 ? "PM" : "AM";
+    const hour = h % 12 || 12;
+    return `${hour}:${m.toString().padStart(2, "0")} ${ampm}`;
   };
+  return `${fmt(start)} \u2013 ${fmt(end)}`;
 }
 function EventCalendar({
   events,
@@ -6264,26 +6956,116 @@ function EventCalendar({
   className
 }) {
   const [currentView, setCurrentView] = useState(defaultView);
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [anchorRect, setAnchorRect] = useState(null);
+  const clickedEventElRef = useRef(false);
   const handleViewChange = useCallback(
     (view) => {
       setCurrentView(view);
       onViewChange?.(view);
     },
-    [onViewChange]
+    [onViewChange]
+  );
+  const handleEventClick = useCallback(
+    (event) => {
+      setSelectedEvent(event);
+      onEventClick?.(event);
+    },
+    [onEventClick]
+  );
+  const { calendarApp, eventModal } = useEventCalendar({
+    events,
+    defaultView,
+    defaultDate,
+    locale,
+    onEventClick: handleEventClick,
+    onEventCreate,
+    onViewChange: handleViewChange
+  });
+  useEffect(() => {
+    const unsub = eventModal.calendarEventElement.subscribe((el) => {
+      if (!el) {
+        if (clickedEventElRef.current) {
+          clickedEventElRef.current = false;
+        } else {
+          setSelectedEvent(null);
+          setAnchorRect(null);
+        }
+      } else {
+        setAnchorRect(getFixedAnchorRect(el));
+      }
+    });
+    return unsub;
+  }, [eventModal]);
+  const handlePopoverOpenChange = useCallback(
+    (open) => {
+      if (!open) {
+        eventModal.close();
+        setSelectedEvent(null);
+        setAnchorRect(null);
+      }
+    },
+    [eventModal]
   );
-  const { calendarApp } = useEventCalendar({
-    events,
-    defaultView,
-    defaultDate,
-    locale,
-    onEventClick,
-    onEventCreate,
-    onViewChange: handleViewChange
-  });
   const contextValue = useMemo(() => ({ currentView }), [currentView]);
   return /* @__PURE__ */ jsxs(EventCalendarContext.Provider, { value: contextValue, children: [
     /* @__PURE__ */ jsx("style", { href: "tcce-event-calendar", precedence: "default", children: eventCalendarStyles }),
-    /* @__PURE__ */ jsx("div", { "data-slot": "event-calendar", className: cn("sx-tcce w-full", className), children: /* @__PURE__ */ jsx(ScheduleXCalendar, { calendarApp: calendarApp ?? null }) })
+    /* @__PURE__ */ jsxs(Popover, { open: !!selectedEvent && !!anchorRect, onOpenChange: handlePopoverOpenChange, children: [
+      /* @__PURE__ */ jsx("div", { "data-slot": "event-calendar", className: cn("sx-tcce w-full", className), children: /* @__PURE__ */ jsx(ScheduleXCalendar, { calendarApp: calendarApp ?? null }) }),
+      anchorRect && /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "fixed",
+            top: anchorRect.top,
+            left: anchorRect.left,
+            width: anchorRect.width,
+            height: anchorRect.height,
+            pointerEvents: "none"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          side: "right",
+          align: "start",
+          className: "w-65 gap-2",
+          onPointerDownOutside: (e) => {
+            const target = e.target;
+            const isEventEl = target.closest(
+              ".sx__month-grid-event, .sx__time-grid-event, .sx__month-agenda-event"
+            );
+            if (isEventEl) {
+              e.preventDefault();
+              clickedEventElRef.current = true;
+            }
+          },
+          children: selectedEvent && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "size-2 shrink-0 rounded-full",
+                    style: {
+                      backgroundColor: EVENT_COLOR[selectedEvent.color ?? "default"]
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-heading text-sm font-semibold leading-tight", children: selectedEvent.title })
+              ] }),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Edit event", children: /* @__PURE__ */ jsx(Pencil, { size: 14 }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Clock, { size: 13, className: "shrink-0" }),
+              /* @__PURE__ */ jsx("span", { children: formatEventTime(selectedEvent.start, selectedEvent.end) })
+            ] }),
+            selectedEvent.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: selectedEvent.description })
+          ] })
+        }
+      )
+    ] })
   ] });
 }
 function useAppForm(schema, options) {
@@ -6362,7 +7144,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "text-foreground has([role=checkbox])]:pr-0 h-12 px-3 text-left align-middle font-medium whitespace-nowrap",
+        "text-foreground has-[[role=checkbox]]:pr-0 h-12 px-3 text-left align-middle font-medium whitespace-nowrap",
         className
       ),
       ...props
@@ -6375,7 +7157,7 @@ function TableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn(
-        "has([role=checkbox])]:pr-0 p-3 align-middle whitespace-nowrap",
+        "has-[[role=checkbox]]:pr-0 p-3 align-middle whitespace-nowrap",
         className
       ),
       ...props
@@ -6625,18 +7407,6 @@ function TablePaginationBase({
   );
 }
 var TablePagination = memo(TablePaginationBase);
-function useMediaQuery(query) {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mql = window.matchMedia(query);
-    setMatches(mql.matches);
-    const handler = (e) => setMatches(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, [query]);
-  return matches;
-}
 var TableContext = createContext(null);
 function useTableContext() {
   const ctx = useContext(TableContext);
@@ -6648,6 +7418,13 @@ function useTableContext() {
 function useTableContextSafe() {
   return useContext(TableContext);
 }
+
+// src/components/compounds/Table/cell-size-class.ts
+var cellSizeClass = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-6 py-3 text-sm"
+};
 var cardPadding = {
   sm: "p-3",
   md: "p-4",
@@ -6985,6 +7762,9 @@ function DataTableHeaderCell({ header }) {
       },
       className: cn(
         "bg-primary text-primary-foreground",
+        // Same density padding as the body cells: without it the header
+        // label and the cell value below it sit at different offsets.
+        cellSizeClass[meta.size ?? tableSize],
         canResize && "relative",
         meta.align === "center" && "text-center",
         meta.align === "right" && "text-right",
@@ -7374,11 +8154,6 @@ function useTablePersistence({
     persistDensity
   };
 }
-var cellSizeClass = {
-  sm: "px-1 py-0 text-xs",
-  md: "px-5 py-2.5 text-sm",
-  lg: "px-6 py-3 text-sm"
-};
 function resolveClassName(value, row) {
   return typeof value === "function" ? value(row) : value;
 }
@@ -7419,6 +8194,13 @@ function DataTableCell({
     }
   );
 }
+var INTERACTIVE_CELL_CONTENT = 'button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"], [role="link"]';
+function isInteractiveCellEvent(event) {
+  const target = event.target;
+  if (!(target instanceof Element)) return false;
+  const match = target.closest(INTERACTIVE_CELL_CONTENT);
+  return match !== null && match !== event.currentTarget;
+}
 function DataTableRow({ row, classNames }) {
   const { onRowClick, variant } = useTableContext();
   const clickable = Boolean(onRowClick);
@@ -7431,12 +8213,15 @@ function DataTableRow({ row, classNames }) {
       "data-clickable": clickable || void 0,
       role: clickable ? "button" : void 0,
       tabIndex: clickable ? 0 : void 0,
-      onClick: clickable ? () => onRowClick?.(row.original) : void 0,
+      onClick: clickable ? (e) => {
+        if (isInteractiveCellEvent(e)) return;
+        onRowClick?.(row.original);
+      } : void 0,
       onKeyDown: clickable ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onRowClick?.(row.original);
-        }
+        if (e.key !== "Enter" && e.key !== " ") return;
+        if (isInteractiveCellEvent(e)) return;
+        e.preventDefault();
+        onRowClick?.(row.original);
       } : void 0,
       className: cn("hover:bg-muted", clickable && "cursor-pointer", rowClassName),
       children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(DataTableCell, { cell, cellClassName }, cell.id))
@@ -8037,7 +8822,7 @@ function DataTableFooter({ pagination, selectedCount, className }) {
       className: cn("flex items-center justify-between border-t px-4 py-2", className),
       children: [
         selectedCount != null && selectedCount > 0 && /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "text-muted-foreground text-xs", children: `${selectedCount} row${selectedCount > 1 ? "s" : ""} selected` }),
-        /* @__PURE__ */ jsx(TablePagination, { ...pagination })
+        /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(TablePagination, { ...pagination }) })
       ]
     }
   );
@@ -8146,18 +8931,21 @@ function DataTableSearch({
   debounce = 300
 }) {
   const ctx = useTableContextSafe();
-  const [inputValue, setInputValue] = useState("");
   const globalFilter = ctx?.globalFilter;
   const setGlobalFilter = ctx?.setGlobalFilter;
+  const committedValue = globalFilter ?? "";
+  const [inputValue, setInputValue] = useState(committedValue);
   useEffect(() => {
-    if (globalFilter === "") setInputValue("");
+    if (globalFilter === void 0) return;
+    setInputValue(globalFilter);
   }, [globalFilter]);
   useEffect(() => {
+    if (inputValue === committedValue) return;
     const timer = setTimeout(() => {
       setGlobalFilter?.(inputValue);
     }, debounce);
     return () => clearTimeout(timer);
-  }, [inputValue, debounce, setGlobalFilter]);
+  }, [inputValue, committedValue, debounce, setGlobalFilter]);
   const handleClear = () => {
     setInputValue("");
     setGlobalFilter?.("");
@@ -8178,7 +8966,13 @@ function DataTableSearch({
         onChange: (e) => setInputValue(e.target.value),
         placeholder,
         "aria-label": placeholder,
-        className: "h-8 w-48 pr-8 pl-8 text-sm"
+        className: cn(
+          "h-8 w-48 pr-9 pl-9 text-sm",
+          "[&::-webkit-search-cancel-button]:appearance-none",
+          "[&::-webkit-search-decoration]:appearance-none",
+          "[&::-webkit-search-results-button]:appearance-none",
+          "[&::-webkit-search-results-decoration]:appearance-none"
+        )
       }
     ),
     inputValue && /* @__PURE__ */ jsx(
@@ -8188,12 +8982,382 @@ function DataTableSearch({
         size: "icon-sm",
         onClick: handleClear,
         "aria-label": "Clear search",
-        className: "text-muted-foreground hover:text-foreground absolute right-0.5 size-6",
+        className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-1.5 size-6 -translate-y-1/2",
         children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" })
       }
     )
   ] });
 }
+function BottomNav({ items, className }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "bottom-nav",
+      className: cn(
+        "fixed bottom-0 left-0 right-0 z-50 mx-4 mb-4 rounded-2xl bg-background shadow-[0_-4px_20px_rgba(0,0,0,0.08)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "flex h-20 items-center justify-around px-4", children: items.map(({ label, href, icon, isActive, onClick }) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href,
+          onClick,
+          "data-slot": "bottom-nav-item",
+          className: cn(
+            "group flex flex-col items-center gap-0 transition-colors",
+            isActive ? "text-primary" : "text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "flex h-12 items-center justify-center rounded-2xl transition-all",
+                  isActive ? "flex-col gap-0.5 bg-primary/10 px-4" : "w-12 group-hover:bg-muted group-active:bg-primary/10"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "h-6 w-6 shrink-0", children: icon }),
+                  isActive && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold leading-none", children: label })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[10px] font-medium",
+                  isActive ? "invisible" : "visible"
+                ),
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "h-1 w-5 rounded-full transition-all",
+                  isActive ? "bg-primary" : "bg-transparent"
+                )
+              }
+            )
+          ]
+        },
+        href
+      )) })
+    }
+  );
+}
+var BottomNavTabsContext = createContext(null);
+function useBottomNavTabsContext() {
+  const ctx = useContext(BottomNavTabsContext);
+  if (!ctx) throw new Error("BottomNavTabsList must be inside BottomNavTabs");
+  return ctx;
+}
+function BottomNavTabs({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue ?? "");
+  const activeValue = controlledValue ?? internalValue;
+  const listId = useId();
+  const handleValueChange = (v) => {
+    if (controlledValue === void 0) setInternalValue(v);
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ jsx(BottomNavTabsContext.Provider, { value: { activeValue, listId }, children: /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      "data-slot": "bottom-nav-tabs",
+      value: activeValue,
+      onValueChange: handleValueChange,
+      ...props
+    }
+  ) });
+}
+function BottomNavTabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TabsContent, { className: cn("pb-28", className), ...props });
+}
+function BottomNavTabsList({ items, className }) {
+  const { activeValue, listId } = useBottomNavTabsContext();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "bottom-nav-tabs-list",
+      className: cn(
+        "fixed bottom-0 left-0 right-0 z-50 mx-6 max-w- mb-4 rounded-2xl bg-background shadow-[0_-4px_20px_rgba(0,0,0,0.08)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Tabs$1.List, { className: "flex h-20 items-center justify-around px-4", children: items.map(({ value, label, icon, activeIcon }) => {
+        const isActive = value === activeValue;
+        return /* @__PURE__ */ jsxs(
+          Tabs$1.Trigger,
+          {
+            value,
+            "data-slot": "bottom-nav-tabs-trigger",
+            className: cn(
+              "group flex flex-col items-center transition-colors",
+              "data-[state=active]:text-primary data-[state=inactive]:text-muted-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-2xl"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "relative flex h-15 w-16 flex-col items-center justify-center gap-1.5", children: [
+                /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isActive && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    layoutId: `${listId}-pill`,
+                    className: "absolute inset-0 rounded-2xl bg-primary/10",
+                    transition: spring.snappy
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "relative z-10 h-6 w-6", children: isActive ? activeIcon ?? icon : icon }),
+                /* @__PURE__ */ jsx("span", { className: "relative z-10 text-[10px] font-medium leading-none", children: label })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "mt-1 h-1 w-6 rounded-full transition-colors",
+                    isActive ? "bg-primary" : "bg-transparent"
+                  )
+                }
+              )
+            ]
+          },
+          value
+        );
+      }) })
+    }
+  );
+}
+var DrawerContext = createContext({ isOpen: false, modal: true });
+function Drawer({ children, open, onOpenChange, modal = true, ...props }) {
+  const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
+  const isOpen = open !== void 0 ? open : internalOpen;
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { isOpen, modal }, children: /* @__PURE__ */ jsx(
+    Dialog$1.Root,
+    {
+      "data-slot": "drawer",
+      modal,
+      ...props,
+      open: isOpen,
+      onOpenChange: (v) => {
+        setInternalOpen(v);
+        onOpenChange?.(v);
+      },
+      children
+    }
+  ) });
+}
+function DrawerTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerClose({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerPortal({ children, ...props }) {
+  const { isOpen } = useContext(DrawerContext);
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { forceMount: true, ...props, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpen && children }) });
+}
+function DrawerOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Overlay, { "data-slot": "drawer-overlay", asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm",
+        className
+      ),
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: duration.normal, ease: ease.smooth }
+    }
+  ) });
+}
+var sizeClasses = {
+  sm: "w-64",
+  md: "w-80",
+  lg: "w-96",
+  xl: "w-[30rem]",
+  full: "w-screen"
+};
+function DrawerContent({
+  className,
+  children,
+  side = "right",
+  size = "md",
+  showCloseButton = true,
+  resizable = false,
+  ...props
+}) {
+  const isHorizontal = side === "left" || side === "right";
+  const xInitial = side === "right" ? "100%" : side === "left" ? "-100%" : 0;
+  const yInitial = side === "bottom" ? "100%" : side === "top" ? "-100%" : 0;
+  const dragRef = useRef(null);
+  const { modal } = useContext(DrawerContext);
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    modal && /* @__PURE__ */ jsx(DrawerOverlay, {}, "drawer-overlay"),
+    /* @__PURE__ */ jsx(
+      Dialog$1.Content,
+      {
+        "data-slot": "drawer-content",
+        "data-side": side,
+        asChild: true,
+        forceMount: true,
+        className: cn(
+          "fixed z-50 flex flex-col bg-popover text-popover-foreground shadow-xl outline-none",
+          side === "left" && "inset-y-0 left-0",
+          side === "right" && "inset-y-0 right-0",
+          side === "top" && "inset-x-0 top-0",
+          side === "bottom" && "inset-x-0 bottom-0",
+          isHorizontal && sizeClasses[size],
+          !isHorizontal && "h-auto min-h-40",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: cn("flex flex-col", isHorizontal && "h-full"),
+            initial: { x: xInitial, y: yInitial, opacity: 0 },
+            animate: { x: 0, y: 0, opacity: 1, transition: transition.drawer },
+            exit: { x: xInitial, y: yInitial, opacity: 0, transition: transition.drawerExit },
+            children: [
+              children,
+              showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "drawer-close", asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-4 right-4",
+                  size: "icon-sm",
+                  children: [
+                    /* @__PURE__ */ jsx(XIcon, {}),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              ) }),
+              resizable && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "drawer-resize-handle",
+                  className: cn(
+                    "absolute opacity-0 transition-opacity hover:opacity-100 hover:bg-border",
+                    side === "right" && "inset-y-0 left-0 w-1 cursor-col-resize",
+                    side === "left" && "inset-y-0 right-0 w-1 cursor-col-resize",
+                    side === "top" && "inset-x-0 bottom-0 h-1 cursor-row-resize",
+                    side === "bottom" && "inset-x-0 top-0 h-1 cursor-row-resize"
+                  ),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    const content = e.currentTarget.parentElement;
+                    if (!content) return;
+                    const startSize = isHorizontal ? parseFloat(getComputedStyle(content).width) : parseFloat(getComputedStyle(content).height);
+                    content.style.transition = "none";
+                    dragRef.current = {
+                      startPos: isHorizontal ? e.clientX : e.clientY,
+                      startSize,
+                      content
+                    };
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                  },
+                  onPointerMove: (e) => {
+                    if (!dragRef.current) return;
+                    const { startPos, startSize, content } = dragRef.current;
+                    const delta = (isHorizontal ? e.clientX : e.clientY) - startPos;
+                    let newSize;
+                    if (side === "right") {
+                      newSize = Math.max(160, Math.min(window.innerWidth * 0.9, startSize - delta));
+                    } else if (side === "left") {
+                      newSize = Math.max(160, Math.min(window.innerWidth * 0.9, startSize + delta));
+                    } else if (side === "bottom") {
+                      newSize = Math.max(80, Math.min(window.innerHeight * 0.9, startSize - delta));
+                    } else {
+                      newSize = Math.max(80, Math.min(window.innerHeight * 0.9, startSize + delta));
+                    }
+                    content.style[isHorizontal ? "width" : "height"] = `${newSize}px`;
+                  },
+                  onPointerUp: () => {
+                    if (dragRef.current?.content) {
+                      dragRef.current.content.style.transition = "";
+                    }
+                    dragRef.current = null;
+                  },
+                  onPointerCancel: () => {
+                    if (dragRef.current?.content) {
+                      dragRef.current.content.style.transition = "";
+                    }
+                    dragRef.current = null;
+                  }
+                }
+              )
+            ]
+          }
+        )
+      },
+      "drawer-content"
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn("flex shrink-0 flex-col gap-1.5 p-6", className),
+      ...props
+    }
+  );
+}
+function DrawerBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-body",
+      className: cn("flex-1 overflow-y-auto px-6 pb-6", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn(
+        "border-border mt-auto flex shrink-0 flex-wrap items-center justify-end gap-2 border-t px-6 py-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("font-heading text-base leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
 function TCCEProvider({
   children,
   permissions,
@@ -8203,6 +9367,6 @@ function TCCEProvider({
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsx(AbilityProvider, { permissions, children: /* @__PURE__ */ jsx(Toaster, { position: toasterPosition, children }) }) });
 }
 
-export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
+export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KNOWN_PERMISSIONS, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneField, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast, validatePhone };
 //# sourceMappingURL=main.js.map
 //# sourceMappingURL=main.js.map