@bizapps/design-system-testing 1.8.1 → 1.9.0

package/dist/main.cjs

@@ -1700,37 +1700,31 @@ 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] origin-(--radix-select-content-transform-origin) overflow-hidden 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] overflow-x-hidden overflow-y-auto 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("scroll-my-1 p-1", position === "popper" && "w-full"),
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[--radix-select-trigger-height]"
+            ),
             children
           }
         ),
@@ -4392,7 +4386,6 @@ ColorPickerPresets.displayName = "ColorPickerPresets";
 function Calendar({
   className,
   classNames,
-  modifiersClassNames,
   showOutsideDays = true,
   captionLayout = "dropdown",
   buttonVariant = "ghost",
@@ -4404,36 +4397,6 @@ function Calendar({
   ...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,
     {
@@ -4525,13 +4488,33 @@ function Calendar({
         hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames
       },
-      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: {
+        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
       },
-      components: resolvedComponents,
       ...props
     }
   );
@@ -4548,9 +4531,6 @@ function CalendarDayButton({
   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,
     {
@@ -4562,10 +4542,8 @@ function CalendarDayButton({
       "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",
+        "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
       ),
@@ -4573,79 +4551,30 @@ function CalendarDayButton({
     }
   );
 }
-function DatePicker(props) {
-  const {
-    placeholder = "Pick a date",
-    disabled = false,
-    className,
-    fromDate,
-    toDate,
-    numberOfMonths = 1
-  } = props;
+function DatePicker({
+  mode = "single",
+  selected,
+  onSelect,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  fromDate,
+  toDate
+}) {
   const [open, setOpen] = react.useState(false);
-  const [awaitingRangeEnd, setAwaitingRangeEnd] = react.useState(false);
-  const [previewDate, setPreviewDate] = react.useState(void 0);
   const label = react.useMemo(() => {
-    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: [
+    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: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
       {
@@ -4663,36 +4592,36 @@ function DatePicker(props) {
         ]
       }
     ) }),
-    /* @__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,
-        {
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { "data-slot": "date-picker-content", className: "w-auto p-0", align: "start", children: mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        ...{
           mode: "range",
-          selected: props.selected,
-          onSelect: handleRangeSelect,
-          modifiers: previewModifiers,
-          onDayMouseEnter: handleDayPreview,
-          onDayFocus: handleDayPreview,
-          numberOfMonths,
-          autoFocus: true,
-          ...dateConstraints
+          selected,
+          onSelect: (range) => {
+            onSelect?.(range);
+            if (range?.to) setOpen(false);
+          },
+          fromDate,
+          toDate,
+          numberOfMonths: 2,
+          initialFocus: true
         }
-      ) })
+      }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       Calendar,
       {
-        mode: "single",
-        selected: props.selected,
-        onSelect: (date) => {
-          props.onSelect?.(date);
-          setOpen(false);
-        },
-        numberOfMonths,
-        autoFocus: true,
-        ...dateConstraints
+        ...{
+          mode: "single",
+          selected,
+          onSelect: (date) => {
+            onSelect?.(date);
+            setOpen(false);
+          },
+          fromDate,
+          toDate,
+          initialFocus: true
+        }
       }
     ) })
   ] });
@@ -5134,8 +5063,6 @@ function NavigationMenuIndicator({
     }
   );
 }
-
-// src/components/authorization/policy.ts
 function matchPermission(pattern, permission) {
   if (pattern === "*") return true;
   if (pattern === permission) return true;
@@ -5151,46 +5078,41 @@ 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 [imperativelyResolved, setImperativelyResolved] = react.useState(false);
-  const status = permissions !== void 0 || imperativelyResolved ? "ready" : "loading";
-  const can2 = react.useCallback(
-    (perms, mode = "any") => can(permissionSet, perms, mode),
+  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));
+    },
     [permissionSet]
   );
   const setAbilities = react.useCallback((perms) => {
     setPermissionSet(new Set(perms));
-    setImperativelyResolved(true);
   }, []);
   const clearAbilities = react.useCallback(() => {
     setPermissionSet(/* @__PURE__ */ new Set());
-    setImperativelyResolved(true);
   }, []);
-  const permissionKey = permissions === void 0 ? null : [...permissions].sort().join("|");
-  const syncedKey = react.useRef(permissionKey);
+  const syncedKey = react.useRef(permissions ? permissions.join("|") : null);
   react.useEffect(() => {
-    if (permissionKey === null) return;
-    if (permissionKey === syncedKey.current) return;
-    syncedKey.current = permissionKey;
+    if (permissions === void 0) return;
+    const key = permissions.join("|");
+    if (key === syncedKey.current) return;
+    syncedKey.current = key;
     setPermissionSet(new Set(permissions));
-  }, [permissionKey, permissions]);
+  }, [permissions]);
   const value = react.useMemo(
-    () => ({ can: can2, setAbilities, clearAbilities, status }),
-    [can2, setAbilities, clearAbilities, status]
+    () => ({ can, setAbilities, clearAbilities }),
+    [can, setAbilities, clearAbilities]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AbilityContext.Provider, { value, children });
 }
@@ -5202,176 +5124,21 @@ function useAbility() {
   return context;
 }
 function useCan(permissions, mode = "any") {
-  const { can: can2 } = useAbility();
-  return can2(permissions, mode);
+  const { can } = useAbility();
+  return can(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,
-  behavior = "hide",
-  reason = null,
-  fallback = null,
-  loading,
-  children
-}) {
-  warnUnknownPermission(permission);
-  const { can: can2, status } = useAbility();
-  const hasPermission = status === "ready" && can2(permission, mode);
+function Can({ permission, mode = "any", negate = false, fallback = null, children }) {
+  const { can } = useAbility();
+  const hasPermission = can(permission, mode);
   const show = negate ? !hasPermission : hasPermission;
   if (typeof children === "function") {
-    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 });
-  }
-  if (show) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(show) });
   }
