@datawheel/bespoke 0.3.21 → 0.4.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { useMantineTheme, List, Text, Group, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, Stack, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Flex, packSx, Menu, Card, Center, Space, Badge, Title, TextInput, Code, Divider, SegmentedControl, Select, ActionIcon, Textarea, Paper, Alert, Loader, Container, Grid, Tooltip, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, Autocomplete, Image, NumberInput, Header, px, Notification, Accordion, Tabs, FileInput, SimpleGrid, Burger, Collapse, HoverCard, CopyButton, Col } from '@mantine/core';
+import { useMantineTheme, List, Text, Group, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, Stack, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Flex, packSx, Menu, Card, Center, Space, Badge, Title, Tabs, TextInput, Code, Loader, Divider, SegmentedControl, Select, ActionIcon, Textarea, Paper, Alert, Container, Grid, Tooltip, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, NumberInput, Autocomplete, Image, Header, px, Notification, Accordion, FileInput, SimpleGrid, Burger, Collapse, HoverCard, CopyButton, Col } from '@mantine/core';
 import React, { forwardRef, useState, useCallback, useRef, useEffect, createContext, useContext, useMemo, Fragment as Fragment$1, memo, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
@@ -21,8 +21,8 @@ import { HYDRATE, createWrapper } from 'next-redux-wrapper';
 import { Notifications, notifications } from '@mantine/notifications';
 import { useDispatch, useSelector } from 'react-redux';
 import Router, { useRouter } from 'next/router';
-import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useHotkeys, useMediaQuery, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconUserCircle, IconEdit, IconCircleDashed, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconFlag, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconAlignCenter, IconAlignRight, IconDownload, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconPolaroid, IconCircleMinus, IconTable, IconCamera, IconShare, IconCirclePlus, IconLogin, IconWorld, IconLock, IconBinaryTree, IconVariable, IconArrowRightCircle, IconInfoCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconSettings, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useHotkeys, getHotkeyHandler, useMediaQuery, useFullscreen } from '@mantine/hooks';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconUserCircle, IconEdit, IconCircleDashed, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconFlag, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconAlignCenter, IconAlignRight, IconDownload, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconTable, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconBinaryTree, IconVariable, IconArrowRightCircle, IconInfoCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconSettings, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import Link from 'next/link';
 import parse2, { Element, domToReact, Text as Text$1 } from 'html-react-parser';
 import { UserProvider, withPageAuthRequired, useUser } from '@auth0/nextjs-auth0/client';
@@ -30,7 +30,7 @@ import { dataConcat, dataLoad } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import dynamic from 'next/dynamic';
 import { Prism } from '@mantine/prism';
-import { DataTable } from 'mantine-datatable';
+import { MantineReactTable } from 'mantine-react-table';
 import slugifyFn from 'slugify';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
