@datawheel/bespoke 0.5.0 → 0.5.2

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Group, Stack, Text, useMantineTheme, List, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, 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, createStyles, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, NumberInput, Autocomplete, Notification, Image, Header, px, Accordion, FileInput, SimpleGrid, Burger, Collapse, HoverCard, CopyButton, Breadcrumbs, Col } from '@mantine/core';
-import React, { forwardRef, useState, useCallback, useRef, useEffect, createContext, useContext, useMemo, Fragment as Fragment$1, memo, useImperativeHandle } from 'react';
+import { Group, Stack, Text, useMantineTheme, List, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, 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, createStyles, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, NumberInput, Autocomplete, Notification, Image, Accordion, Header, px, FileInput, SimpleGrid, Burger, Collapse, CopyButton, HoverCard, Breadcrumbs, Col } from '@mantine/core';
+import React, { forwardRef, useState, useCallback, useRef, useEffect, createContext, useContext, useMemo, Fragment as Fragment$1, createElement, memo, useImperativeHandle } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
 import * as d3Array from 'd3-array';
@@ -21,11 +21,12 @@ 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, useUncontrolled, useHotkeys, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconTable, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconCheck, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useUncontrolled, useHotkeys, useListState, randomId, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCheck, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import Link from 'next/link';
 import parse2, { Element as Element$1, domToReact, Text as Text$1 } from 'html-react-parser';
 import { UserProvider, withPageAuthRequired, useUser } from '@auth0/nextjs-auth0/client';
+import { MantineReactTable } from 'mantine-react-table';
 import { dataConcat, dataLoad } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import dynamic from 'next/dynamic';
@@ -44,8 +45,8 @@ import HardBreak from '@tiptap/extension-hard-break';
 import TextAlign from '@tiptap/extension-text-align';
 import Placeholder from '@tiptap/extension-placeholder';
 import Typography from '@tiptap/extension-typography';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { Prism } from '@mantine/prism';
-import { MantineReactTable } from 'mantine-react-table';
 import slugifyFn from 'slugify';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
@@ -53,7 +54,6 @@ import { select } from 'd3-selection';
 import { saveElement } from 'd3plus-export';
 import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
 import Head from 'next/head';
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { format } from 'pretty-format';
 import * as d3 from 'd3';
