@flanksource/clicky-ui 0.3.27 → 0.3.29

package/dist/components/DimensionField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionField.d.ts","sourceRoot":"","sources":["../../src/components/DimensionField.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,EAAE,EACF,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE,mBAAmB,2CAiCrB"}
+{"version":3,"file":"DimensionField.d.ts","sourceRoot":"","sources":["../../src/components/DimensionField.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,EAAE,EACF,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE,mBAAmB,+BAiCrB"}

package/dist/components/EndpointSelector.d.ts

@@ -1,3 +1,3 @@
 import { EndpointSelectorProps } from './EndpointSelector.model';
-export declare function EndpointSelector({ value, onChange, namespace, modes, defaultMode, loadWorkloads, allowNamespaceSelection, loadNamespaces, onNamespaceChange, urlSelector, modeKinds, defaults, preferredPorts, schemes, allowCustomScheme, allowCustomPort, showScheme, showPath, showIngressPort, className, }: EndpointSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function EndpointSelector({ value, onChange, namespace, modes, defaultMode, loadWorkloads, allowNamespaceSelection, loadNamespaces, onNamespaceChange, urlSelector, modeKinds, defaults, preferredPorts, schemes, allowCustomScheme, allowCustomPort, showScheme, showPath, showIngressPort, className, }: EndpointSelectorProps): import("react").JSX.Element;
 //# sourceMappingURL=EndpointSelector.d.ts.map

package/dist/components/EndpointSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EndpointSelector.d.ts","sourceRoot":"","sources":["../../src/components/EndpointSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAGV,qBAAqB,EAKtB,MAAM,0BAA0B,CAAC;AAgFlC,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,EACX,aAAa,EACb,uBAA+B,EAC/B,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,cAAiD,EACjD,OAAO,EACP,iBAAwB,EACxB,eAAuB,EACvB,UAAkB,EAClB,QAAgB,EAChB,eAAuB,EACvB,SAAS,GACV,EAAE,qBAAqB,2CAuXvB"}
+{"version":3,"file":"EndpointSelector.d.ts","sourceRoot":"","sources":["../../src/components/EndpointSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAGV,qBAAqB,EAKtB,MAAM,0BAA0B,CAAC;AAgFlC,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,EACX,aAAa,EACb,uBAA+B,EAC/B,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,cAAiD,EACjD,OAAO,EACP,iBAAwB,EACxB,eAAuB,EACvB,UAAkB,EAClB,QAAgB,EAChB,eAAuB,EACvB,SAAS,GACV,EAAE,qBAAqB,+BAuXvB"}

package/dist/components/ErrorWrapper.d.ts

@@ -1,4 +1,4 @@
-import { Component, ErrorInfo, ReactNode } from 'react';
+import { Component, ErrorInfo, ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
 export type ErrorWrapperProps = {
     children: ReactNode;
     onError?: (error: Error, errorInfo: ErrorInfo) => void;
@@ -13,7 +13,7 @@ export declare class ErrorWrapper extends Component<ErrorWrapperProps, ErrorWrap
         error: Error;
     };
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('../../../../node_modules/@types/react/index.d.ts').ReactPortal | import('../../../../node_modules/@types/react/index.d.ts').ReactElement<unknown, string | import('../../../../node_modules/@types/react/index.d.ts').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 }
 export {};
 //# sourceMappingURL=ErrorWrapper.d.ts.map

package/dist/components/Field.d.ts

@@ -1,4 +1,4 @@
-import { FocusEventHandler, ReactNode } from 'react';
+import { FocusEventHandler, ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
 export interface FieldProps {
     /** Field label text (or node). */
     label: ReactNode;
@@ -23,5 +23,5 @@ export interface FieldProps {
     onBlur?: FocusEventHandler<HTMLDivElement>;
     children: ReactNode;
 }
-export declare function Field({ label, htmlFor, required, error, helper, className, labelClassName, onBlur, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function Field({ label, htmlFor, required, error, helper, className, labelClassName, onBlur, children, }: FieldProps): import("react").JSX.Element;
 //# sourceMappingURL=Field.d.ts.map

package/dist/components/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,UAAU;IACzB,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAOD,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,2CAsBZ"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,UAAU;IACzB,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAOD,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,+BAsBZ"}

package/dist/components/FilterBar.cjs

@@ -11,6 +11,7 @@ const filterBarUtils = require("./filter-bar-utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const timestampFormat = require("../data/cells/timestamp-format.cjs");
 const utils = require("../lib/utils.cjs");
+const Modal = require("../overlay/Modal.cjs");
 const modalStack = require("../overlay/modalStack.cjs");
 const button = require("./button.cjs");
 const Combobox = require("./Combobox.cjs");
@@ -28,6 +29,7 @@ const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
 const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
 const FILTER_BAR_GAP_PX = 8;
 const FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX = 44;
+const FILTER_BAR_ROW_CLASS = "flex items-center gap-2 overflow-visible bg-background py-1.5";
 function FilterBar({
   search,
   filters,
@@ -41,7 +43,8 @@ function FilterBar({
   onApply,
   applyLabel = "Apply",
   isPending = false,
-  overflowMode = "responsive"
+  overflowMode = "responsive",
+  overlay
 }) {
   const hasRangeControls = Boolean(timeRange || dateRange);
   const showApply = !autoSubmit && !!onApply;
@@ -49,6 +52,7 @@ function FilterBar({
   const allFilters = filters ?? [];
   const responsiveOverflow = overflowMode === "responsive" && allFilters.length > 0;
   const mobileFilterOverflow = useMediaQuery("(max-width: 767px)");
+  const mobilePageOverflow = useMediaQuery("(max-width: 639px)");
   const filterListRef = react.useRef(null);
   const overflowTriggerRef = react.useRef(null);
   const filterNodeRefs = react.useRef(/* @__PURE__ */ new Map());
@@ -138,16 +142,25 @@ function FilterBar({
     }
     filterNodeRefs.current.set(key, node);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const row = /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-slot": "filter-bar",
       className: utils.cn(
-        "flex flex-nowrap items-center gap-2 overflow-visible bg-background py-1.5",
-        "flex-wrap md:flex-nowrap",
-        overflowMode === "wrap" && "flex-wrap",
-        className
+        FILTER_BAR_ROW_CLASS,
+        // `wrap` has to drop the md:flex-nowrap entirely rather than add a
+        // plain flex-wrap beside it: the two live in different variant groups,
+        // so twMerge keeps both and the breakpoint variant still wins above
+        // md — which made the documented escape hatch do nothing on exactly
+        // the desktop widths where a crowded bar overflows the viewport.
+        overflowMode === "wrap" ? "flex-wrap" : "flex-wrap md:flex-nowrap",
+        className,
+        // Hidden rather than unmounted, so a half-typed search survives the
+        // takeover. `visibility: hidden` is not focusable per spec, so this
+        // leaves the tab order without needing `inert`.
+        overlay && "invisible pointer-events-none"
       ),
+      ...overlay ? { "aria-hidden": true } : {},
       children: [
         leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }),
         search && /* @__PURE__ */ jsxRuntime.jsx(SearchField, { search }),
@@ -179,6 +192,7 @@ function FilterBar({
             triggerRef: overflowTriggerRef,
             filters: overflowFilters,
             activeHidden: activeOverflowCount,
+            mobilePage: mobilePageOverflow,
             ...onApply ? { onApply } : {}
           }
         ),
@@ -208,6 +222,18 @@ function FilterBar({
       ]
     }
   ) });
+  if (!overlay) return row;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-start-1 row-start-1 min-w-0", children: row }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "filter-bar-overlay",
+        className: utils.cn(FILTER_BAR_ROW_CLASS, "col-start-1 row-start-1 min-w-0 flex-wrap"),
+        children: overlay
+      }
+    )
+  ] });
 }
 function FilterBarFilterPanel({
   filter,
@@ -290,6 +316,7 @@ function OverflowFiltersMenu({
   triggerRef,
   filters,
   activeHidden,
+  mobilePage,
   onApply
 }) {
   const [open, setOpen] = react.useState(false);
@@ -300,7 +327,7 @@ function OverflowFiltersMenu({
     [filters]
   );
   const { refs, floatingStyles, context, floatingZ, getReferenceProps, getFloatingProps } = useAnchoredPopup(
-    open,
+    open && !mobilePage,
     (next) => {
       setStagedValues(createFilterValueMap(filters));
       setOpen(next);
@@ -331,6 +358,22 @@ function OverflowFiltersMenu({
       }))
     )
   );
+  const applyOverflowFilters = () => {
+    applyStagedFilterValues(filters, stagedValues);
+    onApply == null ? void 0 : onApply();
+    setOpen(false);
+  };
+  const clearAll = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
+      onClick: () => stagedFilters.forEach(filterBarUtils.clearFilterBarFilter),
+      disabled: stagedFilters.every((filter) => !filterBarUtils.isFilterBarFilterActive(filter)),
+      children: "Clear all"
+    }
+  );
+  const actions = /* @__PURE__ */ jsxRuntime.jsx(OverflowFilterActions, { onClose: closeOverflowMenu, onApply: applyOverflowFilters });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -352,13 +395,26 @@ function OverflowFiltersMenu({
               activeHidden > 0 && "border-primary/40 text-primary"
             ),
             ...getReferenceProps(),
+            "aria-expanded": open,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFilter.UiFilter, className: "text-[14px]" }),
               activeHidden > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: activeHidden })
             ]
           }
         ),
