@bizapps/design-system-testing 1.0.11 → 1.6.0

package/dist/main.cjs

@@ -8,13 +8,15 @@ var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var radixUi = require('radix-ui');
-var reactDayPicker = require('react-day-picker');
 var dateFns = require('date-fns');
 var useEmblaCarousel = require('embla-carousel-react');
-var react$1 = require('motion/react');
+var libphonenumberJs = require('libphonenumber-js');
 var cmdk = require('cmdk');
+var countryFlags = require('country-flag-icons/react/3x2');
+var react$1 = require('motion/react');
 var reactDropzone = require('react-dropzone');
 var Color = require('color');
+var reactDayPicker = require('react-day-picker');
 var react$2 = require('@schedule-x/react');
 var calendar = require('@schedule-x/calendar');
 var eventsService = require('@schedule-x/events-service');
@@ -28,7 +30,26 @@ var reactTable = require('@tanstack/react-table');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
+var countryFlags__namespace = /*#__PURE__*/_interopNamespace(countryFlags);
 var Color__default = /*#__PURE__*/_interopDefault(Color);
 
 // src/components/ui/Alert/alert.tsx
@@ -457,174 +478,6 @@ function Button({
     }
   );
 }
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "dropdown",
-  buttonVariant = "ghost",
-  locale,
-  formatters,
-  components,
-  fromYear,
-  toYear,
-  ...props
-}) {
-  const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactDayPicker.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__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
-          if (orientation === "left") {
-            return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          if (orientation === "right") {
-            return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
-        },
-        DayButton: ({ ...props2 }) => /* @__PURE__ */ jsxRuntime.jsx(CalendarDayButton, { locale, ...props2 }),
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props2, children: /* @__PURE__ */ jsxRuntime.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 = reactDayPicker.getDefaultClassNames();
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-  return /* @__PURE__ */ jsxRuntime.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,
@@ -1110,6 +963,22 @@ function Input({ className, type, ...props }) {
     }
   );
 }
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Label.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:"]);
@@ -1191,15 +1060,412 @@ function Link({
         truncate ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children }) : children,
         isExternal && !disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.ExternalLinkIcon,
