@compill/admin 1.0.49 → 1.0.50

package/index.cjs.js

@@ -161,6 +161,41 @@ function DialogButton(_a) {
   });
 }
 
+function ButtonBar(_a) {
+  var {
+      children
+    } = _a,
+    props = __rest$1(_a, ["children"]);
+  return jsxRuntime.jsx("div", Object.assign({
+    dflex: true,
+    border: "1px",
+    borderColor: "zinc-200",
+    divideX: "1px",
+    divideColor: "zinc-200",
+    rounded: "lg",
+    overflow: "hidden"
+  }, props, {
+    children: children
+  }));
+}
+function ButtonBarButton(_a) {
+  var {
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "children"]);
+  return jsxRuntime.jsxs(ui.Button, Object.assign({
+    scheme: "dark",
+    size: "sm",
+    aspectRatio: icon && !children ? "square" : undefined,
+    variant: "borderless"
+  }, props, {
+    children: [icon && jsxRuntime.jsx(ui.Icon, {
+      path: icon
+    }), children]
+  }));
+}
+
 function InvalidateButton(_a) {
   var {
       pathOrPermalink
@@ -171,12 +206,7 @@ function InvalidateButton(_a) {
   const invalidate = api.useMutate(mutation, {
     successMsg: "Page successfully invalidated"
   });
-  return jsxRuntime.jsx(ui.IconButton, Object.assign({
-    scheme: "dark",
-    variant: "glass",
-    size: "md",
-    corners: "square",
-    aspectRatio: "square",
+  return jsxRuntime.jsx(ButtonBarButton, Object.assign({
     title: "Regenerate",
     disabled: mutation.isLoading,
     onClick: invalidate,
@@ -1468,1004 +1498,1023 @@ function TableTopBar(_a) {
   }));
 }
 
-const defaultErrorMsg$2 = "Oops, something went wrong...";
-function nonNullValues$1(data) {
-  var _a;
-  if (data) {
-    const nonNullData = Object.assign({}, data);
-    for (const key in data) nonNullData[key] = (_a = nonNullData[key]) !== null && _a !== void 0 ? _a : "";
-    return nonNullData;
-  }
-  return data;
+function compareValues(a, b, order) {
+    if (a < b) {
+        return order === 'asc' ? -1 : 1;
+    }
+    if (a > b) {
+        return order === 'asc' ? 1 : -1;
+    }
+    return 0;
 }
-function ItemEditDialog$1(_a) {
-  var _b, _c, _d, _e;
-  var {
-      initialValues,
-      itemLabel,
-      queryId = "",
-      api: api$1,
-      queryFetchOptions,
-      querySaveOptions,
-      onSuccess,
-      onFetchError,
-      fetchErrorMsg = defaultErrorMsg$2,
-      onSaveError,
-      saveErrorMsg = defaultErrorMsg$2,
-      fetchToFormData,
-      formToQueryData,
-      invalidateQueriesOnSuccess = true,
-      invalidateQueryKey,
-      retryText = "Retry",
-      cancelLabel = "Cancel",
-      saveLabel,
-      size = "lg",
-      title,
-      form: form$1,
-      show,
-      onClose,
-      formikProps
-    } = _a,
-    props = __rest$1(_a, ["initialValues", "itemLabel", "queryId", "api", "queryFetchOptions", "querySaveOptions", "onSuccess", "onFetchError", "fetchErrorMsg", "onSaveError", "saveErrorMsg", "fetchToFormData", "formToQueryData", "invalidateQueriesOnSuccess", "invalidateQueryKey", "retryText", "cancelLabel", "saveLabel", "size", "title", "form", "show", "onClose", "formikProps"]);
-  const {
-    isInitialLoading,
-    isFetching,
-    data,
-    isError,
-    error /*, error*/,
-    refetch
-  } = api.useApiQuery(api$1.queryKey, api$1.get, queryId, Object.assign({
-    enabled: !( /*queryId == 0 || */queryId == "" || queryId == null || queryId == undefined),
-    onError: onFetchError
-  }, queryFetchOptions));
-  // const [activeTab, setActiveTab] = React.useState(form && Array.isArray(form) ? form[0].key : "");
-  // const [showTab, setShowTab] = React.useState(true);
-  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(api$1.upsert, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey, querySaveOptions) : api.useApiMutation(api$1.upsert, api$1.queryKey, queryId, querySaveOptions);
-  const retry = React__default["default"].useCallback(() => refetch(), [refetch]);
-  const saveItem = React__default["default"].useCallback((item, actions) => __awaiter(this, void 0, void 0, function* () {
-    // Clear mutation error if any
-    mutation.reset();
-    const formItem = formToQueryData ? formToQueryData(item) : Object.assign({}, item);
-    yield mutation.mutateAsync(formItem).then(response => {
-      var _a;
-      if (onSuccess) onSuccess(formItem, response);else reactToastify.toast.success(`${title ? title(formItem) : (_a = formItem.name) !== null && _a !== void 0 ? _a : formItem.title} ${queryId ? "saved" : "created"}`);
-      // closing delete modal
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-    }).catch(error => {
-      var _a;
-      console.error("on error", error);
-      if (onSaveError) onSaveError(item);else reactToastify.toast.error(`Couldn't save ${title ? title(formItem) : (_a = formItem.name) !== null && _a !== void 0 ? _a : formItem.title}`);
-      actions.setSubmitting(false);
+
+function orderBy(arr, criteria, orders) {
+    return arr.slice().sort((a, b) => {
+        const ordersLength = orders.length;
+        for (let i = 0; i < criteria.length; i++) {
+            const order = ordersLength > i ? orders[i] : orders[ordersLength - 1];
+            const criterion = criteria[i];
+            const criterionIsFunction = typeof criterion === 'function';
+            const valueA = criterionIsFunction ? criterion(a) : a[criterion];
+            const valueB = criterionIsFunction ? criterion(b) : b[criterion];
+            const result = compareValues(valueA, valueB, order);
+            if (result !== 0) {
+                return result;
+            }
+        }
+        return 0;
     });
-  }), [mutation, formToQueryData, onSuccess, onSaveError, onClose]);
-  // const switchTab = React.useCallback((tab: string) =>
-  // {
-  // setActiveTab(tab);
-  // setShowTab(false);
-  // setTimeout(function ()
-  // {
-  //     setActiveTab(tab);
-  //     setShowTab(true);
-  // }, 150);
-  // }, [setActiveTab])
-  return jsxRuntime.jsxs(ui.Modal, Object.assign({
-    size: size,
-    show: show,
-    onClose: onClose,
-    scheme: "light",
-    transition: true
-  }, props, {
-    children: [jsxRuntime.jsxs(ui.Modal.Header, {
-      children: [!isInitialLoading && queryId && `Edit ${title ? title(data) : (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data["name"]) !== null && _b !== void 0 ? _b : data === null || data === void 0 ? void 0 : data["title"]) !== null && _c !== void 0 ? _c : data === null || data === void 0 ? void 0 : data["name"]) !== null && _d !== void 0 ? _d : ""}`, !queryId && `Create new ${itemLabel !== null && itemLabel !== void 0 ? itemLabel : "item"}`, Array.isArray(form$1) && jsxRuntime.jsx(jsxRuntime.Fragment, {})
-      // <ul className="nav nav-bold nav-pills">
-      //     {form.map(item =>
-      //         <li key={item.key} className="nav-item cursor-pointer bg-hover-light rounded" onClick={() => switchTab(item.key)}>
-      //             <span className={clsx("nav-link", activeTab === item.key && "active")} data-toggle="tab">{item.label}</span>
-      //         </li>
-      //     )}
-      // </ul>
-      ]
-    }), isInitialLoading && jsxRuntime.jsx(ui.Modal.Body, {
-      children: jsxRuntime.jsx(components.QueryLoadingState, {
-        minW: "72"
-      })
-    }), isError && jsxRuntime.jsx(ui.Modal.Body, {
-      children: jsxRuntime.jsx(components.RetryOnError, {
-        label: `${fetchErrorMsg} ${error}`,
-        onClick: retry
-      })
-    }), !isInitialLoading && !isError && jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: jsxRuntime.jsx(formik.Formik
-      // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
-      , Object.assign({
-        // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
-        initialValues: fetchToFormData && queryId && data ? fetchToFormData(nonNullValues$1(data)) : (_e = nonNullValues$1(initialValues(data))) !== null && _e !== void 0 ? _e : {},
-        onSubmit: saveItem
-      }, formikProps, {
-        children: ({
-          setFieldValue,
-          dirty,
-          handleSubmit,
-          isValid,
-          values
-        }) => jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx(ui.Modal.Body, {
-            pb: "6",
-            children: jsxRuntime.jsxs(formik.Form, {
-              children: [/*#__PURE__*/React__default["default"].isValidElement(form$1) && form$1, Array.isArray(form$1) && jsxRuntime.jsx(form.FormRenderer, {
-                form: form$1
-              }), react.isFunction(form$1) && jsxRuntime.jsx(form.FormRenderer, {
-                form: form$1(data !== null && data !== void 0 ? data : values)
-              })]
-            })
-          }), jsxRuntime.jsxs(ui.Modal.Footer, {
-            dflex: true,
-            placeContent: "end",
-            spaceX: "3",
-            children: [jsxRuntime.jsx(ui.Button, {
-              disabled: mutation.isLoading,
-              onClick: onClose,
-              variant: "borderless",
-              me: "2",
-              children: cancelLabel
-            }), jsxRuntime.jsx(ui.Button, {
-              type: "submit",
-              disabled: !dirty || mutation.isLoading /* || !isValid*/,
-              onClick: () => handleSubmit(),
-              children: saveLabel ? saveLabel : queryId ? "Update" : "Create"
-            })]
-          })]
-        })
-      }))
-    }), mutation.isLoading && jsxRuntime.jsx(components.ModalLoadingOverlay, {})]
-  }));
 }
 
-function QueryWrapperDialog({
-  api: api$1,
-  fn,
-  transformFn,
-  config,
-  onClose,
-  queryId,
-  invalidateQueryKey
-}) {
-  const {
-    data,
-    isFetching
-  } = api.useApiQuery(api$1.queryKey, fn === "get" || fn === "getTransformed" ? api$1.get : api$1.getAll, undefined, {
-    retryOnMount: false,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false
-  });
-  const transformedData = React__default["default"].useMemo(() => {
-    if (data && (fn === "getTransformed" || fn === "getAllTransformed")) {
-      if (!transformFn) console.warn(`QueryWrapperDialog: you forgot to pass transformFn as parameter for fn ${fn}`);
-      // @ts-ignore
-      return transformFn === null || transformFn === void 0 ? void 0 : transformFn(data);
+function sortBy(arr, criteria) {
+    return orderBy(arr, criteria, ['asc']);
+}
+
+function noop() { }
+
+function getSymbols(object) {
+    return Object.getOwnPropertySymbols(object).filter(symbol => Object.prototype.propertyIsEnumerable.call(object, symbol));
+}
+
+function getTag(value) {
+    if (value == null) {
+        return value === undefined ? '[object Undefined]' : '[object Null]';
     }
-    return data;
-  }, [data, fn, transformFn]);
-  if (isFetching) return null;
-  // @ts-ignore
-  return jsxRuntime.jsx(ItemEditDialog$1, Object.assign({}, config(transformedData), {
-    queryId: queryId,
-    invalidateQueryKey: invalidateQueryKey,
-    show: true,
-    onClose: onClose
-  }));
+    return Object.prototype.toString.call(value);
 }
 
-function MultiQueryWrapperDialog({
-  queries,
-  config,
-  onClose,
-  queryId,
-  invalidateQueryKey
-}) {
-  const {
-    data,
-    isFetching,
-    isError
-  } = api.useApiQueries(queries.map(q => ({
-    queryKey: q.api.queryKey,
-    queryFn: q.fn == "get" ? q.api.get : q.api.getAll,
-    queryOptions: {
-      cacheTime: q.cache === false ? 0 : undefined,
-      staleTime: q.cache === false ? 0 : undefined
+const regexpTag = '[object RegExp]';
+const stringTag = '[object String]';
+const numberTag = '[object Number]';
+const booleanTag = '[object Boolean]';
+const argumentsTag = '[object Arguments]';
+const symbolTag = '[object Symbol]';
+const dateTag = '[object Date]';
+const mapTag = '[object Map]';
+const setTag = '[object Set]';
+const arrayTag = '[object Array]';
+const functionTag = '[object Function]';
+const arrayBufferTag = '[object ArrayBuffer]';
+const objectTag = '[object Object]';
+const errorTag = '[object Error]';
+const dataViewTag = '[object DataView]';
+const uint8ArrayTag = '[object Uint8Array]';
+const uint8ClampedArrayTag = '[object Uint8ClampedArray]';
+const uint16ArrayTag = '[object Uint16Array]';
+const uint32ArrayTag = '[object Uint32Array]';
+const bigUint64ArrayTag = '[object BigUint64Array]';
+const int8ArrayTag = '[object Int8Array]';
+const int16ArrayTag = '[object Int16Array]';
+const int32ArrayTag = '[object Int32Array]';
+const bigInt64ArrayTag = '[object BigInt64Array]';
+const float32ArrayTag = '[object Float32Array]';
+const float64ArrayTag = '[object Float64Array]';
+
+function isPlainObject(value) {
+    if (!value || typeof value !== 'object') {
+        return false;
     }
-  })));
-  const transformedData = React__default["default"].useMemo(() => {
-    return data === null || data === void 0 ? void 0 : data.map((d, index) => {
-      var _a, _b;
-      return queries[index].transformFn ? (_b = (_a = queries[index]) === null || _a === void 0 ? void 0 : _a.transformFn) === null || _b === void 0 ? void 0 : _b.call(_a, d) : d;
-    });
-  }, [data, queries]);
-  // TODO This is not really good
-  // So instead, add a isPreloading and isPreloadingError to ItemEditDialog to handle the cases
-  // if (isFetching)
-  //     return null
-  // @ts-ignore
-  return jsxRuntime.jsx(ItemEditDialog$1, Object.assign({
-    isPreloading: isFetching
-  }, config(...transformedData), {
-    queryId: queryId,
-    invalidateQueryKey: invalidateQueryKey,
-    show: true,
-    onClose: onClose
-  }));
+    const proto = Object.getPrototypeOf(value);
+    const hasObjectPrototype = proto === null ||
+        proto === Object.prototype ||
+        Object.getPrototypeOf(proto) === null;
+    if (!hasObjectPrototype) {
+        return false;
+    }
+    return Object.prototype.toString.call(value) === '[object Object]';
 }
 
-function DialogRenderer({
-  config,
-  onClose,
-  invalidateQueryKey,
-  queryId
-}) {
-  const props = __rest$1(config, ["type"]);
-  if (config.type === "dialog") return jsxRuntime.jsx(ItemEditDialog$1, Object.assign({}, props, {
-    queryId: queryId,
-    invalidateQueryKey: invalidateQueryKey,
-    show: true,
-    onClose: onClose
-  }));
-  if (config.type === "query") return jsxRuntime.jsx(QueryWrapperDialog, Object.assign({}, props, {
-    queryId: queryId,
-    invalidateQueryKey: invalidateQueryKey,
-    onClose: onClose
-  }));
-  if (config.type === "multiQuery") return jsxRuntime.jsx(MultiQueryWrapperDialog, Object.assign({}, props, {
-    queryId: queryId,
-    invalidateQueryKey: invalidateQueryKey,
-    onClose: onClose
-  }));
-  return null;
+function eq(value, other) {
+    return value === other || (Number.isNaN(value) && Number.isNaN(other));
 }
 
-function ItemDeleteDialog(_a) {
-  var {
-      itemLabel,
-      queryId = "",
-      api: api$1,
-      invalidateQueriesOnSuccess = true,
-      invalidateQueryKey,
-      size = "lg",
-      show,
-      onClose
-    } = _a,
-    props = __rest$1(_a, ["itemLabel", "queryId", "api", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "show", "onClose"]);
-  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(api$1.delete, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey) : api.useApiMutation(api$1.upsert, api$1.queryKey);
-  const mutate = api.useMutate(mutation, {
-    onSuccess: () => onClose === null || onClose === void 0 ? void 0 : onClose()
-  });
-  const handleDelete = React__default["default"].useCallback(() => mutate(queryId), [mutate, queryId]);
-  return jsxRuntime.jsxs(ui.Modal, Object.assign({
-    size: size,
-    show: show,
-    onClose: onClose,
-    scheme: "danger",
-    variant: "glass",
-    transition: true
-  }, props, {
-    children: [jsxRuntime.jsx(ui.Modal.Header, {
-      children: `Delete ${itemLabel}`
-    }), jsxRuntime.jsxs(ui.Modal.Body, {
-      pb: "6",
-      children: ["Do you really want to delete ", itemLabel, "?"]
-    }), jsxRuntime.jsxs(ui.Modal.Footer, {
-      dflex: true,
-      placeContent: "end",
-      spaceX: "3",
-      children: [jsxRuntime.jsx(ui.Button, {
-        disabled: mutation.isLoading,
-        onClick: onClose,
-        variant: "borderless",
-        scheme: "secondary",
-        me: "2",
-        children: "Cancel"
-      }), jsxRuntime.jsx(ui.Button, {
-        scheme: "danger",
-        disabled: mutation.isLoading,
-        onClick: handleDelete,
-        children: "Delete"
-      })]
-    }), mutation.isLoading && jsxRuntime.jsx(components.ModalLoadingOverlay, {})]
-  }));
+function isEqualWith(a, b, areValuesEqual) {
+    return isEqualWithImpl(a, b, undefined, undefined, undefined, undefined, areValuesEqual);
 }
-
-const [provider, useContext] = react.createContext();
-function TableViewProvider({
-  editView,
-  deleteItem,
-  queryKey,
-  children
-}) {
-  const openLink = hooks.useOpenLink();
-  const navigate = reactRouterDom.useNavigate();
-  const [dialog, setDialog] = React__default["default"].useState(null);
-  const onCloseDialog = React__default["default"].useCallback(() => setDialog(null), [setDialog]);
-  const onAction = React__default["default"].useCallback((action, item) => {
-    switch (action.type) {
-      case "view":
-        {
-          navigate(react.runIfFn(action.path, item));
-          break;
-        }
-      case "link":
-        {
-          openLink(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${react.runIfFn(action.path, item)}`);
-          break;
-        }
-      case "edit":
-        {
-          if (editView.type == "customDialog") {
-            setDialog(editView.render({
-              show: true,
-              onClose: onCloseDialog
-            }));
-          } else {
-            setDialog(jsxRuntime.jsx(DialogRenderer, {
-              onClose: onCloseDialog,
-              config: editView,
-              queryId: item.id,
-              invalidateQueryKey: queryKey
-            }));
-          }
-          break;
-        }
-      case "delete":
-        {
-          setDialog(jsxRuntime.jsx(ItemDeleteDialog, Object.assign({
-            show: true,
-            onClose: onCloseDialog,
-            queryId: item.id,
-            invalidateQueryKey: queryKey
-          }, deleteItem, {
-            itemLabel: react.runIfFn(deleteItem.itemLabel, item)
-          })));
-          // TODO
-          // const { initialValues, ...props } = editItem!!
-          // setDialog(<ItemEditDialog {...props} initialValues={runIfFn(initialValues, item)} show queryId={item?.id} onClose={onCloseDialog} />)
-          break;
+function isEqualWithImpl(a, b, property, aParent, bParent, stack, areValuesEqual) {
+    const result = areValuesEqual(a, b, property, aParent, bParent, stack);
+    if (result !== undefined) {
+        return result;
+    }
+    if (typeof a === typeof b) {
+        switch (typeof a) {
+            case 'bigint':
+            case 'string':
+            case 'boolean':
+            case 'symbol':
+            case 'undefined': {
+                return a === b;
+            }
+            case 'number': {
+                return a === b || Object.is(a, b);
+            }
+            case 'function': {
+                return a === b;
+            }
+            case 'object': {
+                return areObjectsEqual(a, b, stack, areValuesEqual);
+            }
         }
     }
-  }, [navigate, editView, deleteItem]);
-  const Provider = provider;
-  const value = {
-    dialog,
-    onAction
-  };
-  return jsxRuntime.jsx(Provider, {
-    value: value,
-    children: children
-  });
+    return areObjectsEqual(a, b, stack, areValuesEqual);
 }
-
-/**
-   * table-core
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
-// type Person = {
-//   firstName: string
-//   lastName: string
-//   age: number
-//   visits: number
-//   status: string
-//   progress: number
-//   createdAt: Date
-//   nested: {
-//     foo: [
-//       {
-//         bar: 'bar'
-//       }
-//     ]
-//     bar: { subBar: boolean }[]
-//     baz: {
-//       foo: 'foo'
-//       bar: {
-//         baz: 'baz'
-//       }
-//     }
-//   }
-// }
-
-// const test: DeepKeys<Person> = 'nested.foo.0.bar'
-// const test2: DeepKeys<Person> = 'nested.bar'
-
-// const helper = createColumnHelper<Person>()
-
-// helper.accessor('nested.foo', {
-//   cell: info => info.getValue(),
-// })
-
-// helper.accessor('nested.foo.0.bar', {
-//   cell: info => info.getValue(),
-// })
-
-// helper.accessor('nested.bar', {
-//   cell: info => info.getValue(),
-// })
-
-function createColumnHelper() {
-  return {
-    accessor: (accessor, column) => {
-      return typeof accessor === 'function' ? {
-        ...column,
-        accessorFn: accessor
-      } : {
-        ...column,
-        accessorKey: accessor
-      };
-    },
-    display: column => column,
-    group: column => column
-  };
+function areObjectsEqual(a, b, stack, areValuesEqual) {
+    if (Object.is(a, b)) {
+        return true;
+    }
+    let aTag = getTag(a);
+    let bTag = getTag(b);
+    if (aTag === argumentsTag) {
+        aTag = objectTag;
+    }
+    if (bTag === argumentsTag) {
+        bTag = objectTag;
+    }
+    if (aTag !== bTag) {
+        return false;
+    }
+    switch (aTag) {
+        case stringTag:
+            return a.toString() === b.toString();
+        case numberTag: {
+            const x = a.valueOf();
+            const y = b.valueOf();
+            return eq(x, y);
+        }
+        case booleanTag:
+        case dateTag:
+        case symbolTag:
+            return Object.is(a.valueOf(), b.valueOf());
+        case regexpTag: {
+            return a.source === b.source && a.flags === b.flags;
+        }
+        case functionTag: {
+            return a === b;
+        }
+    }
+    stack = stack ?? new Map();
+    const aStack = stack.get(a);
+    const bStack = stack.get(b);
+    if (aStack != null && bStack != null) {
+        return aStack === b;
+    }
+    stack.set(a, b);
+    stack.set(b, a);
+    try {
+        switch (aTag) {
+            case mapTag: {
+                if (a.size !== b.size) {
+                    return false;
+                }
+                for (const [key, value] of a.entries()) {
+                    if (!b.has(key) || !isEqualWithImpl(value, b.get(key), key, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            case setTag: {
+                if (a.size !== b.size) {
+                    return false;
+                }
+                const aValues = Array.from(a.values());
+                const bValues = Array.from(b.values());
+                for (let i = 0; i < aValues.length; i++) {
+                    const aValue = aValues[i];
+                    const index = bValues.findIndex(bValue => {
+                        return isEqualWithImpl(aValue, bValue, undefined, a, b, stack, areValuesEqual);
+                    });
+                    if (index === -1) {
+                        return false;
+                    }
+                    bValues.splice(index, 1);
+                }
+                return true;
+            }
+            case arrayTag:
+            case uint8ArrayTag:
+            case uint8ClampedArrayTag:
+            case uint16ArrayTag:
+            case uint32ArrayTag:
+            case bigUint64ArrayTag:
+            case int8ArrayTag:
+            case int16ArrayTag:
+            case int32ArrayTag:
+            case bigInt64ArrayTag:
+            case float32ArrayTag:
+            case float64ArrayTag: {
+                if (typeof Buffer !== 'undefined' && Buffer.isBuffer(a) !== Buffer.isBuffer(b)) {
+                    return false;
+                }
+                if (a.length !== b.length) {
+                    return false;
+                }
+                for (let i = 0; i < a.length; i++) {
+                    if (!isEqualWithImpl(a[i], b[i], i, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            case arrayBufferTag: {
+                if (a.byteLength !== b.byteLength) {
+                    return false;
+                }
+                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
+            }
+            case dataViewTag: {
+                if (a.byteLength !== b.byteLength || a.byteOffset !== b.byteOffset) {
+                    return false;
+                }
+                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
+            }
+            case errorTag: {
+                return a.name === b.name && a.message === b.message;
+            }
+            case objectTag: {
+                const areEqualInstances = areObjectsEqual(a.constructor, b.constructor, stack, areValuesEqual) ||
+                    (isPlainObject(a) && isPlainObject(b));
+                if (!areEqualInstances) {
+                    return false;
+                }
+                const aKeys = [...Object.keys(a), ...getSymbols(a)];
+                const bKeys = [...Object.keys(b), ...getSymbols(b)];
+                if (aKeys.length !== bKeys.length) {
+                    return false;
+                }
+                for (let i = 0; i < aKeys.length; i++) {
+                    const propKey = aKeys[i];
+                    const aProp = a[propKey];
+                    if (!Object.hasOwn(b, propKey)) {
+                        return false;
+                    }
+                    const bProp = b[propKey];
+                    if (!isEqualWithImpl(aProp, bProp, propKey, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            default: {
+                return false;
+            }
+        }
+    }
+    finally {
+        stack.delete(a);
+        stack.delete(b);
+    }
 }
 
-function TableRowPublishPostButton$1(_a) {
-  var {
-      id,
-      api: api$1,
-      status,
-      invalidateQueryKey
-    } = _a,
-    props = __rest$1(_a, ["id", "api", "status", "invalidateQueryKey"]);
-  const isDraft = status == "draft";
-  const mutation = api.useInvalidateParentMutation(isDraft ? api$1.publish : api$1.unpublish, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey, {
-    networkMode: "always"
-  });
-  const publish = React__default["default"].useCallback(event => {
-    event === null || event === void 0 ? void 0 : event.preventDefault();
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
-    mutation.reset();
-    mutation.mutateAsync(id).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => reactToastify.toast.error(`Error: ${error}`));
-  }, [mutation, id]);
-  return jsxRuntime.jsx(ui.Button, Object.assign({
-    variant: "borderless",
-    corners: "square",
-    scheme: "dark",
-    onClick: publish
-  }, props, {
-    children: jsxRuntime.jsx(ui.Icon, {
-      path: isDraft ? mdiPublish : mdiPublishOff,
-      size: "sm"
-    })
-  }));
+function isEqual(a, b) {
+    return isEqualWith(a, b, noop);
 }
 
-function TableRowActionsView({
-  row,
-  onAction,
-  rowActions,
-  api,
-  queryKey
+function TableFilters({
+  form: form$1,
+  initialValues,
+  schema,
+  processInput
 }) {
-  const item = row.original;
-  return jsxRuntime.jsx("div", {
-    dflex: true,
-    w: "full",
-    alignItems: "stretch",
-    placeContent: "end",
-    h: "full",
-    children: rowActions === null || rowActions === void 0 ? void 0 : rowActions.map((action, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
-      children: [action.type === "publish" && jsxRuntime.jsx(TableRowPublishPostButton$1, {
-        id: item.id,
-        api: api,
-        status: item.status,
-        invalidateQueryKey: queryKey
-      }), action.type == "custom" && jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: action.component(item, queryKey, action.icon, action.label)
-      }), !["publish", "custom"].includes(action.type) && jsxRuntime.jsx(ActionButton$1, {
-        onClick: () => onAction(action, item),
-        scheme: schemes$1[action.type],
-        children: jsxRuntime.jsx(ui.Icon, {
-          path: icons[action.type],
-          size: "sm"
+  const {
+    showFilters
+  } = useContext$1();
+  const {
+    getFilters,
+    setFilters
+  } = table.useTableContext();
+  const handleSubmit = React__default["default"].useCallback((values, actions) => {
+    var _a;
+    const params = (_a = processInput === null || processInput === void 0 ? void 0 : processInput(values)) !== null && _a !== void 0 ? _a : values;
+    if (!isEqual(params, getFilters())) setFilters(params);
+    // setFilters(processInput?.(values) ?? values)
+    actions.setSubmitting(false);
+  }, [setFilters, processInput]);
+  const handleReset = React__default["default"].useCallback(resetForm => {
+    setFilters(initialValues);
+    resetForm();
+  }, [setFilters, initialValues]);
+  React__default["default"].useEffect(() => setFilters(initialValues), []);
+  return jsxRuntime.jsx(ui.Collapse, {
+    in: showFilters,
+    style: {
+      overflow: showFilters ? "initial" : "hidden"
+    },
+    children: jsxRuntime.jsx("div", {
+      p: "8",
+      borderT: "px",
+      borderB: "px",
+      borderColor: "slate-100",
+      children: jsxRuntime.jsx(form.FormProvider, {
+        initialValues: form.mergeInitialFormValues(getFilters(), initialValues),
+        onSubmit: handleSubmit,
+        validationSchema: schema,
+        enableReinitialize: true,
+        children: props => jsxRuntime.jsxs("div", {
+          dflex: true,
+          gap: "3",
+          placeContent: "start",
+          children: [jsxRuntime.jsx(form.FormRenderer, {
+            flexRow: true,
+            w: "auto",
+            form: form$1
+          }), jsxRuntime.jsx(Buttons, {
+            handleReset: () => handleReset(props.resetForm)
+          })]
         })
-      })]
-    }, index))
+      })
+    })
   });
 }
-function ActionButton$1(_a) {
-  var {
-      onClick
-    } = _a,
-    props = __rest$1(_a, ["onClick"]);
-  const handleClick = React__default["default"].useCallback(event => {
-    event === null || event === void 0 ? void 0 : event.preventDefault();
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
-  }, [onClick]);
-  return jsxRuntime.jsx(ui.Button, Object.assign({
+function Buttons({
+  handleReset
+}) {
+  return jsxRuntime.jsxs("div", {
     dflex: true,
-    alignContent: "center",
-    placeContent: "center",
-    py: "2.5",
-    px: "3",
-    h: "full",
-    size: "lg",
-    variant: "borderless",
-    corners: "default",
-    onClick: handleClick
-  }, props));
-}
-const icons = {
-  "link": mdiOpenInNew,
-  "view": mdiEye,
-  "edit": mdiPencil,
-  "delete": mdiDelete,
-  "publish": mdiDelete,
-  "custom": ""
-};
-const schemes$1 = {
-  "link": "dark",
-  "view": "dark",
-  "edit": "dark",
-  "delete": "dark",
-  "publish": "dark",
-  "custom": "dark"
-};
-
-function useTableProps(api, table, rowActions) {
-  const navigate = reactRouterDom.useNavigate();
-  const openLink = hooks.useOpenLink();
-  const {
-    onAction
-  } = useContext();
-  const {
-      onRowClick,
-      columns: c
-    } = table,
-    props = __rest$1(table, ["onRowClick", "columns"]);
-  const onRowClickHandler = React__default["default"].useCallback(item => {
-    if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) === "navigate") navigate(react.runIfFn(onRowClick.path, item));else if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) == "link") openLink(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${react.runIfFn(onRowClick.path, item)}`);
-  }, [navigate, onRowClick]);
-  const columns = React__default["default"].useMemo(() => {
-    const columns = table.columns.concat([]);
-    if (rowActions) {
-      columns.push(createColumnHelper().display({
-        id: "actions",
-        header: "Actions",
-        cell: props => jsxRuntime.jsx(TableRowActionsView, {
-          row: props.row,
-          onAction: onAction,
-          rowActions: rowActions,
-          api: api,
-          queryKey: api.queryKey
-        })
-      }));
-    }
-    return columns;
-  }, [table]);
-  const tableProps = Object.assign({}, props);
-  tableProps.columns = columns;
-  tableProps.onRowClick = onRowClickHandler;
-  tableProps.queryKey = api.queryKey;
-  tableProps.queryFn = api.search;
-  return tableProps;
+    gap: "3",
+    children: [jsxRuntime.jsxs("div", {
+      dflex: true,
+      flexCol: true,
+      children: [jsxRuntime.jsx(form.FieldLabel, {
+        name: "",
+        label: "\u00A0"
+      }), jsxRuntime.jsx(form.SubmitButton, {
+        children: "Filter"
+      })]
+    }), jsxRuntime.jsxs("div", {
+      dflex: true,
+      flexCol: true,
+      children: [jsxRuntime.jsx(form.FieldLabel, {
+        name: "",
+        label: "\u00A0"
+      }), jsxRuntime.jsx(ui.Button, {
+        scheme: "neutral",
+        onClick: handleReset,
+        children: "Reset"
+      })]
+    })]
+  });
 }
 
-function compareValues(a, b, order) {
-    if (a < b) {
-        return order === 'asc' ? -1 : 1;
-    }
-    if (a > b) {
-        return order === 'asc' ? 1 : -1;
-    }
-    return 0;
+function ActionButton$1({
+  label,
+  buttonProps,
+  icon,
+  queryKey,
+  queryFn,
+  successMsg,
+  errorMsg,
+  invalidateParent
+}) {
+  const mutation = invalidateParent ? api.useInvalidateParentMutation(queryFn, queryKey) : api.useApiMutation(queryFn, queryKey);
+  const mutate = api.useMutate(mutation, {
+    successMsg,
+    errorMsg
+  });
+  return jsxRuntime.jsxs(ui.Button, Object.assign({
+    display: "flex",
+    alignItems: "center",
+    gap: "3"
+  }, buttonProps, {
+    onClick: mutate,
+    disabled: mutation.isLoading,
+    children: [icon && jsxRuntime.jsx(ui.Icon, {
+      path: icon
+    }), label]
+  }));
 }
 
-function orderBy(arr, criteria, orders) {
-    return arr.slice().sort((a, b) => {
-        const ordersLength = orders.length;
-        for (let i = 0; i < criteria.length; i++) {
-            const order = ordersLength > i ? orders[i] : orders[ordersLength - 1];
-            const criterion = criteria[i];
-            const criterionIsFunction = typeof criterion === 'function';
-            const valueA = criterionIsFunction ? criterion(a) : a[criterion];
-            const valueB = criterionIsFunction ? criterion(b) : b[criterion];
-            const result = compareValues(valueA, valueB, order);
-            if (result !== 0) {
-                return result;
-            }
-        }
-        return 0;
-    });
+function TableMassActions({
+  actions
+}) {
+  const {
+    ids
+  } = table.useTableContext();
+  const showMassActions = ids && ids.length > 0;
+  return jsxRuntime.jsx(ui.Collapse, {
+    in: showMassActions,
+    style: {
+      overflow: showMassActions ? "initial" : "hidden"
+    },
+    children: jsxRuntime.jsx("div", {
+      dflex: true,
+      gap: "3",
+      flexWrap: true,
+      alignItems: "center",
+      px: "8",
+      pt: "5",
+      children: actions.map((action, index) => jsxRuntime.jsx("div", {
+        children: action.type == "button" && !action.showConfirmationDialog && jsxRuntime.jsx(ActionButton$1, {
+          label: action.label,
+          queryFn: action.queryFn,
+          queryKey: action.queryKey,
+          buttonProps: action.buttonProps
+        })
+      }, index))
+    })
+  });
 }
 
-function sortBy(arr, criteria) {
-    return orderBy(arr, criteria, ['asc']);
+const defaultErrorMsg$2 = "Oops, something went wrong...";
+function nonNullValues$1(data) {
+  var _a;
+  if (data) {
+    const nonNullData = Object.assign({}, data);
+    for (const key in data) nonNullData[key] = (_a = nonNullData[key]) !== null && _a !== void 0 ? _a : "";
+    return nonNullData;
+  }
+  return data;
 }
-
-function noop() { }
-
-function getSymbols(object) {
-    return Object.getOwnPropertySymbols(object).filter(symbol => Object.prototype.propertyIsEnumerable.call(object, symbol));
+function ItemEditDialog$1(_a) {
+  var _b, _c, _d, _e;
+  var {
+      initialValues,
+      itemLabel,
+      queryId = "",
+      api: api$1,
+      queryFetchOptions,
+      querySaveOptions,
+      onSuccess,
+      onFetchError,
+      fetchErrorMsg = defaultErrorMsg$2,
+      onSaveError,
+      saveErrorMsg = defaultErrorMsg$2,
+      fetchToFormData,
+      formToQueryData,
+      invalidateQueriesOnSuccess = true,
+      invalidateQueryKey,
+      retryText = "Retry",
+      cancelLabel = "Cancel",
+      saveLabel,
+      size = "lg",
+      title,
+      form: form$1,
+      show,
+      onClose,
+      formikProps
+    } = _a,
+    props = __rest$1(_a, ["initialValues", "itemLabel", "queryId", "api", "queryFetchOptions", "querySaveOptions", "onSuccess", "onFetchError", "fetchErrorMsg", "onSaveError", "saveErrorMsg", "fetchToFormData", "formToQueryData", "invalidateQueriesOnSuccess", "invalidateQueryKey", "retryText", "cancelLabel", "saveLabel", "size", "title", "form", "show", "onClose", "formikProps"]);
+  const {
+    isInitialLoading,
+    isFetching,
+    data,
+    isError,
+    error /*, error*/,
+    refetch
+  } = api.useApiQuery(api$1.queryKey, api$1.get, queryId, Object.assign({
+    enabled: !( /*queryId == 0 || */queryId == "" || queryId == null || queryId == undefined),
+    onError: onFetchError
+  }, queryFetchOptions));
+  // const [activeTab, setActiveTab] = React.useState(form && Array.isArray(form) ? form[0].key : "");
+  // const [showTab, setShowTab] = React.useState(true);
+  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(api$1.upsert, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey, querySaveOptions) : api.useApiMutation(api$1.upsert, api$1.queryKey, queryId, querySaveOptions);
+  const retry = React__default["default"].useCallback(() => refetch(), [refetch]);
+  const saveItem = React__default["default"].useCallback((item, actions) => __awaiter(this, void 0, void 0, function* () {
+    // Clear mutation error if any
+    mutation.reset();
+    const formItem = formToQueryData ? formToQueryData(item) : Object.assign({}, item);
+    yield mutation.mutateAsync(formItem).then(response => {
+      var _a;
+      if (onSuccess) onSuccess(formItem, response);else reactToastify.toast.success(`${title ? title(formItem) : (_a = formItem.name) !== null && _a !== void 0 ? _a : formItem.title} ${queryId ? "saved" : "created"}`);
+      // closing delete modal
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }).catch(error => {
+      var _a;
+      console.error("on error", error);
+      if (onSaveError) onSaveError(item);else reactToastify.toast.error(`Couldn't save ${title ? title(formItem) : (_a = formItem.name) !== null && _a !== void 0 ? _a : formItem.title}`);
+      actions.setSubmitting(false);
+    });
+  }), [mutation, formToQueryData, onSuccess, onSaveError, onClose]);
+  // const switchTab = React.useCallback((tab: string) =>
+  // {
+  // setActiveTab(tab);
+  // setShowTab(false);
+  // setTimeout(function ()
+  // {
+  //     setActiveTab(tab);
+  //     setShowTab(true);
+  // }, 150);
+  // }, [setActiveTab])
+  return jsxRuntime.jsxs(ui.Modal, Object.assign({
+    size: size,
+    show: show,
+    onClose: onClose,
+    scheme: "light",
+    transition: true
+  }, props, {
+    children: [jsxRuntime.jsxs(ui.Modal.Header, {
+      children: [!isInitialLoading && queryId && `Edit ${title ? title(data) : (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data["name"]) !== null && _b !== void 0 ? _b : data === null || data === void 0 ? void 0 : data["title"]) !== null && _c !== void 0 ? _c : data === null || data === void 0 ? void 0 : data["name"]) !== null && _d !== void 0 ? _d : ""}`, !queryId && `Create new ${itemLabel !== null && itemLabel !== void 0 ? itemLabel : "item"}`, Array.isArray(form$1) && jsxRuntime.jsx(jsxRuntime.Fragment, {})
+      // <ul className="nav nav-bold nav-pills">
+      //     {form.map(item =>
+      //         <li key={item.key} className="nav-item cursor-pointer bg-hover-light rounded" onClick={() => switchTab(item.key)}>
+      //             <span className={clsx("nav-link", activeTab === item.key && "active")} data-toggle="tab">{item.label}</span>
+      //         </li>
+      //     )}
+      // </ul>
+      ]
+    }), isInitialLoading && jsxRuntime.jsx(ui.Modal.Body, {
+      children: jsxRuntime.jsx(components.QueryLoadingState, {
+        minW: "72"
+      })
+    }), isError && jsxRuntime.jsx(ui.Modal.Body, {
+      children: jsxRuntime.jsx(components.RetryOnError, {
+        label: `${fetchErrorMsg} ${error}`,
+        onClick: retry
+      })
+    }), !isInitialLoading && !isError && jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: jsxRuntime.jsx(formik.Formik
+      // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
+      , Object.assign({
+        // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
+        initialValues: fetchToFormData && queryId && data ? fetchToFormData(nonNullValues$1(data)) : (_e = nonNullValues$1(initialValues(data))) !== null && _e !== void 0 ? _e : {},
+        onSubmit: saveItem
+      }, formikProps, {
+        children: ({
+          setFieldValue,
+          dirty,
+          handleSubmit,
+          isValid,
+          values
+        }) => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(ui.Modal.Body, {
+            pb: "6",
+            children: jsxRuntime.jsxs(formik.Form, {
+              children: [/*#__PURE__*/React__default["default"].isValidElement(form$1) && form$1, Array.isArray(form$1) && jsxRuntime.jsx(form.FormRenderer, {
+                form: form$1
+              }), react.isFunction(form$1) && jsxRuntime.jsx(form.FormRenderer, {
+                form: form$1(data !== null && data !== void 0 ? data : values)
+              })]
+            })
+          }), jsxRuntime.jsxs(ui.Modal.Footer, {
+            dflex: true,
+            placeContent: "end",
+            spaceX: "3",
+            children: [jsxRuntime.jsx(ui.Button, {
+              disabled: mutation.isLoading,
+              onClick: onClose,
+              variant: "borderless",
+              me: "2",
+              children: cancelLabel
+            }), jsxRuntime.jsx(ui.Button, {
+              type: "submit",
+              disabled: !dirty || mutation.isLoading /* || !isValid*/,
+              onClick: () => handleSubmit(),
+              children: saveLabel ? saveLabel : queryId ? "Update" : "Create"
+            })]
+          })]
+        })
+      }))
+    }), mutation.isLoading && jsxRuntime.jsx(components.ModalLoadingOverlay, {})]
+  }));
 }
 
-function getTag(value) {
-    if (value == null) {
-        return value === undefined ? '[object Undefined]' : '[object Null]';
+function QueryWrapperDialog({
+  api: api$1,
+  fn,
+  transformFn,
+  config,
+  onClose,
+  queryId,
+  invalidateQueryKey
+}) {
+  const {
+    data,
+    isFetching
+  } = api.useApiQuery(api$1.queryKey, fn === "get" || fn === "getTransformed" ? api$1.get : api$1.getAll, undefined, {
+    retryOnMount: false,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  });
+  const transformedData = React__default["default"].useMemo(() => {
+    if (data && (fn === "getTransformed" || fn === "getAllTransformed")) {
+      if (!transformFn) console.warn(`QueryWrapperDialog: you forgot to pass transformFn as parameter for fn ${fn}`);
+      // @ts-ignore
+      return transformFn === null || transformFn === void 0 ? void 0 : transformFn(data);
     }
-    return Object.prototype.toString.call(value);
+    return data;
+  }, [data, fn, transformFn]);
+  if (isFetching) return null;
+  // @ts-ignore
+  return jsxRuntime.jsx(ItemEditDialog$1, Object.assign({}, config(transformedData), {
+    queryId: queryId,
+    invalidateQueryKey: invalidateQueryKey,
+    show: true,
+    onClose: onClose
+  }));
 }
 
-const regexpTag = '[object RegExp]';
-const stringTag = '[object String]';
-const numberTag = '[object Number]';
-const booleanTag = '[object Boolean]';
-const argumentsTag = '[object Arguments]';
-const symbolTag = '[object Symbol]';
-const dateTag = '[object Date]';
-const mapTag = '[object Map]';
-const setTag = '[object Set]';
-const arrayTag = '[object Array]';
-const functionTag = '[object Function]';
-const arrayBufferTag = '[object ArrayBuffer]';
-const objectTag = '[object Object]';
-const errorTag = '[object Error]';
-const dataViewTag = '[object DataView]';
-const uint8ArrayTag = '[object Uint8Array]';
-const uint8ClampedArrayTag = '[object Uint8ClampedArray]';
-const uint16ArrayTag = '[object Uint16Array]';
-const uint32ArrayTag = '[object Uint32Array]';
-const bigUint64ArrayTag = '[object BigUint64Array]';
-const int8ArrayTag = '[object Int8Array]';
-const int16ArrayTag = '[object Int16Array]';
-const int32ArrayTag = '[object Int32Array]';
-const bigInt64ArrayTag = '[object BigInt64Array]';
-const float32ArrayTag = '[object Float32Array]';
-const float64ArrayTag = '[object Float64Array]';
-
-function isPlainObject(value) {
-    if (!value || typeof value !== 'object') {
-        return false;
-    }
-    const proto = Object.getPrototypeOf(value);
-    const hasObjectPrototype = proto === null ||
-        proto === Object.prototype ||
-        Object.getPrototypeOf(proto) === null;
-    if (!hasObjectPrototype) {
-        return false;
+function MultiQueryWrapperDialog({
+  queries,
+  config,
+  onClose,
+  queryId,
+  invalidateQueryKey
+}) {
+  const {
+    data,
+    isFetching,
+    isError
+  } = api.useApiQueries(queries.map(q => ({
+    queryKey: q.api.queryKey,
+    queryFn: q.fn == "get" ? q.api.get : q.api.getAll,
+    queryOptions: {
+      cacheTime: q.cache === false ? 0 : undefined,
+      staleTime: q.cache === false ? 0 : undefined
     }
-    return Object.prototype.toString.call(value) === '[object Object]';
+  })));
+  const transformedData = React__default["default"].useMemo(() => {
+    return data === null || data === void 0 ? void 0 : data.map((d, index) => {
+      var _a, _b;
+      return queries[index].transformFn ? (_b = (_a = queries[index]) === null || _a === void 0 ? void 0 : _a.transformFn) === null || _b === void 0 ? void 0 : _b.call(_a, d) : d;
+    });
+  }, [data, queries]);
+  // TODO This is not really good
+  // So instead, add a isPreloading and isPreloadingError to ItemEditDialog to handle the cases
+  // if (isFetching)
+  //     return null
+  // @ts-ignore
+  return jsxRuntime.jsx(ItemEditDialog$1, Object.assign({
+    isPreloading: isFetching
+  }, config(...transformedData), {
+    queryId: queryId,
+    invalidateQueryKey: invalidateQueryKey,
+    show: true,
+    onClose: onClose
+  }));
 }
 
-function eq(value, other) {
-    return value === other || (Number.isNaN(value) && Number.isNaN(other));
+function DialogRenderer({
+  config,
+  onClose,
+  invalidateQueryKey,
+  queryId
+}) {
+  const props = __rest$1(config, ["type"]);
+  if (config.type === "dialog") return jsxRuntime.jsx(ItemEditDialog$1, Object.assign({}, props, {
+    queryId: queryId,
+    invalidateQueryKey: invalidateQueryKey,
+    show: true,
+    onClose: onClose
+  }));
+  if (config.type === "query") return jsxRuntime.jsx(QueryWrapperDialog, Object.assign({}, props, {
+    queryId: queryId,
+    invalidateQueryKey: invalidateQueryKey,
+    onClose: onClose
+  }));
+  if (config.type === "multiQuery") return jsxRuntime.jsx(MultiQueryWrapperDialog, Object.assign({}, props, {
+    queryId: queryId,
+    invalidateQueryKey: invalidateQueryKey,
+    onClose: onClose
+  }));
+  return null;
 }
 
-function isEqualWith(a, b, areValuesEqual) {
-    return isEqualWithImpl(a, b, undefined, undefined, undefined, undefined, areValuesEqual);
+function RefreshButton({
+  queryKey
+}) {
+  const invalidate = api.useInvalidateQuery(queryKey);
+  useHotkeys('ctrl+r', () => invalidate(), {
+    preventDefault: true
+  }, [invalidate]);
+  return jsxRuntime.jsx(ButtonBarButton, {
+    scheme: "dark",
+    size: "sm",
+    aspectRatio: "square",
+    variant: "borderless",
+    onClick: invalidate,
+    children: jsxRuntime.jsx(ui.Icon, {
+      path: mdiRefresh
+    })
+  });
 }
-function isEqualWithImpl(a, b, property, aParent, bParent, stack, areValuesEqual) {
-    const result = areValuesEqual(a, b, property, aParent, bParent, stack);
-    if (result !== undefined) {
-        return result;
-    }
-    if (typeof a === typeof b) {
-        switch (typeof a) {
-            case 'bigint':
-            case 'string':
-            case 'boolean':
-            case 'symbol':
-            case 'undefined': {
-                return a === b;
-            }
-            case 'number': {
-                return a === b || Object.is(a, b);
-            }
-            case 'function': {
-                return a === b;
-            }
-            case 'object': {
-                return areObjectsEqual(a, b, stack, areValuesEqual);
-            }
-        }
-    }
-    return areObjectsEqual(a, b, stack, areValuesEqual);
+
+function ItemDeleteDialog(_a) {
+  var {
+      itemLabel,
+      queryId = "",
+      api: api$1,
+      invalidateQueriesOnSuccess = true,
+      invalidateQueryKey,
+      size = "lg",
+      show,
+      onClose
+    } = _a,
+    props = __rest$1(_a, ["itemLabel", "queryId", "api", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "show", "onClose"]);
+  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(api$1.delete, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey) : api.useApiMutation(api$1.upsert, api$1.queryKey);
+  const mutate = api.useMutate(mutation, {
+    onSuccess: () => onClose === null || onClose === void 0 ? void 0 : onClose()
+  });
+  const handleDelete = React__default["default"].useCallback(() => mutate(queryId), [mutate, queryId]);
+  return jsxRuntime.jsxs(ui.Modal, Object.assign({
+    size: size,
+    show: show,
+    onClose: onClose,
+    scheme: "danger",
+    variant: "glass",
+    transition: true
+  }, props, {
+    children: [jsxRuntime.jsx(ui.Modal.Header, {
+      children: `Delete ${itemLabel}`
+    }), jsxRuntime.jsxs(ui.Modal.Body, {
+      pb: "6",
+      children: ["Do you really want to delete ", itemLabel, "?"]
+    }), jsxRuntime.jsxs(ui.Modal.Footer, {
+      dflex: true,
+      placeContent: "end",
+      spaceX: "3",
+      children: [jsxRuntime.jsx(ui.Button, {
+        disabled: mutation.isLoading,
+        onClick: onClose,
+        variant: "borderless",
+        scheme: "secondary",
+        me: "2",
+        children: "Cancel"
+      }), jsxRuntime.jsx(ui.Button, {
+        scheme: "danger",
+        disabled: mutation.isLoading,
+        onClick: handleDelete,
+        children: "Delete"
+      })]
+    }), mutation.isLoading && jsxRuntime.jsx(components.ModalLoadingOverlay, {})]
+  }));
 }
-function areObjectsEqual(a, b, stack, areValuesEqual) {
-    if (Object.is(a, b)) {
-        return true;
-    }
-    let aTag = getTag(a);
-    let bTag = getTag(b);
-    if (aTag === argumentsTag) {
-        aTag = objectTag;
-    }
-    if (bTag === argumentsTag) {
-        bTag = objectTag;
-    }
-    if (aTag !== bTag) {
-        return false;
-    }
-    switch (aTag) {
-        case stringTag:
-            return a.toString() === b.toString();
-        case numberTag: {
-            const x = a.valueOf();
-            const y = b.valueOf();
-            return eq(x, y);
+
+const [provider, useContext] = react.createContext();
+function TableViewProvider({
+  editView,
+  deleteItem,
+  queryKey,
+  children
+}) {
+  const openLink = hooks.useOpenLink();
+  const navigate = reactRouterDom.useNavigate();
+  const [dialog, setDialog] = React__default["default"].useState(null);
+  const onCloseDialog = React__default["default"].useCallback(() => setDialog(null), [setDialog]);
+  const onAction = React__default["default"].useCallback((action, item) => {
+    switch (action.type) {
+      case "view":
+        {
+          navigate(react.runIfFn(action.path, item));
+          break;
         }
-        case booleanTag:
-        case dateTag:
-        case symbolTag:
-            return Object.is(a.valueOf(), b.valueOf());
-        case regexpTag: {
-            return a.source === b.source && a.flags === b.flags;
+      case "link":
+        {
+          openLink(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${react.runIfFn(action.path, item)}`);
+          break;
         }
-        case functionTag: {
-            return a === b;
+      case "edit":
+        {
+          if (editView.type == "customDialog") {
+            setDialog(editView.render({
+              show: true,
+              onClose: onCloseDialog
+            }));
+          } else {
+            setDialog(jsxRuntime.jsx(DialogRenderer, {
+              onClose: onCloseDialog,
+              config: editView,
+              queryId: item.id,
+              invalidateQueryKey: queryKey
+            }));
+          }
+          break;
         }
-    }
-    stack = stack ?? new Map();
-    const aStack = stack.get(a);
-    const bStack = stack.get(b);
-    if (aStack != null && bStack != null) {
-        return aStack === b;
-    }
-    stack.set(a, b);
-    stack.set(b, a);
-    try {
-        switch (aTag) {
-            case mapTag: {
-                if (a.size !== b.size) {
-                    return false;
-                }
-                for (const [key, value] of a.entries()) {
-                    if (!b.has(key) || !isEqualWithImpl(value, b.get(key), key, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            case setTag: {
-                if (a.size !== b.size) {
-                    return false;
-                }
-                const aValues = Array.from(a.values());
-                const bValues = Array.from(b.values());
-                for (let i = 0; i < aValues.length; i++) {
-                    const aValue = aValues[i];
-                    const index = bValues.findIndex(bValue => {
-                        return isEqualWithImpl(aValue, bValue, undefined, a, b, stack, areValuesEqual);
-                    });
-                    if (index === -1) {
-                        return false;
-                    }
-                    bValues.splice(index, 1);
-                }
-                return true;
-            }
-            case arrayTag:
-            case uint8ArrayTag:
-            case uint8ClampedArrayTag:
-            case uint16ArrayTag:
-            case uint32ArrayTag:
-            case bigUint64ArrayTag:
-            case int8ArrayTag:
-            case int16ArrayTag:
-            case int32ArrayTag:
-            case bigInt64ArrayTag:
-            case float32ArrayTag:
-            case float64ArrayTag: {
-                if (typeof Buffer !== 'undefined' && Buffer.isBuffer(a) !== Buffer.isBuffer(b)) {
-                    return false;
-                }
-                if (a.length !== b.length) {
-                    return false;
-                }
-                for (let i = 0; i < a.length; i++) {
-                    if (!isEqualWithImpl(a[i], b[i], i, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            case arrayBufferTag: {
-                if (a.byteLength !== b.byteLength) {
-                    return false;
-                }
-                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
-            }
-            case dataViewTag: {
-                if (a.byteLength !== b.byteLength || a.byteOffset !== b.byteOffset) {
-                    return false;
-                }
-                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
-            }
-            case errorTag: {
-                return a.name === b.name && a.message === b.message;
-            }
-            case objectTag: {
-                const areEqualInstances = areObjectsEqual(a.constructor, b.constructor, stack, areValuesEqual) ||
-                    (isPlainObject(a) && isPlainObject(b));
-                if (!areEqualInstances) {
-                    return false;
-                }
-                const aKeys = [...Object.keys(a), ...getSymbols(a)];
-                const bKeys = [...Object.keys(b), ...getSymbols(b)];
-                if (aKeys.length !== bKeys.length) {
-                    return false;
-                }
-                for (let i = 0; i < aKeys.length; i++) {
-                    const propKey = aKeys[i];
-                    const aProp = a[propKey];
-                    if (!Object.hasOwn(b, propKey)) {
-                        return false;
-                    }
-                    const bProp = b[propKey];
-                    if (!isEqualWithImpl(aProp, bProp, propKey, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            default: {
-                return false;
-            }
+      case "delete":
+        {
+          setDialog(jsxRuntime.jsx(ItemDeleteDialog, Object.assign({
+            show: true,
+            onClose: onCloseDialog,
+            queryId: item.id,
+            invalidateQueryKey: queryKey
+          }, deleteItem, {
+            itemLabel: react.runIfFn(deleteItem.itemLabel, item)
+          })));
+          // TODO
+          // const { initialValues, ...props } = editItem!!
+          // setDialog(<ItemEditDialog {...props} initialValues={runIfFn(initialValues, item)} show queryId={item?.id} onClose={onCloseDialog} />)
+          break;
         }
     }
-    finally {
-        stack.delete(a);
-        stack.delete(b);
-    }
+  }, [navigate, editView, deleteItem]);
+  const Provider = provider;
+  const value = {
+    dialog,
+    onAction
+  };
+  return jsxRuntime.jsx(Provider, {
+    value: value,
+    children: children
+  });
 }
 
-function isEqual(a, b) {
-    return isEqualWith(a, b, noop);
-}
+/**
+   * table-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+// type Person = {
+//   firstName: string
+//   lastName: string
+//   age: number
+//   visits: number
+//   status: string
+//   progress: number
+//   createdAt: Date
+//   nested: {
+//     foo: [
+//       {
+//         bar: 'bar'
+//       }
+//     ]
+//     bar: { subBar: boolean }[]
+//     baz: {
+//       foo: 'foo'
+//       bar: {
+//         baz: 'baz'
+//       }
+//     }
+//   }
+// }
 
-function TableFilters({
-  form: form$1,
-  initialValues,
-  schema,
-  processInput
-}) {
-  const {
-    showFilters
-  } = useContext$1();
-  const {
-    getFilters,
-    setFilters
-  } = table.useTableContext();
-  const handleSubmit = React__default["default"].useCallback((values, actions) => {
-    var _a;
-    const params = (_a = processInput === null || processInput === void 0 ? void 0 : processInput(values)) !== null && _a !== void 0 ? _a : values;
-    if (!isEqual(params, getFilters())) setFilters(params);
-    // setFilters(processInput?.(values) ?? values)
-    actions.setSubmitting(false);
-  }, [setFilters, processInput]);
-  const handleReset = React__default["default"].useCallback(resetForm => {
-    setFilters(initialValues);
-    resetForm();
-  }, [setFilters, initialValues]);
-  React__default["default"].useEffect(() => setFilters(initialValues), []);
-  return jsxRuntime.jsx(ui.Collapse, {
-    in: showFilters,
-    style: {
-      overflow: showFilters ? "initial" : "hidden"
+// const test: DeepKeys<Person> = 'nested.foo.0.bar'
+// const test2: DeepKeys<Person> = 'nested.bar'
+
+// const helper = createColumnHelper<Person>()
+
+// helper.accessor('nested.foo', {
+//   cell: info => info.getValue(),
+// })
+
+// helper.accessor('nested.foo.0.bar', {
+//   cell: info => info.getValue(),
+// })
+
+// helper.accessor('nested.bar', {
+//   cell: info => info.getValue(),
+// })
+
+function createColumnHelper() {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === 'function' ? {
+        ...column,
+        accessorFn: accessor
+      } : {
+        ...column,
+        accessorKey: accessor
+      };
     },
-    children: jsxRuntime.jsx("div", {
-      p: "8",
-      borderT: "px",
-      borderB: "px",
-      borderColor: "slate-100",
-      children: jsxRuntime.jsx(form.FormProvider, {
-        initialValues: form.mergeInitialFormValues(getFilters(), initialValues),
-        onSubmit: handleSubmit,
-        validationSchema: schema,
-        enableReinitialize: true,
-        children: props => jsxRuntime.jsxs("div", {
-          dflex: true,
-          gap: "3",
-          placeContent: "start",
-          children: [jsxRuntime.jsx(form.FormRenderer, {
-            flexRow: true,
-            w: "auto",
-            form: form$1
-          }), jsxRuntime.jsx(Buttons, {
-            handleReset: () => handleReset(props.resetForm)
-          })]
-        })
-      })
-    })
+    display: column => column,
+    group: column => column
+  };
+}
+
+function TableRowPublishPostButton$1(_a) {
+  var {
+      id,
+      api: api$1,
+      status,
+      invalidateQueryKey
+    } = _a,
+    props = __rest$1(_a, ["id", "api", "status", "invalidateQueryKey"]);
+  const isDraft = status == "draft";
+  const mutation = api.useInvalidateParentMutation(isDraft ? api$1.publish : api$1.unpublish, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey, {
+    networkMode: "always"
   });
+  const publish = React__default["default"].useCallback(event => {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    mutation.reset();
+    mutation.mutateAsync(id).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => reactToastify.toast.error(`Error: ${error}`));
+  }, [mutation, id]);
+  return jsxRuntime.jsx(ui.Button, Object.assign({
+    variant: "borderless",
+    corners: "square",
+    scheme: "dark",
+    onClick: publish
+  }, props, {
+    children: jsxRuntime.jsx(ui.Icon, {
+      path: isDraft ? mdiPublish : mdiPublishOff,
+      size: "sm"
+    })
+  }));
 }
-function Buttons({
-  handleReset
+
+function TableRowActionsView({
+  row,
+  onAction,
+  rowActions,
+  api,
+  queryKey
 }) {
-  return jsxRuntime.jsxs("div", {
+  const item = row.original;
+  return jsxRuntime.jsx("div", {
     dflex: true,
-    gap: "3",
-    children: [jsxRuntime.jsxs("div", {
-      dflex: true,
-      flexCol: true,
-      children: [jsxRuntime.jsx(form.FieldLabel, {
-        name: "",
-        label: "\u00A0"
-      }), jsxRuntime.jsx(form.SubmitButton, {
-        children: "Filter"
-      })]
-    }), jsxRuntime.jsxs("div", {
-      dflex: true,
-      flexCol: true,
-      children: [jsxRuntime.jsx(form.FieldLabel, {
-        name: "",
-        label: "\u00A0"
-      }), jsxRuntime.jsx(ui.Button, {
-        scheme: "neutral",
-        onClick: handleReset,
-        children: "Reset"
+    w: "full",
+    alignItems: "stretch",
+    placeContent: "end",
+    h: "full",
+    children: rowActions === null || rowActions === void 0 ? void 0 : rowActions.map((action, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
+      children: [action.type === "publish" && jsxRuntime.jsx(TableRowPublishPostButton$1, {
+        id: item.id,
+        api: api,
+        status: item.status,
+        invalidateQueryKey: queryKey
+      }), action.type == "custom" && jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: action.component(item, queryKey, action.icon, action.label)
+      }), !["publish", "custom"].includes(action.type) && jsxRuntime.jsx(ActionButton, {
+        onClick: () => onAction(action, item),
+        scheme: schemes$1[action.type],
+        children: jsxRuntime.jsx(ui.Icon, {
+          path: icons[action.type],
+          size: "sm"
+        })
       })]
-    })]
+    }, index))
   });
 }
-
-function ActionButton({
-  label,
-  buttonProps,
-  icon,
-  queryKey,
-  queryFn,
-  successMsg,
-  errorMsg,
-  invalidateParent
-}) {
-  const mutation = invalidateParent ? api.useInvalidateParentMutation(queryFn, queryKey) : api.useApiMutation(queryFn, queryKey);
-  const mutate = api.useMutate(mutation, {
-    successMsg,
-    errorMsg
-  });
-  return jsxRuntime.jsxs(ui.Button, Object.assign({
-    display: "flex",
-    alignItems: "center",
-    gap: "3"
-  }, buttonProps, {
-    onClick: mutate,
-    disabled: mutation.isLoading,
-    children: [icon && jsxRuntime.jsx(ui.Icon, {
-      path: icon
-    }), label]
-  }));
+function ActionButton(_a) {
+  var {
+      onClick
+    } = _a,
+    props = __rest$1(_a, ["onClick"]);
+  const handleClick = React__default["default"].useCallback(event => {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }, [onClick]);
+  return jsxRuntime.jsx(ui.Button, Object.assign({
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "3",
+    h: "full",
+    size: "lg",
+    variant: "borderless",
+    corners: "default",
+    onClick: handleClick
+  }, props));
 }
+const icons = {
+  "link": mdiOpenInNew,
+  "view": mdiEye,
+  "edit": mdiPencil,
+  "delete": mdiDelete,
+  "publish": mdiDelete,
+  "custom": ""
+};
+const schemes$1 = {
+  "link": "dark",
+  "view": "dark",
+  "edit": "dark",
+  "delete": "dark",
+  "publish": "dark",
+  "custom": "dark"
+};
 
-function TableMassActions({
-  actions
-}) {
+function useTableProps(api, table, rowActions) {
+  const navigate = reactRouterDom.useNavigate();
+  const openLink = hooks.useOpenLink();
   const {
-    ids
-  } = table.useTableContext();
-  const showMassActions = ids && ids.length > 0;
-  return jsxRuntime.jsx(ui.Collapse, {
-    in: showMassActions,
-    style: {
-      overflow: showMassActions ? "initial" : "hidden"
-    },
-    children: jsxRuntime.jsx("div", {
-      dflex: true,
-      gap: "3",
-      flexWrap: true,
-      alignItems: "center",
-      px: "8",
-      pt: "5",
-      children: actions.map((action, index) => jsxRuntime.jsx("div", {
-        children: action.type == "button" && !action.showConfirmationDialog && jsxRuntime.jsx(ActionButton, {
-          label: action.label,
-          queryFn: action.queryFn,
-          queryKey: action.queryKey,
-          buttonProps: action.buttonProps
+    onAction
+  } = useContext();
+  const {
+      onRowClick,
+      columns: c
+    } = table,
+    props = __rest$1(table, ["onRowClick", "columns"]);
+  const onRowClickHandler = React__default["default"].useCallback(item => {
+    if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) === "navigate") navigate(react.runIfFn(onRowClick.path, item));else if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) == "link") openLink(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${react.runIfFn(onRowClick.path, item)}`);
+  }, [navigate, onRowClick]);
+  const columns = React__default["default"].useMemo(() => {
+    const columns = table.columns.concat([]);
+    if (rowActions) {
+      columns.push(createColumnHelper().display({
+        id: "actions",
+        header: "Actions",
+        cell: props => jsxRuntime.jsx(TableRowActionsView, {
+          row: props.row,
+          onAction: onAction,
+          rowActions: rowActions,
+          api: api,
+          queryKey: api.queryKey
         })
-      }, index))
-    })
-  });
+      }));
+    }
+    return columns;
+  }, [table]);
+  const tableProps = Object.assign({}, props);
+  tableProps.columns = columns;
+  tableProps.onRowClick = onRowClickHandler;
+  tableProps.queryKey = api.queryKey;
+  tableProps.queryFn = api.search;
+  return tableProps;
 }
 
 function useId(queryField) {
@@ -2528,7 +2577,7 @@ function TT({
       breadcrumbs: breadcrumbs
     }), jsxRuntime.jsx(TableTopBar, {
       title: title,
-      children: jsxRuntime.jsx(ButtonBar, {
+      children: jsxRuntime.jsx(TableButtonBar, {
         buttonBar: buttonBar,
         createView: createView,
         editView: editView,
@@ -2558,18 +2607,14 @@ function TT({
     })]
   });
 }
-function ButtonBar({
+function TableButtonBar({
   buttonBar,
   queryKey,
   createView,
   editView,
-  api: api$1,
+  api,
   children
 }) {
-  const invalidate = api.useInvalidateQuery(queryKey);
-  useHotkeys('ctrl+r', () => invalidate(), {
-    preventDefault: true
-  }, [invalidate]);
   const createDialog = React__default["default"].useCallback(onClose => {
     const view = createView !== null && createView !== void 0 ? createView : editView;
     if (view.type == "customDialog") return view.render({
@@ -2578,26 +2623,12 @@ function ButtonBar({
     });else return jsxRuntime.jsx(DialogRenderer, {
       config: view,
       onClose: onClose,
-      invalidateQueryKey: api$1.queryKey
+      invalidateQueryKey: api.queryKey
     });
-  }, [editView, api$1]);
-  return jsxRuntime.jsxs("div", {
-    dflex: true,
-    border: "1px",
-    borderColor: "zinc-200",
-    divideX: "1px",
-    divideColor: "zinc-200",
-    rounded: "lg",
-    overflow: "hidden",
-    children: [jsxRuntime.jsx(ui.Button, {
-      scheme: "dark",
-      size: "sm",
-      aspectRatio: "square",
-      variant: "borderless",
-      onClick: invalidate,
-      children: jsxRuntime.jsx(ui.Icon, {
-        path: mdiRefresh
-      })
+  }, [editView, api]);
+  return jsxRuntime.jsxs(ButtonBar, {
+    children: [jsxRuntime.jsx(RefreshButton, {
+      queryKey: queryKey
     }), buttonBar && buttonBar.map((button, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [button.type === "create" && editView && jsxRuntime.jsx(TableCreateButton, {
         buildDialog: createDialog