@@ -297,8 +297,8 @@ var init_lib = __esm({
 // api/http/image/imageSave.ts
 function httpImageSaveFactory(axios9, provider) {
   return (params) => http(axios9, {
-    method: "GET",
-    url: `search/images/${provider}`,
+    method: "POST",
+    url: `images/save/${provider}`,
     params: { prompt: params.prompt, provider }
   });
 }
@@ -313,8 +313,8 @@ var init_imageSave = __esm({
 function httpImageSearchFactory(axios9, provider) {
   return (params) => http(axios9, {
     method: "GET",
-    url: `search/images/${provider}`,
-    params: { prompt: params.prompt, provider }
+    url: `images/search/${provider}`,
+    params: { prompt: params.prompt, page: params.page, provider }
   });
 }
 var init_imageSearch = __esm({
@@ -384,7 +384,7 @@ function apiFactory(baseURL) {
     validateVariantSlug: httpGET(axios9, "validate/variant"),
     readMember: httpGET(axios9, "read/members", transformReadMembers),
     readMemberImage: httpGET(axios9, {
-      url: "member/image.png",
+      url: "member/image",
       responseType: "blob"
     }),
     searchMember: httpGET(axios9, "search/members"),
@@ -396,6 +396,8 @@ function apiFactory(baseURL) {
     imageUnsplashSearch: httpImageSearchFactory(axios9, "unsplash"),
     imageUnsplashSave: httpImageSaveFactory(axios9, "unsplash"),
     imageUploadSave: httpImageSaveFactory(axios9, "upload"),
+    imageAdobeSearch: httpImageSearchFactory(axios9, "adobe"),
+    imageAdobeSave: httpImageSaveFactory(axios9, "adobe"),
     readMetadata: httpGET(axios9, "read/metadata"),
     regenerateSearch: httpPOST(axios9, "search/regenerate"),
     urlProxy: httpGET(axios9, "url/proxy"),
@@ -3300,7 +3302,7 @@ function ExploreTile({ profile, profilePrefix, onSelect, reportTile }) {
     id: m.id,
     variant: m.metadata.variant.name,
     image: {
-      src: `/api/cms/member/image.png?member=${m.id}&size=thumb`,
+      src: `/api/cms/member/image?member=${m.id}&size=thumb`,
       alt: m.name
     }
   }));
@@ -3647,7 +3649,7 @@ function BespokeSearch({
               id: m.id,
               variant: m.metadata.variant.name,
               image: {
-                src: `/api/cms/member/image.png?member=${m.id}&size=thumb`,
+                src: `/api/cms/member/image?member=${m.id}&size=thumb`,
                 alt: m.name
               }
             }))
@@ -4866,7 +4868,7 @@ function RelatedView(props) {
       id: report.content_id,
       variant: report.variant_name,
       image: {
-        src: `/api/cms/member/image.png?member=${report.content_id}&size=thumb`,
+        src: `/api/cms/member/image?member=${report.content_id}&size=thumb`,
         alt: report.name
       }
     }];
@@ -7450,7 +7452,7 @@ var init_section2 = __esm({
 function SectionBackground({ previews }) {
   const images = previews.map((member, ix) => ({
     key: member ? `bg-${member.content_id}` : `bg-${ix}`,
-    src: member ? `/api/cms/member/image.png?member=${member.content_id}&size=splash` : ""
+    src: member ? `/api/cms/member/image?member=${member.content_id}&size=splash` : ""
   }));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -7500,71 +7502,45 @@ var init_SectionBackground = __esm({
     init_esm_shims();
   }
 });
-function SortableTable({ data, customIdAccessor = "id" }) {
-  const [records, setRecords] = useState();
-  const [sortStatus, setSortStatus] = useState();
+function SortableTable({ data }) {
   const keys = data && Array.isArray(data) && data[0] ? Object.keys(data[0]) : [];
-  const idAccessor = keys.includes(customIdAccessor) ? customIdAccessor : defaultIdAccessor;
   const fields = keys.filter((k) => !k.startsWith("_"));
   const columns = fields.map((field) => ({
-    accessor: field,
-    title: field,
-    sortable: true,
-    render: (r) => `${r[field]}`
-  }));
-  const getSortedData = (sortField) => {
-    let dataTemp = [...data];
-    dataTemp = dataTemp.map((item, ix) => {
-      const newItem = { ...item };
-      fields.forEach((f) => {
-        if (typeof newItem[f] === "object") {
-          newItem[f] = JSON.stringify(item[f]);
-        }
-      });
-      if (idAccessor === defaultIdAccessor) {
-        newItem._key = `i-${ix}`;
+    accessorKey: field,
+    header: field,
+    enableSorting: true,
+    mantineTableBodyCellProps: {
+      sx: {
+        textWrap: "wrap"
       }
-      return newItem;
-    });
-    if (sortField) {
-      dataTemp = dataTemp.sort((a, b) => {
-        if (isNaN(a[sortField.columnAccessor])) {
-          return a[sortField.columnAccessor].localeCompare(b[sortField.columnAccessor]);
-        } else {
-          return a[sortField.columnAccessor] > b[sortField.columnAccessor] ? 1 : -1;
-        }
-      });
-    }
-    return sortField && sortField.direction === "desc" ? dataTemp.reverse() : dataTemp;
-  };
-  useEffect(() => {
-    if (sortStatus) {
-      setRecords(getSortedData(sortStatus));
     }
-  }, [sortStatus]);
-  useEffect(() => {
-    setSortStatus(void 0);
-    setRecords(getSortedData(void 0));
-  }, [data]);
+  }));
   return /* @__PURE__ */ jsx(
-    DataTable,
+    MantineReactTable,
     {
-      withBorder: true,
-      withColumnBorders: true,
-      records,
       columns,
-      sortStatus,
-      onSortStatusChange: setSortStatus,
-      idAccessor,
-      minHeight: 100
+      data,
+      enableBottomToolbar: false,
+      enableColumnActions: false,
+      enablePagination: false,
+      enableSorting: true,
+      enableTopToolbar: false,
+      initialState: {
+        density: "xs"
+      },
+      layoutMode: "grid",
+      mantineTableContainerProps: {
+        sx: {
+          minHeight: 100,
+          maxHeight: 350
+        }
+      }
     }
   );
 }
-var defaultIdAccessor;
 var init_SortableTable = __esm({
   "components/SortableTable.tsx"() {
     init_esm_shims();
-    defaultIdAccessor = "_key";
   }
 });
 
@@ -8044,28 +8020,29 @@ function ImageTab(props) {
   const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["image_tab"] };
   const { siteProps } = useBespoke();
   const includeLogo = siteProps?.logoSrc && typeof siteProps.logoSrc === "string";
-  const sectionHash = section.settings?.name ? `#${section.settings.name}` : `#section-${section.id}`;
+  const sectionId = section?.settings?.name || `section-${section.id}`;
+  const sectionHash = `#${sectionId}`;
   const theme = useMantineTheme();
   const vizSelectedHasSVG = () => {
-    const vizNode = getVizNode(section.id, vizSelected);
+    const vizNode = getVizNode(vizSelected);
     const svgCount = select(vizNode).select("svg").size();
     return svgCount === 1;
   };
-  const getFileName = () => `${slugify_default(section?.settings?.name || `section-${section.id}`)}`;
-  const getSectionNode = (sectionId) => {
-    const sectionNode = document.getElementById(`section-${sectionId}`);
+  const getFileName = () => `${slugify_default(sectionId)}`;
+  const getSectionNode = () => {
+    const sectionNode = document.getElementById(sectionId);
     return select(sectionNode).select(".bespoke-section-content").node();
   };
-  const getVizNode = (sectionId, vizId) => {
-    const sectionNode = getSectionNode(sectionId);
+  const getVizNode = (vizId) => {
+    const sectionNode = getSectionNode();
     return select(sectionNode).select(`#bespoke-visualization-${vizId}.bespoke-block-area`).node();
   };
   const getSelectedNode = () => new Promise((resolve) => {
     let node;
     if (imageContext === contextOptions.section) {
-      node = getSectionNode(section.id);
+      node = getSectionNode();
     } else if (imageContext === contextOptions.viz) {
-      node = getVizNode(section.id, vizSelected);
+      node = getVizNode(vizSelected);
     }
     const sourceContainer = document.createElement("div");
     sourceContainer.style.display = "flex";
@@ -8157,7 +8134,7 @@ function ImageTab(props) {
   const generatePreviews = async () => {
     const { toCanvas } = await import('html-to-image');
     Promise.all(
-      vizAvailable.map((viz) => toCanvas(getVizNode(section.id, viz.id)))
+      vizAvailable.map((viz) => toCanvas(getVizNode(viz.id)))
     ).then((canvases) => {
       setVizPreviews(canvases.map((canvas) => canvas.toDataURL()));
       setLoadingPreviews(false);
@@ -9926,7 +9903,7 @@ init_store2();
 function VariantCard({ for: variant, onEdit }) {
   const theme = useMantineTheme();
   const { newConfirmation } = useDialog();
-  const secondaryColor = theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7];
+  theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7];
   const maybeEdit = useCallback(async () => {
     try {
       await newConfirmation({
@@ -9952,8 +9929,7 @@ function VariantCard({ for: variant, onEdit }) {
         slug
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Text, { size: "sm", style: { color: secondaryColor, lineHeight: 2 }, children: "Description of variant will go here" }),
-    /* @__PURE__ */ jsx(Space, { w: "xs" }),
+    /* @__PURE__ */ jsx(Space, { h: "xs" }),
     /* @__PURE__ */ jsxs(Group, { position: "apart", children: [
       /* @__PURE__ */ jsx(Button, { onClick: () => maybeEdit(), leftIcon: /* @__PURE__ */ jsx(IconPencil, {}), compact: true, children: "Edit" }),
       /* @__PURE__ */ jsx(
@@ -9996,138 +9972,608 @@ function DrawerContentWithScroll({ content, buttons, size }) {
     /* @__PURE__ */ jsx(Group, { mt: "xs", grow: true, style: { height: 45 }, children: buttons })
   ] });
 }
-function VariantEditor({ for: variant, onClose: closeHandler }) {
-  const dispatch = useAppDispatch();
-  const localeDefault10 = useAppSelector((state) => state.status.localeDefault);
-  const locales4 = useAppSelector((state) => state.status.locales);
-  const localesItems = locales4.map((locale) => ({ value: locale, label: locale.toUpperCase() }));
-  const [sample, setSample] = useState();
-  const [selectedLocale, setSelectedLocale] = useState(localeDefault10);
-  const [variantConfig, setVariantConfig] = useState(variant);
-  const [loading, setLoading] = useState(false);
-  const [loadingFetch, setLoadingFetch] = useState(false);
-  const [loadingValidSlug, setLoadingValidSlug] = useState(false);
-  const [validSlug, setValidSlug] = useState({ valid: false, suggestion: "" });
-  const [payload, setPayload] = useState();
-  const [accessors, setAccessors] = useState([]);
-  const getMembers = (path) => {
-    setLoadingFetch(true);
-    dispatch(actions_exports.urlProxy(path)).then((resp) => {
-      setPayload(resp);
-      setLoadingFetch(false);
-    }).catch((e) => {
-      console.error(e);
-      setLoadingFetch(false);
-    });
-  };
-  const setConfigFromSample = (sample2, accessor = "") => {
-    if (sample2) {
-      const sampleKeys = Object.keys(sample2);
-      const guessId = sampleKeys.find((d) => d.toLowerCase().includes("id")) || sampleKeys[0];
-      const guessName = sampleKeys.find((d) => !d.toLowerCase().includes("id")) || sampleKeys[0];
-      setVariantConfig({
-        ...variantConfig,
-        config: {
-          ...variantConfig.config,
-          [selectedLocale]: {
-            ...variantConfig.config[selectedLocale],
-            idKey: variantConfig.config[selectedLocale].idKey || guessId,
-            labelKey: variantConfig.config[selectedLocale].labelKey || guessName,
-            accessor
-          }
-        }
-      });
-    }
-    setSample(sample2);
+
+// api/endpoints/member.ts
+init_esm_shims();
+init_getLocales();
+init_stripHTML();
+init_lib3();
+
+// api/endpoints/lib.ts
+init_esm_shims();
+init_lib3();
+function parseFiniteNumber(value) {
+  const num = Number.parseInt(`${value || ""}`, 10);
+  if (Number.isNaN(num) || !Number.isFinite(num)) {
+    throw new BackendError(400, `Invalid numeric parameter: ${value}`);
+  }
+  return num;
+}
+function normalizeList(value) {
+  if (value == null || value === "") {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return value.toString().split(",");
+}
+
+// api/endpoints/member.ts
+var { localeDefault: localeDefault9 } = getLocales_default();
+function parseReadMemberParams(query) {
+  const locale = normalizeList(query.locale)[0] || localeDefault9 || "en";
+  const all = locale === "all" || yn4(query.all);
+  const mode = normalizeList(query.mode)[0];
+  const outputParam = normalizeList(query.output)[0] || "full";
+  const output = outputParam === "lite" ? "lite" : "full";
+  const relatedLimit = parseInt(normalizeList(query.related)[0], 10) || 5;
+  let variant = normalizeList(query.variant).map(parseFiniteNumber);
+  if (variant.length === 0) {
+    variant = normalizeList(query["variant[]"]).map(parseFiniteNumber);
+  }
+  if (mode === "ids") {
+    return {
+      all,
+      mode,
+      variant,
+      output,
+      locale: all ? localeDefault9 : stripHTML(locale),
+      ids: normalizeList(query.ids || query["ids[]"])
+    };
+  }
+  if (mode === "content_ids") {
+    return {
+      all,
+      mode,
+      variant,
+      output,
+      locale: all ? localeDefault9 : stripHTML(locale),
+      content_ids: normalizeList(query.content_ids || query["content_ids[]"]).map(parseFiniteNumber)
+    };
+  }
+  if (mode === "slugs") {
+    return {
+      all,
+      mode,
+      variant,
+      output,
+      locale: all ? localeDefault9 : stripHTML(locale),
+      slugs: normalizeList(query.slugs || query["slugs[]"]).map((token) => {
+        const [variantSlug, memberSlug] = token.split("/");
+        return { variantSlug, memberSlug };
+      })
+    };
+  }
+  if (mode === "related") {
+    return {
+      all,
+      mode,
+      locale: all ? localeDefault9 : stripHTML(locale),
+      related: relatedLimit,
+      current_ids: normalizeList(query.current_ids || query["current_ids[]"]).map(parseFiniteNumber),
+      report_ids: normalizeList(query.report_ids || query["report_ids[]"]).map(parseFiniteNumber),
+      dimension_ids: normalizeList(query.dimension_ids || query["dimension_ids[]"]).map(parseFiniteNumber),
+      variant_ids: normalizeList(query.variant_ids || query["variant_ids[]"]).map(parseFiniteNumber),
+      output
+    };
+  }
+  throw new BackendError(400, `Invalid mode: '${mode}'`);
+}
+function parseSearchMemberParams(query) {
+  const locale = normalizeList(query.locale)[0] || localeDefault9 || "en";
+  const localeIsAll = locale === "all";
+  const format2 = normalizeList(query.format)[0];
+  const formatIsNested = format2 ? format2 === "nested" : localeIsAll;
+  let variant = normalizeList(query.variant).map(parseFiniteNumber);
+  if (variant.length === 0) {
+    variant = normalizeList(query["variant[]"]).map(parseFiniteNumber);
+  }
+  let dimension = normalizeList(query.dimension).map(parseFiniteNumber);
+  if (dimension.length === 0) {
+    dimension = normalizeList(query["dimension[]"]).map(parseFiniteNumber);
+  }
+  let report = normalizeList(query.report).map(parseFiniteNumber);
+  if (report.length === 0) {
+    report = normalizeList(query["report[]"]).map(parseFiniteNumber);
+  }
+  return {
+    query: normalizeList(query.query || query.q)[0] || "",
+    locale: localeIsAll ? localeDefault9 : locale,
+    limit: normalizeList(query.limit).map(parseFiniteNumber)[0] ?? 5,
+    format: formatIsNested ? "nested" : "plain",
+    includes: yn4(query.includes, { default: true }),
+    visible: yn4(query.visible, { default: true }),
+    noImage: yn4(query.noImage, { default: false }),
+    variant,
+    dimension,
+    report,
+    all: localeIsAll,
+    sort: normalizeList(query.sort)[0],
+    direction: normalizeList(query.direction)[0]
   };
+}
+
+// components/metadata/MembersTable.tsx
+init_esm_shims();
+
+// views/ImagePreview.tsx
+init_esm_shims();
+function ImagePreview3({
+  member,
+  height = "auto",
+  width = "100%",
+  size = "thumb",
+  forceRefreshTimestamp = false
+}) {
+  let extraParam = "";
+  if (forceRefreshTimestamp) {
+    extraParam = `&t=${( new Date()).getTime()}`;
+  }
+  const imageUrl = member && member.image_id ? `/api/cms/member/image?member=${member.content_id}&size=${size}${extraParam}` : "https://placehold.jp/cccccc/ffffff/900x600.png?text=None";
+  return /* @__PURE__ */ jsx(Image, { alt: `Image for ${member.id}`, height, width, radius: "md", src: imageUrl });
+}
+var ImagePreview_default = ImagePreview3;
+
+// components/metadata/MembersTable.tsx
+init_store2();
+function MembersTable({ members, onClickEdit, onSort, colsToRender = [], dataTableProps = {} }) {
+  const [sortStatus, setSortStatus] = useState([]);
+  const [records, setRecords] = useState([]);
+  const { state, ...tableProps } = dataTableProps;
   useEffect(() => {
-    if (!variantConfig.config[selectedLocale]) {
-      setVariantConfig({
-        ...variantConfig,
-        config: {
-          ...variantConfig.config,
-          [selectedLocale]: { attributes: [] }
-        }
-      });
-    }
-    if (variantConfig.config[selectedLocale] && variantConfig.config[selectedLocale].path) {
-      getMembers(variantConfig.config[selectedLocale].path);
+    if (typeof onSort !== "undefined" && sortStatus && sortStatus.length) {
+      onSort(sortStatus);
     }
-  }, []);
+  }, [sortStatus]);
   useEffect(() => {
-    setPayload(void 0);
-    let attributesList = [];
-    if (selectedLocale !== localeDefault10) {
-      const defaultAttributes = variantConfig.config[localeDefault10] ? [...variantConfig.config[localeDefault10].attributes].map((item) => {
-        const newItem = { ...item };
-        newItem.value = "";
-        return newItem;
-      }) : [];
-      if (variantConfig.config[selectedLocale] && variantConfig.config[selectedLocale].attributes) {
-        attributesList = defaultAttributes.map((da) => {
-          const item = variantConfig.config[selectedLocale].attributes.find((sa) => da.name === sa.name);
-          if (item) {
-            da.value = item.value;
-          }
-          return da;
-        });
-      } else {
-        attributesList = defaultAttributes;
-      }
-      setVariantConfig({
-        ...variantConfig,
-        config: {
-          ...variantConfig.config,
-          [selectedLocale]: {
-            ...variantConfig.config[selectedLocale],
-            attributes: attributesList
+    setRecords(members);
+  }, [members]);
+  useEffect(() => {
+    setRecords(members);
+  }, []);
+  const localeDefault10 = useAppSelector((state2) => state2.status.localeDefault);
+  const none = /* @__PURE__ */ jsx(Badge, { color: "gray", children: "None" });
+  const cols = [
+    {
+      header: "",
+      accessorKey: "visible",
+      enableResizing: false,
+      enableSorting: false,
+      size: 10,
+      Cell: ({ row }) => /* @__PURE__ */ jsx(Fragment, { children: !row.original.visible ? /* @__PURE__ */ jsx(Tooltip, { label: "Visible: false", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconEyeOff, { size: 20 }) }) }) : /* @__PURE__ */ jsx("span", {}) })
+    },
+    {
+      header: "ID",
+      accessorKey: "id",
+      enableSorting: typeof onSort !== "undefined" ? true : false,
+      mantineTableHeadCellProps: {
+        align: "right",
+        sx: {
+          "& .mantine-TableHeadCell-Content-Labels": {
+            flexDirection: "row"
           }
         }
-      });
-    }
-    if (variantConfig.config[selectedLocale] && variantConfig.config[selectedLocale].path) {
-      getMembers(variantConfig.config[selectedLocale].path);
-    }
-  }, [selectedLocale]);
-  useEffect(() => {
-    if (payload) {
-      const keys2 = arrayFinder(payload);
-      setAccessors(keys2);
-      if (variantConfig.config[selectedLocale].accessor && payload[variantConfig.config[selectedLocale].accessor]) {
-        setConfigFromSample(
-          payload[variantConfig.config[selectedLocale].accessor][0],
-          variantConfig.config[selectedLocale].accessor
-        );
-      } else if (keys2.length === 0) {
-        if (payload && payload[0])
-          setConfigFromSample(payload[0]);
-      }
-    }
-  }, [payload]);
-  useEffect(() => {
-    if (variantConfig.slug) {
-      setLoadingValidSlug(true);
-      dispatch(actions_exports.variantValidateSlug(variantConfig.dimension_id, variantConfig.slug)).then(setValidSlug).then(() => {
-        setLoadingValidSlug(false);
-      }, (err) => {
-        console.error(err);
-      });
-    }
-  }, [variantConfig.slug]);
-  const onChangeAccessor = (accessor) => {
-    const dataArray = keyDiver(payload, accessor);
-    if (dataArray[0]) {
-      setConfigFromSample(dataArray[0], accessor);
-    }
-  };
-  const onChange = (field, value) => {
+      },
+      mantineTableBodyCellProps: {
+        align: "right"
+      },
+      size: 100
+    },
+    {
+      header: "Report",
+      accessorKey: "report.name",
+      enableSorting: false,
+      size: 100
+    },
+    {
+      header: "Dimension",
+      accessorKey: "dimension.name",
+      enableSorting: false,
+      size: 100
+    },
+    {
+      header: "Variant",
+      accessorKey: "variant.name",
+      enableSorting: false,
+      size: 100
+    },
+    {
+      header: "Relevance",
+      accessorKey: "zvalue",
+      enableSorting: typeof onSort !== "undefined" ? true : false,
+      size: 100
+    },
+    {
+      header: "Slug",
+      accessorKey: "slug",
+      Cell: ({ row }) => /* @__PURE__ */ jsxs("span", { children: [
+        "/",
+        row.original.variant.slug,
+        "/",
+        row.original.slug
+      ] }),
+      enableSorting: false
+    },
+    {
+      header: `Name ${localeDefault10.toUpperCase()}`,
+      accessorKey: "name",
+      enableSorting: typeof onSort !== "undefined" ? true : false,
+      Cell: ({ row }) => {
+        const defaultLocalized = row.original.contentByLocale.find((item) => item.locale === localeDefault10);
+        const othersLocalized = row.original.contentByLocale.filter((item) => item.locale !== localeDefault10);
+        const nameTooltipContent = othersLocalized.reduce((acc, item) => {
+          const extraName = `${item.locale.toUpperCase()}: ${item.name}`;
+          const newLine2 = acc !== "" ? "\n" : "";
+          return `${acc}${newLine2}${extraName}`;
+        }, "");
+        return /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx("span", { children: defaultLocalized?.name || none }),
+          othersLocalized.length > 0 && /* @__PURE__ */ jsx(Tooltip, { label: nameTooltipContent, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", color: "pink", radius: "xl", children: [
+            "+",
+            othersLocalized.length
+          ] }) })
+        ] });
+      }
+    },
+    {
+      header: `Keywords ${localeDefault10.toUpperCase()}`,
+      accessorKey: "keywords",
+      Cell: ({ row }) => {
+        const defaultLocalized = row.original.contentByLocale.find((item) => item.locale === localeDefault10);
+        const othersLocalized = row.original.contentByLocale.filter((item) => item.locale !== localeDefault10);
+        const keywords = (defaultLocalized.keywords ? defaultLocalized.keywords : []).map((k) => /* @__PURE__ */ jsx(Badge, { children: k }, k));
+        const keywordsTooltipContent = othersLocalized.reduce((acc, item) => {
+          const otherKeywords = item.keywords || [];
+          const extraKeywords = `${item.locale.toUpperCase()}: ${otherKeywords.length > 0 ? otherKeywords.join(",") : "None"}`;
+          const newLine2 = acc !== "" ? "\n" : "";
+          return `${acc}${newLine2}${extraKeywords}`;
+        }, "");
+        return /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx("span", { children: keywords.length > 0 ? keywords : none }),
+          othersLocalized.length > 0 && /* @__PURE__ */ jsx(Tooltip, { label: keywordsTooltipContent, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", color: "pink", radius: "xl", children: [
+            "+",
+            othersLocalized.length
+          ] }) })
+        ] });
+      },
+      enableSorting: false,
+      size: 100
+    },
+    {
+      header: "Image",
+      accessorKey: "image",
+      Cell: ({ row }) => /* @__PURE__ */ jsx(ImagePreview_default, { member: row.original, height: "50px", forceRefreshTimestamp: true }),
+      enableSorting: false,
+      size: 80
+    },
+    {
+      header: "",
+      accessorKey: "actions",
+      Cell: ({ row }) => /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          onClick: () => onClickEdit ? onClickEdit(row.original) : false,
+          children: /* @__PURE__ */ jsx(IconPencil, { size: 20 })
+        },
+        "edit"
+      ),
+      enableResizing: false,
+      enableSorting: false,
+      size: 50,
+      mantineTableHeadCellProps: {
+        align: "center"
+      },
+      mantineTableBodyCellProps: {
+        align: "center"
+      }
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    MantineReactTable,
+    {
+      columns: cols.filter((col) => colsToRender && colsToRender.length === 0 || colsToRender.includes(col.accessorKey)),
+      data: records,
+      enableBottomToolbar: false,
+      enableColumnActions: false,
+      enableColumnResizing: true,
+      enablePagination: false,
+      enableStickyHeader: true,
+      enableTopToolbar: false,
+      initialState: {
+        density: "xs"
+      },
+      layoutMode: "grid",
+      mantineTableContainerProps: {
+        sx: {
+          minHeight: 150,
+          maxHeight: "95vh"
+        }
+      },
+      mantineTableProps: {
+        striped: true
+      },
+      manualSorting: true,
+      onSortingChange: setSortStatus,
+      state: {
+        sorting: sortStatus,
+        ...state
+      },
+      ...tableProps
+    }
+  );
+}
+
+// libs/settings/variant.tsx
+init_esm_shims();
+var getVariantSettingsDefaults = (settings) => ({
+  overrideNames: settings && typeof settings.overrideNames !== "undefined" ? settings.overrideNames : false,
+  overrideRelevance: settings && typeof settings.overrideRelevance !== "undefined" ? settings.overrideRelevance : false,
+  regenerateSlugs: settings && typeof settings.regenerateSlugs !== "undefined" ? settings.regenerateSlugs : false,
+  keepOldMembers: settings && typeof settings.keepOldMembers !== "undefined" ? settings.keepOldMembers : true,
+  doIngest: settings && typeof settings.doIngest !== "undefined" ? settings.doIngest : false,
+  overrideAttributes: settings && typeof settings.overrideAttributes !== "undefined" ? settings.overrideAttributes : false
+});
+
+// components/builder/components/SwitchWithTooltip.tsx
+init_esm_shims();
+function SwitchWithTooltip({ switchProps, yesText, noText }) {
+  const finalSwitchProps = {
+    size: "md",
+    onLabel: "YES",
+    offLabel: "NO",
+    label: "Switch Label",
+    my: "xs",
+    checked: false,
+    onChange: (event) => console.log(event.currentTarget.checked),
+    ...switchProps
+  };
+  return /* @__PURE__ */ jsxs(Group, { children: [
+    /* @__PURE__ */ jsx(Switch, { ...finalSwitchProps }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label: finalSwitchProps.checked ? yesText : noText,
+        withArrow: true,
+        multiline: true,
+        width: 200,
+        children: /* @__PURE__ */ jsx(ActionIcon, { variant: "filled", radius: "50%", size: "xs", children: /* @__PURE__ */ jsx(IconQuestionMark, { size: "xs" }) })
+      }
+    )
+  ] });
+}
+var SwitchWithTooltip_default = SwitchWithTooltip;
+
+// libs/js/isURL.ts
+init_esm_shims();
+function isURL(url) {
+  try {
+    new URL(url);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+function VariantEditor({ for: variant, onClose: closeHandler }) {
+  const dispatch = useAppDispatch();
+  const localeDefault10 = useAppSelector((state) => state.status.localeDefault);
+  const locales4 = useAppSelector((state) => state.status.locales);
+  const localesItems = locales4.map((locale) => ({ value: locale, label: locale.toUpperCase() }));
+  const [sample, setSample] = useState();
+  const [selectedLocale, setSelectedLocale] = useState(localeDefault10);
+  const [variantConfig, setVariantConfig] = useState(() => {
+    const hydratedVariant = { ...variant };
+    locales4.forEach((l) => {
+      hydratedVariant.config = {
+        ...hydratedVariant.config,
+        [l]: {
+          ...{
+            attributes: [],
+            idKey: "",
+            labelKey: "",
+            accessor: "",
+            path: ""
+          },
+          ...hydratedVariant.config[l] || {}
+        }
+      };
+    });
+    return hydratedVariant;
+  });
+  const [loading, setLoading] = useState(false);
+  const [loadingFetch, setLoadingFetch] = useState(false);
+  const [fetchError, setFetchError] = useState(false);
+  const [loadingValidSlug, setLoadingValidSlug] = useState(false);
+  const [validSlug, setValidSlug] = useState({ valid: false, suggestion: "" });
+  const [payload, setPayload] = useState();
+  const [accessors, setAccessors] = useState([]);
+  const [loadingSearch, setLoadingSearch] = useState(false);
+  const [membersSearch, setMembersSearch] = useState([]);
+  const getMembers = (path) => {
+    if (isURL(path)) {
+      setLoadingFetch(true);
+      dispatch(actions_exports.urlProxy(path)).then((resp) => {
+        setPayload(resp);
+        if (resp) {
+          const keys2 = arrayFinder(resp);
+          setAccessors(keys2);
+          if (variantConfig.config[selectedLocale].accessor && resp[variantConfig.config[selectedLocale].accessor]) {
+            setConfigFromSample(
+              resp[variantConfig.config[selectedLocale].accessor][0],
+              variantConfig.config[selectedLocale].accessor
+            );
+          } else if (keys2.length === 0) {
+            if (resp && resp[0])
+              setConfigFromSample(resp[0]);
+          }
+        }
+        setFetchError(false);
+        setLoadingFetch(false);
+      }).catch((e) => {
+        console.error(e);
+        setFetchError(`Fetch error: ${e.message}`);
+        setPayload(void 0);
+        setLoadingFetch(false);
+      });
+    }
+  };
+  const searchIngestedMembers = (variantId) => {
+    setLoadingSearch(true);
+    const searchParams = parseSearchMemberParams({
+      variant: variantId,
+      limit: "5",
+      locale: "all",
+      visible: "true",
+      includes: "true",
+      noImage: "false",
+      format: "plain",
+      all: "true"
+    });
+    dispatch(actions_exports.searchMember(searchParams)).then((resp) => {
+      if (resp && resp.results) {
+        const members = resp.results;
+        setMembersSearch(members);
+        if (members.length === 0) {
+          onChangeSettings("doIngest", true);
+        }
+      }
+      setLoadingSearch(false);
+    }).catch((e) => {
+      console.error(e);
+      setLoadingSearch(false);
+    });
+  };
+  const setConfigFromSample = (sample2, accessor = "") => {
+    if (sample2) {
+      const sampleKeys = Object.keys(sample2);
+      const guessId = sampleKeys.find((d) => d.toLowerCase().includes("id")) || sampleKeys[0];
+      const guessName = sampleKeys.find((d) => !d.toLowerCase().includes("id")) || sampleKeys[0];
+      if (!variantConfig.config[selectedLocale].idKey || variantConfig.config[selectedLocale].idKey === "" || !variantConfig.config[selectedLocale].labelKey || variantConfig.config[selectedLocale].labelKey === "") {
+        setVariantConfig({
+          ...variantConfig,
+          config: {
+            ...variantConfig.config,
+            [selectedLocale]: {
+              ...variantConfig.config[selectedLocale],
+              idKey: guessId,
+              labelKey: guessName,
+              accessor
+            }
+          }
+        });
+      }
+    }
+    setSample(sample2);
+  };
+  useEffect(() => {
+    if (variantConfig.id) {
+      searchIngestedMembers(variantConfig.id);
+    }
+    validateSlug(variantConfig.slug);
+    if (variantConfig.config[selectedLocale] && variantConfig.config[selectedLocale].path) {
+      getMembers(variantConfig.config[selectedLocale].path);
+    }
+  }, []);
+  const onLocaleChange = (newLocale) => {
+    setPayload(void 0);
+    setFetchError(false);
+    let attributesList = [];
+    if (newLocale !== localeDefault10) {
+      const defaultAttributes = variantConfig.config[localeDefault10] ? [...variantConfig.config[localeDefault10].attributes].map((item) => {
+        const newItem = { ...item };
+        newItem.value = "";
+        return newItem;
+      }) : [];
+      if (variantConfig.config[newLocale] && variantConfig.config[newLocale].attributes) {
+        attributesList = defaultAttributes.map((da) => {
+          const item = variantConfig.config[newLocale].attributes.find((sa) => da.name === sa.name);
+          if (item) {
+            da.value = item.value;
+          }
+          return da;
+        });
+      } else {
+        attributesList = defaultAttributes;
+      }
+      const newConfig = {
+        ...variantConfig.config,
+        [newLocale]: {
+          ...variantConfig.config[newLocale],
+          attributes: attributesList
+        }
+      };
+      setVariantConfig({
+        ...variantConfig,
+        config: newConfig
+      });
+    }
+    if (variantConfig.config[newLocale] && variantConfig.config[newLocale].path) {
+      getMembers(variantConfig.config[newLocale].path);
+    }
+    setSelectedLocale(newLocale);
+  };
+  const variantSettings = useMemo(() => getVariantSettingsDefaults(variantConfig.settings), [variantConfig.settings]);
+  const variantSettingsSwitches = useMemo(() => [
+    {
+      label: "Replace names",
+      key: "overrideNames",
+      yesText: "Names from new source will update the previously ingested members.",
+      noText: "Original names will be keep."
+    },
+    {
+      label: "Replace slugs",
+      key: "regenerateSlugs",
+      yesText: "Slugs will be regenerated based on new member's names and updated on previously ingested members.",
+      noText: "Original slugs will be keep.",
+      disabled: !variantSettings.overrideNames
+    },
+    {
+      label: "Replace relevance value",
+      key: "overrideRelevance",
+      yesText: "Relevance index will be recalculated and updated on previously ingested members.",
+      noText: "Original numbers will be keep."
+    },
+    {
+      label: "Replace attributes",
+      key: "overrideAttributes",
+      yesText: "Attributes will be regenerated and override the current ones. Different ones will be kept.",
+      noText: "Original attributes will be keep, ignoring the changes"
+    },
+    {
+      label: "Keep all existing members",
+      key: "keepOldMembers",
+      yesText: "All the the existing members will be keep even if they are not in the new API members list",
+      noText: "Members that are not in the API members list will be deleted, keeping both lists on sync."
+    }
+  ], [variantSettings.overrideNames]);
+  const onChangeAccessor = (accessor) => {
+    const dataArray = keyDiver(payload, accessor);
+    if (dataArray[0]) {
+      setConfigFromSample(dataArray[0], accessor);
+    }
+  };
+  const validateSlug = (slug) => {
+    dispatch(actions_exports.variantValidateSlug(variantConfig.dimension_id, slug)).then(setValidSlug).then(() => {
+      setLoadingValidSlug(false);
+    }, (err) => {
+      console.error(err);
+    });
+  };
+  const onChange = (field, value) => {
     let newValue = value;
     if (field === "slug") {
       newValue = slugifyInput_default(value);
+      if (newValue) {
+        setLoadingValidSlug(true);
+        validateSlug(value);
+      }
     }
     setVariantConfig({ ...variantConfig, [field]: newValue });
   };
   const onChangeConfig = (field, value) => {
+    if (field === "path") {
+      setFetchError(false);
+    }
     setVariantConfig({
       ...variantConfig,
       config: {
@@ -10139,6 +10585,18 @@ function VariantEditor({ for: variant, onClose: closeHandler }) {
       }
     });
   };
+  const onChangeSettings = (field, value) => {
+    const extraUpdate = field === "overrideNames" && !value ? { regenerateSlugs: false } : {};
+    setVariantConfig({
+      ...variantConfig,
+      //config: configUpdate,
+      settings: {
+        ...variantConfig.settings,
+        ...extraUpdate,
+        [field]: value
+      }
+    });
+  };
   const onSubmit = () => {
     setLoading(true);
     dispatch(actions_exports.updateEntity("variant", variantConfig)).then(() => {
@@ -10162,15 +10620,17 @@ function VariantEditor({ for: variant, onClose: closeHandler }) {
     });
   };
   const addAttributes = () => {
-    const sampleKeys = Object.keys(sample);
-    const sampleKey = sampleKeys[0];
-    if (sampleKey) {
-      const existingAttributes = variantConfig.config[selectedLocale]?.attributes || [];
-      const attrCount = existingAttributes.length || 0;
-      updateAttributes([
-        ...existingAttributes,
-        { type: "constant", name: `attr${attrCount + 1}`, value: "" }
-      ]);
+    if (sample) {
+      const sampleKeys = Object.keys(sample);
+      const sampleKey = sampleKeys[0];
+      if (sampleKey) {
+        const existingAttributes = variantConfig.config[selectedLocale]?.attributes || [];
+        const attrCount = existingAttributes.length || 0;
+        updateAttributes([
+          ...existingAttributes,
+          { type: "constant", name: `attr${attrCount + 1}`, value: "" }
+        ]);
+      }
     }
   };
   const onChangeAttribute = (key, targetIx, value) => {
@@ -10191,200 +10651,276 @@ function VariantEditor({ for: variant, onClose: closeHandler }) {
   };
   const keys = sample ? Object.keys(sample).map((d) => ({ value: d, label: `${d}: ${sample[d]}` })) : [];
   const accessorSelectData = accessors.map((d) => ({ value: d, label: d }));
+  const invalidPath = !isURL(variantConfig.config[selectedLocale].path);
+  const fetchErrorMsg = useMemo(() => {
+    if (fetchError)
+      return fetchError;
+    if (invalidPath && variantConfig.config[selectedLocale].path !== "")
+      return "Format error: Invalid URL.";
+    return false;
+  }, [fetchError, invalidPath, variantConfig.config, selectedLocale]);
   return /* @__PURE__ */ jsx(
     DrawerContentWithScroll,
     {
       content: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Title, { order: 2, children: `Editing Variant: ${variantConfig.name}` }),
         /* @__PURE__ */ jsx(Space, { h: "xs" }),
-        /* @__PURE__ */ jsx(TextInput, { value: variantConfig.name, label: "Name", onChange: (e) => onChange("name", e.target.value) }),
-        /* @__PURE__ */ jsx(Space, { h: "xs" }),
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            value: variantConfig.slug,
-            icon: !loadingValidSlug && !validSlug.valid ? /* @__PURE__ */ jsx(IconAlertCircle, {}) : /* @__PURE__ */ jsx(IconCircleCheck, {}),
-            label: "Slug",
-            description: loadingValidSlug ? "Validating slug..." : validSlug.valid ? "Valid slug." : "Invalid slug.",
-            error: !loadingValidSlug && !validSlug.valid ? /* @__PURE__ */ jsxs(Text, { children: [
-              "Duplicated slug. Suggestion:",
-              /* @__PURE__ */ jsx(
-                Code,
-                {
-                  onClick: () => onChange("slug", validSlug.suggestion),
-                  style: { cursor: "pointer" },
-                  children: validSlug.suggestion
-                }
-              )
-            ] }) : false,
-            onChange: (e) => onChange("slug", e.target.value)
-          }
-        ),
-        /* @__PURE__ */ jsx(Divider, { my: "lg" }),
-        /* @__PURE__ */ jsx(Title, { order: 2, size: "h4", children: "Members data" }),
-        /* @__PURE__ */ jsx(Space, { h: "xs" }),
-        /* @__PURE__ */ jsx(
-          SegmentedControl,
-          {
-            value: selectedLocale,
-            fullWidth: true,
-            onChange: setSelectedLocale,
-            data: localesItems
-          }
-        ),
-        variantConfig.config[selectedLocale] && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Space, { h: "lg" }),
-          /* @__PURE__ */ jsxs(Group, { grow: true, align: "flex-end", children: [
+        /* @__PURE__ */ jsxs(Tabs, { defaultValue: "variant", children: [
+          /* @__PURE__ */ jsxs(Tabs.List, { grow: true, children: [
+            /* @__PURE__ */ jsx(Tabs.Tab, { value: "variant", children: "Variant" }),
+            /* @__PURE__ */ jsx(Tabs.Tab, { value: "members", children: "Members" })
+          ] }),
+          /* @__PURE__ */ jsxs(Tabs.Panel, { value: "variant", py: "md", children: [
+            /* @__PURE__ */ jsx(Title, { order: 3, children: "Variant Settings" }),
+            /* @__PURE__ */ jsx(Space, { h: "xs" }),
             /* @__PURE__ */ jsx(
               TextInput,
               {
-                onChange: (e) => onChangeConfig("path", e.target.value),
-                title: "Api endpoint",
-                description: "Enter the url to retrieve a member list to ingest. (JSON) and click Fetch.",
-                value: variantConfig.config[selectedLocale].path
+                value: variantConfig.name,
+                label: "Name",
+                onChange: (e) => onChange("name", e.target.value)
               }
             ),
+            /* @__PURE__ */ jsx(Space, { h: "xs" }),
             /* @__PURE__ */ jsx(
-              Button,
+              TextInput,
               {
-                disabled: loadingFetch,
-                onClick: () => getMembers(variantConfig.config[selectedLocale].path),
-                loading: loadingFetch,
-                leftIcon: /* @__PURE__ */ jsx(IconPlayerPlay, {}),
-                children: loadingFetch ? "Fetching" : "Fetch"
+                value: variantConfig.slug,
+                icon: !loadingValidSlug && !validSlug.valid ? /* @__PURE__ */ jsx(IconAlertCircle, {}) : /* @__PURE__ */ jsx(IconCircleCheck, {}),
+                label: "Slug",
+                description: loadingValidSlug ? "Validating slug..." : validSlug.valid ? "Valid slug." : "Invalid slug.",
+                error: !loadingValidSlug && !validSlug.valid ? /* @__PURE__ */ jsxs(Text, { children: [
+                  "Duplicated slug. Suggestion:",
+                  /* @__PURE__ */ jsx(
+                    Code,
+                    {
+                      onClick: () => onChange("slug", validSlug.suggestion),
+                      style: { cursor: "pointer" },
+                      children: validSlug.suggestion
+                    }
+                  )
+                ] }) : false,
+                onChange: (e) => onChange("slug", e.target.value)
               }
             )
           ] }),
-          payload && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(Space, { h: "md" }),
-            /* @__PURE__ */ jsx(
-              Select,
-              {
-                value: variantConfig.config[selectedLocale].accessor,
-                label: "Elements",
-                description: "Choose the key that returns the array of elements that \n                        are going to be ingested as members.",
-                data: accessorSelectData,
-                disabled: accessorSelectData.length === 0,
-                placeholder: accessorSelectData.length === 0 ? "Root is an array" : "",
-                onChange: (e) => onChangeAccessor(e)
-              }
-            ),
-            /* @__PURE__ */ jsx(Divider, { label: "First element preview", labelPosition: "center" }),
-            payload[variantConfig.config[selectedLocale].accessor] && !Array.isArray(payload) && /* @__PURE__ */ jsx(InputMenuItem_default, { variables: payload[variantConfig.config[selectedLocale].accessor][0] }),
-            Array.isArray(payload) && payload[0] && /* @__PURE__ */ jsx(InputMenuItem_default, { variables: payload[0] }),
-            /* @__PURE__ */ jsx(Space, { h: "md" }),
-            /* @__PURE__ */ jsx(
-              Select,
-              {
-                value: variantConfig.config[selectedLocale].idKey,
-                label: "Unique identificator",
-                description: "Choose the field that is a unique identification for a single member.",
-                data: keys,
-                onChange: (e) => onChangeConfig("idKey", e)
-              }
-            ),
-            /* @__PURE__ */ jsx(Space, { h: "md" }),
-            /* @__PURE__ */ jsx(
-              Select,
-              {
-                value: variantConfig.config[selectedLocale].labelKey,
-                label: "Members' name",
-                description: "Choose the field that contains the members name.",
-                data: keys,
-                onChange: (e) => onChangeConfig("labelKey", e)
-              }
-            ),
-            /* @__PURE__ */ jsx(Space, { h: "md" }),
+          /* @__PURE__ */ jsxs(Tabs.Panel, { value: "members", py: "md", children: [
+            /* @__PURE__ */ jsx(Title, { order: 3, children: "Members Settings" }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", children: "Members, once ingested, become pages for this variant." }),
             /* @__PURE__ */ jsx(
-              Select,
+              SwitchWithTooltip_default,
               {
-                value: variantConfig.config[selectedLocale].zValueKey || "",
-                label: "Member's relevance (optional)",
-                description: "Choose a field that will be converted to a number and \n                        normalized from 0 to 1 to determine the member's relevance.",
-                data: [
-                  { value: "null", label: "None" },
-                  ...keys
-                ],
-                onChange: (e) => onChangeConfig("zValueKey", e)
+                switchProps: {
+                  label: `${!loadingSearch && membersSearch.length > 0 ? "Re-" : ""}Ingest members`,
+                  checked: variantSettings.doIngest,
+                  onChange: (event) => onChangeSettings("doIngest", event.currentTarget.checked)
+                },
+                yesText: `Run the ingestion process and save the variant details.
+                  Remember include the ingestion information for all the locales.`,
+                noText: "Ingestion is not going to run and the current members are not going to suffer any change."
               }
             ),
-            /* @__PURE__ */ jsx(Space, { h: "md" }),
-            /* @__PURE__ */ jsx(Title, { order: 3, size: "h5", children: "Attributes" }),
-            /* @__PURE__ */ jsx(Text, { size: "sm", children: "Attributes are properties to be ingested as metadata with the member element. Could be constants (same value for every member) or dynamic (based on a property of the data)" }),
-            /* @__PURE__ */ jsx(Space, { h: "xs" }),
-            variantConfig.config[selectedLocale].attributes && variantConfig.config[selectedLocale].attributes.map((attr, ix) => /* @__PURE__ */ jsxs(Group, { align: "end", grow: true, children: [
-              /* @__PURE__ */ jsx(
-                Select,
+            variantSettings.doIngest && !loadingSearch && membersSearch.length > 0 && /* @__PURE__ */ jsxs(Box, { ml: "lg", children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: "Settings that are going to be applied for members reingestions and for all available languages, matching by unique identificator. All new members are going to be ingested. Images and tags for existing members will be safe." }),
+              variantSettingsSwitches.map((vs) => /* @__PURE__ */ jsx(
+                SwitchWithTooltip_default,
                 {
-                  value: variantConfig.config[selectedLocale].attributes[ix].type,
-                  label: "Type",
-                  data: [{ value: "variable", label: "Data based" }, { value: "constant", label: "Constant" }],
-                  readOnly: selectedLocale !== localeDefault10,
-                  disabled: selectedLocale !== localeDefault10,
-                  onChange: (e) => onChangeAttribute("type", ix, e)
-                }
-              ),
+                  switchProps: {
+                    disabled: vs.disabled,
+                    label: vs.label,
+                    checked: variantSettings[vs.key],
+                    onChange: (event) => onChangeSettings(vs.key, event.currentTarget.checked)
+                  },
+                  yesText: vs.yesText,
+                  noText: vs.noText
+                },
+                vs.key
+              ))
+            ] }),
+            !variantSettings.doIngest && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Title, { order: 2, size: "h4", children: "Ingested members preview" }),
+              /* @__PURE__ */ jsx(Space, { h: "xs" }),
+              /* @__PURE__ */ jsxs(Stack, { spacing: 0, justify: "center", children: [
+                loadingSearch && /* @__PURE__ */ jsx(Loader, { m: "0 auto" }),
+                !loadingSearch && membersSearch.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    MembersTable,
+                    {
+                      members: membersSearch,
+                      colsToRender: ["id", "name", "slug"]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Link, { href: "metadata", passHref: true, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", align: "center", td: "underline", size: "xs", children: "See the full list in Metadata View" }) })
+                ] })
+              ] }),
+              !loadingSearch && membersSearch.length === 0 && /* @__PURE__ */ jsx(Text, { c: "dimmed", align: "center", children: "No members ingested yet." }),
+              /* @__PURE__ */ jsx(Space, { h: "xs" })
+            ] }),
+            variantSettings.doIngest && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Divider, { my: "sm" }),
+              /* @__PURE__ */ jsx(Title, { order: 2, size: "h4", children: "Members ingestion" }),
+              /* @__PURE__ */ jsx(Space, { h: "xs" }),
               /* @__PURE__ */ jsx(
-                TextInput,
-                {
-                  value: variantConfig.config[selectedLocale].attributes[ix].name,
-                  label: "Name",
-                  readOnly: selectedLocale !== localeDefault10,
-                  disabled: selectedLocale !== localeDefault10,
-                  onChange: (e) => onChangeAttribute("name", ix, e.target.value)
-                }
-              ),
-              attr.type === "variable" && /* @__PURE__ */ jsx(
-                Select,
-                {
-                  value: variantConfig.config[selectedLocale].attributes[ix].value,
-                  label: "Value",
-                  data: keys,
-                  onChange: (e) => onChangeAttribute("value", ix, e)
-                }
-              ),
-              attr.type === "constant" && /* @__PURE__ */ jsx(
-                TextInput,
+                SegmentedControl,
                 {
-                  value: variantConfig.config[selectedLocale].attributes[ix].value,
-                  label: "Value",
-                  onChange: (e) => onChangeAttribute("value", ix, e.target.value)
+                  value: selectedLocale,
+                  fullWidth: true,
+                  onChange: onLocaleChange,
+                  data: localesItems,
+                  disabled: loadingFetch
                 }
               ),
-              /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  color: "red",
-                  onClick: () => deleteAttribute(ix),
-                  disabled: selectedLocale !== localeDefault10,
-                  children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
-                }
-              )
-            ] }, ix)),
-            /* @__PURE__ */ jsx(Space, { h: "md" }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                onClick: addAttributes,
-                leftIcon: "+",
-                disabled: loading || selectedLocale !== localeDefault10,
-                children: "Add Attribute"
-              }
-            )
+              variantConfig.config[selectedLocale] && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Space, { h: "lg" }),
+                /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    onChange: (e) => onChangeConfig("path", e.target.value),
+                    title: "Api endpoint",
+                    description: "Enter the url to retrieve a member list to ingest. (JSON) and click Fetch.",
+                    value: variantConfig.config[selectedLocale].path,
+                    error: fetchErrorMsg,
+                    rightSectionWidth: "105px",
+                    w: "100%",
+                    rightSection: loadingFetch ? /* @__PURE__ */ jsxs(Group, { align: "center", children: [
+                      /* @__PURE__ */ jsx(Loader, { size: "xs" }),
+                      /* @__PURE__ */ jsx(Text, { span: true, variant: "subtle", size: "xs", children: "Fetching..." })
+                    ] }) : /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        disabled: loadingFetch || invalidPath,
+                        onClick: () => getMembers(variantConfig.config[selectedLocale].path),
+                        leftIcon: /* @__PURE__ */ jsx(IconPlayerPlay, {}),
+                        children: "Fetch"
+                      }
+                    ),
+                    readOnly: loadingFetch
+                  }
+                ) }),
+                payload && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Space, { h: "md" }),
+                  /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      value: variantConfig.config[selectedLocale].accessor,
+                      label: "Elements",
+                      description: "Choose the key that returns the array of elements that \n                                are going to be ingested as members.",
+                      data: accessorSelectData,
+                      disabled: accessorSelectData.length === 0,
+                      placeholder: accessorSelectData.length === 0 ? "Root is an array" : "",
+                      onChange: (e) => onChangeAccessor(e)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Divider, { label: "First element preview", labelPosition: "center" }),
+                  payload[variantConfig.config[selectedLocale].accessor] && !Array.isArray(payload) && /* @__PURE__ */ jsx(InputMenuItem_default, { variables: payload[variantConfig.config[selectedLocale].accessor][0] }),
+                  Array.isArray(payload) && payload[0] && /* @__PURE__ */ jsx(InputMenuItem_default, { variables: payload[0] }),
+                  /* @__PURE__ */ jsx(Space, { h: "md" }),
+                  /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      value: variantConfig.config[selectedLocale].idKey,
+                      label: "Unique identificator",
+                      description: "Choose the field that is a unique identification for a single member.",
+                      data: keys,
+                      onChange: (e) => onChangeConfig("idKey", e)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Space, { h: "md" }),
+                  /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      value: variantConfig.config[selectedLocale].labelKey,
+                      label: "Members' name",
+                      description: "Choose the field that contains the members name.",
+                      data: keys,
+                      onChange: (e) => onChangeConfig("labelKey", e)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Space, { h: "md" }),
+                  /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      value: variantConfig.config[selectedLocale].zValueKey || "",
+                      label: "Member's relevance (optional)",
+                      description: "Choose a field that will be converted to a number and \n                                normalized from 0 to 1 to determine the member's relevance.",
+                      data: [
+                        { value: "null", label: "None" },
+                        ...keys
+                      ],
+                      onChange: (e) => onChangeConfig("zValueKey", e)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Space, { h: "md" }),
+                  /* @__PURE__ */ jsx(Title, { order: 3, size: "h5", children: "Attributes" }),
+                  /* @__PURE__ */ jsx(Text, { size: "sm", children: "Attributes are properties to be ingested as metadata with the member element. Could be constants (same value for every member) or dynamic (based on a property of the data)" }),
+                  /* @__PURE__ */ jsx(Space, { h: "xs" }),
+                  variantConfig.config[selectedLocale].attributes && variantConfig.config[selectedLocale].attributes.map((attr, ix) => /* @__PURE__ */ jsxs(Group, { align: "end", grow: true, children: [
+                    /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        value: variantConfig.config[selectedLocale].attributes[ix].type,
+                        label: "Type",
+                        data: [
+                          { value: "variable", label: "Data based" },
+                          { value: "constant", label: "Constant" }
+                        ],
+                        readOnly: selectedLocale !== localeDefault10,
+                        disabled: selectedLocale !== localeDefault10,
+                        onChange: (e) => onChangeAttribute("type", ix, e)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: variantConfig.config[selectedLocale].attributes[ix].name,
+                        label: "Name",
+                        readOnly: selectedLocale !== localeDefault10,
+                        disabled: selectedLocale !== localeDefault10,
+                        onChange: (e) => onChangeAttribute("name", ix, e.target.value)
+                      }
+                    ),
+                    attr.type === "variable" && /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        value: variantConfig.config[selectedLocale].attributes[ix].value,
+                        label: "Value",
+                        data: keys,
+                        onChange: (e) => onChangeAttribute("value", ix, e)
+                      }
+                    ),
+                    attr.type === "constant" && /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: variantConfig.config[selectedLocale].attributes[ix].value,
+                        label: "Value",
+                        onChange: (e) => onChangeAttribute("value", ix, e.target.value)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ActionIcon,
+                      {
+                        color: "red",
+                        onClick: () => deleteAttribute(ix),
+                        disabled: selectedLocale !== localeDefault10,
+                        children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
+                      }
+                    )
+                  ] }, ix)),
+                  /* @__PURE__ */ jsx(Space, { h: "md" }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: addAttributes,
+                      leftIcon: "+",
+                      disabled: loading || selectedLocale !== localeDefault10,
+                      children: "Add Attribute"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Space, { h: "md" })
+            ] })
           ] })