-  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 });
+  return show ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
 }
 Can.displayName = "Can";
-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
-    }
-  );
+function CanNot({ permission, mode = "any", fallback = null, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Can, { permission, mode, negate: true, fallback, children });
 }
 CanNot.displayName = "CanNot";
 function useMediaQuery(query) {
@@ -7103,6 +6870,7 @@ function useAppForm(schema, options) {
 // src/lib/cdn.ts
 var CDN_BASE = "https://dibt9vplwriap.cloudfront.net";
 var logos = {
+  // Total Civil
   color: `${CDN_BASE}/logos/Logo_Total_Color.webp`,
   colorAna: `${CDN_BASE}/logos/Logo_Total_Color-ANA.webp`,
   colorAnaa: `${CDN_BASE}/logos/Logo_Total_Color-ANAA.webp`,
@@ -7110,7 +6878,11 @@ var logos = {
   positive: `${CDN_BASE}/logos/Logo_Total_Positive.webp`,
   grayScale: `${CDN_BASE}/logos/Logo_Total_gray_scale.webp`,
   monochBlack: `${CDN_BASE}/logos/Logo_Total_monochB.webp`,
-  monochOrange: `${CDN_BASE}/logos/Logo_Total_monochO.webp`
+  monochOrange: `${CDN_BASE}/logos/Logo_Total_monochO.webp`,
+  isotype: `${CDN_BASE}/logos/Isotipo_Total_Color.webp`,
+  // Total Millwork
+  millworkColor: `${CDN_BASE}/logos/Logo_Millwork_Color.webp`,
+  millworkNegative: `${CDN_BASE}/logos/Logo_Millwork_Negative.webp`
 };
 function Table({
   className,
@@ -7168,7 +6940,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
@@ -7181,7 +6953,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
@@ -7442,13 +7214,6 @@ 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",
@@ -7786,9 +7551,6 @@ 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",
@@ -8178,6 +7940,11 @@ 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;
 }
@@ -8218,13 +7985,6 @@ 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);
@@ -8237,15 +7997,12 @@ function DataTableRow({ row, classNames }) {
       "data-clickable": clickable || void 0,
       role: clickable ? "button" : void 0,
       tabIndex: clickable ? 0 : void 0,
-      onClick: clickable ? (e) => {
-        if (isInteractiveCellEvent(e)) return;
-        onRowClick?.(row.original);
-      } : void 0,
+      onClick: clickable ? () => onRowClick?.(row.original) : void 0,
       onKeyDown: clickable ? (e) => {
-        if (e.key !== "Enter" && e.key !== " ") return;
-        if (isInteractiveCellEvent(e)) return;
-        e.preventDefault();
-        onRowClick?.(row.original);
+        if (e.key === "Enter" || e.key === " ") {
+          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))
@@ -8846,7 +8603,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("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination }) })
+        /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination })
       ]
     }
   );
@@ -8955,21 +8712,18 @@ 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 === void 0) return;
-    setInputValue(globalFilter);
+    if (globalFilter === "") setInputValue("");
   }, [globalFilter]);
   react.useEffect(() => {
-    if (inputValue === committedValue) return;
     const timer = setTimeout(() => {
       setGlobalFilter?.(inputValue);
     }, debounce);
     return () => clearTimeout(timer);
-  }, [inputValue, committedValue, debounce, setGlobalFilter]);
+  }, [inputValue, debounce, setGlobalFilter]);
   const handleClear = () => {
     setInputValue("");
     setGlobalFilter?.("");
@@ -8990,13 +8744,7 @@ function DataTableSearch({
         onChange: (e) => setInputValue(e.target.value),
         placeholder,
         "aria-label": placeholder,
-        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"
-        )
+        className: "h-8 w-48 pr-8 pl-8 text-sm"
       }
     ),
     inputValue && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9006,7 +8754,7 @@ function DataTableSearch({
         size: "icon-sm",
         onClick: handleClear,
         "aria-label": "Clear search",
-        className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-1.5 size-6 -translate-y-1/2",
+        className: "text-muted-foreground hover:text-foreground absolute right-0.5 size-6",
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" })
       }
     )
@@ -9541,7 +9289,6 @@ 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;
@@ -9702,7 +9449,6 @@ exports.toggleVariants = toggleVariants;
 exports.tooltipContentVariants = tooltipContentVariants;
 exports.transition = transition;
 exports.useAbility = useAbility;
-exports.useAbilityStatus = useAbilityStatus;
 exports.useAppForm = useAppForm;
 exports.useCan = useCan;
 exports.useCarousel = useCarousel;