@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.6 → 0.1.0-alpha.8

package/dist/index.cjs

@@ -64,6 +64,7 @@ __export(src_exports, {
   AdsCheckbox: () => AdsCheckbox,
   AdsDataPagination: () => AdsDataPagination,
   AdsDataTable: () => AdsDataTable,
+  AdsDataTableToolbar: () => AdsDataTableToolbar,
   AdsDatePicker: () => AdsDatePicker,
   AdsDateTimePicker: () => AdsDateTimePicker,
   AdsDialog: () => AdsDialog,
@@ -106,6 +107,7 @@ __export(src_exports, {
   AdsInputOTPGroup: () => AdsInputOTPGroup,
   AdsInputOTPSeparator: () => AdsInputOTPSeparator,
   AdsInputOTPSlot: () => AdsInputOTPSlot,
+  AdsMasonry: () => AdsMasonry,
   AdsPagination: () => AdsPagination,
   AdsPaginationContent: () => AdsPaginationContent,
   AdsPaginationEllipsis: () => AdsPaginationEllipsis,
@@ -172,6 +174,7 @@ __export(src_exports, {
   AdsTooltipContent: () => AdsTooltipContent,
   AdsTooltipProvider: () => AdsTooltipProvider,
   AdsTooltipTrigger: () => AdsTooltipTrigger,
+  AdsViewCustomersDataTable: () => AdsViewCustomersDataTable,
   adsDefaultMessages: () => adsDefaultMessages,
   designTokens: () => designTokens,
   useAdsI18n: () => useAdsI18n
@@ -213,12 +216,16 @@ var adsDefaultMessages = {
       clearSort: "Clear sort",
       collapseRow: "Collapse row",
       expandRow: "Expand row",
+      filterColumn: "Filter column",
       noDataAvailable: "No data available",
+      selectAllRows: "Select all rows",
       selectRow: "Select row",
       sortAscending: "Sort ascending",
       sortDescending: "Sort descending"
     },
     pagination: {
+      first: "First",
+      last: "Last",
       previous: "Previous",
       next: "Next",
       morePages: "More pages",
@@ -226,7 +233,9 @@ var adsDefaultMessages = {
       itemsPerPage: "Items per page",
       itemsPerPageOption: "{{value}} / page",
       jumpTo: "Jump to page",
-      total: "Showing {{start}}-{{end}} of {{total}}"
+      total: "Showing {{start}}-{{end}} of {{total}}",
+      compactTotal: "Total: {{total}}",
+      pageStatus: "Page {{page}} of {{pages}}"
     }
   },
   zh: {
@@ -256,12 +265,16 @@ var adsDefaultMessages = {
       clearSort: "\u6E05\u9664\u6392\u5E8F",
       collapseRow: "\u6536\u8D77\u884C",
       expandRow: "\u5C55\u5F00\u884C",
+      filterColumn: "\u7B5B\u9009\u5217",
       noDataAvailable: "\u6682\u65E0\u6570\u636E",
+      selectAllRows: "\u9009\u62E9\u5168\u90E8\u884C",
       selectRow: "\u9009\u62E9\u884C",
       sortAscending: "\u5347\u5E8F\u6392\u5E8F",
       sortDescending: "\u964D\u5E8F\u6392\u5E8F"
     },
     pagination: {
+      first: "\u7B2C\u4E00\u9875",
+      last: "\u6700\u540E\u4E00\u9875",
       previous: "\u4E0A\u4E00\u9875",
       next: "\u4E0B\u4E00\u9875",
       morePages: "\u66F4\u591A\u9875\u7801",
@@ -269,7 +282,9 @@ var adsDefaultMessages = {
       itemsPerPage: "\u6BCF\u9875\u6761\u6570",
       itemsPerPageOption: "{{value}} / \u9875",
       jumpTo: "\u8DF3\u8F6C\u9875\u7801",
-      total: "\u663E\u793A\u7B2C {{start}}-{{end}} \u6761\uFF0C\u5171 {{total}} \u6761"
+      total: "\u663E\u793A\u7B2C {{start}}-{{end}} \u6761\uFF0C\u5171 {{total}} \u6761",
+      compactTotal: "\u603B\u6570: {{total}}",
+      pageStatus: "\u7B2C {{page}} / {{pages}} \u9875"
     }
   }
 };
@@ -3592,8 +3607,10 @@ function AdsDataPagination({
   pageSizeOptions = [10, 20, 50, 100],
   onPageSizeChange,
   showQuickJumper = false,
+  showFirstLast = false,
   siblingCount = 1,
   boundaryCount = 1,
+  variant = "default",
   disabled = false,
   className,
   classNames,
@@ -3693,6 +3710,158 @@ function AdsDataPagination({
     end: rangeEnd,
     total
   }) : null;
+  const compactTotalContent = interpolate(messages.pagination.compactTotal, { total });
+  const pageStatus = interpolate(messages.pagination.pageStatus, {
+    page: mergedCurrent,
+    pages: totalPages
+  });
+  const shouldShowFirstLast = variant === "compact" || showFirstLast;
+  const navigationLabel = ariaLabel ?? messages.pagination.navigation;
+  const previousDisabled = disabled || mergedCurrent <= 1;
+  const nextDisabled = disabled || mergedCurrent >= totalPages;
+  const navButtonClassName = cn(
+    paginationButtonBaseClassName,
+    paginationButtonInactiveClassName,
+    "gap-1 px-md py-sm"
+  );
+  const renderPageNavigation = () => {
+    if (variant === "compact") {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-wrap items-center gap-sm", children: [
+        shouldShowFirstLast ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          Button,
+          {
+            "aria-label": messages.pagination.first,
+            className: navButtonClassName,
+            disabled: previousDisabled,
+            onClick: () => commitPageChange(1),
+            size: "sm",
+            type: "button",
+            variant: "ghost",
+            children: messages.pagination.first
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          Button,
+          {
+            "aria-label": messages.pagination.previous,
+            className: navButtonClassName,
+            disabled: previousDisabled,
+            onClick: () => commitPageChange(mergedCurrent - 1),
+            size: "sm",
+            type: "button",
+            variant: "ghost",
+            children: messages.pagination.previous
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "span",
+          {
+            "aria-current": "page",
+            className: "inline-flex h-9 items-center rounded-radius-md border border-transparent px-sm text-sm font-medium text-foreground",
+            children: pageStatus
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          Button,
+          {
+            "aria-label": messages.pagination.next,
+            className: navButtonClassName,
+            disabled: nextDisabled,
+            onClick: () => commitPageChange(mergedCurrent + 1),
+            size: "sm",
+            type: "button",
+            variant: "ghost",
+            children: messages.pagination.next
+          }
+        ),
+        shouldShowFirstLast ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          Button,
+          {
+            "aria-label": messages.pagination.last,
+            className: navButtonClassName,
+            disabled: nextDisabled,
+            onClick: () => commitPageChange(totalPages),
+            size: "sm",
+            type: "button",
+            variant: "ghost",
+            children: messages.pagination.last
+          }
+        ) : null
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPagination, { "aria-label": navigationLabel, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(AdsPaginationContent, { children: [
+      shouldShowFirstLast ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        Button,
+        {
+          "aria-label": messages.pagination.first,
+          className: navButtonClassName,
+          disabled: previousDisabled,
+          onClick: () => commitPageChange(1),
+          size: "sm",
+          type: "button",
+          variant: "ghost",
+          children: messages.pagination.first
+        }
+      ) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        Button,
+        {
+          "aria-label": messages.pagination.previous,
+          className: navButtonClassName,
+          disabled: previousDisabled,
+          onClick: () => commitPageChange(mergedCurrent - 1),
+          size: "sm",
+          type: "button",
+          variant: "ghost",
+          children: messages.pagination.previous
+        }
+      ) }),
+      paginationRange.map(
+        (token, index) => token === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationEllipsis, { label: messages.pagination.morePages }) }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          Button,
+          {
+            "aria-current": token === mergedCurrent ? "page" : void 0,
+            className: cn(
+              paginationButtonBaseClassName,
+              token === mergedCurrent ? paginationButtonActiveClassName : paginationButtonInactiveClassName
+            ),
+            disabled,
+            onClick: () => commitPageChange(token),
+            size: "sm",
+            type: "button",
+            variant: "ghost",
+            children: token
+          }
+        ) }, token)
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        Button,
+        {
+          "aria-label": messages.pagination.next,
+          className: navButtonClassName,
+          disabled: nextDisabled,
+          onClick: () => commitPageChange(mergedCurrent + 1),
+          size: "sm",
+          type: "button",
+          variant: "ghost",
+          children: messages.pagination.next
+        }
+      ) }),
+      shouldShowFirstLast ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        Button,
+        {
+          "aria-label": messages.pagination.last,
+          className: navButtonClassName,
+          disabled: nextDisabled,
+          onClick: () => commitPageChange(totalPages),
+          size: "sm",
+          type: "button",
+          variant: "ghost",
+          children: messages.pagination.last
+        }
+      ) }) : null
+    ] }) });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
     {
@@ -3704,7 +3873,7 @@ function AdsDataPagination({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-wrap items-center gap-md text-sm leading-5 text-muted-foreground", children: [
-          totalContent ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: classNames?.total, children: totalContent }) : null,
+          variant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: classNames?.total, children: compactTotalContent }) : totalContent ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: classNames?.total, children: totalContent }) : null,
           showSizeChanger ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex items-center gap-sm", classNames?.pageSizeChanger), children: [
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: messages.pagination.itemsPerPage }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
@@ -3729,58 +3898,7 @@ function AdsDataPagination({
           ] }) : null
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-md sm:flex-row sm:items-center sm:justify-end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPagination, { "aria-label": ariaLabel ?? messages.pagination.navigation, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(AdsPaginationContent, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              Button,
-              {
-                className: cn(
-                  paginationButtonBaseClassName,
-                  paginationButtonInactiveClassName,
-                  "gap-1 px-md py-sm"
-                ),
-                disabled: disabled || mergedCurrent <= 1,
-                onClick: () => commitPageChange(mergedCurrent - 1),
-                size: "sm",
-                type: "button",
-                variant: "ghost",
-                children: messages.pagination.previous
-              }
-            ) }),
-            paginationRange.map(
-              (token, index) => token === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationEllipsis, { label: messages.pagination.morePages }) }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                Button,
-                {
-                  "aria-current": token === mergedCurrent ? "page" : void 0,
-                  className: cn(
-                    paginationButtonBaseClassName,
-                    token === mergedCurrent ? paginationButtonActiveClassName : paginationButtonInactiveClassName
-                  ),
-                  disabled,
-                  onClick: () => commitPageChange(token),
-                  size: "sm",
-                  type: "button",
-                  variant: "ghost",
-                  children: token
-                }
-              ) }, token)
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AdsPaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              Button,
-              {
-                className: cn(
-                  paginationButtonBaseClassName,
-                  paginationButtonInactiveClassName,
-                  "gap-1 px-md py-sm"
-                ),
-                disabled: disabled || mergedCurrent >= totalPages,
-                onClick: () => commitPageChange(mergedCurrent + 1),
-                size: "sm",
-                type: "button",
-                variant: "ghost",
-                children: messages.pagination.next
-              }
-            ) })
-          ] }) }),
+          renderPageNavigation(),
           showQuickJumper ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
             "label",
             {
@@ -3819,6 +3937,7 @@ function AdsDataPagination({
 
 // src/components/AdsDataTable/index.tsx
 var React41 = __toESM(require("react"), 1);
+var import_lucide_react17 = require("lucide-react");
 
 // src/components/AdsEmpty/index.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
@@ -4434,6 +4553,7 @@ AdsTableExpandCell.displayName = "AdsTableExpandCell";
 // src/components/AdsDataTable/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var SKELETON_ROW_COUNT = 4;
+var FLEX_WIDTH_UNIT = 160;
 var sizeClassNames = {
   small: {
     cell: "py-1.5 text-xs leading-4",
@@ -4452,6 +4572,9 @@ function getColumnKey(column, index) {
   if (column.key !== void 0) {
     return String(column.key);
   }
+  if (column.field) {
+    return column.field;
+  }
   if (Array.isArray(column.dataIndex)) {
     return column.dataIndex.join(".");
   }
@@ -4460,6 +4583,17 @@ function getColumnKey(column, index) {
   }
   return `column-${index}`;
 }
+function getValueByFieldPath(record, field) {
+  if (!field) {
+    return void 0;
+  }
+  return field.split(".").reduce((value, key) => {
+    if (value && typeof value === "object") {
+      return value[key];
+    }
+    return void 0;
+  }, record);
+}
 function getColumnValue(record, dataIndex) {
   if (dataIndex === void 0) {
     return void 0;
@@ -4493,10 +4627,45 @@ function compareValues(valueA, valueB) {
   }
   return String(valueA ?? "").localeCompare(String(valueB ?? ""));
 }
-function getCellStyle(column) {
-  const style = {};
+function toPixelWidth(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const matched = Number.parseFloat(value);
+    return Number.isFinite(matched) ? matched : void 0;
+  }
+  return void 0;
+}
+function normalizeFilterValue(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+  return JSON.stringify(value);
+}
+function getResolvedColumnWidth(column, overrideWidth) {
+  if (overrideWidth !== void 0) {
+    return overrideWidth;
+  }
   if (column.width !== void 0) {
-    style.width = column.width;
+    return column.width;
+  }
+  if (column.flex !== void 0 && Number.isFinite(column.flex) && column.flex > 0) {
+    return `${Math.max(column.flex, 1) * FLEX_WIDTH_UNIT}px`;
+  }
+  return void 0;
+}
+function getCellStyle(column, overrideWidth) {
+  const style = {};
+  const resolvedWidth = getResolvedColumnWidth(column, overrideWidth);
+  if (resolvedWidth !== void 0) {
+    style.width = resolvedWidth;
+  }
+  if (column.minWidth !== void 0) {
+    style.minWidth = column.minWidth;
   }
   if (column.align !== void 0) {
     style.textAlign = column.align;
@@ -4504,16 +4673,79 @@ function getCellStyle(column) {
   return Object.keys(style).length > 0 ? style : void 0;
 }
 function renderCellValue(value, ellipsis) {
-  if (React41.isValidElement(value) || value === null || value === void 0) {
-    return value ?? null;
+  if (React41.isValidElement(value)) {
+    return value;
+  }
+  if (value === null || value === void 0) {
+    return "";
   }
   const stringValue = typeof value === "string" || typeof value === "number" ? String(value) : JSON.stringify(value);
   if (ellipsis) {
     const shouldShowTitle = typeof ellipsis === "object" ? ellipsis.showTitle !== false : true;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "truncate", title: shouldShowTitle ? stringValue : void 0, children: stringValue });
+    const maxWidth = typeof ellipsis === "object" ? ellipsis.maxWidth : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "div",
+      {
+        className: "truncate",
+        style: maxWidth !== void 0 ? { maxWidth } : void 0,
+        title: shouldShowTitle ? stringValue : void 0,
+        children: stringValue
+      }
+    );
   }
   return stringValue;
 }
+function getColumnHeader(column, columnKey) {
+  return column.title ?? column.headerName ?? columnKey;
+}
+function getColumnRawValue(column, record, index) {
+  if (column.valueGetter) {
+    return column.valueGetter(record, index);
+  }
+  if (column.field) {
+    return getValueByFieldPath(record, column.field);
+  }
+  return getColumnValue(record, column.dataIndex);
+}
+function resolveRenderedCellContent(column, record, index) {
+  const rawValue = getColumnRawValue(column, record, index);
+  const formattedValue = column.valueFormatter ? column.valueFormatter(rawValue, record, index) : rawValue;
+  if (column.render) {
+    return column.render(formattedValue, record, index);
+  }
+  if (column.cellRenderer) {
+    return column.cellRenderer({
+      value: rawValue,
+      formattedValue,
+      record,
+      data: record,
+      index,
+      column
+    });
+  }
+  return formattedValue;
+}
+function shouldIgnoreRowClick(event) {
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  return Boolean(
+    target.closest(
+      [
+        "a",
+        "button",
+        "input",
+        "select",
+        "textarea",
+        "[role='checkbox']",
+        "[role='radio']",
+        "[role='button']",
+        "[data-ads-row-click-stop]"
+      ].join(",")
+    )
+  );
+}
 function getInitialSortState(columns) {
   const columnIndex = columns.findIndex((column2) => column2.defaultSortOrder !== void 0);
   if (columnIndex === -1) {
@@ -4530,6 +4762,16 @@ function getInitialSortState(columns) {
     order
   };
 }
+function getInitialFilterValues(columns) {
+  return columns.reduce((accumulator, column, index) => {
+    const columnKey = getColumnKey(column, index);
+    const value = column.filterValue ?? column.defaultFilterValue;
+    if (value !== void 0) {
+      accumulator[columnKey] = value;
+    }
+    return accumulator;
+  }, {});
+}
 function AdsDataTable({
   className,
   columns,
@@ -4549,7 +4791,9 @@ function AdsDataTable({
   footer,
   tableClassName,
   classNames,
-  onSortChange
+  onSortChange,
+  onRowClick,
+  suppressRowClickSelection = true
 }) {
   const { messages } = useAdsI18n();
   const resolvedColumns = React41.useMemo(() => columns.filter(Boolean), [columns]);
@@ -4559,15 +4803,20 @@ function AdsDataTable({
   const [internalSelectedKeys, setInternalSelectedKeys] = React41.useState(
     rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []
   );
+  const [internalFilterValues, setInternalFilterValues] = React41.useState(
+    () => getInitialFilterValues(resolvedColumns)
+  );
   const [internalExpandedKeys, setInternalExpandedKeys] = React41.useState(
     expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []
   );
+  const [internalColumnWidths, setInternalColumnWidths] = React41.useState({});
   const [internalCurrentPage, setInternalCurrentPage] = React41.useState(
     pagination !== false ? pagination.defaultCurrent ?? pagination.current ?? 1 : 1
   );
   const [internalPageSize, setInternalPageSize] = React41.useState(
     pagination !== false ? pagination.defaultPageSize ?? pagination.pageSize ?? 10 : 10
   );
+  const [activeResize, setActiveResize] = React41.useState(null);
   React41.useEffect(() => {
     if (rowSelection?.selectedRowKeys !== void 0) {
       setInternalSelectedKeys(rowSelection.selectedRowKeys);
@@ -4588,6 +4837,27 @@ function AdsDataTable({
       setInternalPageSize(pagination.pageSize);
     }
   }, [pagination]);
+  React41.useEffect(() => {
+    setInternalFilterValues((previous) => {
+      const next = { ...previous };
+      let hasChanged = false;
+      resolvedColumns.forEach((column, index) => {
+        const columnKey = getColumnKey(column, index);
+        if (column.filterValue !== void 0) {
+          if (next[columnKey] !== column.filterValue) {
+            next[columnKey] = column.filterValue;
+            hasChanged = true;
+          }
+          return;
+        }
+        if (!(columnKey in next) && column.defaultFilterValue !== void 0) {
+          next[columnKey] = column.defaultFilterValue;
+          hasChanged = true;
+        }
+      });
+      return hasChanged ? next : previous;
+    });
+  }, [resolvedColumns]);
   const controlledSortState = React41.useMemo(() => {
     const columnIndex = resolvedColumns.findIndex((column2) => column2.sortOrder !== void 0);
     if (columnIndex === -1) {
@@ -4606,22 +4876,56 @@ function AdsDataTable({
   const hasSelectionColumn = Boolean(rowSelection);
   const hasExpandableColumn = Boolean(expandable?.expandedRowRender);
   const density = sizeClassNames[size];
+  const paginationMode = pagination === false ? "client" : pagination.mode ?? "client";
+  const allowsRowSelectionByClick = Boolean(rowSelection) && !suppressRowClickSelection;
+  const filterValues = React41.useMemo(
+    () => resolvedColumns.reduce((accumulator, column, index) => {
+      const columnKey = getColumnKey(column, index);
+      accumulator[columnKey] = column.filterValue ?? internalFilterValues[columnKey] ?? "";
+      return accumulator;
+    }, {}),
+    [internalFilterValues, resolvedColumns]
+  );
+  const filteredData = React41.useMemo(() => {
+    const filterableColumns = resolvedColumns.filter((column) => column.filter);
+    if (filterableColumns.length === 0) {
+      return dataSource;
+    }
+    return dataSource.filter(
+      (record, index) => filterableColumns.every((column) => {
+        const columnKey = getColumnKey(column, resolvedColumns.indexOf(column));
+        const filterValue = filterValues[columnKey]?.trim();
+        if (!filterValue || column.filterMode === "server") {
+          return true;
+        }
+        const rawValue = getColumnRawValue(column, record, index);
+        if (typeof column.filter === "function") {
+          return column.filter(filterValue, record, index, rawValue);
+        }
+        return normalizeFilterValue(rawValue).toLowerCase().includes(filterValue.toLowerCase());
+      })
+    );
+  }, [dataSource, filterValues, resolvedColumns]);
   const sortedData = React41.useMemo(() => {
     if (!sortState || !sortState.column || sortState.order === null) {
-      return dataSource;
+      return filteredData;
     }
     const column = sortState.column;
     const sortable = column.sorter;
     if (!sortable) {
-      return dataSource;
+      return filteredData;
     }
-    const sorterFn = typeof sortable === "function" ? sortable : (a, b) => compareValues(
-      getColumnValue(a, column.dataIndex),
-      getColumnValue(b, column.dataIndex)
-    );
-    const nextData = [...dataSource].sort(sorterFn);
+    const sorterFn = typeof sortable === "function" ? sortable : (a, b) => {
+      const indexA = filteredData.indexOf(a);
+      const indexB = filteredData.indexOf(b);
+      return compareValues(
+        getColumnRawValue(column, a, indexA),
+        getColumnRawValue(column, b, indexB)
+      );
+    };
+    const nextData = [...filteredData].sort(sorterFn);
     return sortState.order === "descend" ? nextData.reverse() : nextData;
-  }, [dataSource, sortState]);
+  }, [filteredData, sortState]);
   const resolvedTotal = pagination === false ? sortedData.length : pagination.total ?? sortedData.length;
   const currentPageSize = pagination === false ? Math.max(sortedData.length, 1) : Math.max(1, pagination.pageSize ?? internalPageSize);
   const totalPages = pagination === false ? 1 : Math.max(1, Math.ceil(Math.max(resolvedTotal, 0) / currentPageSize));
@@ -4638,12 +4942,12 @@ function AdsDataTable({
     }
   }, [currentPage, internalCurrentPage, pagination]);
   const paginatedData = React41.useMemo(() => {
-    if (pagination === false) {
+    if (pagination === false || paginationMode === "server") {
       return sortedData;
     }
     const start = (currentPage - 1) * currentPageSize;
     return sortedData.slice(start, start + currentPageSize);
-  }, [currentPage, currentPageSize, pagination, sortedData]);
+  }, [currentPage, currentPageSize, pagination, paginationMode, sortedData]);
   const handleSortChange = React41.useCallback(
     (column, columnKey, nextOrder) => {
       const nextSortState = nextOrder === null ? null : {
@@ -4658,6 +4962,21 @@ function AdsDataTable({
     },
     [controlledSortState, onSortChange]
   );
+  const handleFilterChange = React41.useCallback(
+    (column, columnKey, nextValue) => {
+      if (column.filterValue === void 0) {
+        setInternalFilterValues((previous) => ({
+          ...previous,
+          [columnKey]: nextValue
+        }));
+      }
+      if (pagination !== false && pagination.current === void 0) {
+        setInternalCurrentPage(1);
+      }
+      column.onFilterChange?.(nextValue);
+    },
+    [pagination]
+  );
   const updateSelection = React41.useCallback(
     (nextKeys) => {
       if (!rowSelection) {
@@ -4673,6 +4992,20 @@ function AdsDataTable({
     },
     [dataSource, rowKey, rowSelection]
   );
+  const toggleSelectionFromRowClick = React41.useCallback(
+    (record, recordKey) => {
+      if (!allowsRowSelectionByClick || !rowSelection) {
+        return;
+      }
+      if (rowSelection.type === "radio") {
+        updateSelection([recordKey]);
+        return;
+      }
+      const nextKeys = selectedKeys.includes(recordKey) ? selectedKeys.filter((key) => key !== recordKey) : [...selectedKeys, recordKey];
+      updateSelection(Array.from(new Set(nextKeys)));
+    },
+    [allowsRowSelectionByClick, rowSelection, selectedKeys, updateSelection]
+  );
   const toggleExpanded = React41.useCallback(
     (record, recordKey) => {
       if (!expandable?.expandedRowRender) {
@@ -4724,6 +5057,136 @@ function AdsDataTable({
     },
     [pagination]
   );
+  const visibleRowEntries = React41.useMemo(
+    () => paginatedData.map((record, index) => ({
+      key: resolveRowKey(record, index, rowKey),
+      record
+    })),
+    [paginatedData, rowKey]
+  );
+  const visibleSelectableKeys = React41.useMemo(
+    () => visibleRowEntries.map((entry) => entry.key),
+    [visibleRowEntries]
+  );
+  const selectedVisibleCount = React41.useMemo(
+    () => visibleSelectableKeys.filter((key) => selectedKeys.includes(key)).length,
+    [selectedKeys, visibleSelectableKeys]
+  );
+  const allVisibleRowsSelected = visibleSelectableKeys.length > 0 && selectedVisibleCount === visibleSelectableKeys.length;
+  const someVisibleRowsSelected = selectedVisibleCount > 0 && selectedVisibleCount < visibleSelectableKeys.length;
+  const getColumnWidthOverride = React41.useCallback(
+    (column, columnKey) => internalColumnWidths[columnKey] ?? getResolvedColumnWidth(column),
+    [internalColumnWidths]
+  );
+  const startColumnResize = React41.useCallback(
+    (event, column, columnKey) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const startWidth = toPixelWidth(internalColumnWidths[columnKey]) ?? toPixelWidth(getResolvedColumnWidth(column)) ?? toPixelWidth(column.minWidth) ?? FLEX_WIDTH_UNIT;
+      const minWidth = Math.max(toPixelWidth(column.minWidth) ?? 96, 48);
+      const resizeState = {
+        columnKey,
+        minWidth,
+        startWidth,
+        startX: event.clientX
+      };
+      setActiveResize(resizeState);
+      const handleMouseMove = (nextEvent) => {
+        const delta = nextEvent.clientX - resizeState.startX;
+        const nextWidth = Math.max(resizeState.minWidth, resizeState.startWidth + delta);
+        setInternalColumnWidths((previous) => ({
+          ...previous,
+          [resizeState.columnKey]: nextWidth
+        }));
+      };
+      const handleMouseUp = () => {
+        setActiveResize(null);
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    },
+    [internalColumnWidths]
+  );
+  const renderColumnHeader = React41.useCallback(
+    (column, columnKey, columnSortOrder) => {
+      const headerTitle = getColumnHeader(column, columnKey);
+      const hasSorter = Boolean(column.sorter);
+      const hasFilter = Boolean(column.filter);
+      const hasResizeHandle = Boolean(column.resizable);
+      if (!hasSorter && !hasFilter && !hasResizeHandle) {
+        return headerTitle;
+      }
+      const nextOrder = columnSortOrder === null ? "ascend" : columnSortOrder === "ascend" ? "descend" : null;
+      const actionLabel = nextOrder === "ascend" ? messages.table.sortAscending : nextOrder === "descend" ? messages.table.sortDescending : messages.table.clearSort;
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "relative flex min-w-0 items-center gap-2 pr-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
+          hasSorter ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            Button,
+            {
+              "aria-label": `${headerTitle} ${actionLabel}`,
+              className: cn(
+                "h-8 min-w-0 flex-1 justify-between rounded-radius-md border-0 bg-transparent px-0 text-left shadow-none hover:bg-transparent focus-visible:ring-0",
+                "hover:text-[var(--card-foreground)]"
+              ),
+              onClick: () => handleSortChange(column, columnKey, nextOrder),
+              size: "sm",
+              type: "button",
+              variant: "ghost",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate", children: headerTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center text-icon-muted", children: columnSortOrder === "ascend" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.ChevronDown, { className: "h-4 w-4 rotate-180" }) : columnSortOrder === "descend" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.ChevronDown, { className: "h-4 w-4 opacity-60" }) })
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate", children: headerTitle }),
+          hasFilter ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AdsPopover, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AdsPopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              Button,
+              {
+                "aria-label": `${headerTitle} ${messages.table.filterColumn}`,
+                className: cn(
+                  "h-6 w-6 shrink-0 rounded-[6px] border-0 bg-transparent px-0 shadow-none hover:bg-accent focus-visible:ring-0",
+                  filterValues[columnKey] ? "text-primary" : "text-icon-muted hover:text-[var(--card-foreground)]"
+                ),
+                "data-ads-column-filter-trigger": "true",
+                size: "sm",
+                type: "button",
+                variant: "ghost",
+                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.Filter, { className: "h-3.5 w-3.5" })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AdsPopoverContent, { align: "end", className: "w-64", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              AdsInput,
+              {
+                clearable: true,
+                onChange: (event) => handleFilterChange(column, columnKey, event.currentTarget.value),
+                onClear: () => handleFilterChange(column, columnKey, ""),
+                placeholder: column.filterPlaceholder,
+                size: "sm",
+                value: filterValues[columnKey] ?? ""
+              }
+            ) })
+          ] }) : null
+        ] }),
+        hasResizeHandle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "span",
+          {
+            "aria-label": `Resize ${headerTitle} column`,
+            className: cn(
+              "absolute inset-y-1 -right-1 z-20 flex w-2 cursor-col-resize items-center justify-center rounded-full transition-colors",
+              "before:block before:h-5 before:w-px before:rounded-full before:bg-[#4A4C55]",
+              "hover:before:bg-[#6B6E78]",
+              activeResize?.columnKey === columnKey ? "before:bg-[#8B8E99]" : void 0
+            ),
+            onMouseDown: (event) => startColumnResize(event, column, columnKey),
+            role: "separator"
+          }
+        ) : null
+      ] });
+    },
+    [activeResize?.columnKey, filterValues, handleFilterChange, handleSortChange, messages.table, startColumnResize]
+  );
   const tableNode = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AdsTableSurface, { className: cn("flex min-h-0 flex-1 flex-col", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AdsTableScrollArea, { fill, stickyHeader: sticky, x: scroll?.x, y: scroll?.y, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AdsTableRoot, { className: tableClassName, children: [
       /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AdsTableColGroup, { children: [
@@ -4732,36 +5195,39 @@ function AdsDataTable({
         resolvedColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           AdsTableCol,
           {
-            style: column.width ? { width: column.width } : void 0
+            style: getCellStyle(column, getColumnWidthOverride(column, getColumnKey(column, index)))
           },
           getColumnKey(column, index)
         ))
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AdsTableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AdsTableRow, { children: [
-        hasSelectionColumn ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AdsTableHead, { className: "w-12 p-2" }) : null,
+        hasSelectionColumn ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AdsTableHead, { className: "w-12 p-2", children: rowSelection?.type !== "radio" && !rowSelection?.hideSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          Checkbox2,
+          {
+            "aria-label": messages.table.selectAllRows,
+            checked: allVisibleRowsSelected ? true : someVisibleRowsSelected ? "indeterminate" : false,
+            disabled: visibleSelectableKeys.length === 0,
+            onCheckedChange: (nextChecked) => {
+              const shouldSelectAll = Boolean(nextChecked);
+              const remainingKeys = selectedKeys.filter(
+                (key) => !visibleSelectableKeys.includes(key)
+              );
+              const nextKeys = shouldSelectAll ? Array.from(/* @__PURE__ */ new Set([...remainingKeys, ...visibleSelectableKeys])) : remainingKeys;
+              updateSelection(nextKeys);
+            },
+            onClick: (event) => event.stopPropagation()
+          }
+        ) }) : null }) : null,
         hasExpandableColumn ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AdsTableHead, { className: "w-12 p-2" }) : null,
         resolvedColumns.map((column, index) => {
           const columnKey = getColumnKey(column, index);
           const columnSortOrder = sortState?.columnKey === columnKey ? sortState.order : column.sortOrder ?? null;
-          if (column.sorter) {
-            return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              AdsTableSortHeader,
-              {
-                className: cn(density.head, column.className),
-                onToggleSort: (nextOrder) => handleSortChange(column, columnKey, nextOrder),
-                sortOrder: columnSortOrder,
-                style: getCellStyle(column),
-                title: column.title ?? columnKey
-              },
-              columnKey
-            );
-          }
           return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             AdsTableHead,
             {
-              className: cn(density.head, column.className),
-              style: getCellStyle(column),
-              children: column.title
+              className: cn(density.head, column.className, column.headerClassName),
+              style: getCellStyle(column, getColumnWidthOverride(column, columnKey)),
+              children: renderColumnHeader(column, columnKey, columnSortOrder)
             },
             columnKey
           );
@@ -4786,12 +5252,24 @@ function AdsDataTable({
         const row = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           AdsTableRow,
           {
-            className: cn(dataRowClassName),
+            className: cn(
+              dataRowClassName,
+              onRowClick ? "cursor-pointer" : void 0
+            ),
             "data-state": selectedKeys.includes(recordKey) ? "selected" : void 0,
-            onClick: () => {
+            onClick: (event) => {
+              if (shouldIgnoreRowClick(event)) {
+                return;
+              }
+              if (onRowClick) {
+                toggleSelectionFromRowClick(record, recordKey);
+                onRowClick(record, index, event);
+                return;
+              }
               if (expandable?.expandRowByClick && canExpand) {
                 toggleExpanded(record, recordKey);
               }
+              toggleSelectionFromRowClick(record, recordKey);
             },
             children: [
               hasSelectionColumn ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -4819,13 +5297,22 @@ function AdsDataTable({
                 }
               ) : null,
               resolvedColumns.map((column, columnIndex) => {
-                const rawValue = getColumnValue(record, column.dataIndex);
-                const renderedValue = column.render ? column.render(rawValue, record, index) : renderCellValue(rawValue, column.ellipsis);
+                const renderedValue = renderCellValue(
+                  resolveRenderedCellContent(column, record, index),
+                  column.ellipsis
+                );
                 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                   AdsTableCell,
                   {
-                    className: cn(density.cell, column.className),
-                    style: getCellStyle(column),
+                    className: cn(
+                      density.cell,
+                      column.className,
+                      column.cellClassName
+                    ),
+                    style: getCellStyle(
+                      column,
+                      getColumnWidthOverride(column, getColumnKey(column, columnIndex))
+                    ),
                     children: renderedValue
                   },
                   `${String(recordKey)}-${getColumnKey(column, columnIndex)}`
@@ -4882,10 +5369,12 @@ function AdsDataTable({
         onPageSizeChange: handlePageSizeChange,
         pageSize: currentPageSize,
         pageSizeOptions: pagination.pageSizeOptions,
+        showFirstLast: pagination.showFirstLast,
         showQuickJumper: pagination.showQuickJumper,
         showSizeChanger: pagination.showSizeChanger,
         showTotal: pagination.showTotal,
-        total: resolvedTotal
+        total: resolvedTotal,
+        variant: pagination.variant
       }
     ) }) : null
   ] });
@@ -4910,21 +5399,150 @@ function AdsDataTable({
   return tableNode;
 }
 
+// src/components/AdsDataTableToolbar/index.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function AdsDataTableToolbar({
+  action,
+  className,
+  searchClassName,
+  searchPlaceholder,
+  searchValue = "",
+  title,
+  titleClassName,
+  onSearchChange,
+  onSearchClear
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-md px-6 pb-4 pt-6 md:flex-row md:items-center md:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "min-w-0 flex-1", children: title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h2", { className: cn("truncate text-xl font-medium text-white", titleClassName), children: title }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col gap-sm md:min-w-0 md:flex-1 md:flex-row md:items-center md:justify-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "min-w-0 md:max-w-[440px] md:flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            AdsInput,
+            {
+              className: cn(
+                "border-[#27282F] bg-[#27282F] text-white placeholder:text-[#848484]",
+                searchClassName
+              ),
+              clearable: true,
+              onChange: (event) => onSearchChange?.(event.target.value),
+              onClear: onSearchClear,
+              placeholder: searchPlaceholder,
+              value: searchValue
+            }
+          ) }),
+          action ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "shrink-0", children: action }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/AdsViewCustomersDataTable/index.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function resolveHeight(value) {
+  if (value === void 0) {
+    return 500;
+  }
+  return value;
+}
+function AdsViewCustomersDataTable({
+  columns,
+  dataSource = [],
+  emptyState,
+  error = false,
+  errorDescription = "Try again or adjust the current query.",
+  errorState,
+  errorTitle = "Unable to load records",
+  height = 500,
+  loading = false,
+  pagination = false,
+  retryLabel = "Retry",
+  rowKey,
+  scroll,
+  searchPlaceholder = "Search customers",
+  searchValue = "",
+  sticky = true,
+  title,
+  toolbarAction,
+  onRetry,
+  onSearchChange,
+  onSearchClear,
+  ...props
+}) {
+  const tableHeight = resolveHeight(height);
+  const resolvedErrorState = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex min-h-[500px] flex-col items-center justify-center gap-3 px-6 py-12 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-sm font-medium text-white", children: errorTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "max-w-md text-sm text-[#848484]", children: errorDescription }),
+    onRetry ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AdsButton, { intent: "primary", onClick: onRetry, children: retryLabel }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "overflow-hidden rounded-xl border border-[#27282F] bg-[#1B1C21]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      AdsDataTableToolbar,
+      {
+        action: toolbarAction,
+        onSearchChange,
+        onSearchClear,
+        searchPlaceholder,
+        searchValue,
+        title
+      }
+    ),
+    error ? resolvedErrorState : null,
+    !error ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      AdsDataTable,
+      {
+        ...props,
+        className: cn(
+          "rounded-none border-0 bg-[#1B1C21]",
+          "[&_thead_th]:border-b-[#27282F] [&_thead_th]:bg-[#27282F] [&_thead_th]:text-[14px] [&_thead_th]:leading-5",
+          "[&_tbody_td]:border-b-[#27282F] [&_tbody_td]:text-[14px] [&_tbody_td]:leading-5",
+          "[&_tbody_tr:hover]:!bg-[#333333]",
+          "[&_[data-slot='ads-table-root']]:bg-[#1B1C21]",
+          "[&_[data-slot='ads-table-root']]:text-white",
+          "[&_[data-slot='ads-table-scroll-area']]:bg-[#1B1C21]"
+        ),
+        columns,
+        dataSource,
+        emptyState,
+        loading,
+        pagination: pagination === false ? false : {
+          ...pagination,
+          showFirstLast: true,
+          variant: "compact"
+        },
+        rowKey,
+        scroll: {
+          ...scroll,
+          y: scroll?.y ?? tableHeight
+        },
+        sticky,
+        tableClassName: "[&_td]:text-white [&_th]:text-white"
+      }
+    ) : null
+  ] });
+}
+
 // src/components/AdsProgress/index.tsx
 var React43 = __toESM(require("react"), 1);
 
 // src/primitives/progress.tsx
 var React42 = __toESM(require("react"), 1);
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Progress = React42.forwardRef(({ className, indicatorClassName, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Progress = React42.forwardRef(({ className, indicatorClassName, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
   ProgressPrimitive.Root,
   {
     className: cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className),
     ref,
     value,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       ProgressPrimitive.Indicator,
       {
         className: cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName),
@@ -4936,13 +5554,13 @@ var Progress = React42.forwardRef(({ className, indicatorClassName, value, ...pr
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/components/AdsProgress/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var progressBaseClassName = "h-2 rounded-radius-full bg-[color:color-mix(in_srgb,var(--primary)_20%,transparent)]";
 var progressIndicatorVariantClassName = {
   ai: "bg-brand-gradient",
   default: "bg-primary"
 };
-var Progress2 = React43.forwardRef(({ className, indicatorClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var Progress2 = React43.forwardRef(({ className, indicatorClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   Progress,
   {
     className: cn(progressBaseClassName, className),
@@ -4971,12 +5589,12 @@ var AdsProgress = React43.forwardRef(
       id
     });
     const labelId = label ? `${description.inputId}-label` : void 0;
-    const helperNode = helperText ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AdsFieldDescription, { id: description.helperId, children: helperText }) : null;
-    const errorNode = errorText ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AdsFieldError, { id: description.errorId, children: errorText }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(AdsFieldItem, { children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AdsFieldLabel, { id: labelId, children: label }) : null,
+    const helperNode = helperText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AdsFieldDescription, { id: description.helperId, children: helperText }) : null;
+    const errorNode = errorText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AdsFieldError, { id: description.errorId, children: errorText }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(AdsFieldItem, { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AdsFieldLabel, { id: labelId, children: label }) : null,
       descriptionPlacement === "above" ? helperNode : null,
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Progress,
         {
           "aria-describedby": description.describedBy,
@@ -5005,8 +5623,8 @@ var React45 = __toESM(require("react"), 1);
 // src/primitives/slider.tsx
 var React44 = __toESM(require("react"), 1);
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var Slider = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Slider = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
   SliderPrimitive.Root,
   {
     ref,
@@ -5016,10 +5634,10 @@ var Slider = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
       Array.from({
         length: Array.isArray(props.value) ? props.value.length : Array.isArray(props.defaultValue) ? props.defaultValue.length : 1
-      }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         SliderPrimitive.Thumb,
         {
           className: "block h-5 w-5 rounded-full border border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
@@ -5032,9 +5650,9 @@ var Slider = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/components/AdsSlider/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var sliderBaseClassName = "py-1";
-var Slider2 = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Slider, { className: cn(sliderBaseClassName, className), ref, ...props }));
+var Slider2 = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Slider, { className: cn(sliderBaseClassName, className), ref, ...props }));
 Slider2.displayName = "Slider";
 var AdsSlider = React45.forwardRef(
   ({
@@ -5051,12 +5669,12 @@ var AdsSlider = React45.forwardRef(
       helperText,
       id
     });
-    const helperNode = helperText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AdsFieldDescription, { id: description.helperId, children: helperText }) : null;
-    const errorNode = errorText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AdsFieldError, { id: description.errorId, children: errorText }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(AdsFieldItem, { children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AdsFieldLabel, { children: label }) : null,
+    const helperNode = helperText ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AdsFieldDescription, { id: description.helperId, children: helperText }) : null;
+    const errorNode = errorText ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AdsFieldError, { id: description.errorId, children: errorText }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(AdsFieldItem, { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AdsFieldLabel, { children: label }) : null,
       descriptionPlacement === "above" ? helperNode : null,
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Slider2,
         {
           "aria-describedby": description.describedBy,
@@ -5078,8 +5696,8 @@ var React47 = __toESM(require("react"), 1);
 // src/primitives/switch.tsx
 var React46 = __toESM(require("react"), 1);
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var Switch = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var Switch = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -5088,7 +5706,7 @@ var Switch = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ),
     ...props,
     ref,
-    children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       SwitchPrimitives.Thumb,
       {
         className: cn(
@@ -5101,15 +5719,15 @@ var Switch = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/AdsSwitch/index.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var switchBaseClassName = "h-6 w-11 border border-transparent bg-muted shadow-[0px_1px_2px_rgba(0,0,0,0.1)] focus-visible:ring-[3px] focus-visible:ring-[rgba(161,161,161,0.5)] focus-visible:ring-offset-0 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted";
-var Switch2 = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Switch, { className: cn(switchBaseClassName, className), ref, ...props }));
+var Switch2 = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Switch, { className: cn(switchBaseClassName, className), ref, ...props }));
 Switch2.displayName = "Switch";
 var AdsSwitch = React47.forwardRef(({ className, description, id, label, switchClassName, wrapperClassName, ...props }, ref) => {
   const generatedId = React47.useId();
   const inputId = id ?? generatedId;
   if (!label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Switch2,
       {
         className: cn(className, switchClassName),
@@ -5119,12 +5737,12 @@ var AdsSwitch = React47.forwardRef(({ className, description, id, label, switchC
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { className: cn("block w-full cursor-pointer", wrapperClassName), htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5 pt-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "text-sm font-medium leading-5 text-foreground", children: label }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AdsFieldDescription, { className: "text-sm leading-5", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("label", { className: cn("block w-full cursor-pointer", wrapperClassName), htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5 pt-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "text-sm font-medium leading-5 text-foreground", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AdsFieldDescription, { className: "text-sm leading-5", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Switch2,
       {
         className: cn(className, switchClassName),
@@ -5143,9 +5761,9 @@ var React49 = __toESM(require("react"), 1);
 // src/primitives/tabs.tsx
 var React48 = __toESM(require("react"), 1);
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
-var TabsList = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var TabsList = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
   TabsPrimitive.List,
   {
     className: cn("inline-flex items-center", className),
@@ -5154,7 +5772,7 @@ var TabsList = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var TabsTrigger = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
   TabsPrimitive.Trigger,
   {
     className: cn(
@@ -5166,7 +5784,7 @@ var TabsTrigger = React48.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var TabsContent = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
   TabsPrimitive.Content,
   {
     className: cn("focus-visible:outline-none", className),
@@ -5177,9 +5795,9 @@ var TabsContent = React48.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/AdsTabs/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var AdsTabs = Tabs;
-var AdsTabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+var AdsTabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   TabsList,
   {
     className: cn(
@@ -5191,7 +5809,7 @@ var AdsTabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AdsTabsList.displayName = "AdsTabsList";
-var AdsTabsTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+var AdsTabsTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   TabsTrigger,
   {
     className: cn(
@@ -5203,7 +5821,7 @@ var AdsTabsTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 AdsTabsTrigger.displayName = "AdsTabsTrigger";
-var AdsTabsContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+var AdsTabsContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   TabsContent,
   {
     className: cn(
@@ -5222,8 +5840,8 @@ var React51 = __toESM(require("react"), 1);
 // src/primitives/toggle.tsx
 var React50 = __toESM(require("react"), 1);
 var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"), 1);
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var Toggle = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var Toggle = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
   TogglePrimitive.Root,
   {
     className: cn(
@@ -5237,7 +5855,7 @@ var Toggle = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
 // src/components/AdsToggle/index.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var sizeClassName3 = {
   sm: "!h-8 px-[6px] text-sm",
   md: "!h-9 px-md text-sm",
@@ -5255,7 +5873,7 @@ var variantClassName = {
 var AdsToggle = React51.forwardRef(({ children, className, size = "md", variant = "default", ...props }, ref) => {
   const childCount = React51.Children.count(children);
   const isIconOnly = childCount === 1 && React51.isValidElement(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Toggle,
     {
       className: cn(
@@ -5279,8 +5897,8 @@ var React53 = __toESM(require("react"), 1);
 // src/primitives/toggle-group.tsx
 var React52 = __toESM(require("react"), 1);
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var ToggleGroup = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var ToggleGroup = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
   ToggleGroupPrimitive.Root,
   {
     className: cn("inline-flex items-center justify-start", className),
@@ -5289,7 +5907,7 @@ var ToggleGroup = React52.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var ToggleGroupItem = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
   ToggleGroupPrimitive.Item,
   {
     className: cn(
@@ -5303,7 +5921,7 @@ var ToggleGroupItem = React52.forwardRef(({ className, ...props }, ref) => /* @_
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/components/AdsToggleGroup/index.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var sizeClassName4 = {
   sm: "h-8 min-w-7 px-[6px] text-sm",
   md: "h-9 min-w-[34px] px-md text-sm",
@@ -5322,7 +5940,7 @@ var AdsToggleGroup = React53.forwardRef(
     size = "md",
     variant = "default",
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AdsToggleGroupContext.Provider, { value: { orientation, size, variant }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(AdsToggleGroupContext.Provider, { value: { orientation, size, variant }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     ToggleGroup,
     {
       className: cn(
@@ -5343,7 +5961,7 @@ var AdsToggleGroupItem = React53.forwardRef(({ className, size, variant, ...prop
   const resolvedOrientation = context?.orientation ?? "horizontal";
   const resolvedSize = size ?? context?.size ?? "md";
   const resolvedVariant = variant ?? context?.variant ?? "default";
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     ToggleGroupItem,
     {
       className: cn(
@@ -5362,7 +5980,7 @@ AdsToggleGroupItem.displayName = "AdsToggleGroupItem";
 
 // src/components/AdsTextarea/index.tsx
 var React54 = __toESM(require("react"), 1);
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var textareaBaseClassName = "w-full rounded-radius-md border border-border bg-card px-md py-md text-base leading-6 shadow-[0px_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[var(--muted-foreground)] focus-visible:border-border-focus focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(161,161,161,0.5)] focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50";
 var AdsTextarea = React54.forwardRef(
   ({
@@ -5383,12 +6001,12 @@ var AdsTextarea = React54.forwardRef(
       helperText,
       id
     });
-    const helperNode = helperText ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AdsFieldDescription, { id: description.helperId, children: helperText }) : null;
-    const errorNode = errorText ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AdsFieldError, { id: description.errorId, children: errorText }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(AdsFieldItem, { children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AdsFieldLabel, { htmlFor: description.inputId, children: label }) : null,
+    const helperNode = helperText ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AdsFieldDescription, { id: description.helperId, children: helperText }) : null;
+    const errorNode = errorText ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AdsFieldError, { id: description.errorId, children: errorText }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(AdsFieldItem, { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AdsFieldLabel, { htmlFor: description.inputId, children: label }) : null,
       descriptionPlacement === "above" ? helperNode : null,
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         Textarea,
         {
           "aria-describedby": description.describedBy,
@@ -5406,7 +6024,7 @@ var AdsTextarea = React54.forwardRef(
           ...props
         }
       ),
-      action ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-full [&>*]:w-full", children: action }) : null,
+      action ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-full [&>*]:w-full", children: action }) : null,
       descriptionPlacement === "below" ? helperNode : null,
       errorNode
     ] });
@@ -5420,12 +6038,12 @@ var React56 = __toESM(require("react"), 1);
 // src/primitives/tooltip.tsx
 var React55 = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipArrow = TooltipPrimitive.Arrow;
-var TooltipContent = React55.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+var TooltipContent = React55.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
   TooltipPrimitive.Content,
   {
     className: cn(
@@ -5440,12 +6058,12 @@ var TooltipContent = React55.forwardRef(({ className, sideOffset = 4, ...props }
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/AdsTooltip/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var tooltipContentClassName = "z-50 rounded-[6px] border-0 bg-[#844fff] px-3 py-2 text-sm font-normal leading-5 text-[#fdfdfd] shadow-[0px_8px_24px_rgba(0,0,0,0.22)]";
 var AdsTooltipProvider = TooltipProvider;
 var AdsTooltip = Tooltip;
 var AdsTooltipTrigger = TooltipTrigger;
-var AdsTooltipContent = React56.forwardRef(({ align = "center", className, sideOffset = 10, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+var AdsTooltipContent = React56.forwardRef(({ align = "center", className, sideOffset = 10, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
   TooltipContent,
   {
     align,
@@ -5456,7 +6074,7 @@ var AdsTooltipContent = React56.forwardRef(({ align = "center", className, sideO
   }
 ));
 AdsTooltipContent.displayName = "AdsTooltipContent";
-var AdsTooltipArrow = React56.forwardRef(({ className, height = 5, width = 10, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+var AdsTooltipArrow = React56.forwardRef(({ className, height = 5, width = 10, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
   TooltipArrow,
   {
     className: cn("fill-[#844fff]", className),
@@ -5470,15 +6088,15 @@ AdsTooltipArrow.displayName = "AdsTooltipArrow";
 
 // src/components/AdsToast/index.tsx
 var React57 = __toESM(require("react"), 1);
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 var import_sonner = require("sonner");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var adsToastIconMap = {
-  success: import_lucide_react17.CircleCheck,
-  info: import_lucide_react17.Info,
-  warning: import_lucide_react17.TriangleAlert,
-  error: import_lucide_react17.OctagonX,
-  loading: import_lucide_react17.LoaderCircle
+  success: import_lucide_react18.CircleCheck,
+  info: import_lucide_react18.Info,
+  warning: import_lucide_react18.TriangleAlert,
+  error: import_lucide_react18.OctagonX,
+  loading: import_lucide_react18.LoaderCircle
 };
 function resolveToastIcon(intent, icon) {
   if (icon) {
@@ -5488,7 +6106,7 @@ function resolveToastIcon(intent, icon) {
     return null;
   }
   const Icon2 = adsToastIconMap[intent];
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Icon2,
     {
       "aria-hidden": true,
@@ -5512,7 +6130,7 @@ var AdsToast = React57.forwardRef(
     ...props
   }, ref) => {
     const resolvedIcon = resolveToastIcon(intent, icon);
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       "div",
       {
         className: cn(
@@ -5527,8 +6145,8 @@ var AdsToast = React57.forwardRef(
         ...props,
         children: [
           resolvedIcon,
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "p",
               {
                 className: cn(
@@ -5538,7 +6156,7 @@ var AdsToast = React57.forwardRef(
                 children: title
               }
             ),
-            description ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "p",
               {
                 className: cn(
@@ -5549,7 +6167,7 @@ var AdsToast = React57.forwardRef(
               }
             ) : null
           ] }),
-          action ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          action ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             AdsButton,
             {
               className: "shrink-0 rounded-radius-lg",
@@ -5575,7 +6193,7 @@ function AdsToaster({
   ...props
 }) {
   const { messages } = useAdsI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     import_sonner.Toaster,
     {
       closeButton: false,
@@ -5593,7 +6211,7 @@ function AdsToaster({
   );
 }
 function toStageNode(intent, title, options) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     AdsToast,
     {
       action: options?.action,
@@ -5607,7 +6225,7 @@ function toStageNode(intent, title, options) {
 function showAdsToast(intent, title, options) {
   const { action, description, icon, ...toastOptions } = options ?? {};
   return import_sonner.toast.custom(
-    (id) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    (id) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       AdsToast,
       {
         action: action ? {
@@ -5663,15 +6281,15 @@ var AdsToastManager = Object.assign(
 // src/components/AdsDialog/index.tsx
 var React58 = __toESM(require("react"), 1);
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var overlayClassName2 = "fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
 var contentClassName2 = "fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-[423px] -translate-x-1/2 -translate-y-1/2 gap-lg rounded-radius-md border border-border bg-card p-xl shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]";
 var closeButtonClassName = "absolute right-xl top-xl inline-flex h-6 w-6 items-center justify-center rounded-sm opacity-80 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:pointer-events-none";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var DialogOverlay = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   DialogPrimitive.Overlay,
   {
     className: cn(overlayClassName2, className),
@@ -5680,7 +6298,7 @@ var DialogOverlay = React58.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = "DialogOverlay";
-var DialogClose = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var DialogClose = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   DialogPrimitive.Close,
   {
     className: cn(
@@ -5696,9 +6314,9 @@ var DialogContent = React58.forwardRef(
   ({ children, className, closeLabel, hideCloseButton = false, ...props }, ref) => {
     const { messages } = useAdsI18n();
     const resolvedCloseLabel = closeLabel ?? messages.dialog.close;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(DialogPortal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DialogOverlay, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(DialogPortal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogOverlay, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
         DialogPrimitive.Content,
         {
           className: cn(
@@ -5710,14 +6328,14 @@ var DialogContent = React58.forwardRef(
           ...props,
           children: [
             children,
-            !hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+            !hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
               DialogPrimitive.Close,
               {
                 "aria-label": resolvedCloseLabel,
                 className: cn(closeButtonClassName, adsTextColorClassName.card),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react18.X, { "aria-hidden": true, className: "h-4 w-4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "sr-only", children: resolvedCloseLabel })
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react19.X, { "aria-hidden": true, className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "sr-only", children: resolvedCloseLabel })
                 ]
               }
             ) : null
@@ -5729,7 +6347,7 @@ var DialogContent = React58.forwardRef(
 );
 DialogContent.displayName = "DialogContent";
 var DialogHeader = React58.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
       className: cn("flex flex-col gap-sm pr-8 text-left", className),
@@ -5740,7 +6358,7 @@ var DialogHeader = React58.forwardRef(
 );
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = React58.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
       className: cn(
@@ -5753,7 +6371,7 @@ var DialogFooter = React58.forwardRef(
   )
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var DialogTitle = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   DialogPrimitive.Title,
   {
     className: cn(
@@ -5766,7 +6384,7 @@ var DialogTitle = React58.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var DialogDescription = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   DialogPrimitive.Description,
   {
     className: cn("text-sm leading-5", adsTextColorClassName.muted, className),
@@ -5786,6 +6404,105 @@ var AdsDialogFooter = DialogFooter;
 var AdsDialogTitle = DialogTitle;
 var AdsDialogDescription = DialogDescription;
 
+// src/components/AdsMasonry/index.tsx
+var import_masonic = require("masonic");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var DEFAULT_COLUMN_WIDTH = 240;
+var DEFAULT_GAP = 16;
+var DEFAULT_ITEM_HEIGHT_ESTIMATE = 280;
+var DEFAULT_LOADING_ITEM_COUNT = 8;
+var DEFAULT_MAX_COLUMN_COUNT = 4;
+var LOADING_HEIGHT_PATTERN = [220, 280, 240, 320, 260, 300];
+function AdsMasonry({
+  items,
+  renderItem,
+  layoutKey,
+  getItemKey,
+  columnWidth = DEFAULT_COLUMN_WIDTH,
+  maxColumnCount = DEFAULT_MAX_COLUMN_COUNT,
+  gap = DEFAULT_GAP,
+  itemHeightEstimate = DEFAULT_ITEM_HEIGHT_ESTIMATE,
+  overscanBy,
+  scrollFps,
+  ssrWidth,
+  ssrHeight,
+  emptyState,
+  loading = false,
+  loadingItemCount = DEFAULT_LOADING_ITEM_COUNT,
+  className,
+  itemClassName,
+  classNames,
+  onRender
+}) {
+  const rootClassName = cn("w-full", classNames?.root, className);
+  if (loading) {
+    const skeletonItems = Array.from(
+      { length: loadingItemCount },
+      (_, index) => index
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "div",
+      {
+        className: cn(
+          "grid gap-4 sm:grid-cols-2 xl:grid-cols-3",
+          rootClassName
+        ),
+        "data-slot": "ads-masonry",
+        children: skeletonItems.map((index) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          AdsSkeleton,
+          {
+            className: cn("w-full rounded-radius-lg", classNames?.skeleton),
+            "data-slot": "ads-masonry-skeleton",
+            "data-testid": "ads-masonry-skeleton",
+            style: {
+              height: `${LOADING_HEIGHT_PATTERN[index % LOADING_HEIGHT_PATTERN.length]}px`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+  if (items.length === 0) {
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "div",
+      {
+        className: cn(rootClassName, classNames?.empty),
+        "data-slot": "ads-masonry-empty",
+        children: emptyState
+      }
+    ) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    import_masonic.Masonry,
+    {
+      className: rootClassName,
+      columnGutter: gap,
+      columnWidth,
+      itemHeightEstimate,
+      itemKey: getItemKey,
+      items,
+      maxColumnCount,
+      onRender,
+      overscanBy,
+      render: ({ data, index, width }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        "div",
+        {
+          className: cn("pb-0", classNames?.item, itemClassName),
+          "data-slot": "ads-masonry-item",
+          children: renderItem(data, { index, width })
+        }
+      ),
+      role: "list",
+      rowGutter: gap,
+      scrollFps,
+      ssrHeight,
+      ssrWidth
+    },
+    layoutKey
+  );
+}
+
 // src/tokens/designTokens.ts
 var designTokens = {
   background: "#151619",
@@ -5884,6 +6601,7 @@ var designTokens = {
   AdsCheckbox,
   AdsDataPagination,
   AdsDataTable,
+  AdsDataTableToolbar,
   AdsDatePicker,
   AdsDateTimePicker,
   AdsDialog,
@@ -5926,6 +6644,7 @@ var designTokens = {
   AdsInputOTPGroup,
   AdsInputOTPSeparator,
   AdsInputOTPSlot,
+  AdsMasonry,
   AdsPagination,
   AdsPaginationContent,
   AdsPaginationEllipsis,
@@ -5992,6 +6711,7 @@ var designTokens = {
   AdsTooltipContent,
   AdsTooltipProvider,
   AdsTooltipTrigger,
+  AdsViewCustomersDataTable,
   adsDefaultMessages,
   designTokens,
   useAdsI18n