-        hasHidden && open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        mobilePage && /* @__PURE__ */ jsxRuntime.jsx(
+          Modal.Modal,
+          {
+            open: hasHidden && open,
+            onClose: closeOverflowMenu,
+            title: "Filters",
+            headerSlot: clearAll,
+            footer: actions,
+            scrollBody: false,
+            children: /* @__PURE__ */ jsxRuntime.jsx(OverflowFilterRows, { filters: stagedFilters, mobilePage: true })
+          }
+        ),
+        !mobilePage && hasHidden && open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: refs.setFloating,
@@ -371,16 +427,7 @@ function OverflowFiltersMenu({
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 px-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Filters" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
-                      onClick: () => stagedFilters.forEach(filterBarUtils.clearFilterBarFilter),
-                      disabled: stagedFilters.every((filter) => !filterBarUtils.isFilterBarFilterActive(filter)),
-                      children: "Clear all"
-                    }
-                  ),
+                  clearAll,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
@@ -394,79 +441,8 @@ function OverflowFiltersMenu({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto rounded-md border border-border/70", children: stagedFilters.map((filter) => {
-                const active = filterBarUtils.isFilterBarFilterActive(filter);
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    "data-overflow-filter-row": filter.key,
-                    className: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2 overflow-visible p-3 md:h-12 md:grid-cols-[minmax(7rem,10rem)_auto_minmax(0,1fr)_auto] md:items-center md:p-2",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "label",
-                        {
-                          htmlFor: filterInputId(filter),
-                          className: "flex min-w-0 items-center gap-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
-                          title: filter.description ?? filter.label,
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              Icon.LabelIcon,
-                              {
-                                icon: filterBarFieldUtils.sizedIcon(filter.icon, 12),
-                                className: "text-[12px] normal-case"
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: filter.label })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-sm text-muted-foreground md:block", children: "=" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 min-w-0 overflow-visible md:col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          "aria-label": `Clear ${filter.label}`,
-                          title: `Clear ${filter.label}`,
-                          className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:text-muted-foreground/40",
-                          onClick: () => filterBarUtils.clearFilterBarFilter(filter),
-                          disabled: !active,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
-                        }
-                      )
-                    ]
-                  },
-                  filter.key
-                );
-              }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-8 px-3 text-xs",
-                    onClick: closeOverflowMenu,
-                    children: "Close"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
-                  {
-                    type: "button",
-                    variant: "default",
-                    size: "sm",
-                    className: "h-8 px-3 text-xs",
-                    onClick: () => {
-                      applyStagedFilterValues(filters, stagedValues);
-                      onApply == null ? void 0 : onApply();
-                      setOpen(false);
-                    },
-                    children: "Apply"
-                  }
-                )
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsx(OverflowFilterRows, { filters: stagedFilters }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: actions })
             ]
           }
         ) }) })