+            lucideReact.ExternalLinkIcon,
+            {
+              "aria-hidden": "true",
+              size: externalIconSize,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "(opens in new tab)" })
+        ] })
+      ]
+    }
+  );
+}
+function validatePhone(value) {
+  if (!value) {
+    return { isValid: false };
+  }
+  if (libphonenumberJs.isValidPhoneNumber(value)) {
+    return { isValid: true };
+  }
+  return { isValid: false, problem: libphonenumberJs.validatePhoneNumberLength(value) ?? "INVALID" };
+}
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  container,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Popover.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__ */ jsxRuntime.jsx(radixUi.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "popover-header",
+      className: cn("flex flex-col gap-1 text-sm", className),
+      ...props
+    }
+  );
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "popover-title",
+      className: cn("text-base font-medium", className),
+      ...props
+    }
+  );
+}
+function PopoverDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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 = libphonenumberJs.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__namespace;
+function CountryFlag({
+  code,
+  flagUrl,
+  className
+}) {
+  const isoCode = (code || "").toUpperCase();
+  const FlagComponent = flagByCode[isoCode];
+  const flag = flagUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: flagUrl, alt: "", "aria-hidden": "true", className: "size-full object-cover" }) : FlagComponent ? /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { "aria-hidden": "true", className: "size-full" }) : null;
+  return /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  const [pickedCode, setPickedCode] = react.useState(
+    (defaultCountry ?? countries[0]?.code)?.toUpperCase()
+  );
+  const [internalValue, setInternalValue] = react.useState("");
+  const listRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const caretRef = react.useRef(null);
+  const lastValidityRef = react.useRef(null);
+  const listId = `${react.useId()}-countries-list`;
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const parsed = currentValue ? libphonenumberJs.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 libphonenumberJs.AsYouType((selectedCountry.code || "").toUpperCase()).input(
+    nationalDigits
+  ) : nationalDigits;
+  const isInvalid = inputProps["aria-invalid"] === true || inputProps["aria-invalid"] === "true";
+  const { isValid, problem } = validatePhone(currentValue);
+  react.useEffect(() => {
+    const last = lastValidityRef.current;
+    if (last && last.isValid === isValid && last.problem === problem) {
+      return;
+    }
+    lastValidityRef.current = { isValid, problem };
+    onValidityChange?.({ isValid, problem });
+  }, [isValid, problem, onValidityChange]);
+  react.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 = libphonenumberJs.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 && libphonenumberJs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CountryFlag,
+                  {
+                    code: selectedCountry.code,
+                    flagUrl: selectedCountry.flagUrl
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: selectedCountry.dialCode }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, { size: 14, className: "text-muted-foreground shrink-0" })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PopoverContent,
             {
-              "aria-hidden": "true",
-              size: externalIconSize,
-              className: "shrink-0"
+              className: "w-72 rounded-xl p-0",
+              align: "start",
+              container,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { className: "rounded-xl", label: "Search countries", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center gap-2 border-b px-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { size: 14, className: "text-muted-foreground shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    cmdk.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__ */ jsxRuntime.jsx("div", { id: listId, children: /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { ref: listRef, className: "max-h-56 overflow-y-auto p-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "text-muted-foreground py-4 text-center text-sm", children: "No country found." }),
+                  countries.map((country) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    cmdk.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__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(CountryFlag, { code: country.code, flagUrl: country.flagUrl }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: country.name })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground tabular-nums", children: country.dialCode }),
+                          selectedCode?.toUpperCase() === country.code.toUpperCase() && /* @__PURE__ */ jsxRuntime.jsx(
+                            lucideReact.CheckIcon,
+                            {
+                              size: 14,
+                              className: "text-[var(--color-main-blue-primary)] shrink-0"
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    country.code
+                  ))
+                ] }) })
+              ] })
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "(opens in new tab)" })
-        ] })
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: currentValue, "data-slot": "phone-field-hidden-input" })
       ]
     }
   );
@@ -1434,31 +1700,37 @@ function SelectContent({
   className,
   children,
   position = "popper",
+  maxHeight,
+  style,
   ...props
 }) {
+  const resolvedMaxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     radixUi.Select.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__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
         /* @__PURE__ */ jsxRuntime.jsx(
           radixUi.Select.Viewport,
           {
-            className: cn(
-              "p-1",
-              position === "popper" && "h-[--radix-select-trigger-height]"
-            ),
+            className: cn("scroll-my-1 p-1", position === "popper" && "w-full"),
             children
           }
         ),
@@ -1585,7 +1857,7 @@ var progressVariants = classVarianceAuthority.cva("relative flex w-full items-ce
     size: "md"
   }
 });
-var progressIndicatorVariants = classVarianceAuthority.cva("size-full flex-1 transition-all", {
+var progressIndicatorVariants = classVarianceAuthority.cva("size-full flex-1 transition-all rounded-[5px]", {
   variants: {
     variant: {
       default: "bg-[var(--color-main-blue-primary)]",
@@ -1750,7 +2022,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 },
@@ -1794,6 +2067,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 = {
@@ -2258,65 +2540,6 @@ function TooltipContent({
     }
   ) });
 }
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Popover.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__ */ jsxRuntime.jsx(radixUi.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
-}
-function PopoverHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "popover-header",
-      className: cn("flex flex-col gap-1 text-sm", className),
-      ...props
-    }
-  );
-}
-function PopoverTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "popover-title",
-      className: cn("text-base font-medium", className),
-      ...props
-    }
-  );
-}
-function PopoverDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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({
@@ -2371,7 +2594,7 @@ function DialogTrigger({ ...props }) {
 }
 function DialogPortal({ children, ...props }) {
   const isOpen = react.useContext(DialogContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Portal, { "data-slot": "dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "wait", children: isOpen && children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Portal, { "data-slot": "dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", children: isOpen && children }) });
 }
 function DialogClose({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "dialog-close", ...props });
@@ -2398,7 +2621,7 @@ function DialogContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}, "dialog-overlay"),
     /* @__PURE__ */ jsxRuntime.jsx(
       radixUi.Dialog.Content,
       {
@@ -2435,7 +2658,8 @@ function DialogContent({
             ]
           }
         )
-      }
+      },
+      "dialog-content"
     )
   ] });
 }