-        ] }),
-        /* @__PURE__ */ jsx(Space, { h: "md" }),
-        /* @__PURE__ */ jsxs(Code, { block: true, children: [
-          "TO-DO Settings for member ingestion (all languages), checkboxes.",
-          /* @__PURE__ */ jsx("br", {}),
-          "(x) override names?",
-          /* @__PURE__ */ jsx("br", {}),
-          "(x) regenerate slugs based on names changes?",
-          /* @__PURE__ */ jsx("br", {}),
-          "(x) keep old members that doesn't exists?",
-          /* @__PURE__ */ jsx("br", {}),
-          "(x) keep metadata: tags, images?",
-          /* @__PURE__ */ jsx("br", {})
         ] })
       ] }),
       buttons: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -10403,7 +10939,7 @@ function VariantEditor({ for: variant, onClose: closeHandler }) {
             disabled: loading || loadingFetch || !loadingValidSlug && !validSlug.valid,
             loading: loading || loadingFetch,
             onClick: onSubmit,
-            children: "Ingest & Save"
+            children: `${variantSettings.doIngest ? `${!loadingSearch && membersSearch.length > 0 ? "Re-" : ""}Ingest & ` : ""}Save`
           }
         )
       ] }),
@@ -10458,12 +10994,12 @@ function DimensionEditor({ id, onClose: closeHandler }) {
         ),
         /* @__PURE__ */ jsx(Space, { h: "xs" }),
         /* @__PURE__ */ jsx(
-          TextInput,
+          NumberInput,
           {
-            value: config.ordering,
+            value: config.ordering ? parseInt(config.ordering, 10) : 0,
             type: "number",
             label: "Order",
-            onChange: (e) => onChange("ordering", e.target.value)
+            onChange: (value) => onChange("ordering", value)
           }
         ),
         /* @__PURE__ */ jsx(Divider, { my: "xl" }),