@@ -602,7 +602,8 @@ var init_cms = __esm({
       NAV: "nav",
       // todo1.0, how to put custom blocks in here?
       RESET_BUTTON: "reset_button",
-      COMPARISON_BUTTON: "comparison_button"
+      COMPARISON_BUTTON: "comparison_button",
+      TABLE: "table"
     };
     BLOCK_LOGIC_TYPES = {
       GENERATOR: "generator",
@@ -615,7 +616,8 @@ var init_cms = __esm({
       BLOCK_TYPES.GENERATOR,
       BLOCK_TYPES.SELECTOR,
       BLOCK_TYPES.VIZ,
-      BLOCK_TYPES.IMAGE
+      BLOCK_TYPES.IMAGE,
+      BLOCK_TYPES.TABLE
     ];
     BLOCK_FIELDS = {
       ALT: "alt",
@@ -635,6 +637,7 @@ var init_cms = __esm({
       SRC: "src",
       SLUG: "slug",
       SUBTITLE: "subtitle",
+      TABLE: "table",
       TITLE: "title",
       TOOLTIP: "tooltip",
       TWITTER: "twitter",
@@ -772,7 +775,8 @@ var init_cms = __esm({
         }
       ],
       [BLOCK_TYPES.GENERATOR]: [],
-      [BLOCK_TYPES.VIZ]: []
+      [BLOCK_TYPES.VIZ]: [],
+      [BLOCK_TYPES.TABLE]: []
     };
     BLOCK_SETTINGS = {
       NAME: "name",
@@ -1365,7 +1369,7 @@ function ApiFetchException(message) {
   this.message = message;
   this.name = "ApiFetchException";
 }
-async function apiFetch(url, settings, readMemberFn, locale = "en") {
+async function apiFetch(url, readMemberFn, locale = "en", block) {
   const start2 = Date.now();
   let finalUrl = url;
   let finalData;
@@ -1375,6 +1379,7 @@ async function apiFetch(url, settings, readMemberFn, locale = "en") {
     const slugRegex = new RegExp(`[?&]bespoke_slugs=${parsedQuery.get("bespoke_slugs")}`, "g");
     finalUrl = finalUrl.replace(slugRegex, "");
   }
+  const settings = block ? block.settings : {};
   const useProxy = settings && settings.useProxy && settings.useProxy === "true" ? true : false;
   if (typeof window === "object" && useProxy) {
     const result = await urlProxy({ url: finalUrl, timeout: apiFetchTimeout });
@@ -1433,7 +1438,12 @@ async function apiFetch(url, settings, readMemberFn, locale = "en") {
             }
             return data && Array.isArray(data) ? data : [];
           }).catch((err) => {
-            console.log("Error hydrating slugs", err);
+            console.error(`Error hydrating slugs for Variant: ${variantId}, Key: ${keyId}, Accessor: ${accessor}`);
+            console.error(`  Url ${url}`);
+            if (block) {
+              console.error(`  From Section ${block.section_id} and Block ${block.id}`);
+            }
+            console.error(err);
             return [];
           });
           if (bespokeMembers) {
@@ -1486,9 +1496,9 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
       apiPromisesList.push(
         apiFetch(
           apiUrl,
-          block.settings,
           readMemberFn,
-          locale
+          locale,
+          block
         ).catch(
           (e) => {
             throw new BlockException(` Excecution of ${block.type}-${block.id} in section ${block.section_id} in report ${variables.report_name} (${variables.report_id}) failed.
@@ -1888,6 +1898,7 @@ function previewsToAttributes(previews = []) {
       const i2 = index + 1;
       attributes[`id${i2}`] = preview.id;
       attributes[`name${i2}`] = preview.name;
+      attributes[`slug${i2}`] = preview.slug;
       if ("attributes" in preview) {
         Object.keys(preview.attributes).forEach((key) => {
           attributes[`attr_${key}${i2}`] = preview.attributes[key];
@@ -1895,6 +1906,7 @@ function previewsToAttributes(previews = []) {
       }
       attributes[`variant_id${i2}`] = preview.variant_id;
       attributes[`variant_name${i2}`] = preview.variant_name;
+      attributes[`variant_slug${i2}`] = preview.variant_slug;
       attributes[`dimension_id${i2}`] = preview.dimension_id;
       attributes[`dimension_name${i2}`] = preview.dimension_name;
       attributes["report_id"] = preview.report_id;
@@ -4620,10 +4632,11 @@ function RichText({
   size = "md",
   html,
   style = {},
-  append = /* @__PURE__ */ jsx(Fragment, {})
+  append = /* @__PURE__ */ jsx(Fragment, {}),
+  isPreview = false
 }) {
   const parentProps = getParentNodeProps(html);
-  const paragraphHTML = replaceTags(html);
+  const paragraphHTML = replaceTags(html, isPreview);
   const textAlign = style && style.align ? String(style.align) : "left";
   let Wrapper = Text;
   let extraProps = {};
@@ -4666,7 +4679,7 @@ var init_RichText = __esm({
       parse2(htmlString, options);
       return parentProps;
     };
-    replaceTags = (stringHTML = "-Empty text-") => {
+    replaceTags = (stringHTML = "", isPreview = false) => {
       const options = {
         replace: (domNode) => {
           const { type } = domNode;
@@ -4676,16 +4689,26 @@ var init_RichText = __esm({
               return /* @__PURE__ */ jsx(Fragment, { children: domToReact(children, options) });
             }
             if (name === "a") {
-              const { href } = attribs;
+              const { href, target } = attribs;
               const isExternal = href.indexOf("http") === 0 ? true : false;
-              return /* @__PURE__ */ jsx(
+              const isBlank = target && target === "_blank" ? true : false;
+              const anchorElement = /* @__PURE__ */ jsx(
+                Anchor,
+                {
+                  ...attribs,
+                  href: attribs.href,
+                  target: "_blank",
+                  children: domToReact(children, options)
+                }
+              );
+              return isExternal || isBlank || isPreview ? anchorElement : /* @__PURE__ */ jsx(
                 Link,
                 {
                   ...attribs,
                   href: attribs.href,
-                  target: isExternal ? "_blank" : void 0,
                   prefetch: false,
-                  children: domToReact(children, options)
+                  passHref: true,
+                  children: anchorElement
                 }
               );
             } else if (name === "strong") {
@@ -4712,7 +4735,7 @@ var init_RichText = __esm({
 function InnerTooltip(props) {
   const { content, style = {} } = props;
   const print = usePrint();
-  const contentObj = /* @__PURE__ */ jsx(RichText, { component: "span", html: content });
+  const contentObj = /* @__PURE__ */ jsx(RichText, { component: "span", html: content, isPreview: true });
   const element = useMemo(() => {
     return print ? /* @__PURE__ */ jsx("div", { className: "bespoke-inner-tooltip-notification", children: /* @__PURE__ */ jsx(
       Notification,
@@ -5445,7 +5468,7 @@ function Selector(config) {
         setMultiValue(parseMultiValue(value2, defaultValue));
       }
     }
-  }, [window.location.search]);
+  }, [window.location.search, defaultValue]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(MediaQuery, { query: "print", styles: { display: "none" }, children: /* @__PURE__ */ jsx(Box, { children: {
       [SELECTOR_TYPES.SINGLE]: component === SELECTOR_COMPONENTS.SEGMENTED_CONTROL ? /* @__PURE__ */ jsxs("div", { children: [
@@ -6046,6 +6069,68 @@ var init_ComparisonButton = __esm({
     init_ComparisonProvider();
   }
 });
+function Table({ columns = [], data = [], tableProps = {}, sectionId = null }) {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [translations, setTranslations] = useState({});
+  const columnsKeys = useMemo(() => columns.map((column) => column.accessorKey), [columns]);
+  const filteredData = useMemo(() => data.filter(
+    (item) => typeof item === "object" && item !== null && !Array.isArray(item) && Object.keys(item).some((val) => columnsKeys.includes(val))
+  ), [columnsKeys, data]);
+  const richColumns = useMemo(() => columns.map((column) => ({
+    ...column,
+    Cell: ({ renderedCellValue }) => /* @__PURE__ */ jsx(RichText, { html: `${renderedCellValue}` }),
+    filterFn: "contains"
+  })), [columns]);
+  const { locale } = useRouter();
+  useEffect(() => {
+    const loadLocalizedComponent = async () => {
+      try {
+        const lang = locale || "en";
+        const componentName = `${lang.toUpperCase()}`;
+        const componentModule = await import(`mantine-react-table/locales/${lang}.js`);
+        setTranslations(componentModule[`MRT_Localization_${componentName}`]);
+      } catch (error) {
+        console.error("Error loading translations:", error);
+      }
+    };
+    loadLocalizedComponent();
+  }, [locale]);
+  return /* @__PURE__ */ jsx(
+    MantineReactTable,
+    {
+      ...tableProps,
+      autoResetPageIndex: false,
+      columns: richColumns,
+      data: filteredData,
+      enableColumnFilterModes: true,
+      enableFilterMatchHighlighting: false,
+      globalFilterFn: "contains",
+      layoutMode: "grid",
+      localization: translations,
+      onIsFullScreenChange: (val) => {
+        const element = document.getElementById(`section-${sectionId}`);
+        if (element) {
+          if (val) {
+            element.style.zIndex = "10";
+          } else {
+            element.style.zIndex = "1";
+          }
+        }
+        setIsFullScreen(val);
+      },
+      state: {
+        ...tableProps.state,
+        isFullScreen
+      }
+    }
+  );
+}
+var init_Table = __esm({
+  "frontend/components/report/blocks/Table.tsx"() {
+    init_esm_shims();
+    init_RichText();
+  }
+});
 var localeDefault8, frontEndMessage, errorStub, propify, d3plusPropify_default;
 var init_d3plusPropify = __esm({
   "libs/d3plusPropify.ts"() {
@@ -6264,6 +6349,7 @@ var init_blocks = __esm({
     init_Related();
     init_ResetButton();
     init_ComparisonButton();
+    init_Table();
     VizView = dynamic(
       () => Promise.resolve().then(() => (init_Viz(), Viz_exports)),
       { ssr: false }
@@ -6280,7 +6366,8 @@ var init_blocks = __esm({
       [BLOCK_TYPES.NAV]: NavView,
       [BLOCK_TYPES.RELATED]: RelatedView,
       [BLOCK_TYPES.RESET_BUTTON]: ResetButtonView,
-      [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonPreview
+      [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonPreview,
+      [BLOCK_TYPES.TABLE]: Table
     };
     blocks_default = TypeRenderers;
   }
@@ -6361,10 +6448,12 @@ var init_stringifyObject = __esm({
           str += "false";
         else if (val === void 0)
           str = null;
+        else if (["boolean", "number"].includes(typeof val))
+          str += val;
         else
           str += `"${val}"`;
         return str;
-      }).filter(Boolean).join(`,${newLine(depth + 1)}`)}${newLine(depth)}${isArray ? "]" : "}"}`;
+      }).filter((val) => val !== null).join(`,${newLine(depth + 1)}`)}${newLine(depth)}${isArray ? "]" : "}"}`;
     };
     stringifyObject_default = stringifyObject;
   }
@@ -12441,14 +12530,17 @@ function TranslationHeader({ locale, content }) {
         children: locale.toUpperCase()
       }
     ),
-    /* @__PURE__ */ jsx(CopyButton, { value: content, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { size: "xs", color: copied ? "teal" : "gray", variant: "subtle", onClick: () => {
-      copy();
-      const blobInput = new Blob([content], { type: "text/html" });
-      const clipboardItemInput = new ClipboardItem({ "text/html": blobInput });
-      navigator.clipboard.write([clipboardItemInput]);
-    }, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) })
+    /* @__PURE__ */ jsx(CopyBtn, { content })
   ] });
 }
+function CopyBtn({ content }) {
+  return /* @__PURE__ */ jsx(CopyButton, { value: content, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { size: "xs", color: copied ? "teal" : "gray", variant: "subtle", onClick: () => {
+    copy();
+    const blobInput = new Blob([content], { type: "text/html" });
+    const clipboardItemInput = new ClipboardItem({ "text/html": blobInput });
+    navigator.clipboard.write([clipboardItemInput]);
+  }, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) });
+}
 function ReferenceTranslation({ referenceLocale, referenceContent }) {
   return /* @__PURE__ */ jsx(Stack, { spacing: "xs", children: /* @__PURE__ */ jsx(
     BespokeTextEditor,
@@ -12493,6 +12585,7 @@ function FieldWithTranslation({
             children: titleCase(field)
           }
         ),
+        toolbarRightSection: /* @__PURE__ */ jsx(CopyBtn, { content: value }),
         toolbarOptions: {
           history: true,
           alignment: field !== "tooltip",
@@ -12837,6 +12930,7 @@ function SelectorUI(props) {
         type: selectorType,
         component: selectorComponent,
         hideLabel,
+        defaultValue,
         optionsType,
         options
       };
@@ -13431,6 +13525,520 @@ var init_StatUI = __esm({
     init_cms();
   }
 });
+function TableUI(props) {
+  const { executeButton, id, onChange, referenceContent = {}, referenceLocale, simpleState } = props;
+  const { columns: referenceColumns } = referenceContent;
+  const locale = useCurrentLocale();
+  const isActiveRefenceContent = useMemo(
+    () => locale !== referenceLocale && referenceContent && Object.keys(referenceContent).length > 0,
+    [locale, referenceContent, referenceLocale]
+  );
+  const variables = useInputVariablesFlat(id);
+  const [columnOrder, setColumnOrder] = useState([]);
+  const [customLabels, customLabelsHandler] = useListState([]);
+  const [defaultVariableList, setDefaultVariableList] = useState([]);
+  const [isInvalidStructure, setIsInvalidStructure] = useState(false);
+  const [optionVariableMap, setOptionVariableMap] = useState({});
+  const [paginationState, setPaginationState] = useState(defaultPaginationState);
+  const [paginationProps, setPaginationProps] = useState({ rowsPerPageOptions: defaultPageSizes });
+  const [selectedColumns, selectedColumnsHandler] = useListState([]);
+  const [selectedVariable, setSelectedVariable] = useState(null);
+  const [tableProps, setTableProps] = useSetState(defaultTableGlobalProps);
+  const [initialTableState, setInitialTableState] = useState(defaultInitialStateProps);
+  const [tableState, setTableState] = useState({});
+  const allChecked = useMemo(() => selectedColumns.every((column) => column.checked), [selectedColumns]);
+  const indeterminate = useMemo(() => {
+    return selectedColumns.some((column) => column.checked) && !allChecked;
+  }, [allChecked, selectedColumns]);
+  useEffect(() => {
+    if (!simpleState || !Object.keys(simpleState).length)
+      return;
+    const variableContent = variables[simpleState.variable] || [];
+    const columns = /* @__PURE__ */ new Set();
+    variableContent.filter((item) => typeof item === "object" && item !== null).forEach((item) => {
+      Object.keys(item).forEach((key) => columns.add(key));
+    });
+    const stateColumns = {};
+    const variableColumns = [];
+    if (simpleState.columns && Object.keys(simpleState.columns)) {
+      simpleState.columns.forEach((column) => {
+        stateColumns[column.accessorKey] = column.header;
+      });
+    }
+    const keyList = [];
+    const keyLabels = [];
+    Array.from(columns).forEach((key) => {
+      keyLabels.push({
+        key,
+        label: stateColumns[key] || key
+      });
+      keyList.push({
+        checked: stateColumns[key] ? true : false,
+        key: randomId(),
+        label: key
+      });
+      variableColumns.push(key);
+    });
+    customLabelsHandler.setState(keyLabels);
+    selectedColumnsHandler.setState(keyList);
+    const { initialState: initialState4 = {}, state = {}, mantinePaginationProps = {}, ...props2 } = simpleState.tableProps || {};
+    const currentColumnOrder = state.columnOrder.filter((col) => variableColumns.includes(col));
+    currentColumnOrder.push(variableColumns.filter((col) => !state.columnOrder.includes(col)));
+    setColumnOrder(currentColumnOrder.flat() || []);
+    setPaginationProps(mantinePaginationProps);
+    setPaginationState(initialState4.pagination);
+    setTableProps({ ...props2 });
+    setTableState(state);
+    setInitialTableState(initialState4);
+    setSelectedVariable(simpleState.variable || "");
+  }, []);
+  useEffect(() => {
+    if (!variables) {
+      setOptionVariableMap({});
+      return;
+    }
+    const validVariableMap = Object.entries(variables).filter(([_2, variableContent]) => isValidSelectorOptionsArray2(variableContent)).reduce((acc, [variableName, variableContent]) => {
+      acc[variableName] = variableContent;
+      return acc;
+    }, {});
+    setOptionVariableMap(validVariableMap);
+    const validDefaultIdList = Object.keys(validVariableMap);
+    setDefaultVariableList(validDefaultIdList);
+  }, [variables]);
+  const handleVariableSelect = (value) => {
+    setSelectedVariable(value);
+    if (!value || !isValidSelectorOptionsArray2(optionVariableMap[value])) {
+      setIsInvalidStructure(false);
+      selectedColumnsHandler.setState([]);
+      return;
+    }
+    const items = optionVariableMap[value];
+    if (items.every((item) => typeof item === "object" && item === null)) {
+      setIsInvalidStructure(false);
+      selectedColumnsHandler.setState([]);
+      return;
+    }
+    if (items.every((item) => typeof item === "object" && item !== null)) {
+      setIsInvalidStructure(false);
+    } else {
+      setIsInvalidStructure(true);
+    }
+    const uniqueKeys = /* @__PURE__ */ new Set();
+    items.filter((item) => typeof item === "object" && item !== null).forEach((item) => {
+      Object.keys(item).forEach((key) => uniqueKeys.add(key));
+    });
+    const keyList = [];
+    const keyLabels = [];
+    const columns = [];
+    Array.from(uniqueKeys).forEach((key) => {
+      keyList.push({
+        checked: true,
+        key: randomId(),
+        label: key
+      });
+      keyLabels.push({
+        key,
+        label: key
+      });
+      columns.push(key);
+    });
+    selectedColumnsHandler.setState(keyList);
+    customLabelsHandler.setState(keyLabels);
+    setColumnOrder(columns);
+  };
+  useEffect(() => {
+    const columnLabelsMap = {};
+    customLabels.forEach((column) => {
+      columnLabelsMap[column.key] = column.label;
+    });
+    const columns = selectedColumns.filter((column) => column.checked).map((column) => ({
+      accessorKey: column.label,
+      header: columnLabelsMap[column.label]
+    }));
+    const extendedInitialTableState = {
+      ...initialTableState,
+      pagination: paginationState
+    };
+    const extendedTableState = {
+      ...tableState,
+      columnOrder
+    };
+    const logicObj = {
+      columns,
+      data: selectedVariable ? `variables["${selectedVariable}"]` : [],
+      tableProps: {
+        ...tableProps,
+        initialState: extendedInitialTableState,
+        state: extendedTableState,
+        mantinePaginationProps: paginationProps
+      },
+      variable: selectedVariable || ""
+    };
+    const logic = `return ${stringifyObject_default(logicObj)};`;
+    const simpleState2 = {
+      columns,
+      data: selectedVariable ? `variables["${selectedVariable}"]` : [],
+      tableProps: {
+        ...tableProps,
+        initialState: extendedInitialTableState,
+        state: extendedTableState,
+        mantinePaginationProps: paginationProps
+      },
+      variable: selectedVariable || ""
+    };
+    onChange(simpleState2, logic);
+  }, [
+    columnOrder,
+    customLabels,
+    paginationProps,
+    paginationState,
+    selectedColumns,
+    selectedVariable,
+    tableProps,
+    tableState,
+    initialTableState
+  ]);
+  const onDragEnd = useCallback((result) => {
+    if (!result.destination || result.source.index === result.destination.index)
+      return;
+    const newOrder = [...columnOrder];
+    const [draggedItem] = newOrder.splice(result.source.index, 1);
+    newOrder.splice(result.destination.index, 0, draggedItem);
+    setColumnOrder(newOrder);
+    setTableState((current) => {
+      const newState = current;
+      newState["columnOrder"] = newOrder;
+      return newState;
+    });
+  }, [columnOrder]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { mb: "sm", children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          clearable: true,
+          data: defaultVariableList,
+          description: "Select an array of data available in the block inputs to use as data input for the table.",
+          label: "Data input",
+          onChange: (value) => handleVariableSelect(value),
+          searchable: true,
+          value: selectedVariable
+        }
+      ),
+      selectedVariable && optionVariableMap[selectedVariable] && selectedColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Input.Wrapper,
+          {
+            description: "Select the columns to display in the table.",
+            error: isInvalidStructure && "There is a mix of types in the input data. Only object types rows will be kept.",
+            label: "Selected columns",
+            children: /* @__PURE__ */ jsxs(Stack, { mt: "xs", children: [
+              /* @__PURE__ */ jsxs(Group, { grow: true, children: [
+                /* @__PURE__ */ jsx(Text, { fz: "xs", children: "Selected" }),
+                /* @__PURE__ */ jsx(Text, { fz: "xs", children: "Label" }),
+                isActiveRefenceContent && /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
+                  /* @__PURE__ */ jsx(Text, { fz: "xs", children: "Reference Label" }),
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: "light",
+                      size: "xs",
+                      rightSection: /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(IconLanguage, { size: rem(12) }) }),
+                      children: referenceLocale.toUpperCase()
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: allChecked,
+                  indeterminate,
+                  label: "All",
+                  onChange: () => selectedColumnsHandler.setState((current) => current.map((value) => ({ ...value, checked: !allChecked })))
+                }
+              ),
+              /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: 300, children: /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "columns", children: (droppableProvided) => /* @__PURE__ */ jsx("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps, children: columnOrder.map((option, index) => {
+                const columnIndex = selectedColumns.findIndex((col) => col.label === option);
+                const column = selectedColumns[columnIndex];
+                return /* @__PURE__ */ jsx(
+                  Draggable,
+                  {
+                    draggableId: `${column.label}`,
+                    index,
+                    isDragDisabled: !column.checked,
+                    children: (draggableProvided) => /* @__PURE__ */ jsx(
+                      ColumnRenderer,
+                      {
+                        customLabels,
+                        customLabelsHandler,
+                        index: columnIndex,
+                        isActiveRefenceContent,
+                        option: column,
+                        ref: draggableProvided.innerRef,
+                        referenceColumns,
+                        selectedColumnsHandler,
+                        ...draggableProvided.draggableProps,
+                        ...draggableProvided.dragHandleProps
+                      }
+                    )
+                  },
+                  column.label
+                );
+              }) }) }) }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Accordion, { variant: "separated", children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "custom-props", children: [
+          /* @__PURE__ */ jsx(Accordion.Control, { children: "Custom properties" }),
+          /* @__PURE__ */ jsx(Accordion.Panel, { children: /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsxs(
+            Input.Wrapper,
+            {
+              description: "Select the needed table options.",
+              label: "Table options",
+              children: [
+                /* @__PURE__ */ jsx(Group, { mt: "xs", children: Object.keys(tableProps).map((prop) => /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: tableProps[prop],
+                    label: /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        label: tableGlobalPropsDesc[prop]?.desc || prop,
+                        multiline: true,
+                        children: /* @__PURE__ */ jsx(Text, { children: tableGlobalPropsDesc[prop]?.label || prop })
+                      }
+                    ),
+                    onChange: () => setTableProps({ [prop]: !tableProps[prop] })
+                  },
+                  `table-prop-${prop}`
+                )) }),
+                tableProps?.enablePagination && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Divider, { mt: "xs" }),
+                  /* @__PURE__ */ jsxs(
+                    Input.Wrapper,
+                    {
+                      description: "Customize initial pagination properties.",
+                      label: "Pagination props",
+                      mt: "xs",
+                      children: [
+                        /* @__PURE__ */ jsxs(Group, { grow: true, children: [
+                          /* @__PURE__ */ jsx(
+                            NumberInput,
+                            {
+                              label: "Initial page",
+                              min: 0,
+                              onChange: (value) => {
+                                setPaginationState((current) => ({
+                                  ...current,
+                                  pageIndex: value
+                                }));
+                              },
+                              value: paginationState.pageIndex
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Select,
+                            {
+                              data: paginationProps.rowsPerPageOptions || [],
+                              getCreateLabel: (value) => `+ Create ${value}`,
+                              label: "Initial page size",
+                              onChange: (value) => {
+                                setPaginationState((current) => ({
+                                  ...current,
+                                  pageSize: parseInt(value, 10)
+                                }));
+                              },
+                              searchable: true,
+                              value: paginationState.pageSize.toString()
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs(Group, { align: "flex-end", grow: true, children: [
+                          /* @__PURE__ */ jsx(
+                            MultiSelect,
+                            {
+                              clearable: true,
+                              creatable: true,
+                              data: paginationProps.rowsPerPageOptions || [],
+                              getCreateLabel: (value) => `+ Create ${value}`,
+                              label: "Page size options",
+                              onChange: (value) => {
+                                setPaginationProps((current) => ({
+                                  ...current,
+                                  rowsPerPageOptions: value.sort((a2, b2) => parseInt(a2, 10) - parseInt(b2, 10))
+                                }));
+                                if (value && value.length > 0 && !value.includes(paginationState.pageSize.toString())) {
+                                  setPaginationState((current) => ({
+                                    ...current,
+                                    pageSize: parseInt(value[0], 10)
+                                  }));
+                                }
+                              },
+                              onCreate: (value) => {
+                                setPaginationProps((current) => ({
+                                  ...current,
+                                  rowsPerPageOptions: [...current.rowsPerPageOptions || [], value].sort((a2, b2) => parseInt(a2, 10) - parseInt(b2, 10))
+                                }));
+                                return value;
+                              },
+                              searchable: true,
+                              value: paginationProps.rowsPerPageOptions || []
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              color: "yellow",
+                              onClick: () => {
+                                setPaginationProps((current) => ({
+                                  ...current,
+                                  rowsPerPageOptions: defaultPageSizes
+                                }));
+                                setPaginationState(defaultPaginationState);
+                              },
+                              children: "Reset page sizes values"
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }) })
+        ] }) })
+      ] })
+    ] }),
+    executeButton
+  ] });
+}
+var defaultTableGlobalProps, tableGlobalPropsDesc, defaultInitialStateProps, defaultPageSizes, defaultPaginationState, isValidSelectorOptionsArray2, ColumnRenderer;
+var init_TableUI = __esm({
+  "components/blocks/types/simpleEditors/TableUI.tsx"() {
+    init_esm_shims();
+    init_stringifyObject();
+    init_hooks();
+    defaultTableGlobalProps = {
+      enableBottomToolbar: true,
+      enableColumnActions: true,
+      enableColumnFilters: true,
+      enableColumnResizing: true,
+      enableDensityToggle: true,
+      enableFullScreenToggle: false,
+      enableGlobalFilter: true,
+      enableHiding: true,
+      enablePagination: true,
+      enableSorting: true,
+      enableStickyHeader: true,
+      enableTopToolbar: true
+    };
+    tableGlobalPropsDesc = {
+      enableBottomToolbar: {
+        label: "Enable bottom toolbar",
+        desc: "Show or hide the bottom toolbar. By disabling it, pagination will also be hidden."
+      },
+      enableColumnActions: {
+        label: "Enable column actions",
+        desc: "Enables or disables column actions for all columns. Column actions include sort, filter, show/hide column and reset column size."
+      },
+      enableColumnFilters: {
+        label: "Enable column filters",
+        desc: "Enables or disables the filter options available on columns."
+      },
+      enableColumnResizing: {
+        label: "Enable column resizing",
+        desc: "Enables the column resizing feature for all columns."
+      },
+      enableDensityToggle: {
+        label: "Enable density toggle",
+        desc: "Enable the density toggle that allows users to modify the height of each row. Disabling it will hide the density toggle button in the top toolbar."
+      },
+      enableFullScreenToggle: {
+        label: "Enable full screen toggle",
+        desc: "Enable or disable the full screen toggle feature. Disabling it will hide the full screen toggle button in the top toolbar."
+      },
+      enableGlobalFilter: {
+        label: "Enable global filter",
+        desc: "Enable global filter feature to filter data on all columns and rows. Disabling it will hide the global filter button in the top toolbar."
+      },
+      enableHiding: {
+        label: "Enable hiding",
+        desc: "Enable hiding columns feature. Disabling it will hide the hiding button in the top toolbar."
+      },
+      enablePagination: {
+        label: "Enable pagination",
+        desc: "Enable pagination feature. Disabling it will hide the pagination options in the bottom toolbar."
+      },
+      enableSorting: {
+        label: "Enable sorting",
+        desc: "Enable sorting feature for all columns."
+      },
+      enableStickyHeader: {
+        label: "Enable sticky header",
+        desc: "Allows you to maintain the column headers when scrolling through the rows of the table."
+      },
+      enableTopToolbar: {
+        label: "Enable top toolbar",
+        desc: "Show or hide the top toolbar. By disabling it, globar filter, hiding, density and full screen toggles will also be hidden."
+      }
+    };
+    defaultInitialStateProps = {
+      density: "xs"
+    };
+    defaultPageSizes = ["5", "10", "15", "20", "25", "30", "50", "100"];
+    defaultPaginationState = {
+      pageIndex: 0,
+      pageSize: 10
+    };
+    isValidSelectorOptionsArray2 = (variable) => variable && Array.isArray(variable) && variable.some((elemento) => typeof elemento === "object" && elemento !== null);
+    ColumnRenderer = forwardRef(
+      function ColumnRendererComponent({
+        customLabels,
+        customLabelsHandler,
+        index,
+        isActiveRefenceContent = false,
+        option,
+        referenceColumns = [],
+        selectedColumnsHandler,
+        ...rest
+      }, ref) {
+        const customLabel = customLabels.find((label) => label.key === option.label)?.label || "";
+        const referenceColumn = referenceColumns.find((column) => column.accessorKey === option.label);
+        const referenceColumnLabel = referenceColumn?.header || option.label;
+        return /* @__PURE__ */ jsxs(Group, { grow: true, ref, ...rest, children: [
+          /* @__PURE__ */ jsxs(Group, { children: [
+            /* @__PURE__ */ jsx(IconGripVertical, {}),
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: option.checked,
+                label: option.label,
+                onChange: (event) => selectedColumnsHandler.setItemProp(index, "checked", event.currentTarget.checked)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              disabled: !option.checked,
+              onChange: (event) => customLabelsHandler.setItemProp(index, "label", event.currentTarget.value),
+              value: customLabel
+            }
+          ),
+          isActiveRefenceContent && /* @__PURE__ */ jsx(
+            Input,
+            {
+              disabled: true,
+              value: referenceColumnLabel
+            }
+          )
+        ] }, `table-group-${option.label}-${index}`);
+      }
+    );
+  }
+});
 
 // components/blocks/types/simpleEditors/index.js
 var simpleEditors, simpleEditors_default;
@@ -13445,6 +14053,7 @@ var init_simpleEditors = __esm({
     init_TitleUI();
     init_ComparisonButtonUI();
     init_StatUI();
+    init_TableUI();
     simpleEditors = {
       [BLOCK_TYPES.SELECTOR]: SelectorUI_default,
       [BLOCK_TYPES.NAV]: NavUI,
@@ -13452,7 +14061,8 @@ var init_simpleEditors = __esm({
       [BLOCK_TYPES.RESET_BUTTON]: ResetButtonUI,
       [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonUI,
       [BLOCK_TYPES.TITLE]: TitleUI,
-      [BLOCK_TYPES.STAT]: StatUI
+      [BLOCK_TYPES.STAT]: StatUI,
+      [BLOCK_TYPES.TABLE]: TableUI
     };
     simpleEditors_default = simpleEditors;
   }
@@ -13471,7 +14081,8 @@ function ParagraphPreview({ paragraph, tooltip, settings }) {
       component: "p",
       html: paragraphHTML,
       style: settings,
-      append: tooltipObj
+      append: tooltipObj,
+      isPreview: true
     }
   );
 }
@@ -13513,9 +14124,9 @@ function StatPreview({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "bespoke-Stat-wrapper", children: [
-      /* @__PURE__ */ jsx(RichText, { component: "div", size: "md", html: titleHTML, style: settings }),
-      /* @__PURE__ */ jsx(RichText, { component: "div", size: "xl", html: valueHTML, style: settings }),
-      /* @__PURE__ */ jsx(RichText, { component: "div", size: "sm", html: subtitleHTML, style: settings })
+      /* @__PURE__ */ jsx(RichText, { component: "div", size: "md", html: titleHTML, style: settings, isPreview: true }),
+      /* @__PURE__ */ jsx(RichText, { component: "div", size: "xl", html: valueHTML, style: settings, isPreview: true }),
+      /* @__PURE__ */ jsx(RichText, { component: "div", size: "sm", html: subtitleHTML, style: settings, isPreview: true })
     ] }, "stat"),
     tooltip && /* @__PURE__ */ jsx(InnerTooltip, { content: tooltip })
   ] }) });
@@ -13533,7 +14144,7 @@ function SubtitlePreview({ subtitle, tooltip, settings }) {
   const subtitleHTML = sanitizeBlockContent_default(subtitle) || "<span class='cr-block-placeholder'>Small subtitle.</span>";
   const align = settings && settings.align ? settings.align : "left";
   return /* @__PURE__ */ jsxs(Group, { spacing: "sm", position: getAlignForGroup(align), children: [
-    /* @__PURE__ */ jsx(RichText, { size: "sm", html: subtitleHTML }),
+    /* @__PURE__ */ jsx(RichText, { size: "sm", html: subtitleHTML, isPreview: true }),
     tooltip && /* @__PURE__ */ jsx(InnerTooltip, { content: tooltip, style: { display: "inline-flex" } })
   ] });
 }
@@ -13582,7 +14193,8 @@ function TitlePreview({
         component: "h",
         order: order2,
         style: settings,
-        html: titleHTML
+        html: titleHTML,
+        isPreview: true
       }
     ),
     searchOnClick && /* @__PURE__ */ jsx(Tooltip, { label: `Click will open '${searchType}' report search`, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", children: /* @__PURE__ */ jsx(IconSearch, { size: 20 }) }) }),
@@ -13633,7 +14245,7 @@ function SelectorPreview(config) {
     dispatch(setQueryParam(resource, selectorIdentifier, e.join()));
   };
   const { name, settings } = config;
-  const label = config.hideLabel === "true" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(RichText, { component: "div", html: name, size: "sm", style: settings });
+  const label = config.hideLabel === "true" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(RichText, { component: "div", html: name, size: "sm", style: settings, isPreview: true });
   return {
     [SELECTOR_TYPES.SINGLE]: config.component === SELECTOR_COMPONENTS.SEGMENTED_CONTROL ? /* @__PURE__ */ jsxs("div", { children: [
       label,
@@ -13941,9 +14553,9 @@ function ImagePreview(props) {
   const align = settings && settings.align ? String(settings.align) : "left";
   if (descText && descText.length || title && title.length) {
     element = /* @__PURE__ */ jsxs(Stack, { className: "bespoke-Image-wrapper", align: getAlignForStack(align), spacing: "sm", children: [
-      title && /* @__PURE__ */ jsx(RichText, { component: "p", html: title, style: settings }),
+      title && /* @__PURE__ */ jsx(RichText, { component: "p", html: title, style: settings, isPreview: true }),
       element,
-      desc && /* @__PURE__ */ jsx(RichText, { component: "p", size: "sm", html: desc, style: settings })
+      desc && /* @__PURE__ */ jsx(RichText, { component: "p", size: "sm", html: desc, style: settings, isPreview: true })
     ] });
   }
   return srcText && altText ? element : /* @__PURE__ */ jsx(Center, { mih: 100, bg: "white", children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: "IMAGE" }, "type") });
@@ -14017,7 +14629,7 @@ function useCurrentLocale2() {
     if (paramLocale && paramLocale !== "" && locales4.includes(paramLocale) && paramLocale !== currentLocale) {
       dispatch(actions_exports.setCurrentLocale(paramLocale));
     }
-  }, [paramLocale]);
+  }, []);
   return currentLocale;
 }
 var init_useCurrentLocale = __esm({
@@ -14158,6 +14770,63 @@ var init_ComparisonButton2 = __esm({
     init_esm_shims();
   }
 });
+function TablePreview({ columns = [], id, data = [], tableProps = {} }) {
+  const [translations, setTranslations] = useState({});
+  const { initialState: initialState4 } = tableProps;
+  const pageIndex = initialState4?.pagination?.pageIndex;
+  const pageSize = initialState4?.pagination?.pageSize;
+  const tableId = `table-${[id, pageIndex, pageSize].filter((d2) => d2).join("-")}`;
+  const columnsKeys = useMemo(() => columns.map((column) => column.accessorKey), [columns]);
+  const filteredData = useMemo(() => data.filter(
+    (item) => typeof item === "object" && item !== null && !Array.isArray(item) && Object.keys(item).some((val) => columnsKeys.includes(val))
+  ), [columnsKeys, data]);
+  const richColumns = useMemo(() => columns.map((column) => ({
+    ...column,
+    Cell: ({ renderedCellValue }) => /* @__PURE__ */ jsx(RichText, { html: `${renderedCellValue}`, isPreview: true }),
+    filterFn: "contains"
+  })), [columns]);
+  const locale = useCurrentLocale();
+  useEffect(() => {
+    const loadLocalizedComponent = async () => {
+      try {
+        const lang = locale || "en";
+        const componentName = `${lang.toUpperCase()}`;
+        const componentModule = await import(`mantine-react-table/locales/${lang}.js`);
+        setTranslations(componentModule[`MRT_Localization_${componentName}`]);
+      } catch (error) {
+        console.error("Error loading translations:", error);
+      }
+    };
+    loadLocalizedComponent();
+  }, [locale]);
+  return /* @__PURE__ */ createElement(
+    MantineReactTable,
+    {
+      ...tableProps,
+      autoResetPageIndex: false,
+      columns: richColumns,
+      data: filteredData,
+      enableColumnFilterModes: true,
+      enableFilterMatchHighlighting: false,
+      globalFilterFn: "contains",
+      key: tableId,
+      layoutMode: "grid",
+      localization: translations,
+      state: {
+        ...tableProps.state,
+        // prevents the user from getting the full screen table overlay error on cms
+        isFullScreen: false
+      }
+    }
+  );
+}
+var init_Table2 = __esm({
+  "components/blocks/types/renderers/Table.tsx"() {
+    init_esm_shims();
+    init_RichText();
+    init_hooks();
+  }
+});
 
 // components/blocks/types/renderers/Viz.tsx
 var Viz_exports2 = {};
@@ -14288,6 +14957,7 @@ var init_renderers = __esm({
     init_Related2();
     init_ResetButton2();
     init_ComparisonButton2();
+    init_Table2();
     VizPreview = dynamic(
       () => Promise.resolve().then(() => (init_Viz2(), Viz_exports2)),
       { ssr: false }
@@ -14304,7 +14974,8 @@ var init_renderers = __esm({
       [BLOCK_TYPES.NAV]: NavPreview,
       [BLOCK_TYPES.RELATED]: RelatedPreview,
       [BLOCK_TYPES.RESET_BUTTON]: ResetButtonPreview,
-      [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonPreview2
+      [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonPreview2,
+      [BLOCK_TYPES.TABLE]: TablePreview
     };
     renderers_default = renderersMap;
   }
@@ -14323,7 +14994,8 @@ var init_icons = __esm({
       "visualization": IconChartBar,
       "paragraph": IconAlignLeft,
       "selector": IconSelector,
-      "image": IconPhoto
+      "image": IconPhoto,
+      "table": IconTable
     };
   }
 });
@@ -14350,7 +15022,8 @@ var init_labels = __esm({
       "related": "Related Reports",
       // (?)
       "nav": "Navigation",
-      "image": "Image"
+      "image": "Image",
+      "table": "Table"
     };
   }
 });
@@ -14446,6 +15119,12 @@ var init_types = __esm({
         renderer: renderers_default[BLOCK_TYPES.COMPARISON_BUTTON],
         renderPreviewOnEdit: true,
         evalWhenNonActive: true
+      },
+      [BLOCK_TYPES.TABLE]: {
+        type: BLOCK_TYPES.TABLE,
+        renderer: renderers_default[BLOCK_TYPES.TABLE],
+        renderPreviewOnEdit: false,
+        evalWhenNonActive: false
       }
     };
     types_default = allBlocks;
@@ -14553,6 +15232,13 @@ function Block({ blockId, active = true, asComparison = false }) {
         void 0,
         blockContext
       );
+      if (block.type === BLOCK_TYPES.TABLE) {
+        setContent3({
+          sectionId: block.section_id,
+          ...vars
+        });
+        return;
+      }
       setContent3(vars);
       return;
     };
@@ -14588,7 +15274,7 @@ var init_Block = __esm({
 });
 
 // libs/settings/section.tsx
-var sectionSettings, defaultSettings2, defaultSectionSettings;
+var sectionSettings, defaultSettings2, defaultSectionSettings, getOptionsSettings;
 var init_section2 = __esm({
   "libs/settings/section.tsx"() {
     init_esm_shims();
@@ -14645,8 +15331,16 @@ var init_section2 = __esm({
     defaultSectionSettings = {
       memberImageBg: false,
       optionsMenu: false,
+      optionData: true,
+      optionImage: true,
+      optionShare: true,
       ...defaultSettings2
     };
+    getOptionsSettings = (settings) => ({
+      data: typeof settings.optionData === "boolean" ? settings.optionData : true,
+      image: typeof settings.optionImage === "boolean" ? settings.optionImage : true,
+      share: typeof settings.optionShare === "boolean" ? settings.optionShare : true
+    });
   }
 });
 function SectionBackground({ previews }) {
@@ -14968,7 +15662,7 @@ function DataTab(props) {
         setLoadingPreview(true);
         const dataItem = selectedSource.data[selectedDataset];
         if (typeof dataItem === "string") {
-          apiFetch(dataItem, {}, readMemberFn, locale).then((response) => {
+          apiFetch(dataItem, readMemberFn, locale).then((response) => {
             const dataToShare = guessResponse(response);
             setPreviewsSource({
               ...previewsSource,
@@ -15668,7 +16362,7 @@ var init_OptionsModal = __esm({
   }
 });
 function Options(props) {
-  const { sectionId, disabled = false } = props;
+  const { sectionId, disabled = false, optionsSettings } = props;
   const [opened, setOpened] = useState(false);
   const [mode, setMode] = useState("data");
   const sectionRef = useSectionRef(sectionId);
@@ -15683,7 +16377,7 @@ function Options(props) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "cms-section-options", children: [
     /* @__PURE__ */ jsxs(Button.Group, { children: [
-      /* @__PURE__ */ jsx(
+      optionsSettings.data && /* @__PURE__ */ jsx(
         Button,
         {
           variant: "default",
@@ -15695,7 +16389,7 @@ function Options(props) {
           children: /* @__PURE__ */ jsx(IconTable, { size: 16 })
         }
       ),
-      /* @__PURE__ */ jsx(
+      optionsSettings.image && /* @__PURE__ */ jsx(
         Button,
         {
           variant: "default",
@@ -15707,7 +16401,7 @@ function Options(props) {
           children: /* @__PURE__ */ jsx(IconCamera, { size: 16 })
         }
       ),
-      /* @__PURE__ */ jsx(
+      optionsSettings.share && /* @__PURE__ */ jsx(
         Button,
         {
           variant: "default",
@@ -16460,7 +17154,14 @@ function SectionWrapper({
             children: [
               !print && /* @__PURE__ */ jsxs(Group, { position: "right", mb: "xs", children: [
                 /* @__PURE__ */ jsx(SectionResetButton, { id }),
-                sectionSettings2.optionsMenu && /* @__PURE__ */ jsx(Options, { sectionId: id, disabled: false })
+                sectionSettings2.optionsMenu && /* @__PURE__ */ jsx(
+                  Options,
+                  {
+                    sectionId: id,
+                    disabled: false,
+                    optionsSettings: getOptionsSettings(sectionSettings2)
+                  }
+                )
               ] }),
               /* @__PURE__ */ jsxs(
                 StyleWrapper,
@@ -17541,7 +18242,7 @@ function DimensionAutocomplete(props) {
         value: _variant,
         onChange: setVariant
       },
-      dimensionId
+      `dimension-${dimensionId}`
     ),
     /* @__PURE__ */ jsx(
       Text,
@@ -17562,7 +18263,7 @@ function DimensionAutocomplete(props) {
         onChange: setMember,
         locale
       },
-      _variant
+      `variant-${_variant}`
     )
   ] });
 }
@@ -18988,6 +19689,7 @@ function CMSHeader(props) {
       locale: previewLocale,
       output: "full"
     })).then(({ results }) => {
+      dispatch(actions_exports.setCurrentLocale(previewLocale));
       if (results && results.length === dimensions.length && dimensions.length) {
         dispatch(actions_exports.recalculateVariables(resource, { previews: results }));
       } else {
@@ -20333,6 +21035,11 @@ var unlocalizedKeys = {
   ],
   [BLOCK_TYPES.STAT]: [
     ...UNLOCALIZED_ICON_KEYS
+  ],
+  [BLOCK_TYPES.TABLE]: [
+    "data",
+    "tableProps",
+    "variable"
   ]
 };
 var reduceContent = (acc, d2) => ({ ...acc, [d2.locale]: { ...d2, content: d2.content } });
@@ -20433,10 +21140,14 @@ function Block2({ id, modified, callbacks, inline }) {
             newSimple[key] = unlocalizedContent.simple[key];
           }
         });
+        const logicObj = { ...newSimple };
+        if (block.type === BLOCK_TYPES.SELECTOR) {
+          logicObj.options = logicObj.options[logicObj.optionsType];
+        }
         newContentByLocale[locale].content = {
           ...newContentByLocale[locale].content,
           simple: newSimple,
-          logic: `return ${stringifyObject_default(newSimple)}`
+          logic: `return ${stringifyObject_default(logicObj)}`
         };
       });
       return newContentByLocale;
@@ -20715,7 +21426,6 @@ function BlockElement({
                 !allowed && /* @__PURE__ */ jsx(Tooltip, { withArrow: true, label: allowedMessage, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "transparent", children: /* @__PURE__ */ jsx(IconEyeOff, { size: 20 }) }) }, "allowed"),
                 block.type !== "generator" && /* @__PURE__ */ jsx(StyleMenu_default, { id, display: "button" }, "design"),
                 /* @__PURE__ */ jsx(ActionIcon, { onClick: () => setOpened(true), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit"),
-                /* @__PURE__ */ jsx(DeleteButton_default, { type: ENTITY_TYPES.BLOCK, id }, "cog"),
                 /* @__PURE__ */ jsx(
                   ActionIcon,
                   {
@@ -20723,7 +21433,8 @@ function BlockElement({
                     children: /* @__PURE__ */ jsx(IconCopy, { size: 20 })
                   },
                   "copy"
-                )
+                ),
+                /* @__PURE__ */ jsx(DeleteButton_default, { type: ENTITY_TYPES.BLOCK, id }, "cog")
               ]
             },
             "bc"
@@ -20760,14 +21471,15 @@ init_cms();
 init_getBlockContent();
 init_Options();
 init_SectionMenu();
+init_section2();
 function SectionHeader({
   active,
   isDragging,
   id,
   dragHandleProps,
   hidden,
-  optionsMenu,
-  onActivate
+  onActivate,
+  sectionSettings: sectionSettings2
 }) {
   const section = useAppSelector((state) => state.records.entities.section[id] || null);
   if (!section)
@@ -20800,9 +21512,9 @@ function SectionHeader({
           )
         ] }) }),
         /* @__PURE__ */ jsxs(Group, { children: [
-          optionsMenu && /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", mx: 16, align: "center", gap: "xs", children: [
+          sectionSettings2.optionsMenu && /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", mx: 16, align: "center", gap: "xs", children: [
             /* @__PURE__ */ jsx(SectionResetButton, { id: section.id }),
-            /* @__PURE__ */ jsx(Options, { sectionId: section.id, disabled: !active })
+            /* @__PURE__ */ jsx(Options, { sectionId: section.id, disabled: !active, optionsSettings: getOptionsSettings(sectionSettings2) })
           ] }),
           /* @__PURE__ */ jsx(SectionMenu_default, { sectionId: id, onActivate })
         ] })
@@ -20860,7 +21572,7 @@ var CreateBlockButton = ({ columns, columnIndex, section }) => {
           },
           sx: { ":hover": { backgroundColor: "#EBEBEB" } },
           children: /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
-            /* @__PURE__ */ jsx(ActionIcon, { color: "blue", variant: "filled", size: "sm", radius: "xl", children: /* @__PURE__ */ jsx(BlockIcon2, { size: "0.8rem" }) }),
+            /* @__PURE__ */ jsx(ThemeIcon, { color: "blue", variant: "filled", size: "sm", radius: "xl", children: /* @__PURE__ */ jsx(BlockIcon2, { size: "0.8rem" }) }),
             /* @__PURE__ */ jsx(Text, { size: "xs", children: getBlockLabel(d2) || d2 })
           ] })
         }
@@ -20976,7 +21688,7 @@ function SectionEditor({
   const blocks = useAppSelector((state) => state.records.entities.block);
   const previews = useAppSelector((state) => state.status.previews);
   const cloneState = useCloneStatusSelector("section", section.id);
-  const { memberImageBg, optionsMenu, hidden, columnSettings = {} } = section.settings;
+  const { memberImageBg, hidden, columnSettings = {} } = section.settings;
   const isActive = activeEntity.type === "section" && activeEntity.id === section.id;
   const { inputs, consumers } = useMemo(() => {
     if (hoverBlock) {
@@ -21068,7 +21780,7 @@ function SectionEditor({
           setShowGenerators,
           hasGenerators: Boolean(generators.length)
         },
-        optionsMenu
+        sectionSettings: section.settings
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -21844,35 +22556,54 @@ function SectionSettingsPanel() {
   const report = useAppSelector((state) => activeSection && state.records.entities.report[section.report_id]);
   const reportSettings = report?.settings;
   const { settings, updateSettings } = useSectionSettings(activeSection);
+  const optionsMenu = useMemo(() => [
+    { key: "optionData", label: "Download data (csv, xls, json)" },
+    { key: "optionImage", label: "Save Image" },
+    { key: "optionShare", label: "Share link" }
+  ], []);
+  const optionsList = useMemo(() => optionsMenu.map((om) => /* @__PURE__ */ jsxs(List.Item, { children: [
+    om.label,
+    "."
+  ] }, `item-${om.key}`)), [optionsMenu]);
   if (activeEntity.type !== "section" || !activeEntity.id)
     return null;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(NameInput, { activeSection }),
     /* @__PURE__ */ jsx(Divider, { my: "sm" }),
     /* @__PURE__ */ jsxs(Stack, { mt: "sm", children: [
-      /* @__PURE__ */ jsx(
-        BespokeInfoTooltip,
-        {
-          target: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Stack, { spacing: "0.4rem", children: [
+        /* @__PURE__ */ jsx(
+          BespokeInfoTooltip,
+          {
+            target: /* @__PURE__ */ jsx(
+              Switch,
+              {
+                radius: "sm",
+                label: "Show export menu.",
+                checked: settings.optionsMenu,
+                onChange: (e) => updateSettings("optionsMenu", e.currentTarget.checked)
+              }
+            ),
+            dropdown: /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Export Menu" }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: "The Export Menu will allow users to:" }),
+              /* @__PURE__ */ jsx(List, { withPadding: true, size: "sm", children: optionsList })
+            ] })
+          }
+        ),
+        settings.optionsMenu && /* @__PURE__ */ jsx(Stack, { spacing: "0.5rem", pl: "md", children: optionsMenu.map(
+          (optionMenu) => /* @__PURE__ */ jsx(
             Switch,
             {
               radius: "sm",
-              label: "Show export menu.",
-              checked: settings.optionsMenu,
-              onChange: (e) => updateSettings("optionsMenu", e.currentTarget.checked)
-            }
-          ),
-          dropdown: /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Export Menu" }),
-            /* @__PURE__ */ jsx(Text, { size: "sm", children: "The Export Menu will allow users to:" }),
-            /* @__PURE__ */ jsxs(List, { withPadding: true, size: "sm", children: [
-              /* @__PURE__ */ jsx(List.Item, { children: "Download data (csv, xls, json)." }),
-              /* @__PURE__ */ jsx(List.Item, { children: "Save Image" }),
-              /* @__PURE__ */ jsx(List.Item, { children: "Share Link" })
-            ] })
-          ] })
-        }
-      ),
+              label: optionMenu.label,
+              checked: typeof settings[optionMenu.key] === "undefined" ? settings.optionsMenu : settings[optionMenu.key],
+              onChange: (e) => updateSettings(optionMenu.key, e.currentTarget.checked)
+            },
+            optionMenu.key
+          )
+        ) })
+      ] }),
       /* @__PURE__ */ jsx(
         BespokeInfoTooltip,
         {