@@ -2538,7 +2762,7 @@ function AlertDialogPortal({
   ...props
 }) {
   const isOpen = react.useContext(AlertDialogContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "wait", children: isOpen && children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", children: isOpen && children }) });
 }
 function AlertDialogOverlay({
   className,
@@ -2580,7 +2804,8 @@ function AlertDialogContent({
       AlertDialogOverlay,
       {
         className: cn(variant === "dark-glass" && "bg-primary/60 backdrop-blur-md")
-      }
+      },
+      "alert-dialog-overlay"
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       radixUi.AlertDialog.Content,
@@ -2614,7 +2839,8 @@ function AlertDialogContent({
             ]
           }
         )
-      }
+      },
+      "alert-dialog-content"
     )
   ] });
 }
@@ -2775,6 +3001,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,
@@ -2783,10 +3020,17 @@ function Combobox({
   searchPlaceholder = "Search...",
   emptyMessage = "No results found.",
   disabled = false,
-  className
+  className,
+  container,
+  matchMode = "fuzzy"
 }) {
   const [open, setOpen] = react.useState(false);
+  const listRef = react.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__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -2806,18 +3050,19 @@ function Combobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64 rounded-lg p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { className: "rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64 rounded-lg p-0", align: "start", container, children: /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { className: "rounded-lg", filter, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center gap-2 border-b px-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { size: 14, className: "text-muted-foreground shrink-0" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           cmdk.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__ */ jsxRuntime.jsxs(cmdk.Command.List, { className: "max-h-56 overflow-y-auto p-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { ref: listRef, className: "max-h-56 overflow-y-auto p-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "text-muted-foreground py-4 text-center text-sm", children: emptyMessage }),
         options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
           cmdk.Command.Item,
@@ -4082,92 +4327,325 @@ var ColorPickerFormat = ({ className, ...props }) => {
           "relative flex w-full items-center gap-1 -space-x-px rounded-md",
           className
         ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input2,
-            {
-              className: "bg-muted h-8 w-[5rem] rounded-md px-2 text-xs",
-              readOnly: true,
-              type: "text",
-              value: displayHex
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(PercentageInput, { value: alpha, onChange: setAlpha })
-        ]
-      }
-    );
-  }
-  if (mode === "css") {
-    const rgb = color.rgb().array().map((value) => Math.round(value));
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-md", className), ...props, children: /* @__PURE__ */ jsxRuntime.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__default.default.hsl(hue, saturation, lightness, alpha / 100).hex();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-1.5", className), ...props, children: colors.map((hex) => {
-    const isActive = Color__default.default(hex).hex().toUpperCase() === currentHex.toUpperCase();
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            Input2,
+            {
+              className: "bg-muted h-8 w-[5rem] rounded-md px-2 text-xs",
+              readOnly: true,
+              type: "text",
+              value: displayHex
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(PercentageInput, { value: alpha, onChange: setAlpha })
+        ]
+      }
+    );
+  }
+  if (mode === "css") {
+    const rgb = color.rgb().array().map((value) => Math.round(value));
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-md", className), ...props, children: /* @__PURE__ */ jsxRuntime.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__default.default.hsl(hue, saturation, lightness, alpha / 100).hex();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-1.5", className), ...props, children: colors.map((hex) => {
+    const isActive = Color__default.default(hex).hex().toUpperCase() === currentHex.toUpperCase();
+    return /* @__PURE__ */ jsxRuntime.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__default.default(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 = reactDayPicker.getDefaultClassNames();
+  const resolvedComponents = react.useMemo(
+    () => ({
+      Root: ({ className: className2, rootRef, ...rootProps }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: rootRef,
+            className: cn(className2),
+            ...rootProps
+          }
+        );
+      },
+      Chevron: ({ className: className2, orientation, ...chevronProps }) => {
+        if (orientation === "left") {
+          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: cn("size-4", className2), ...chevronProps });
+        }
+        if (orientation === "right") {
+          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: cn("size-4", className2), ...chevronProps });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("size-4", className2), ...chevronProps });
+      },
+      DayButton: (dayButtonProps) => /* @__PURE__ */ jsxRuntime.jsx(CalendarDayButton, { locale, ...dayButtonProps }),
+      WeekNumber: ({ children, ...weekNumberProps }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("td", { ...weekNumberProps, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+      },
+      ...components
+    }),
+    [locale, components]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.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__default.default(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 = reactDayPicker.getDefaultClassNames();
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  const isPreviewEdge = Boolean(
+    (modifiers.preview_start || modifiers.preview_end) && !modifiers.selected
+  );
+  return /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  const [awaitingRangeEnd, setAwaitingRangeEnd] = react.useState(false);
+  const [previewDate, setPreviewDate] = react.useState(void 0);
   const label = react.useMemo(() => {
-    if (mode === "range") {
-      const range = selected;
-      if (range?.from && range?.to)
-        return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 ${dateFns.format(range.to, "MMM d, yyyy")}`;
-      if (range?.from) return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
-      return placeholder;
-    }
-    const date = selected;
-    return date ? dateFns.format(date, "MMM d, yyyy") : placeholder;
-  }, [mode, selected, placeholder]);
-  const hasValue = mode === "range" ? !!selected?.from : !!selected;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    if (props.mode === "range") {
+      const range = props.selected;
+      if (!range?.from) return placeholder;
+      if (!range.to) return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
+      return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 ${dateFns.format(range.to, "MMM d, yyyy")}`;
+    }
+    return props.selected ? dateFns.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 = react.useMemo(() => {
+    if (!awaitingRangeEnd || !rangeFrom || !previewDate) return void 0;
+    if (dateFns.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 && dateFns.isSameDay(current, day) ? current : day);
+  };
+  const dateConstraints = react.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__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
       {
@@ -4185,36 +4663,36 @@ function DatePicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { "data-slot": "date-picker-content", className: "w-auto p-0", align: "start", children: mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
-      Calendar,
-      {
-        ...{
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { onMouseLeave: () => setPreviewDate(void 0), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
       }
     ) })
   ] });
@@ -4339,6 +4817,7 @@ var Navbar = react.forwardRef(
     notifications,
     avatarSrc,
     avatarFallback,
+    showUtilityBar = true,
     onNavLinkClick,
     onSearchClick,
     onHelpClick,
@@ -4410,7 +4889,7 @@ var Navbar = react.forwardRef(
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "ml-auto flex h-full items-center", children: navigationLinks.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx(NavLinkItem, { link, onNavLinkClick }, i)) })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background border-border border-b px-4 md:px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex h-9 max-w-screen-2xl items-center justify-between", children: [
+          showUtilityBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background border-border border-b px-4 md:px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex h-9 max-w-screen-2xl items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex items-center", children: utilityLinks.map((link, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-border mx-3 select-none", children: "|" }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4655,6 +5134,8 @@ function NavigationMenuIndicator({
     }
   );
 }