@@ -10570,129 +11106,6 @@ init_store2();
 
 // components/builder/DimensionAutocomplete.tsx
 init_esm_shims();
-
-// api/endpoints/member.ts
-init_esm_shims();
-init_getLocales();
-init_stripHTML();
-init_lib3();
-
-// api/endpoints/lib.ts
-init_esm_shims();
-init_lib3();
-function parseFiniteNumber(value) {
-  const num = Number.parseInt(`${value || ""}`, 10);
-  if (Number.isNaN(num) || !Number.isFinite(num)) {
-    throw new BackendError(400, `Invalid numeric parameter: ${value}`);
-  }
-  return num;
-}
-function normalizeList(value) {
-  if (value == null || value === "") {
-    return [];
-  }
-  if (Array.isArray(value)) {
-    return value;
-  }
-  return value.toString().split(",");
-}
-
-// api/endpoints/member.ts
-var { localeDefault: localeDefault9 } = getLocales_default();
-function parseReadMemberParams(query) {
-  const locale = normalizeList(query.locale)[0] || localeDefault9 || "en";
-  const all = locale === "all" || yn4(query.all);
-  const mode = normalizeList(query.mode)[0];
-  const outputParam = normalizeList(query.output)[0] || "full";
-  const output = outputParam === "lite" ? "lite" : "full";
-  const relatedLimit = parseInt(normalizeList(query.related)[0], 10) || 5;
-  let variant = normalizeList(query.variant).map(parseFiniteNumber);
-  if (variant.length === 0) {
-    variant = normalizeList(query["variant[]"]).map(parseFiniteNumber);
-  }
-  if (mode === "ids") {
-    return {
-      all,
-      mode,
-      variant,
-      output,
-      locale: all ? localeDefault9 : stripHTML(locale),
-      ids: normalizeList(query.ids || query["ids[]"])
-    };
-  }
-  if (mode === "content_ids") {
-    return {
-      all,
-      mode,
-      variant,
-      output,
-      locale: all ? localeDefault9 : stripHTML(locale),
-      content_ids: normalizeList(query.content_ids || query["content_ids[]"]).map(parseFiniteNumber)
-    };
-  }
-  if (mode === "slugs") {
-    return {
-      all,
-      mode,
-      variant,
-      output,
-      locale: all ? localeDefault9 : stripHTML(locale),
-      slugs: normalizeList(query.slugs || query["slugs[]"]).map((token) => {
-        const [variantSlug, memberSlug] = token.split("/");
-        return { variantSlug, memberSlug };
-      })
-    };
-  }
-  if (mode === "related") {
-    return {
-      all,
-      mode,
-      locale: all ? localeDefault9 : stripHTML(locale),
-      related: relatedLimit,
-      current_ids: normalizeList(query.current_ids || query["current_ids[]"]).map(parseFiniteNumber),
-      report_ids: normalizeList(query.report_ids || query["report_ids[]"]).map(parseFiniteNumber),
-      dimension_ids: normalizeList(query.dimension_ids || query["dimension_ids[]"]).map(parseFiniteNumber),
-      variant_ids: normalizeList(query.variant_ids || query["variant_ids[]"]).map(parseFiniteNumber),
-      output
-    };
-  }
-  throw new BackendError(400, `Invalid mode: '${mode}'`);
-}
-function parseSearchMemberParams(query) {
-  const locale = normalizeList(query.locale)[0] || localeDefault9 || "en";
-  const localeIsAll = locale === "all";
-  const format2 = normalizeList(query.format)[0];
-  const formatIsNested = format2 ? format2 === "nested" : localeIsAll;
-  let variant = normalizeList(query.variant).map(parseFiniteNumber);
-  if (variant.length === 0) {
-    variant = normalizeList(query["variant[]"]).map(parseFiniteNumber);
-  }
-  let dimension = normalizeList(query.dimension).map(parseFiniteNumber);
-  if (dimension.length === 0) {
-    dimension = normalizeList(query["dimension[]"]).map(parseFiniteNumber);
-  }
-  let report = normalizeList(query.report).map(parseFiniteNumber);
-  if (report.length === 0) {
-    report = normalizeList(query["report[]"]).map(parseFiniteNumber);
-  }
-  return {
-    query: normalizeList(query.query || query.q)[0] || "",
-    locale: localeIsAll ? localeDefault9 : locale,
-    limit: normalizeList(query.limit).map(parseFiniteNumber)[0] ?? 5,
-    format: formatIsNested ? "nested" : "plain",
-    includes: yn4(query.includes, { default: true }),
-    visible: yn4(query.visible, { default: true }),
-    noImage: yn4(query.noImage, { default: false }),
-    variant,
-    dimension,
-    report,
-    all: localeIsAll,
-    sort: normalizeList(query.sort)[0],
-    direction: normalizeList(query.direction)[0]
-  };
-}
-
-// components/builder/DimensionAutocomplete.tsx
 init_store2();
 function DimensionAutocomplete({ id, locale, onSelect, initialSelection = void 0 }) {
   const dispatch = useAppDispatch();
@@ -14402,7 +14815,7 @@ function FormatterForm({ formatterId, onEditEnd }) {
         DrawerContentWithScroll,
         {
           content: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(LoadingOverlay, { visible: initialLoading, overlayBlur: 2, overlayOpacity: 50 }),
+            /* @__PURE__ */ jsx(LoadingOverlay, { visible: initialLoading, overlayBlur: 2, overlayOpacity: 0.5 }),
             error && /* @__PURE__ */ jsx(Alert, { title: "Formatter Form", color: "red", children: "Error, please try again." }),
             formatter && !error && /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
               /* @__PURE__ */ jsxs(Group, { grow: true, align: "flex-start", children: [
@@ -14531,7 +14944,6 @@ var getCastedValue2 = (type, value) => {
   }
 };
 function FormattersTable({ filters, onClickEdit }) {
-  const [sortStatus, setSortStatus] = useState();
   const [records, setRecords] = useState([]);
   const formattersList = useFormatterList();
   const formatters2 = !formattersList.isSuccess ? [] : formattersList.data;
@@ -14555,7 +14967,7 @@ function FormattersTable({ filters, onClickEdit }) {
     };
   }), [formatters2]);
   const doSearch = () => {
-    let filteredResults = formattersFull.filter(
+    const filteredResults = formattersFull.filter(
       (formatter) => {
         let findQuery = true;
         let findType = true;
@@ -14568,91 +14980,132 @@ function FormattersTable({ filters, onClickEdit }) {
         return findQuery && findType;
       }
     );
-    if (sortStatus) {
-      const sortIndex = sortStatus.direction === "asc" ? -1 : 1;
-      filteredResults = filteredResults.sort((a, b) => a[sortStatus.columnAccessor] > b[sortStatus.columnAccessor] ? 1 * sortIndex : -1 * sortIndex);
-    }
     setRecords(filteredResults);
   };
   useEffect(() => {
     doSearch();
-  }, [sortStatus, filters, formattersFull]);
+  }, [filters, formattersFull]);
   const cols = [
     {
-      title: "ID",
-      accessor: "id",
-      sortable: true,
-      textAlignment: "right"
+      header: "ID",
+      accessorKey: "id",
+      minSize: 55,
+      size: 55,
+      maxSize: 55
     },
     {
-      title: "Name",
-      accessor: "name",
-      sortable: true,
-      render: (member) => {
-        const icon = member.content.type === FORMATTER_TYPES.FORMATTER ? /* @__PURE__ */ jsx(IconVariable, { size: "1.3em" }) : /* @__PURE__ */ jsx(IconMathFunction, { size: "1.3em" });
+      header: "Name",
+      accessorKey: "name",
+      Cell: ({ row }) => {
+        const icon = row.original.content.type === FORMATTER_TYPES.FORMATTER ? /* @__PURE__ */ jsx(IconVariable, { size: "1.3em" }) : /* @__PURE__ */ jsx(IconMathFunction, { size: "1.3em" });
         return /* @__PURE__ */ jsxs(Group, { noWrap: true, align: "center", spacing: 2, children: [
-          /* @__PURE__ */ jsx("span", { children: member.name }),
-          /* @__PURE__ */ jsx(Tooltip, { label: FORMATTER_TYPES_NAMES[member.content.type], children: /* @__PURE__ */ jsx("span", { children: icon }) })
+          /* @__PURE__ */ jsx("span", { children: row.original.name }),
+          /* @__PURE__ */ jsx(Tooltip, { label: FORMATTER_TYPES_NAMES[row.original.content.type], children: /* @__PURE__ */ jsx("span", { children: icon }) })
         ] });
-      }
+      },
+      minSize: 80,
+      size: 80
     },
     {
-      title: "Description",
-      accessor: "content.description"
+      header: "Description",
+      accessorKey: "content.description",
+      enableSorting: false,
+      mantineTableBodyCellProps: {
+        sx: {
+          textWrap: "wrap"
+        }
+      },
+      minSize: 100
     },
     {
-      title: "Demo",
-      accessor: "content.testValue",
-      render: (member) => {
-        let input = member.content.testValue;
-        if (member.content.inputType === FORMATTER_INPUT_TYPES.STRING) {
+      header: "Demo",
+      accessorKey: "content.testValue",
+      Cell: ({ row }) => {
+        let input = row.original.content.testValue;
+        if (row.original.content.inputType === FORMATTER_INPUT_TYPES.STRING) {
           input = `"${input}"`;
         }
-        let output = member.result;
-        if (typeof member.result === "string") {
+        let output = row.original.result;
+        if (typeof row.original.result === "string") {
           output = `"${output}"`;
         }
         return /* @__PURE__ */ jsxs(Group, { spacing: 2, children: [
-          /* @__PURE__ */ jsx(Tooltip, { label: `Input Type: ${FORMATTER_INPUT_TYPES_NAMES[member.content.inputType]}`, children: /* @__PURE__ */ jsx(Code, { color: "blue", children: input }) }),
+          /* @__PURE__ */ jsx(Tooltip, { label: `Input Type: ${FORMATTER_INPUT_TYPES_NAMES[row.original.content.inputType]}`, children: /* @__PURE__ */ jsx(Code, { color: "blue", children: input }) }),
           /* @__PURE__ */ jsx(IconArrowRightCircle, {}),
-          /* @__PURE__ */ jsx(Code, { color: member.result && `${member.result}`.includes("ERROR") ? "red" : "teal", children: output })
+          /* @__PURE__ */ jsx(Code, { color: row.original.result && `${row.original.result}`.includes("ERROR") ? "red" : "teal", children: output })
         ] });
-      }
+      },
+      enableSorting: false,
+      minSize: 100,
+      size: 100
     },
     {
-      title: "Usage",
-      accessor: "usageCount",
-      textAlignment: "right",
-      sortable: true
+      header: "Usage",
+      accessorKey: "usageCount",
+      mantineTableHeadCellProps: {
+        align: "right",
+        sx: {
+          "& .mantine-TableHeadCell-Content-Labels": {
+            flexDirection: "row"
+          }
+        }
+      },
+      mantineTableBodyCellProps: {
+        align: "right"
+      },
+      minSize: 85,
+      size: 85,
+      maxSize: 85
     },
     {
-      title: "",
-      accessor: "actions",
-      render: (member) => /* @__PURE__ */ jsxs(Group, { position: "center", spacing: "xs", noWrap: true, children: [
-        /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(member), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit"),
+      header: "Actions",
+      accessorKey: "actions",
+      Cell: ({ row }) => /* @__PURE__ */ jsxs(Group, { position: "center", spacing: "xs", noWrap: true, children: [
+        /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(row.original), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit"),
         /* @__PURE__ */ jsx(
           EntityDeleteButton,
           {
-            id: member.id,
+            id: row.original.id,
             type: "formatter",
-            disabled: member.usageCount > 0,
-            warning: `Delete formatter called "${member.name}" (id:${member.id}) ? It is not used in any block.`
+            disabled: row.original.usageCount > 0,
+            warning: `Delete formatter called "${row.original.name}" (id:${row.original.id}) ? It is not used in any block.`
           }
         )
-      ] })
+      ] }),
+      enableSorting: false,
+      minSize: 80,
+      size: 80,
+      maxSize: 80,
+      mantineTableHeadCellProps: {
+        align: "center"
+      },
+      mantineTableBodyCellProps: {
+        align: "center"
+      }
     }
   ];
   return /* @__PURE__ */ jsx(
-    DataTable,
+    MantineReactTable,
     {
-      striped: true,
-      minHeight: 150,
-      records,
       columns: cols,
-      sortStatus,
-      onSortStatusChange: (s) => setSortStatus(s),
-      idAccessor: "id",
-      withBorder: true
+      data: records,
+      enableBottomToolbar: false,
+      enableColumnActions: false,
+      enableColumnResizing: true,
+      enablePagination: false,
+      enableTopToolbar: false,
+      initialState: {
+        density: "xs"
+      },
+      layoutMode: "grid",
+      mantineTableContainerProps: {
+        sx: {
+          minHeight: 150
+        }
+      },
+      mantineTableProps: {
+        striped: true
+      }
     }
   );
 }
@@ -14912,51 +15365,77 @@ init_store2();
 
 // components/metadata/ImageSelector.tsx
 init_esm_shims();
+var isProviderAllowed = (ipk) => {
+  const allowedProviderOptions = process.env.NEXT_PUBLIC_IMAGE_PROVIDERS ? process.env.NEXT_PUBLIC_IMAGE_PROVIDERS.split(",") : [];
+  return typeof process.env.NEXT_PUBLIC_IMAGE_PROVIDERS === "undefined" || allowedProviderOptions.indexOf(ipk) > -1 ? true : false;
+};
 function ImageSelector({ member, onEditEnd }) {
   const initialPrompt = member.contentByLocale && member.contentByLocale[0] ? member.contentByLocale[0].name : "";
-  const imageProviders = {
-    local: {
-      title: "Bespoke",
-      key: "local",
-      input: "text",
-      forceSearch: true,
-      getAxiosSearchConfig: (prompt2, image) => ({
-        url: "/api/cms/images/search/local",
-        method: "get",
-        params: { prompt: prompt2 }
-      })
-    },
-    flickr: {
-      title: "Flickr",
-      key: "flickr",
-      input: "text",
-      forceSearch: true,
-      getAxiosSearchConfig: (prompt2, image) => ({
-        url: "/api/cms/images/search/flickr",
-        method: "get",
-        params: { prompt: prompt2 }
-      })
-    },
-    unsplash: {
-      title: "Unsplash",
-      key: "unsplash",
-      input: "text",
-      forceSearch: true,
-      getAxiosSearchConfig: (prompt2, image) => ({
-        url: "/api/cms/images/search/unsplash",
-        method: "get",
-        params: { prompt: prompt2 }
-      })
-    },
-    upload: {
-      title: "Upload",
-      key: "upload",
-      input: "file",
-      forceSearch: false,
-      getAxiosSearchConfig: (prompt2, image) => ({})
-    }
-  };
-  const imageProvidersOptions = Object.keys(imageProviders).map((key) => ({ value: key, label: imageProviders[key].title }));
+  const imageProviders = useMemo(
+    () => ({
+      upload: {
+        title: "Upload",
+        key: "upload",
+        input: "file",
+        forceSearch: false,
+        pagination: false,
+        getAxiosSearchConfig: (_prompt, _image, _page) => ({})
+      },
+      local: {
+        title: "Gallery",
+        key: "local",
+        input: "text",
+        forceSearch: true,
+        pagination: false,
+        getAxiosSearchConfig: (prompt2, _image, page) => ({
+          url: "/api/cms/images/search/local",
+          method: "get",
+          params: { prompt: prompt2, page }
+        })
+      },
+      flickr: {
+        title: "Flickr",
+        key: "flickr",
+        input: "text",
+        forceSearch: true,
+        pagination: true,
+        getAxiosSearchConfig: (prompt2, _image, page) => ({
+          url: "/api/cms/images/search/flickr",
+          method: "get",
+          params: { prompt: prompt2, page }
+        })
+      },
+      unsplash: {
+        title: "Unsplash",
+        key: "unsplash",
+        input: "text",
+        forceSearch: true,
+        pagination: true,
+        getAxiosSearchConfig: (prompt2, _image, page) => ({
+          url: "/api/cms/images/search/unsplash",
+          method: "get",
+          params: { prompt: prompt2, page }
+        })
+      }
+      /* adobe: {
+        title: "Adobe",
+        key: "adobe",
+        input: "text",
+        forceSearch: true,
+        pagination: true,
+        getAxiosSearchConfig: (prompt, _image, page): AxiosRequestConfig => ({
+          url: "/api/cms/images/search/adobe",
+          method: "get",
+          params: {prompt, page},
+        })
+      }*/
+    }),
+    []
+  );
+  const imageProvidersOptions = useMemo(
+    () => Object.values(imageProviders).filter((im) => isProviderAllowed(im.key)).map((im) => ({ value: im.key, label: im.title })),
+    []
+  );
   const [loading, setLoading] = useState(false);
   const [selectedProvider, setSelectedProvider] = useState(Object.values(imageProviders)[0]);
   const [scrollSize, setScrollSize] = useState(500);
@@ -14965,17 +15444,25 @@ function ImageSelector({ member, onEditEnd }) {
   const [results, setResults] = useState([]);
   const [selectedImage, setSelectedImage] = useState();
   const [error, setError] = useState(false);
-  const onSearch = async () => {
-    setError(false);
-    setLoading(true);
-    setResults([]);
-    const providerAxiosConfig = selectedProvider.getAxiosSearchConfig(prompt, imageToUpload);
-    const imageRecords = await axios(providerAxiosConfig).then((response) => response.data.data && response.data.data.results ? response.data.data.results : []).catch((e) => {
-      console.error(e);
-      setError(true);
-    });
-    setResults(imageRecords);
-    setLoading(false);
+  const [selectedPage, setSelectedPage] = useState(1);
+  const onSearch = async (page = void 0) => {
+    if (page && page !== selectedPage) {
+      setSelectedPage(1);
+    } else {
+      setError(false);
+      setLoading(true);
+      const providerAxiosConfig = selectedProvider.getAxiosSearchConfig(
+        prompt,
+        imageToUpload,
+        page || selectedPage
+      );
+      const imageRecords = await axios(providerAxiosConfig).then((response) => response.data.data && response.data.data.results ? response.data.data.results : []).catch((e) => {
+        console.error(e);
+        setError(true);
+      });
+      setResults(imageRecords);
+      setLoading(false);
+    }
   };
   const onSelect = (img) => {
     setSelectedImage(img);
@@ -15008,25 +15495,26 @@ function ImageSelector({ member, onEditEnd }) {
     setError(false);
     setSelectedProvider(imageProviders[providerKey]);
     setSelectedImage(void 0);
+    setResults([]);
+    setSelectedPage(1);
   };
   useEffect(() => {
     const { innerHeight } = window;
     setScrollSize(innerHeight - 280);
-    onSearch();
   }, []);
   useEffect(() => {
-    setResults([]);
     if (!loading && selectedProvider.forceSearch) {
       onSearch();
     }
-  }, [selectedProvider]);
+  }, [selectedPage, selectedProvider]);
   const noResults = results && results.length === 0 && !loading && selectedProvider.key !== "upload";
+  const callToAction = results && results.length === 0 && !loading && selectedProvider.key === "upload";
   return /* @__PURE__ */ jsx(
     Drawer,
     {
       opened: true,
       onClose: onEditEnd,
-      title: `Edit image for ${initialPrompt} (${member.id}) `,
+      title: `Image selection for ${initialPrompt} (${member.id}) `,
       padding: "lg",
       closeOnClickOutside: false,
       closeOnEscape: false,
@@ -15034,7 +15522,7 @@ function ImageSelector({ member, onEditEnd }) {
       size: "50%",
       lockScroll: true,
       withCloseButton: false,
-      children: /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsxs(Stack, { children: [
+      children: /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsxs(Stack, { spacing: "sm", children: [
         /* @__PURE__ */ jsxs(Stack, { spacing: "xs", children: [
           /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, align: "flex-end", children: [
             selectedProvider.input === "text" && /* @__PURE__ */ jsx(
@@ -15043,15 +15531,18 @@ function ImageSelector({ member, onEditEnd }) {
                 placeholder: "Search term",
                 label: "Search term",
                 value: prompt,
-                onChange: (e) => setPrompt(e.target.value)
+                onChange: (e) => setPrompt(e.target.value),
+                onKeyDown: getHotkeyHandler([
+                  ["Enter", () => onSearch(1)]
+                ])
               }
             ),
             selectedProvider.input === "file" && /* @__PURE__ */ jsx(
               FileInput,
               {
                 label: "Upload image",
-                placeholder: "Choose a PNG image from your computer",
-                accept: "image/png",
+                placeholder: "Choose an image from your computer (png, jpg, jpeg, webp)",
+                accept: "image/png,image/jpeg,image/jpg,image/webp",
                 value: imageToUpload,
                 onChange: (image) => {
                   setSelectedImage(void 0);
@@ -15074,7 +15565,7 @@ function ImageSelector({ member, onEditEnd }) {
               {
                 fullWidth: true,
                 disabled: loading || !prompt || prompt === "",
-                onClick: onSearch,
+                onClick: () => onSearch(1),
                 leftIcon: /* @__PURE__ */ jsx(IconPlayerPlay, {}),
                 children: "Search"
               }
@@ -15092,23 +15583,37 @@ function ImageSelector({ member, onEditEnd }) {
           )
         ] }),
         /* @__PURE__ */ jsx(Group, { mt: "xs", grow: true, children: /* @__PURE__ */ jsxs(ScrollArea, { offsetScrollbars: true, type: "always", style: { height: scrollSize }, children: [
-          /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
+          /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 0.5, overlayColor: "#fff" }),
           error && /* @__PURE__ */ jsx(Alert, { title: `${selectedProvider.title}`, color: "red", children: "Error, please try again." }),
           noResults && /* @__PURE__ */ jsx(Alert, { title: `${selectedProvider.title}`, color: "blue", children: "No results, for try another prompt or provider." }),
-          results && results.length > 0 && !loading && /* @__PURE__ */ jsx(SimpleGrid, { cols: 3, children: results.map((img) => /* @__PURE__ */ jsx(
-            Image,
-            {
-              radius: "md",
-              src: img.source,
-              style: {
-                cursor: "pointer",
-                borderRadius: 15,
-                border: selectedImage && selectedImage.id === img.id ? "5px solid black" : ""
+          callToAction && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconPhoto, { size: "1rem" }), title: "Welcome to image selector!", color: "blue", children: "Upload an image or select a provider." }),
+          results && results.length > 0 && !loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(SimpleGrid, { cols: 3, children: results.map((img) => /* @__PURE__ */ jsx(
+              Image,
+              {
+                alt: `${selectedProvider.title}-image-${img.id}`,
+                radius: "md",
+                src: img.source,
+                style: {
+                  cursor: "pointer",
+                  borderRadius: 15,
+                  border: selectedImage && selectedImage.id === img.id ? "5px solid black" : ""
+                },
+                onClick: () => onSelect(img)
               },
-              onClick: () => onSelect(img)
-            },
-            img.id
-          )) })
+              img.id
+            )) }),
+            /* @__PURE__ */ jsx(Space, { h: "md" }),
+            selectedProvider.pagination && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                fullWidth: true,
+                onClick: () => setSelectedPage(selectedPage + 1),
+                children: "Load more images"
+              }
+            )
+          ] })
         ] }) }),
         /* @__PURE__ */ jsxs(Group, { mt: "xs", grow: true, style: { height: 45 }, children: [
           /* @__PURE__ */ jsx(
@@ -15136,24 +15641,6 @@ function ImageSelector({ member, onEditEnd }) {
 }
 var ImageSelector_default = ImageSelector;
 
-// views/ImagePreview.tsx
-init_esm_shims();
-function ImagePreview3({
-  member,
-  height = "auto",
-  width = "100%",
-  size = "thumb",
-  forceRefreshTimestamp = false
-}) {
-  let extraParam = "";
-  if (forceRefreshTimestamp) {
-    extraParam = `&t=${( new Date()).getTime()}`;
-  }
-  const imageUrl = member && member.image_id ? `/api/cms/member/image.png?member=${member.content_id}&size=${size}${extraParam}` : "https://placehold.jp/cccccc/ffffff/900x600.png?text=None";
-  return /* @__PURE__ */ jsx(Image, { height, width, radius: "md", src: imageUrl });
-}
-var ImagePreview_default = ImagePreview3;
-
 // components/metadata/MemberForm.tsx
 init_SortableTable();
 function MemberForm({ memberId, onEditEnd }) {
@@ -15166,6 +15653,10 @@ function MemberForm({ memberId, onEditEnd }) {
   const [loading, setLoading] = useState(true);
   const [showImageSelector, setShowImageSelector] = useState(false);
   const [error, setError] = useState(false);
+  const [activeTab, setActiveTab] = useState("member");
+  const [loadingSearch, setLoadingSearch] = useState(false);
+  const [membersSearch, setMembersSearch] = useState([]);
+  const [selectedRecords, setSelectedRecords] = useState({});
   const mainForm = useForm();
   const localizedForms = locales4.reduce((acc, item) => {
     acc[item] = useForm({});
@@ -15222,6 +15713,34 @@ function MemberForm({ memberId, onEditEnd }) {
     }
     setLoading(false);
   };
+  const fetchSearchMembers = async () => {
+    if (member && member.contentByLocale) {
+      const localizedName = member.contentByLocale.find((cl) => cl.locale === selectedLocale);
+      if (localizedName) {
+        setLoadingSearch(true);
+        const searchParams = parseSearchMemberParams({
+          q: localizedName.name,
+          limit: "10",
+          locale: selectedLocale,
+          visible: "true",
+          includes: "true",
+          noImage: "false",
+          format: "plain",
+          all: "true"
+        });
+        dispatch(actions_exports.searchMember(searchParams)).then((resp) => {
+          if (resp && resp.results) {
+            const members = resp.results.filter((r) => r.content_id !== memberId);
+            setMembersSearch(members);
+          }
+          setLoadingSearch(false);
+        }).catch((e) => {
+          console.error(e);
+          setLoadingSearch(false);
+        });
+      }
+    }
+  };
   useEffect(() => {
     if (memberId) {
       fetchMemberData();
@@ -15229,6 +15748,11 @@ function MemberForm({ memberId, onEditEnd }) {
       setMember(null);
     }
   }, [memberId]);
+  useEffect(() => {
+    if (member) {
+      fetchSearchMembers();
+    }
+  }, [member, selectedLocale]);
   const onImageSelectorClose = async (edited) => {
     if (edited) {
       fetchMemberData();
@@ -15267,12 +15791,30 @@ function MemberForm({ memberId, onEditEnd }) {
       } : null,
       image_id: member.image_id
     };
-    await axios.post("/api/cms/update/member", payload).then((resp) => {
+    const updateMembersPromises = [
+      axios.post("/api/cms/update/member", payload)
+    ];
+    const selectedRecordKeys = Object.keys(selectedRecords);
+    if (selectedRecordKeys.length > 0) {
+      selectedRecordKeys.forEach((sr) => {
+        updateMembersPromises.push(
+          axios.post("/api/cms/update/member", { content_id: membersSearch[sr].content_id, image_id: member.image_id })
+        );
+      });
+    }
+    Promise.all(updateMembersPromises).then(() => {
       onEditEnd();
-      return resp.data.data;
+    }).catch((e) => {
+      console.error(e);
+      setError(true);
     });
   };
   const isValidLocalizedForm = Object.keys(localizedForms[selectedLocale].values).length > 0;
+  const membersTableProps = {
+    state: { rowSelection: selectedRecords },
+    onRowSelectionChange: setSelectedRecords,
+    enableRowSelection: (row) => member.image_id && row.original.image_id !== member.image_id
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Drawer,
@@ -15291,169 +15833,218 @@ function MemberForm({ memberId, onEditEnd }) {
           DrawerContentWithScroll,
           {
             content: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
+              /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 0.5 }),
               error && /* @__PURE__ */ jsx(Alert, { title: "Member Form", color: "red", children: "Error, please try again." }),
-              member && !error && /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
-                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
-                  /* @__PURE__ */ jsxs(Stack, { children: [
-                    /* @__PURE__ */ jsx(ImagePreview_default, { member, forceRefreshTimestamp: true }),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        disabled: loading,
-                        leftIcon: /* @__PURE__ */ jsx(IconPolaroid, {}),
-                        onClick: () => setShowImageSelector(true),
-                        children: "Change image"
-                      }
-                    ),
-                    member && member.image && /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        disabled: loading,
-                        leftIcon: /* @__PURE__ */ jsx(IconCircleMinus, {}),
-                        onClick: () => clearImage(),
-                        children: "Remove image"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(Space, { h: "md" })
+              member && !error && /* @__PURE__ */ jsxs(Tabs, { defaultValue: "member", value: activeTab, onTabChange: setActiveTab, children: [
+                /* @__PURE__ */ jsxs(Tabs.List, { grow: true, children: [
+                  /* @__PURE__ */ jsx(Tabs.Tab, { value: "member", icon: /* @__PURE__ */ jsx(IconListCheck, {}), children: "Member" }),
+                  /* @__PURE__ */ jsx(Tabs.Tab, { value: "image", icon: /* @__PURE__ */ jsx(IconPhoto, {}), children: "Image" })
+                ] }),
+                /* @__PURE__ */ jsx(Tabs.Panel, { value: "member", py: "md", children: /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
+                  /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
+                    /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Original ID", ...mainForm.getInputProps("id") }),
+                    /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Content ID", ...mainForm.getInputProps("content_id") })
                   ] }),
-                  /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
+                  /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
                     /* @__PURE__ */ jsx(
                       TextInput,
                       {
-                        disabled: !member || !member.image,
-                        label: "Source",
-                        ...imageForm.getInputProps("url")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        disabled: !member || !member.image,
-                        label: "Author",
-                        ...imageForm.getInputProps("author")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        disabled: !member || !member.image,
-                        label: "License",
-                        ...imageForm.getInputProps("license")
+                        mt: "xs",
+                        icon: "/",
+                        disabled: true,
+                        label: "Variant Slug",
+                        ...mainForm.getInputProps("variant_slug")
                       }
                     ),
+                    /* @__PURE__ */ jsx(TextInput, { mt: "xs", icon: "/", disabled: true, label: "Member Slug", ...mainForm.getInputProps("slug") })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
+                    /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Report", ...mainForm.getInputProps("report_name") }),
+                    /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Dimension", ...mainForm.getInputProps("dimension_name") }),
+                    /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Variant", ...mainForm.getInputProps("variant_name") })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Group, { grow: true, children: [
+                    /* @__PURE__ */ jsxs(Box, { onClick: () => setActiveTab("image"), style: { cursor: "pointer" }, pos: "relative", children: [
+                      /* @__PURE__ */ jsx(Overlay, { opacity: 0, center: true, sx: {
+                        backdropFilter: "none",
+                        "& button": {
+                          display: "none"
+                        },
+                        "&:hover": {
+                          backdropFilter: "blur(0.2375rem)",
+                          "button": {
+                            display: "flex"
+                          }
+                        }
+                      }, children: /* @__PURE__ */ jsx(Button, { size: "xs", radius: "sm", variant: "filled", leftIcon: /* @__PURE__ */ jsx(IconPhoto, { size: "0.9rem" }), children: "Edit" }) }),
+                      /* @__PURE__ */ jsx(ImagePreview_default, { member, forceRefreshTimestamp: true })
+                    ] }),
                     /* @__PURE__ */ jsx(
-                      SegmentedControl,
+                      Input.Wrapper,
                       {
-                        disabled: !member || !member.image,
-                        value: selectedLocale,
-                        onChange: setSelectedLocale,
-                        data: localesItems
+                        label: "Search relevance",
+                        description: "\n                            Relevance index to be used with search. Values from 0 (less relevant) to 1 (more relevant)\n                          ",
+                        children: /* @__PURE__ */ jsx(
+                          NumberInput,
+                          {
+                            disabled: !mainForm.values.visible,
+                            type: "number",
+                            precision: 4,
+                            step: 1e-4,
+                            removeTrailingZeros: true,
+                            min: 0,
+                            max: 1,
+                            decimalSeparator: ".",
+                            ...mainForm.getInputProps("zvalue")
+                          }
+                        )
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      TextInput,
+                      Checkbox,
                       {
-                        disabled: !member || !member.image,
-                        label: "Alternative image text",
-                        ...localizedImageForms[selectedLocale].getInputProps("meta")
+                        mt: "2.3rem",
+                        label: "Visible in search",
+                        ...mainForm.getInputProps("visible", { type: "checkbox" })
                       }
                     )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs(Code, { block: true, children: [
-                  "TO-DO apply same image also to some of these members? List of checkboxes",
-                  /* @__PURE__ */ jsx("br", {}),
-                  "(x) another member, similar name",
-                  /* @__PURE__ */ jsx("br", {}),
-                  "(x) another member, similar name",
-                  /* @__PURE__ */ jsx("br", {})
-                ] }),
-                /* @__PURE__ */ jsx(Divider, { my: "sm" }),
-                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Original ID", ...mainForm.getInputProps("id") }),
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Content ID", ...mainForm.getInputProps("content_id") })
-                ] }),
-                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
-                  /* @__PURE__ */ jsx(
-                    TextInput,
+                  ] }),
+                  /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", grow: true, children: /* @__PURE__ */ jsx(
+                    SegmentedControl,
                     {
-                      mt: "xs",
-                      icon: "/",
-                      disabled: true,
-                      label: "Variant Slug",
-                      ...mainForm.getInputProps("variant_slug")
+                      value: selectedLocale,
+                      onChange: setSelectedLocale,
+                      data: localesItems
                     }
-                  ),
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", icon: "/", disabled: true, label: "Member Slug", ...mainForm.getInputProps("slug") })
-                ] }),
-                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Report", ...mainForm.getInputProps("report_name") }),
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Dimension", ...mainForm.getInputProps("dimension_name") }),
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Variant", ...mainForm.getInputProps("variant_name") })
-                ] }),
-                /* @__PURE__ */ jsx(Group, { position: "apart", grow: true, children: /* @__PURE__ */ jsx(
-                  Checkbox,
-                  {
-                    mt: "xs",
-                    label: "Visible",
-                    ...mainForm.getInputProps("visible", { type: "checkbox" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", grow: true, children: /* @__PURE__ */ jsx(
-                  SegmentedControl,
-                  {
-                    value: selectedLocale,
-                    onChange: setSelectedLocale,
-                    data: localesItems
-                  }
-                ) }),
-                !isValidLocalizedForm && /* @__PURE__ */ jsx(Alert, { title: "Unavailable locale", color: "blue", children: "This language was not ingested for the current member. Go to variant editor and provide the members there." }),
-                isValidLocalizedForm && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", grow: true, children: /* @__PURE__ */ jsx(TextInput, { label: "Name", ...localizedForms[selectedLocale].getInputProps("name") }) }),
-                  /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", align: "top", grow: true, children: /* @__PURE__ */ jsx(
-                    MultiSelect,
-                    {
-                      label: "Keywords",
-                      data: localizedForms[selectedLocale].values.keywords,
-                      placeholder: "Enter keywords",
-                      searchable: true,
-                      creatable: true,
-                      valueComponent: ({
-                        value,
-                        label,
-                        image,
-                        name
-                      }) => /* @__PURE__ */ jsxs(
-                        Badge,
+                  ) }),
+                  !isValidLocalizedForm && /* @__PURE__ */ jsx(Alert, { title: "Unavailable locale", color: "blue", children: "This language was not ingested for the current member. Go to variant editor and provide the members there." }),
+                  isValidLocalizedForm && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", grow: true, children: /* @__PURE__ */ jsx(TextInput, { label: "Name", ...localizedForms[selectedLocale].getInputProps("name") }) }),
+                    /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", align: "top", grow: true, children: /* @__PURE__ */ jsx(
+                      MultiSelect,
+                      {
+                        label: "Keywords",
+                        data: localizedForms[selectedLocale].values.keywords,
+                        placeholder: "Enter keywords",
+                        searchable: true,
+                        creatable: true,
+                        valueComponent: ({
+                          value,
+                          label,
+                          image,
+                          name
+                        }) => /* @__PURE__ */ jsxs(
+                          Badge,
+                          {
+                            onClick: () => {
+                              const current = localizedForms[selectedLocale].values.keywords;
+                              localizedForms[selectedLocale].setFieldValue(
+                                "keywords",
+                                current.filter((k) => k !== label)
+                              );
+                            },
+                            children: [
+                              label,
+                              " ",
+                              "x"
+                            ]
+                          }
+                        ),
+                        getCreateLabel: (query) => `+ Create ${query}`,
+                        value: localizedForms[selectedLocale].values.keywords,
+                        onCreate: (query) => {
+                          const current = localizedForms[selectedLocale].values.keywords;
+                          localizedForms[selectedLocale].setFieldValue("keywords", [...current, query]);
+                          return query;
+                        }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Input.Wrapper, { label: "Attributes", children: /* @__PURE__ */ jsx(SortableTable, { data: localizedForms[selectedLocale].values.attributes }) })
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(Tabs.Panel, { value: "image", py: "md", children: /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
+                  /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
+                    /* @__PURE__ */ jsxs(Stack, { children: [
+                      /* @__PURE__ */ jsx(ImagePreview_default, { member, forceRefreshTimestamp: true }),
+                      /* @__PURE__ */ jsx(
+                        Button,
                         {
-                          onClick: () => {
-                            const current = localizedForms[selectedLocale].values.keywords;
-                            localizedForms[selectedLocale].setFieldValue(
-                              "keywords",
-                              current.filter((k) => k !== label)
-                            );
-                          },
-                          children: [
-                            label,
-                            " ",
-                            "x"
-                          ]
+                          variant: "outline",
+                          disabled: loading,
+                          leftIcon: /* @__PURE__ */ jsx(IconPolaroid, {}),
+                          onClick: () => setShowImageSelector(true),
+                          children: "Change image"
+                        }
+                      ),
+                      member && member.image && /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "outline",
+                          disabled: loading,
+                          leftIcon: /* @__PURE__ */ jsx(IconCircleMinus, {}),
+                          onClick: () => clearImage(),
+                          children: "Remove image"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Space, { h: "md" })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
+                      /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          disabled: !member || !member.image,
+                          label: "Source",
+                          ...imageForm.getInputProps("url")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          disabled: !member || !member.image,
+                          label: "Author",
+                          ...imageForm.getInputProps("author")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          disabled: !member || !member.image,
+                          label: "License",
+                          ...imageForm.getInputProps("license")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        SegmentedControl,
+                        {
+                          disabled: !member || !member.image,
+                          value: selectedLocale,
+                          onChange: setSelectedLocale,
+                          data: localesItems
                         }
                       ),
-                      getCreateLabel: (query) => `+ Create ${query}`,
-                      value: localizedForms[selectedLocale].values.keywords,
-                      onCreate: (query) => {
-                        const current = localizedForms[selectedLocale].values.keywords;
-                        localizedForms[selectedLocale].setFieldValue("keywords", [...current, query]);
-                        return query;
+                      /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          disabled: !member || !member.image,
+                          label: "Alternative image text",
+                          ...localizedImageForms[selectedLocale].getInputProps("meta")
+                        }
+                      )
+                    ] })
+                  ] }),
+                  loadingSearch && /* @__PURE__ */ jsx(Loader, {}),
+                  !loadingSearch && membersSearch.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Text, { children: "Select the members you want to update with the same image." }),
+                    /* @__PURE__ */ jsx(
+                      MembersTable,
+                      {
+                        members: membersSearch,
+                        colsToRender: ["id", "report", "name", "slug", "image"],
+                        dataTableProps: membersTableProps
                       }
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Input.Wrapper, { label: "Attributes", children: /* @__PURE__ */ jsx(SortableTable, { data: localizedForms[selectedLocale].values.attributes }) })
-                ] })
+                    )
+                  ] })
+                ] }) })
               ] })
             ] }),
             buttons: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -15484,133 +16075,6 @@ function MemberForm({ memberId, onEditEnd }) {
     showImageSelector && /* @__PURE__ */ jsx(ImageSelector_default, { member, onEditEnd: onImageSelectorClose })
   ] });
 }