@@ -474,6 +450,68 @@ function OverflowFiltersMenu({
     }
   );
 }
+function OverflowFilterRows({
+  filters,
+  mobilePage = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto",
+        mobilePage ? "bg-background" : "rounded-md border border-border/70"
+      ),
+      children: filters.map((filter) => {
+        const active = filterBarUtils.isFilterBarFilterActive(filter);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-overflow-filter-row": filter.key,
+            className: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2 overflow-visible p-4 md:h-12 md:grid-cols-[minmax(7rem,10rem)_auto_minmax(0,1fr)_auto] md:items-center md:p-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "label",
+                {
+                  htmlFor: filterInputId(filter),
+                  className: "col-span-2 flex min-w-0 items-center gap-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:col-span-1",
+                  title: filter.description ?? filter.label,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filterBarFieldUtils.sizedIcon(filter.icon, 12), className: "text-[12px] normal-case" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: filter.label })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-sm text-muted-foreground md:block", children: "=" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Clear ${filter.label}`,
+                  title: `Clear ${filter.label}`,
+                  className: "inline-flex h-6 w-6 self-center items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:text-muted-foreground/40",
+                  onClick: () => filterBarUtils.clearFilterBarFilter(filter),
+                  disabled: !active,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
+                }
+              )
+            ]
+          },
+          filter.key
+        );
+      })
+    }
+  );
+}
+function OverflowFilterActions({
+  onClose,
+  onApply
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 px-3 text-xs", onClick: onClose, children: "Close" }),
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "default", size: "sm", className: "h-8 px-3 text-xs", onClick: onApply, children: "Apply" })
+  ] });
+}
 function FilterBarKeyValueControl({ filter }) {
   if (filter.kind === "date-range") {
     return /* @__PURE__ */ jsxRuntime.jsx(