+
+// src/components/authorization/policy.ts
 function matchPermission(pattern, permission) {
   if (pattern === "*") return true;
   if (pattern === permission) return true;
@@ -4670,41 +5151,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 = react.createContext(void 0);
 AbilityContext.displayName = "AbilityContext";
 function AbilityProvider({ children, permissions }) {
   const [permissionSet, setPermissionSet] = react.useState(
     () => new Set(permissions ?? [])
   );
-  const can = react.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] = react.useState(false);
+  const status = permissions !== void 0 || imperativelyResolved ? "ready" : "loading";
+  const can2 = react.useCallback(
+    (perms, mode = "any") => can(permissionSet, perms, mode),
     [permissionSet]
   );
   const setAbilities = react.useCallback((perms) => {
     setPermissionSet(new Set(perms));
+    setImperativelyResolved(true);
   }, []);
   const clearAbilities = react.useCallback(() => {
     setPermissionSet(/* @__PURE__ */ new Set());
+    setImperativelyResolved(true);
   }, []);
-  const syncedKey = react.useRef(permissions ? permissions.join("|") : null);
+  const permissionKey = permissions === void 0 ? null : [...permissions].sort().join("|");
+  const syncedKey = react.useRef(permissionKey);
   react.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 = react.useMemo(
-    () => ({ can, setAbilities, clearAbilities }),
-    [can, setAbilities, clearAbilities]
+    () => ({ can: can2, setAbilities, clearAbilities, status }),
+    [can2, setAbilities, clearAbilities, status]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AbilityContext.Provider, { value, children });
 }