-
-// components/metadata/MembersTable.tsx
-init_esm_shims();
-init_store2();
-function MembersTable({ members, onClickEdit, onSort }) {
-  const [sortStatus, setSortStatus] = useState();
-  const [records, setRecords] = useState([]);
-  useEffect(() => {
-    if (sortStatus) {
-      onSort(sortStatus);
-    }
-  }, [sortStatus]);
-  useEffect(() => {
-    setRecords(members);
-  }, [members]);
-  useEffect(() => {
-    setRecords(members);
-  }, []);
-  const localeDefault10 = useAppSelector((state) => state.status.localeDefault);
-  const cols = [
-    {
-      title: "",
-      accessor: "visible",
-      width: "10px",
-      render: ({ visible }) => /* @__PURE__ */ jsx(Fragment, { children: !visible ? /* @__PURE__ */ jsx(Tooltip, { label: "Visible: false", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconEyeOff, { size: 20 }) }) }) : /* @__PURE__ */ jsx("span", {}) })
-    },
-    {
-      title: "ID",
-      accessor: "id",
-      sortable: true,
-      textAlignment: "right"
-    },
-    {
-      title: "Report",
-      accessor: "report.name"
-    },
-    {
-      title: "Dimension",
-      accessor: "dimension.name"
-    },
-    {
-      title: "Variant",
-      accessor: "variant.name"
-    },
-    {
-      title: "Relevance",
-      sortable: true,
-      accessor: "zvalue"
-    },
-    {
-      title: "Slug",
-      accessor: "slug",
-      render: ({ slug, variant }) => /* @__PURE__ */ jsxs("span", { children: [
-        "/",
-        variant.slug,
-        "/",
-        slug
-      ] })
-    },
-    {
-      title: `Name ${localeDefault10.toUpperCase()}`,
-      sortable: true,
-      accessor: "name",
-      render: ({ contentByLocale }) => {
-        const defaultLocalized = contentByLocale.find((item) => item.locale === localeDefault10);
-        const othersLocalized = contentByLocale.filter((item) => item.locale !== localeDefault10);
-        const nameTooltipContent = othersLocalized.reduce((acc, item) => {
-          const extraName = `${item.locale.toUpperCase()}: ${item.name}`;
-          const newLine2 = acc !== "" ? "\n" : "";
-          return `${acc}${newLine2}${extraName}`;
-        }, "");
-        return /* @__PURE__ */ jsxs(Group, { children: [
-          /* @__PURE__ */ jsx("span", { children: defaultLocalized.name }),
-          othersLocalized.length > 0 && /* @__PURE__ */ jsx(Tooltip, { label: nameTooltipContent, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", color: "pink", radius: "xl", children: [
-            "+",
-            othersLocalized.length
-          ] }) })
-        ] });
-      }
-    },
-    {
-      title: `Keywords ${localeDefault10.toUpperCase()}`,
-      accessor: "keywords",
-      render: ({ contentByLocale }) => {
-        const defaultLocalized = contentByLocale.find((item) => item.locale === localeDefault10);
-        const othersLocalized = contentByLocale.filter((item) => item.locale !== localeDefault10);
-        const keywords = (defaultLocalized.keywords ? defaultLocalized.keywords : []).map((k) => /* @__PURE__ */ jsx(Badge, { children: k }, k));
-        const keywordsTooltipContent = othersLocalized.reduce((acc, item) => {
-          const otherKeywords = item.keywords || [];
-          const extraKeywords = `${item.locale.toUpperCase()}: ${otherKeywords.length > 0 ? otherKeywords.join(",") : "None"}`;
-          const newLine2 = acc !== "" ? "\n" : "";
-          return `${acc}${newLine2}${extraKeywords}`;
-        }, "");
-        return /* @__PURE__ */ jsxs(Group, { children: [
-          /* @__PURE__ */ jsx("span", { children: keywords.length > 0 ? keywords : /* @__PURE__ */ jsx(Badge, { color: "gray", children: "None" }) }),
-          othersLocalized.length > 0 && /* @__PURE__ */ jsx(Tooltip, { label: keywordsTooltipContent, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", color: "pink", radius: "xl", children: [
-            "+",
-            othersLocalized.length
-          ] }) })
-        ] });
-      }
-    },
-    {
-      title: "Image",
-      accessor: "image",
-      render: (member) => /* @__PURE__ */ jsx(ImagePreview_default, { member, height: "50px" })
-    },
-    {
-      title: "",
-      accessor: "actions",
-      render: (member) => /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(member), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit")
-    }
-  ];
-  return /* @__PURE__ */ jsx(
-    DataTable,
-    {
-      striped: true,
-      minHeight: 150,
-      records,
-      columns: cols,
-      sortStatus,
-      onSortStatusChange: (s) => setSortStatus(s),
-      idAccessor: "content_id",
-      withBorder: true
-    }
-  );
-}
 function MetadataEditor() {
   const [editingId, setEditingId] = useState(null);
   const [results, setResults] = useState([]);
@@ -15621,7 +16085,9 @@ function MetadataEditor() {
     setInternalFilters(filters);
   };
   const onChangeSort = (sort) => {
-    setInternalSort(sort);
+    if (sort && sort.length) {
+      setInternalSort(sort[0]);
+    }
   };
   const setEditMember = (member) => {
     setEditingId(member.content_id);
@@ -15644,8 +16110,8 @@ function MetadataEditor() {
           ...getParams,
           locale: "all",
           includes: true,
-          sort: internalSort ? internalSort.columnAccessor : "zvalue",
-          direction: internalSort ? internalSort.direction : "desc"
+          sort: internalSort ? internalSort.id : "zvalue",
+          direction: internalSort ? internalSort.desc ? "desc" : "asc" : "desc"
         }
       }
     ).then((response) => response.data && response.data.data && response.data.data.results ? response.data.data.results : []);
@@ -15662,7 +16128,7 @@ function MetadataEditor() {
         /* @__PURE__ */ jsx(FilterSidebar2, { onChange: onChangeFilters, loading })
       ] }),
       /* @__PURE__ */ jsxs(Grid.Col, { span: 10, style: { height: "100vh", position: "relative" }, children: [
-        /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
+        /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 0.5 }),
         /* @__PURE__ */ jsx(Space, { h: "xs" }),
         /* @__PURE__ */ jsx(MembersTable, { members: results, onClickEdit: setEditMember, onSort: onChangeSort })
       ] })
@@ -15783,7 +16249,7 @@ function ReportPicker() {
   }, [ref.data, ref.error, ref.status, reportAccess]);
   return /* @__PURE__ */ jsxs(Container, { size: "xl", children: [
     /* @__PURE__ */ jsx("h1", { children: "Reports" }),
-    /* @__PURE__ */ jsx(LoadingOverlay, { visible: createLoading, overlayBlur: 2, overlayOpacity: 50 }),
+    /* @__PURE__ */ jsx(LoadingOverlay, { visible: createLoading, overlayBlur: 2, overlayOpacity: 0.5 }),
     content,
     /* @__PURE__ */ jsx(Space, { h: "xl", w: "xl" }),
     /* @__PURE__ */ jsx(
@@ -16174,7 +16640,7 @@ function UserForm({ userId, onEditEnd, roles }) {
         DrawerContentWithScroll,
         {
           content: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
+            /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 0.5 }),
             error && /* @__PURE__ */ jsx(Alert, { title: "Member Form", color: "red", children: "Error, please try again." }),
             user && !error && /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
               /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
@@ -16269,50 +16735,44 @@ function UserForm({ userId, onEditEnd, roles }) {
 
 // components/users/UsersTable.tsx
 init_esm_shims();
-init_store2();
-function UsersTable({ response, onClickEdit, onSort, onPageChange }) {
-  const [sortStatus, setSortStatus] = useState();
+function UsersTable({ response, onClickEdit, onPageChange }) {
   const [records, setRecords] = useState([]);
   const [paginationStatus, setPaginationStatus] = useState({
-    start: 0,
-    limit: 1,
-    total: 0,
-    page: 0
+    pageIndex: 0,
+    pageSize: 10
   });
+  const [totalResults, setTotalResults] = useState(0);
   useEffect(() => {
-    if (sortStatus) {
-      onSort(sortStatus);
-    }
-  }, [sortStatus]);
+    onPageChange(paginationStatus.pageIndex + 1);
+  }, [paginationStatus.pageIndex]);
   useEffect(() => {
     if (response) {
       setRecords(response.users);
-      setPaginationStatus({
-        start: response.start,
-        limit: response.limit,
-        total: response.total,
-        page: response.start / response.limit + 1
-      });
+      setTotalResults(response.total);
     }
   }, [response]);
   useEffect(() => {
     setRecords(response);
   }, []);
-  useAppSelector((state) => state.status.localeDefault);
   const cols = [
     {
-      title: "",
-      accessor: "image",
-      width: 50,
-      render: (member) => /* @__PURE__ */ jsx(Avatar, { src: member.picture, alt: "it's me", radius: 20 })
+      header: "",
+      accessorKey: "image",
+      Cell: ({ row }) => {
+        return /* @__PURE__ */ jsx(Avatar, { src: row.original.picture, alt: `${row.original.name}`, radius: 20 });
+      },
+      size: 50,
+      mantineTableBodyCellProps: {
+        align: "center"
+      }
     },
     {
-      title: "Name",
-      accessor: "name"
+      header: "Name",
+      accessorKey: "name"
     },
     {
-      title: "Email",
-      accessor: "email"
+      header: "Email",
+      accessorKey: "email"
     },
     /*{
       title: `Keywords ${localeDefault.toUpperCase()}`,
@@ -16347,26 +16807,52 @@ function UsersTable({ response, onClickEdit, onSort, onPageChange }) {
       },
     },*/
     {
-      title: "",
-      accessor: "actions",
-      render: (member) => /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(member), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit")
+      header: "Actions",
+      accessorKey: "actions",
+      Cell: ({ row }) => /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(row.original), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit"),
+      size: 100,
+      mantineTableHeadCellProps: {
+        align: "center"
+      },
+      mantineTableBodyCellProps: {
+        align: "center"
+      }
     }
   ];
   return /* @__PURE__ */ jsx(
-    DataTable,
+    MantineReactTable,
     {
-      striped: true,
-      minHeight: 150,
-      records,
       columns: cols,
-      sortStatus,
-      onSortStatusChange: (s) => setSortStatus(s),
-      idAccessor: "email",
-      withBorder: true,
-      totalRecords: paginationStatus.total,
-      recordsPerPage: paginationStatus.limit,
-      page: paginationStatus.page,
-      onPageChange
+      data: records,
+      enableColumnActions: false,
+      enablePagination: true,
+      enableSorting: false,
+      enableTopToolbar: false,
+      initialState: {
+        density: "xs"
+      },
+      layoutMode: "grid",
+      mantinePaginationProps: {
+        showRowsPerPage: false
+      },
+      mantineTableContainerProps: {
+        sx: {
+          minHeight: 150
+        }
+      },
+      mantineTableProps: {
+        striped: true
+      },
+      manualPagination: true,
+      onPaginationChange: setPaginationStatus,
+      paginationDisplayMode: "pages",
+      rowCount: totalResults,
+      state: {
+        pagination: {
+          pageIndex: paginationStatus.pageIndex,
+          pageSize: paginationStatus.pageSize
+        }
+      }
     }
   );
 }
@@ -16376,14 +16862,10 @@ function UsersEditor() {
   const [roles, setRoles] = useState([]);
   const [loading, setLoading] = useState(true);
   const [internalFilters, setInternalFilters] = useState({ query: "" });
-  const [internalSort, setInternalSort] = useState();
   const dispatch = useAppDispatch();
   const onChangeFilters = (filters) => {
     setInternalFilters(filters);
   };
-  const onChangeSort = (sort) => {
-    setInternalSort(sort);
-  };
   const onPageChange = (page) => {
     setInternalFilters({
       ...internalFilters,
@@ -16420,7 +16902,7 @@ function UsersEditor() {
   }, [dispatch]);
   useEffect(() => {
     doSearch();
-  }, [internalFilters, internalSort]);
+  }, [internalFilters]);
   return /* @__PURE__ */ jsxs(Container, { fluid: true, children: [
     /* @__PURE__ */ jsxs(Grid, { children: [
       /* @__PURE__ */ jsxs(Grid.Col, { span: 2, children: [
@@ -16428,14 +16910,13 @@ function UsersEditor() {
         /* @__PURE__ */ jsx(FilterSidebar3, { onChange: onChangeFilters, loading, roles })
       ] }),
       /* @__PURE__ */ jsxs(Grid.Col, { span: 10, style: { height: "100vh", position: "relative" }, children: [
-        /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
+        /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 0.5 }),
         /* @__PURE__ */ jsx(Space, { h: "xs" }),
         /* @__PURE__ */ jsx(
           UsersTable,
           {
             response: results,
             onClickEdit: setEditUser,
-            onSort: onChangeSort,
             onPageChange
           }
         )