@@ -4716,36 +5202,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 react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(show) });
+    warnRenderPropVoidsProps([
+      ...behavior === "disable" ? ["behavior='disable'"] : [],
+      ...reason !== null ? ["reason"] : [],
+      ...fallback !== null ? ["fallback"] : [],
+      ...loading !== void 0 ? ["loading"] : []
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ allowed: show, status }) });
+  }
+  if (status === "loading" && loading !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loading });
   }
-  return show ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+  if (show) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  if (behavior === "disable") {
+    if (react.isValidElement(children) && children.type !== react.Fragment) {
+      const disabledChild = disableElement(children);
+      if (reason === null) {
+        return /* @__PURE__ */ jsxRuntime.jsx(InteractionFirewall, { children: disabledChild });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InteractionFirewall, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: disabledChild }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: reason })
+      ] });
+    }
+    if (reason === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DisabledSubtree, { children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DisabledSubtree, { children }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: reason })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
 }
 Can.displayName = "Can";
-function CanNot({ permission, mode = "any", fallback = null, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Can, { permission, mode, negate: true, fallback, children });
+function CanNot({
+  permission,
+  mode = "any",
+  behavior = "hide",
+  reason = null,
+  fallback = null,
+  loading,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Can,
+    {
+      permission,
+      mode,
+      negate: true,
+      behavior,
+      reason,
+      fallback,
+      loading,
+      children
+    }
+  );
 }
 CanNot.displayName = "CanNot";
-var MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = react.useState(void 0);
+function useMediaQuery(query) {
+  const [matches, setMatches] = react.useState(false);
   react.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__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "sheet", ...props });
@@ -4938,6 +5582,39 @@ function SidebarProvider({
     }
   ) });
 }
+function SidebarResizeHandle() {
+  const dragRef = react.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.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",
@@ -5008,7 +5685,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -5020,15 +5697,18 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SidebarResizeHandle, {})
+            ]
           }
         )
       ]
@@ -5145,7 +5825,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
@@ -5440,6 +6120,7 @@ function AppShell({
   onItemClick,
   brandName = "Total Portal",
   showHeader = true,
+  header,
   open,
   onOpenChange,
   defaultOpen,
@@ -5460,7 +6141,7 @@ function AppShell({
             /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0" }),
             /* @__PURE__ */ jsxRuntime.jsx(SidebarBrand, { brandName })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SidebarContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenu, { children: items.map((item) => {
+          /* @__PURE__ */ jsxRuntime.jsx(SidebarContent, { className: "overflow-x:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenu, { children: items.map((item) => {
             const menuItem = /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
               SidebarMenuButton,
               {
@@ -5489,7 +6170,7 @@ function AppShell({
           }) }) }) }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-          showHeader ? /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-14 items-center gap-2 border-b px-4", children: [
+          header ? header : showHeader ? /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-14 items-center gap-2 border-b px-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0 md:hidden" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: brandName })
           ] }) : /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0 md:hidden" }),
@@ -6103,14 +6784,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;
@@ -6255,8 +6931,43 @@ function useEventCalendar({
     return () => unsubscribe?.();
   }, []);
   return {
-    calendarApp: calendarApp.current
+    calendarApp: calendarApp.current,
+    eventModal: eventModal$1.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,
@@ -6269,26 +6980,116 @@ function EventCalendar({
   className
 }) {
   const [currentView, setCurrentView] = react.useState(defaultView);
+  const [selectedEvent, setSelectedEvent] = react.useState(null);
+  const [anchorRect, setAnchorRect] = react.useState(null);
+  const clickedEventElRef = react.useRef(false);
   const handleViewChange = react.useCallback(
     (view) => {
       setCurrentView(view);
       onViewChange?.(view);
     },
-    [onViewChange]
+    [onViewChange]
+  );
+  const handleEventClick = react.useCallback(
+    (event) => {
+      setSelectedEvent(event);
+      onEventClick?.(event);
+    },
+    [onEventClick]
+  );
+  const { calendarApp, eventModal } = useEventCalendar({
+    events,
+    defaultView,
+    defaultDate,
+    locale,
+    onEventClick: handleEventClick,
+    onEventCreate,
+    onViewChange: handleViewChange
+  });
+  react.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 = react.useCallback(
+    (open) => {
+      if (!open) {
+        eventModal.close();
+        setSelectedEvent(null);
+        setAnchorRect(null);
+      }
+    },
+    [eventModal]
   );
-  const { calendarApp } = useEventCalendar({
-    events,
-    defaultView,
-    defaultDate,
-    locale,
-    onEventClick,
-    onEventCreate,
-    onViewChange: handleViewChange
-  });
   const contextValue = react.useMemo(() => ({ currentView }), [currentView]);
   return /* @__PURE__ */ jsxRuntime.jsxs(EventCalendarContext.Provider, { value: contextValue, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { href: "tcce-event-calendar", precedence: "default", children: eventCalendarStyles }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "event-calendar", className: cn("sx-tcce w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ScheduleXCalendar, { calendarApp: calendarApp ?? null }) })
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: !!selectedEvent && !!anchorRect, onOpenChange: handlePopoverOpenChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "event-calendar", className: cn("sx-tcce w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ScheduleXCalendar, { calendarApp: calendarApp ?? null }) }),
+      anchorRect && /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: {
+            position: "fixed",
+            top: anchorRect.top,
+            left: anchorRect.left,
+            width: anchorRect.width,
+            height: anchorRect.height,
+            pointerEvents: "none"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "size-2 shrink-0 rounded-full",
+                    style: {
+                      backgroundColor: EVENT_COLOR[selectedEvent.color ?? "default"]
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-heading text-sm font-semibold leading-tight", children: selectedEvent.title })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Edit event", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { size: 14 }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 13, className: "shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatEventTime(selectedEvent.start, selectedEvent.end) })
+            ] }),
+            selectedEvent.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: selectedEvent.description })
+          ] })
+        }
+      )
+    ] })
   ] });
 }
 function useAppForm(schema, options) {
@@ -6367,7 +7168,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
@@ -6380,7 +7181,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
@@ -6630,18 +7431,6 @@ function TablePaginationBase({
   );
 }
 var TablePagination = react.memo(TablePaginationBase);
-function useMediaQuery(query) {
-  const [matches, setMatches] = react.useState(false);
-  react.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 = react.createContext(null);
 function useTableContext() {
   const ctx = react.useContext(TableContext);
@@ -6653,6 +7442,13 @@ function useTableContext() {
 function useTableContextSafe() {
   return react.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",
@@ -6990,6 +7786,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",
@@ -7379,11 +8178,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;
 }
@@ -7424,6 +8218,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);
@@ -7436,12 +8237,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__ */ jsxRuntime.jsx(DataTableCell, { cell, cellClassName }, cell.id))
@@ -8042,7 +8846,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__ */ jsxRuntime.jsx("span", { "aria-live": "polite", className: "text-muted-foreground text-xs", children: `${selectedCount} row${selectedCount > 1 ? "s" : ""} selected` }),
-        /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination }) })
       ]
     }
   );
@@ -8151,18 +8955,21 @@ function DataTableSearch({
   debounce = 300
 }) {
   const ctx = useTableContextSafe();
-  const [inputValue, setInputValue] = react.useState("");
   const globalFilter = ctx?.globalFilter;
   const setGlobalFilter = ctx?.setGlobalFilter;
+  const committedValue = globalFilter ?? "";
+  const [inputValue, setInputValue] = react.useState(committedValue);
   react.useEffect(() => {
-    if (globalFilter === "") setInputValue("");
+    if (globalFilter === void 0) return;
+    setInputValue(globalFilter);
   }, [globalFilter]);
   react.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?.("");
@@ -8183,7 +8990,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__ */ jsxRuntime.jsx(
@@ -8193,12 +9006,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__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" })
       }
     )
   ] });
 }
+function BottomNav({ items, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-20 items-center justify-around px-4", children: items.map(({ label, href, icon, isActive, onClick }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 shrink-0", children: icon }),
+                  isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold leading-none", children: label })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[10px] font-medium",
+                  isActive ? "invisible" : "visible"
+                ),
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "h-1 w-5 rounded-full transition-all",
+                  isActive ? "bg-primary" : "bg-transparent"
+                )
+              }
+            )
+          ]
+        },
+        href
+      )) })
+    }
+  );
+}
+var BottomNavTabsContext = react.createContext(null);
+function useBottomNavTabsContext() {
+  const ctx = react.useContext(BottomNavTabsContext);
+  if (!ctx) throw new Error("BottomNavTabsList must be inside BottomNavTabs");
+  return ctx;
+}
+function BottomNavTabs({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = react.useState(controlledValue ?? defaultValue ?? "");
+  const activeValue = controlledValue ?? internalValue;
+  const listId = react.useId();
+  const handleValueChange = (v) => {
+    if (controlledValue === void 0) setInternalValue(v);
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(BottomNavTabsContext.Provider, { value: { activeValue, listId }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.Root,
+    {
+      "data-slot": "bottom-nav-tabs",
+      value: activeValue,
+      onValueChange: handleValueChange,
+      ...props
+    }
+  ) });
+}
+function BottomNavTabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { className: cn("pb-28", className), ...props });
+}
+function BottomNavTabsList({ items, className }) {
+  const { activeValue, listId } = useBottomNavTabsContext();
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(radixUi.Tabs.List, { className: "flex h-20 items-center justify-around px-4", children: items.map(({ value, label, icon, activeIcon }) => {
+        const isActive = value === activeValue;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          radixUi.Tabs.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__ */ jsxRuntime.jsxs("span", { className: "relative flex h-15 w-16 flex-col items-center justify-center gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { initial: false, children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                  react$1.motion.span,
+                  {
+                    layoutId: `${listId}-pill`,
+                    className: "absolute inset-0 rounded-2xl bg-primary/10",
+                    transition: spring.snappy
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 h-6 w-6", children: isActive ? activeIcon ?? icon : icon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 text-[10px] font-medium leading-none", children: label })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "mt-1 h-1 w-6 rounded-full transition-colors",
+                    isActive ? "bg-primary" : "bg-transparent"
+                  )
+                }
+              )
+            ]
+          },
+          value
+        );
+      }) })
+    }
+  );
+}
+var DrawerContext = react.createContext({ isOpen: false, modal: true });
+function Drawer({ children, open, onOpenChange, modal = true, ...props }) {
+  const [internalOpen, setInternalOpen] = react.useState(props.defaultOpen ?? false);
+  const isOpen = open !== void 0 ? open : internalOpen;
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { isOpen, modal }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Root,
+    {
+      "data-slot": "drawer",
+      modal,
+      ...props,
+      open: isOpen,
+      onOpenChange: (v) => {
+        setInternalOpen(v);
+        onOpenChange?.(v);
+      },
+      children
+    }
+  ) });
+}
+function DrawerTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerClose({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerPortal({ children, ...props }) {
+  const { isOpen } = react.useContext(DrawerContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Portal, { forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", children: isOpen && children }) });
+}
+function DrawerOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Overlay, { "data-slot": "drawer-overlay", asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.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 = react.useRef(null);
+  const { modal } = react.useContext(DrawerContext);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
+    modal && /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}, "drawer-overlay"),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.Dialog.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__ */ jsxRuntime.jsxs(
+          react$1.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__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "drawer-close", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-4 right-4",
+                  size: "icon-sm",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              ) }),
+              resizable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("font-heading text-base leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
 function TCCEProvider({
   children,
   permissions,
@@ -8248,6 +9431,10 @@ exports.AvatarGroup = AvatarGroup;
 exports.AvatarGroupCount = AvatarGroupCount;
 exports.AvatarImage = AvatarImage;
 exports.Badge = Badge2;
+exports.BottomNav = BottomNav;
+exports.BottomNavTabs = BottomNavTabs;
+exports.BottomNavTabsContent = BottomNavTabsContent;
+exports.BottomNavTabsList = BottomNavTabsList;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -8256,8 +9443,6 @@ exports.BreadcrumbList = BreadcrumbList;
 exports.BreadcrumbPage = BreadcrumbPage;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.Button = Button;
-exports.Calendar = Calendar;
-exports.CalendarDayButton = CalendarDayButton;
 exports.Can = Can;
 exports.CanNot = CanNot;
 exports.Card = Card;
@@ -8303,6 +9488,17 @@ exports.DialogOverlay = DialogOverlay;
 exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
+exports.Drawer = Drawer;
+exports.DrawerBody = DrawerBody;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = DropdownMenuContent;
@@ -8345,6 +9541,8 @@ exports.ItemHeader = ItemHeader;
 exports.ItemMedia = ItemMedia;
 exports.ItemSeparator = ItemSeparator;
 exports.ItemTitle = ItemTitle;
+exports.KNOWN_PERMISSIONS = KNOWN_PERMISSIONS;
+exports.Label = Label;
 exports.Link = Link;
 exports.Logo = Logo;
 exports.MiniCalendar = MiniCalendar;
@@ -8367,6 +9565,7 @@ exports.PaginationItem = PaginationItem;
 exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
+exports.PhoneField = PhoneField;
 exports.PinInput = PinInput;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
@@ -8503,6 +9702,7 @@ exports.toggleVariants = toggleVariants;
 exports.tooltipContentVariants = tooltipContentVariants;
 exports.transition = transition;
 exports.useAbility = useAbility;
+exports.useAbilityStatus = useAbilityStatus;
 exports.useAppForm = useAppForm;
 exports.useCan = useCan;
 exports.useCarousel = useCarousel;
@@ -8517,5 +9717,6 @@ exports.useTableSizing = useTableSizing;
 exports.useTableSorting = useTableSorting;
 exports.useTableVisibility = useTableVisibility;
 exports.useToast = useToast;
+exports.validatePhone = validatePhone;
 //# sourceMappingURL=main.cjs.map
 //# sourceMappingURL=main.cjs.map