@heymantle/litho 0.0.1

package/dist/cjs/components/Table.js

@@ -0,0 +1,1184 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _polarisicons = require("@shopify/polaris-icons");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _Modal = require("../components/Modal");
+var _index = require("../index");
+var _Table = require("../styles/Table");
+var _useIndexResourceState = require("../utilities/useIndexResourceState");
+var _useMounted = require("../utilities/useMounted");
+var _useTableScrollState = /*#__PURE__*/ _interop_require_default(require("../utilities/useTableScrollState"));
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var TableContext = /*#__PURE__*/ (0, _react.createContext)({});
+var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
+/**
+ * @typedef {Object} TableHeading
+ * @property {string|React.ReactNode} title - The title content of the heading.
+ * @property {boolean} [sortable=false] - Whether the column is sortable.
+ * @property {"start" | "end" | "left" | "right" | "center"} [alignment="start"] - Alignment of the heading content.
+ * @property {boolean} [hidden=false] - Whether the heading is hidden.
+ * @property {string|React.ReactNode} [tooltip] - Tooltip content for the heading.
+ * @property {string|React.ReactNode} [tooltipContent] - Alternative tooltip content for the heading.
+ * @property {Function} [onAction] - Callback function when the heading is clicked.
+ */ /**
+ * Table component for displaying data in a customizable, sortable, and scrollable format.
+ *
+ * @param {Object} props - Component props.
+ * @param {Array<TableHeading|string|React.ReactNode>} [props.headings=[]] - Column headings. Can be strings, React nodes, or configuration objects.
+ * @param {"default" | "subdued"} [props.headingStyle="default"] - Style of the heading.
+ * @param {Array<Array<string | React.ReactNode>>} [props.rows=[]] - Table rows with cell content.
+ * @param {string} [props.verticalAlign="middle"] - Vertical alignment ('top', 'middle', 'bottom').
+ * @param {number} [props.fixedFirstColumns=0] - Number of fixed left columns.
+ * @param {number} [props.fixedLastColumns=0] - Number of fixed right columns.
+ * @param {number} [props.initialSortColumnIndex] - Initial sorted column index.
+ * @param {"ascending" | "descending"} [props.defaultSortDirection="ascending"] - Default sort direction.
+ * @param {Function} [props.onSort] - Callback for sorting.
+ * @param {boolean} [props.increasedTableDensity=false] - Whether to reduce padding for higher density.
+ * @param {Array<string | React.ReactNode>} [props.footers=[]] - Footer row content.
+ * @param {number} [props.firstColumnMinWidth] - Minimum width of the first column.
+ * @param {boolean} [props.bordered=false] - Whether to show table borders.
+ * @param {boolean} [props.topBorder=true] - Whether to show a top border.
+ * @param {number} [props.skeletonRows=20] - Number of skeleton rows to render when loading.
+ * @param {string} [props.paginatedSelectAllActionText] - Text for the paginated select all action.
+ * @param {Object} [props.resourceName] - Object containing singular and plural resource names.
+ * @param {string} [props.resourceName.singular] - Singular resource name.
+ * @param {string} [props.resourceName.plural] - Plural resource name.
+ * @param {number} [props.itemCount] - Total number of items in the table.
+ * @param {boolean} [props.selectable=true] - Whether the table is selectable.
+ * @param {Function} [props.onSelectionChange] - Callback for handling selection changes.
+ * @param {boolean} [props.loading=false] - Whether the table is loading.
+ * @returns {React.ReactElement} The rendered Table component.
+ */ function Table() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var tmp = props.headings, _headings = tmp === void 0 ? [] : tmp, _props_headingStyle = props.headingStyle, headingStyle = _props_headingStyle === void 0 ? "default" : _props_headingStyle, _props_stickyHeader = props.stickyHeader, stickyHeader = _props_stickyHeader === void 0 ? true : _props_stickyHeader, _props_rows = props.rows, rows = _props_rows === void 0 ? [] : _props_rows, tmp1 = props.footers, _footers = tmp1 === void 0 ? [] : tmp1, _props_verticalAlign = props.verticalAlign, verticalAlign = _props_verticalAlign === void 0 ? "middle" : _props_verticalAlign, tmp2 = props.fixedFirstColumns, _fixedFirstColumns = tmp2 === void 0 ? 0 : tmp2, _props_fixedLastColumns = props.fixedLastColumns, fixedLastColumns = _props_fixedLastColumns === void 0 ? 0 : _props_fixedLastColumns, initialSortColumnIndex = props.initialSortColumnIndex, _props_defaultSortDirection = props.defaultSortDirection, defaultSortDirection = _props_defaultSortDirection === void 0 ? "ascending" : _props_defaultSortDirection, onSort = props.onSort, _props_increasedTableDensity = props.increasedTableDensity, increasedTableDensity = _props_increasedTableDensity === void 0 ? false : _props_increasedTableDensity, firstColumnMinWidth = props.firstColumnMinWidth, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_topBorder = props.topBorder, topBorder = _props_topBorder === void 0 ? true : _props_topBorder, _props_bulkActions = props.bulkActions, bulkActions = _props_bulkActions === void 0 ? [] : _props_bulkActions, _props_promotedBulkActions = props.promotedBulkActions, promotedBulkActions = _props_promotedBulkActions === void 0 ? [] : _props_promotedBulkActions, emptyState = props.emptyState, _children = props.children, paginatedSelectAllActionText = props.paginatedSelectAllActionText, _props_resourceName = props.resourceName, resourceName = _props_resourceName === void 0 ? {
+        singular: "item",
+        plural: "items"
+    } : _props_resourceName, itemCount = props.itemCount, _props_selectable = props.selectable, selectable = _props_selectable === void 0 ? true : _props_selectable, onSelectionChange = props.onSelectionChange, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, hasMoreItems = props.hasMoreItems, _props_skeletonRows = props.skeletonRows, skeletonRows = _props_skeletonRows === void 0 ? 20 : _props_skeletonRows, _props_noBodyCellPadding = props.noBodyCellPadding, noBodyCellPadding = _props_noBodyCellPadding === void 0 ? false : _props_noBodyCellPadding;
+    var insideModal = (0, _react.useContext)(_Modal.ModalContext);
+    var mounted = (0, _useMounted.useMounted)();
+    var fixedFirstColumns = selectable ? 1 + _fixedFirstColumns : _fixedFirstColumns;
+    var showEmptyState = !loading && itemCount === 0;
+    var showHoverStates = !!_children;
+    var _useState = _sliced_to_array((0, _react.useState)(56), 2), headerHeight = _useState[0], setHeaderHeight = _useState[1];
+    (0, _react.useEffect)(function() {
+        if (mounted) {
+            var root = document.documentElement;
+            var cssValue = getComputedStyle(root).getPropertyValue('--litho-header-height').trim();
+            setHeaderHeight(parseInt(cssValue || 56, 10));
+        }
+    }, [
+        mounted
+    ]);
+    var idValue = (0, _react.useId)();
+    var idRef = (0, _react.useRef)(idValue);
+    var containerRef = (0, _react.useRef)(null);
+    var tableContainerRef = (0, _react.useRef)(null);
+    var _useState1 = _sliced_to_array((0, _react.useState)([]), 2), columnWidths = _useState1[0], setColumnWidths = _useState1[1];
+    var _useState2 = _sliced_to_array((0, _react.useState)([]), 2), rowHeights = _useState2[0], setRowHeights = _useState2[1];
+    var _useState3 = _sliced_to_array((0, _react.useState)(false), 2), canScrollLeft = _useState3[0], setCanScrollLeft = _useState3[1];
+    var _useState4 = _sliced_to_array((0, _react.useState)(false), 2), canScrollRight = _useState4[0], setCanScrollRight = _useState4[1];
+    var _useState5 = _sliced_to_array((0, _react.useState)(false), 2), isHeaderSticky = _useState5[0], setIsHeaderSticky = _useState5[1];
+    var _useState6 = _sliced_to_array((0, _react.useState)({
+        index: initialSortColumnIndex,
+        direction: defaultSortDirection
+    }), 2), sort = _useState6[0], setSort = _useState6[1];
+    var _useState7 = _sliced_to_array((0, _react.useState)({
+        type: _useIndexResourceState.SelectionType.None,
+        resources: []
+    }), 2), selectionState = _useState7[0], setSelectionState = _useState7[1];
+    var renderedRowIdsRef = (0, _react.useRef)(new Set());
+    var registerRow = function(id) {
+        renderedRowIdsRef.current.add(id);
+    };
+    var unregisterRow = function(id) {
+        renderedRowIdsRef.current.delete(id);
+    };
+    var headings = [
+        selectable && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+                checked: [
+                    _useIndexResourceState.SelectionType.Page,
+                    _useIndexResourceState.SelectionType.All
+                ].includes(selectionState.type),
+                disabled: true,
+                className: "opacity-0 pointer-events-none"
+            })
+        }, "select-all-checkbox")
+    ].concat(_to_consumable_array(_headings !== null && _headings !== void 0 ? _headings : [])).filter(Boolean);
+    var footers = (_footers === null || _footers === void 0 ? void 0 : _footers.length) ? [
+        selectable ? "" : null
+    ].concat(_to_consumable_array(_footers)).filter(Boolean) : [];
+    var _headings_map;
+    var cellAlignment = (_headings_map = headings === null || headings === void 0 ? void 0 : headings.map(function(heading) {
+        return (typeof heading === "undefined" ? "undefined" : _type_of(heading)) === "object" && heading.alignment ? heading.alignment : "start";
+    })) !== null && _headings_map !== void 0 ? _headings_map : [];
+    var _headings_map1;
+    var sortable = (_headings_map1 = headings === null || headings === void 0 ? void 0 : headings.map(function(heading) {
+        return (typeof heading === "undefined" ? "undefined" : _type_of(heading)) === "object" && heading.sortable ? heading.sortable : false;
+    })) !== null && _headings_map1 !== void 0 ? _headings_map1 : [];
+    var children = (0, _react.useMemo)(function() {
+        if (_children) return _children;
+        if (!rows || rows.length === 0) return null;
+        return rows.map(function(row, rowIndex) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Row, {
+                position: rowIndex,
+                children: row.map(function(cell, cellIndex) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Cell, {
+                        alignment: cellAlignment[cellIndex] || "start",
+                        children: cell
+                    }, cellIndex);
+                })
+            }, rowIndex);
+        });
+    }, [
+        _children,
+        rows
+    ]);
+    var updateScrollState = (0, _useTableScrollState.default)({
+        loading: loading,
+        idRef: idRef,
+        containerRef: containerRef,
+        tableContainerRef: tableContainerRef,
+        setCanScrollLeft: setCanScrollLeft,
+        setCanScrollRight: setCanScrollRight,
+        setColumnWidths: setColumnWidths,
+        setRowHeights: setRowHeights,
+        setIsHeaderSticky: setIsHeaderSticky,
+        stickyHeader: stickyHeader,
+        children: children,
+        showHoverStates: showHoverStates,
+        insideModal: insideModal,
+        itemCount: itemCount
+    });
+    var setTableRef = (0, _react.useCallback)(function(node) {
+        if (node) {
+            tableContainerRef.current = node;
+            requestAnimationFrame(function() {
+                updateScrollState();
+            });
+        }
+    }, [
+        updateScrollState
+    ]);
+    (0, _react.useEffect)(function() {
+        var renderedRowIds = Array.isArray(renderedRowIdsRef.current) ? renderedRowIdsRef.current : Array.from(renderedRowIdsRef.current || []);
+        var renderedSet = new Set(renderedRowIds);
+        var selectedSet = new Set(selectionState.resources);
+        var matchingValues = _to_consumable_array(renderedSet).filter(function(id) {
+            return selectedSet.has(id);
+        });
+        if (matchingValues.length === 0) {
+            if (!insideModal && tableContainerRef.current) {
+                var rect = tableContainerRef.current.getBoundingClientRect();
+                setIsHeaderSticky(stickyHeader && rect.top <= headerHeight);
+            }
+            if (!selectable) return;
+            setSelectionState({
+                type: _useIndexResourceState.SelectionType.None,
+                resources: []
+            });
+        }
+    }, [
+        children
+    ]);
+    (0, _react.useEffect)(function() {
+        if (loading) {
+            setIsHeaderSticky(false);
+        }
+    }, [
+        loading
+    ]);
+    var getSelectionType = function(selectedResources) {
+        var type = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : _useIndexResourceState.SelectionType.None;
+        if (type === _useIndexResourceState.SelectionType.All) {
+            return _useIndexResourceState.SelectionType.All;
+        }
+        var selectedCount = selectedResources.size;
+        var renderedCount = renderedRowIdsRef.current.size;
+        if (selectedCount === 0) return _useIndexResourceState.SelectionType.None;
+        if (selectedCount < renderedCount) return _useIndexResourceState.SelectionType.Some;
+        return _useIndexResourceState.SelectionType.Page;
+    };
+    var handleSelectionChange = function(type, checked, id) {
+        var selectedResources = new Set(selectionState.resources);
+        switch(type){
+            case _useIndexResourceState.SelectionType.All:
+            case _useIndexResourceState.SelectionType.Page:
+                selectedResources = renderedRowIdsRef.current;
+                break;
+            case _useIndexResourceState.SelectionType.None:
+                selectedResources.clear();
+                break;
+            case _useIndexResourceState.SelectionType.Single:
+                {
+                    if (checked) {
+                        selectedResources.add(id);
+                    } else {
+                        selectedResources.delete(id);
+                    }
+                    break;
+                }
+        }
+        setSelectionState({
+            type: getSelectionType(selectedResources, type),
+            resources: Array.from(selectedResources)
+        });
+        if (onSelectionChange) {
+            onSelectionChange(type, checked, id);
+        }
+    };
+    var handleSort = function(cellIndex) {
+        var newDirection = sort.direction === "ascending" ? "descending" : "ascending";
+        setSort({
+            index: cellIndex,
+            direction: newDirection
+        });
+        onSort(cellIndex, newDirection);
+    };
+    var renderHeadings = (0, _react.useCallback)(function(param) {
+        var _param_fixed = param.fixed, fixed = _param_fixed === void 0 ? false : _param_fixed, _param_hidden = param.hidden, hidden = _param_hidden === void 0 ? false : _param_hidden, _param_columnsToRender = param.columnsToRender, columnsToRender = _param_columnsToRender === void 0 ? undefined : _param_columnsToRender, _param_reverseColumns = param.reverseColumns, reverseColumns = _param_reverseColumns === void 0 ? false : _param_reverseColumns, _param_hideCellsOnMobile = param.hideCellsOnMobile, hideCellsOnMobile = _param_hideCellsOnMobile === void 0 ? false : _param_hideCellsOnMobile;
+        var _tableContainerRef_current;
+        var Container = hidden ? "thead" : "div";
+        var InnerContainer = hidden ? "tr" : "div";
+        var HeadingCell = hidden ? "th" : "div";
+        var tableRect = (_tableContainerRef_current = tableContainerRef.current) === null || _tableContainerRef_current === void 0 ? void 0 : _tableContainerRef_current.getBoundingClientRect();
+        var left = tableRect === null || tableRect === void 0 ? void 0 : tableRect.left;
+        var right = window.innerWidth - (tableRect === null || tableRect === void 0 ? void 0 : tableRect.right);
+        var containerStyles = {};
+        var innerContainerStyles = {};
+        if (!hidden && isHeaderSticky && !fixed) {
+            var _tableContainerRef_current1, _tableContainerRef_current2, _tableContainerRef_current3;
+            containerStyles = {
+                left: "".concat(left, "px"),
+                right: "".concat(right, "px")
+            };
+            innerContainerStyles = {
+                left: isNaN((_tableContainerRef_current1 = tableContainerRef.current) === null || _tableContainerRef_current1 === void 0 ? void 0 : _tableContainerRef_current1.scrollLeft) ? 0 : ((_tableContainerRef_current2 = tableContainerRef.current) === null || _tableContainerRef_current2 === void 0 ? void 0 : _tableContainerRef_current2.scrollLeft) * -1,
+                width: (_tableContainerRef_current3 = tableContainerRef.current) === null || _tableContainerRef_current3 === void 0 ? void 0 : _tableContainerRef_current3.scrollWidth
+            };
+        }
+        if (!hidden && isHeaderSticky && fixed && !reverseColumns) {
+            containerStyles = {
+                left: "".concat(left, "px")
+            };
+        }
+        if (!hidden && isHeaderSticky && fixed && reverseColumns) {
+            containerStyles = {
+                right: "".concat(right, "px")
+            };
+        }
+        var headingCells = reverseColumns ? headings.slice(-columnsToRender) : headings.slice(0, columnsToRender);
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(Container, {
+            className: _Table.styles.headingContainerStyles({
+                hidden: hidden,
+                sticky: isHeaderSticky,
+                fixed: fixed,
+                reverseColumns: reverseColumns
+            }),
+            style: containerStyles,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(InnerContainer, {
+                className: _Table.styles.headingInnerContainerStyles({
+                    hidden: hidden,
+                    sticky: isHeaderSticky,
+                    fixed: fixed,
+                    reverseColumns: reverseColumns,
+                    canScrollRight: canScrollRight,
+                    canScrollLeft: canScrollLeft
+                }),
+                style: innerContainerStyles,
+                children: headingCells.map(function(heading, cellIndex) {
+                    var indexAdjusted = reverseColumns ? headings.length - columnsToRender + cellIndex : cellIndex;
+                    var hideCell = hideCellsOnMobile && cellIndex > 0;
+                    var width = columnWidths[indexAdjusted];
+                    var minWidth = firstColumnMinWidth && cellIndex === 0 && !reverseColumns ? firstColumnMinWidth : undefined;
+                    var alignment = cellAlignment[indexAdjusted];
+                    var isSortable = sortable && sortable.length > 0 && sortable[indexAdjusted];
+                    var sortIndex = selectable ? indexAdjusted - 1 : indexAdjusted;
+                    var sortContent = isSortable ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "min-h-5 ".concat(sort.index === sortIndex ? "opacity-100" : "opacity-0 group-hover:opacity-100"),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                            source: sort.direction === "ascending" ? _polarisicons.SortAscendingMajor : _polarisicons.SortDescendingMajor
+                        })
+                    }) : null;
+                    var headingValue = /*#__PURE__*/ _react.default.isValidElement(heading) || typeof heading === "string" ? heading : heading.title;
+                    var isInteractive = isSortable || heading.onAction;
+                    var handleClick = function() {
+                        if (isSortable) handleSort(sortIndex);
+                        else if (heading.onAction) heading.onAction();
+                    };
+                    var labelContent = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: _Table.styles.headingLabelStyles({
+                            alignment: alignment,
+                            sortable: !!isSortable,
+                            interactive: !!isInteractive
+                        }),
+                        onClick: isInteractive ? handleClick : undefined,
+                        children: [
+                            [
+                                "right",
+                                "end"
+                            ].includes(alignment) && sortContent,
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                children: headingValue
+                            }),
+                            [
+                                "left",
+                                "start",
+                                "center"
+                            ].includes(alignment) && sortContent
+                        ]
+                    });
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(HeadingCell, {
+                        className: _Table.styles.headingStyles({
+                            hidden: hideCell,
+                            alignment: alignment,
+                            verticalAlign: verticalAlign,
+                            tableIsSelectable: selectable,
+                            headingStyle: headingStyle
+                        }),
+                        style: {
+                            width: width,
+                            minWidth: minWidth
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: _Table.styles.headingLabelContainerStyles({
+                                alignment: alignment
+                            }),
+                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                                content: heading.tooltip || heading.tooltipContent,
+                                preferredPosition: "above",
+                                children: labelContent
+                            }) : labelContent
+                        })
+                    }, cellIndex);
+                })
+            })
+        });
+    }, [
+        headings,
+        isHeaderSticky,
+        fixedFirstColumns,
+        fixedLastColumns
+    ]);
+    var renderTableRowChildren = function(param) {
+        var children = param.children, _param_reverseColumns = param.reverseColumns, reverseColumns = _param_reverseColumns === void 0 ? false : _param_reverseColumns, _columnsToRender = param.columnsToRender;
+        var columnsToRender = _columnsToRender && selectable && !reverseColumns ? _columnsToRender - 1 : _columnsToRender;
+        return _react.Children.map(children, function(child) {
+            if (!/*#__PURE__*/ (0, _react.isValidElement)(child)) return child;
+            var type = child.type, props = child.props;
+            if (type.displayName === "Table.Row") {
+                var allChildren = _react.Children.toArray(props.children);
+                if (!allChildren.length) return child;
+                var trimmedChildren = typeof columnsToRender === "number" ? reverseColumns ? allChildren.slice(-columnsToRender) : allChildren.slice(0, columnsToRender) : allChildren;
+                return trimmedChildren.length !== allChildren.length ? /*#__PURE__*/ (0, _react.cloneElement)(child, {
+                    children: trimmedChildren
+                }) : child;
+            }
+            if (typeof type === "function") {
+                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
+                    columnsToRender: columnsToRender,
+                    reverseColumns: reverseColumns,
+                    rowHeights: rowHeights
+                });
+            }
+            if (props.children) {
+                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
+                    children: renderTableRowChildren({
+                        children: props.children,
+                        reverseColumns: reverseColumns,
+                        columnsToRender: columnsToRender
+                    })
+                });
+            }
+            return child;
+        });
+    };
+    var renderFooters = (0, _react.useCallback)(function(param) {
+        var _param_fixed = param.fixed, fixed = _param_fixed === void 0 ? false : _param_fixed, columnsToRender = param.columnsToRender, _param_reverseColumns = param.reverseColumns, reverseColumns = _param_reverseColumns === void 0 ? false : _param_reverseColumns;
+        var footerRowHeight = function() {
+            var _tableContainerRef_current_querySelector;
+            if (!fixed || !(tableContainerRef === null || tableContainerRef === void 0 ? void 0 : tableContainerRef.current)) return undefined;
+            return (_tableContainerRef_current_querySelector = tableContainerRef.current.querySelector("tfoot tr")) === null || _tableContainerRef_current_querySelector === void 0 ? void 0 : _tableContainerRef_current_querySelector.getBoundingClientRect().height;
+        };
+        var footerCells = function() {
+            if (!columnsToRender) return footers;
+            return reverseColumns ? footers.slice(-columnsToRender) : footers.slice(0, columnsToRender);
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("tfoot", {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                className: _Table.styles.rowStyles(),
+                style: fixed ? {
+                    height: footerRowHeight
+                } : {},
+                children: footerCells().map(function(total, cellIndex) {
+                    var indexAdjusted = reverseColumns ? footers.length - columnsToRender + cellIndex : cellIndex;
+                    var width = fixed ? columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths[indexAdjusted] : undefined;
+                    var minWidth = firstColumnMinWidth && cellIndex === 0 && !reverseColumns ? firstColumnMinWidth : undefined;
+                    var alignment = cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment[indexAdjusted];
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
+                        className: _Table.styles.footerCellStyles({
+                            alignment: alignment,
+                            verticalAlign: verticalAlign
+                        }),
+                        style: {
+                            width: width,
+                            minWidth: minWidth
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "min-h-5",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                children: total
+                            })
+                        })
+                    }, "footer-".concat(cellIndex));
+                })
+            })
+        });
+    }, [
+        footers,
+        tableContainerRef,
+        columnWidths,
+        firstColumnMinWidth,
+        cellAlignment
+    ]);
+    var renderTable = (0, _react.useCallback)(function() {
+        var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+        var ref = props.ref, _props_classes = props.classes, classes = _props_classes === void 0 ? "relative overflow-x-auto no-scrollbar" : _props_classes, _props_fixed = props.fixed, fixed = _props_fixed === void 0 ? false : _props_fixed, columnsToRender = props.columnsToRender, _props_reverseColumns = props.reverseColumns, reverseColumns = _props_reverseColumns === void 0 ? false : _props_reverseColumns, _props_hideCellsOnMobile = props.hideCellsOnMobile, hideCellsOnMobile = _props_hideCellsOnMobile === void 0 ? false : _props_hideCellsOnMobile;
+        var hasHeadings = (headings === null || headings === void 0 ? void 0 : headings.length) > 0;
+        var hasFooters = (footers === null || footers === void 0 ? void 0 : footers.length) > 0;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: classes,
+            ref: ref,
+            children: [
+                hasHeadings && renderHeadings({
+                    fixed: fixed,
+                    columnsToRender: columnsToRender,
+                    reverseColumns: reverseColumns,
+                    hideCellsOnMobile: hideCellsOnMobile
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(TableWrapperContext.Provider, {
+                    value: {
+                        columnsToRender: columnsToRender,
+                        reverseColumns: reverseColumns,
+                        hideCellsOnMobile: hideCellsOnMobile
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("table", {
+                        className: _Table.styles.tableStyles(),
+                        children: [
+                            hasHeadings && renderHeadings({
+                                hidden: true,
+                                columnsToRender: columnsToRender,
+                                reverseColumns: reverseColumns,
+                                hideCellsOnMobile: hideCellsOnMobile
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("tbody", {
+                                children: renderTableRowChildren({
+                                    children: children,
+                                    columnsToRender: columnsToRender,
+                                    reverseColumns: reverseColumns
+                                })
+                            }),
+                            hasFooters && renderFooters({
+                                fixed: fixed,
+                                columnsToRender: columnsToRender,
+                                reverseColumns: reverseColumns
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    }, [
+        children,
+        headings,
+        footers
+    ]);
+    var renderLoadingAndSelectionBar = (0, _react.useCallback)(function() {
+        var type = selectionState.type, resources = selectionState.resources;
+        var isSelecting = type !== _useIndexResourceState.SelectionType.None;
+        var isAllSelected = type === _useIndexResourceState.SelectionType.All;
+        var isSomeSelected = type === _useIndexResourceState.SelectionType.Some;
+        var isPageSelected = type === _useIndexResourceState.SelectionType.Page;
+        var handleCheckboxChange = function() {
+            var newType = isPageSelected || isAllSelected ? _useIndexResourceState.SelectionType.None : _useIndexResourceState.SelectionType.Page;
+            handleSelectionChange(newType);
+        };
+        var renderSelectionSummary = function() {
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "text-sm font-medium",
+                        children: isAllSelected ? "All ".concat(itemCount, " ").concat(itemCount === 1 ? resourceName.singular : resourceName.plural, " selected") : "".concat(resources.length, " selected")
+                    }),
+                    hasMoreItems && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        onClick: function() {
+                            return handleSelectionChange(isAllSelected ? _useIndexResourceState.SelectionType.Page : _useIndexResourceState.SelectionType.All, true);
+                        },
+                        className: "rounded-md block text-sm font-medium cursor-pointer px-2 py-1 hover",
+                        children: isAllSelected ? "Undo" : paginatedSelectAllActionText || "Select all"
+                    })
+                ]
+            });
+        };
+        if (loading) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: _Table.styles.stickyHeaderContainerStyles({
+                    fullWidth: true,
+                    sticky: false,
+                    checked: false
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "flex items-center gap-5 h-full min-h-9 pl-4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                            size: "small"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                            color: "subdued",
+                            fontWeight: "normal",
+                            children: [
+                                "Loading ",
+                                resourceName.plural,
+                                "..."
+                            ]
+                        })
+                    ]
+                })
+            });
+        }
+        if (!selectable) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: _Table.styles.stickyHeaderContainerStyles({
+                fullWidth: isSelecting,
+                sticky: isHeaderSticky,
+                checked: isSelecting
+            }),
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: _Table.styles.selectBarStyles({
+                    showSelectActions: resources.length > 0,
+                    sticky: isHeaderSticky,
+                    headingStyle: headingStyle
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: _Table.styles.selectBarInnerStyles({
+                        sticky: isHeaderSticky
+                    }),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+                            checked: isPageSelected || isAllSelected,
+                            indeterminate: isSomeSelected,
+                            disabled: showEmptyState,
+                            onChange: handleCheckboxChange
+                        }),
+                        resources.length > 0 && renderSelectionSummary()
+                    ]
+                })
+            })
+        });
+    }, [
+        loading,
+        selectionState,
+        showEmptyState,
+        itemCount,
+        hasMoreItems,
+        isHeaderSticky
+    ]);
+    var hasFixedLeftColumns = !loading && !showEmptyState && fixedFirstColumns > 0;
+    var hasFixedRightColumns = !loading && !showEmptyState && fixedLastColumns > 0;
+    return !mounted ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)(TableContext.Provider, {
+        value: {
+            selectable: selectable,
+            onSelectionChange: handleSelectionChange,
+            selectionState: selectionState,
+            rowHeights: rowHeights,
+            renderedRowIdsRef: renderedRowIdsRef,
+            registerRow: registerRow,
+            unregisterRow: unregisterRow,
+            increasedTableDensity: increasedTableDensity,
+            tableContainerRef: tableContainerRef,
+            cellAlignment: cellAlignment,
+            noBodyCellPadding: noBodyCellPadding
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            "data-id": idRef.current,
+            className: _Table.styles.containerStyles({
+                bordered: bordered,
+                topBorder: topBorder
+            }),
+            ref: containerRef,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "relative overflow-hidden",
+                    children: [
+                        loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "pt-9",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("table", {
+                                className: _Table.styles.tableStyles(),
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("thead", {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
+                                                colSpan: headings.length,
+                                                children: renderLoadingAndSelectionBar()
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("tbody", {
+                                        children: _to_consumable_array(Array(skeletonRows)).map(function(_, index) {
+                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.SkeletonRow, {}, index);
+                                        })
+                                    })
+                                ]
+                            })
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                !showEmptyState && renderLoadingAndSelectionBar(),
+                                showEmptyState ? null : renderTable({
+                                    ref: setTableRef
+                                })
+                            ]
+                        }),
+                        hasFixedLeftColumns ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: _Table.styles.fixedColumnsStyles({
+                                firstColumns: true,
+                                selectable: selectable,
+                                sticky: isHeaderSticky,
+                                canScrollLeft: canScrollLeft
+                            }),
+                            children: renderTable({
+                                classes: "relative overflow-hidden",
+                                fixed: true,
+                                columnsToRender: fixedFirstColumns,
+                                hideCellsOnMobile: true
+                            })
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: _Table.styles.overflowShadowStyles({
+                                firstColumns: true,
+                                canScrollLeft: canScrollLeft
+                            })
+                        }),
+                        hasFixedRightColumns ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: _Table.styles.fixedColumnsStyles({
+                                firstColumns: false,
+                                sticky: isHeaderSticky,
+                                canScrollRight: canScrollRight
+                            }),
+                            children: renderTable({
+                                classes: "relative overflow-hidden",
+                                fixed: true,
+                                columnsToRender: fixedLastColumns,
+                                reverseColumns: true,
+                                hideCellsOnMobile: true
+                            })
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: _Table.styles.overflowShadowStyles({
+                                firstColumns: false,
+                                canScrollRight: canScrollRight
+                            })
+                        }),
+                        showEmptyState ? emptyState ? emptyState : /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.EmptyState, {
+                            title: "No ".concat(resourceName.plural, " found"),
+                            description: "Try changing the filters or search term"
+                        }) : null
+                    ]
+                }),
+                selectionState.type !== _useIndexResourceState.SelectionType.None && /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.BulkActions, {
+                    bulkActions: bulkActions,
+                    promotedBulkActions: promotedBulkActions
+                })
+            ]
+        })
+    });
+}
+Table.displayName = "Table";
+/**
+ * Represents a row within the Table.
+ * @param {Object} props - Row properties.
+ * @param {string} props.id - Unique row identifier.
+ * @param {boolean} props.selected - Whether the row is selected.
+ * @param {Function} props.onClick - Click handler.
+ * @param {number} props.position - Position index.
+ * @param {React.ReactNode} props.children - Row content.
+ * @returns {React.ReactElement} The rendered Table.Row component.
+ */ function Row(_param) {
+    var id = _param.id, selected = _param.selected, onClick = _param.onClick, position = _param.position, children = _param.children, rest = _object_without_properties(_param, [
+        "id",
+        "selected",
+        "onClick",
+        "position",
+        "children"
+    ]);
+    var _useContext = (0, _react.useContext)(TableContext), onSelectionChange = _useContext.onSelectionChange, selectable = _useContext.selectable, selectionState = _useContext.selectionState, rowHeights = _useContext.rowHeights, registerRow = _useContext.registerRow, unregisterRow = _useContext.unregisterRow;
+    var _useContext1 = (0, _react.useContext)(TableWrapperContext), columnsToRender = _useContext1.columnsToRender, reverseColumns = _useContext1.reverseColumns;
+    var isSelected = (0, _react.useMemo)(function() {
+        return selected || selectionState.resources.includes(id);
+    }, [
+        selected,
+        selectionState.resources,
+        id
+    ]);
+    var visibleChildren = (0, _react.useMemo)(function() {
+        if (!columnsToRender) return children;
+        var sliceIndex = selectable ? columnsToRender - 1 : columnsToRender;
+        return reverseColumns ? children.slice(-columnsToRender) : children.slice(0, sliceIndex);
+    }, [
+        children,
+        columnsToRender,
+        selectable,
+        reverseColumns
+    ]);
+    var rowIndexRef = (0, _react.useRef)(null);
+    var setRowRef = (0, _react.useCallback)(function(node) {
+        var _node_parentNode;
+        if (!node || rowIndexRef.current !== null) return;
+        if (((_node_parentNode = node.parentNode) === null || _node_parentNode === void 0 ? void 0 : _node_parentNode.tagName) === "TBODY") {
+            rowIndexRef.current = node.rowIndex;
+        }
+    }, []);
+    var _rowIndexRef_current;
+    var rowIndex = (_rowIndexRef_current = rowIndexRef.current) !== null && _rowIndexRef_current !== void 0 ? _rowIndexRef_current : -1;
+    (0, _react.useEffect)(function() {
+        if (!selectable) return;
+        registerRow(id);
+        return function() {
+            return unregisterRow(id);
+        };
+    }, [
+        id,
+        registerRow,
+        unregisterRow
+    ]);
+    var handleRowClick = function(e) {
+        var classList = e.target.classList;
+        if (classList.contains("Litho-Checkbox__Control") || classList.contains("Litho-Checkbox__Input")) {
+            return;
+        }
+        if (selectionState.resources.length > 0) {
+            onSelectionChange(_useIndexResourceState.SelectionType.Single, !isSelected, id);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleCheckboxSelectionChange = (0, _react.useCallback)(function() {
+        if (onSelectionChange) {
+            onSelectionChange(_useIndexResourceState.SelectionType.Single, !isSelected, id);
+        }
+    }, [
+        onSelectionChange,
+        isSelected,
+        id
+    ]);
+    var interactive = selectable || !!onClick;
+    var dataProps = {};
+    Object.keys(rest).forEach(function(key) {
+        if (key.startsWith('data-')) {
+            dataProps[key] = rest[key];
+        }
+    });
+    var _rowHeights_;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("tr", _object_spread_props(_object_spread({
+        ref: setRowRef,
+        id: id,
+        onClick: handleRowClick,
+        "data-position": position || rowIndex ? rowIndex - 1 : undefined,
+        "data-interactive": interactive,
+        className: _Table.styles.rowStyles({
+            selected: isSelected,
+            interactive: interactive
+        }),
+        style: {
+            height: (_rowHeights_ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[rowIndex - 1]) !== null && _rowHeights_ !== void 0 ? _rowHeights_ : rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[position]
+        }
+    }, dataProps), {
+        children: [
+            selectable && !reverseColumns && /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Cell, {
+                selectionCell: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+                    checked: isSelected,
+                    onChange: handleCheckboxSelectionChange
+                })
+            }),
+            visibleChildren
+        ]
+    }));
+}
+Table.Row = Row;
+Table.Row.displayName = "Table.Row";
+/**
+ * Represents a cell within a table row.
+ * @param {Object} props - Cell properties.
+ * @param {string} [props.alignment="start"] - Text alignment.
+ * @param {boolean} [props.selectionCell=false] - Whether this is a selection cell.
+ * @param {React.ReactNode} props.children - Cell content.
+ * @returns {React.ReactElement} The rendered Table.Cell component.
+ */ function Cell(param) {
+    var tmp = param.alignment, _alignment = tmp === void 0 ? "start" : tmp, children = param.children, _param_selectionCell = param.selectionCell, selectionCell = _param_selectionCell === void 0 ? false : _param_selectionCell;
+    var _useContext = (0, _react.useContext)(TableContext), cellAlignment = _useContext.cellAlignment, increasedTableDensity = _useContext.increasedTableDensity, selectable = _useContext.selectable, noBodyCellPadding = _useContext.noBodyCellPadding;
+    var _useContext1 = (0, _react.useContext)(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender;
+    var columnCount = (cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment.length) || 0;
+    var cellIndexRef = (0, _react.useRef)(null);
+    var setCellRef = (0, _react.useCallback)(function(node) {
+        if (!node || cellIndexRef.current !== null) return;
+        var parentRow = node.parentNode;
+        if ((parentRow === null || parentRow === void 0 ? void 0 : parentRow.tagName) === "TR") {
+            var totalCells = parentRow.children.length;
+            var index = node.cellIndex;
+            cellIndexRef.current = reverseColumns ? totalCells - columnsToRender + index - (totalCells - columnCount) : index;
+        }
+    }, [
+        reverseColumns,
+        columnsToRender,
+        columnCount
+    ]);
+    var _cellIndexRef_current;
+    var cellIndex = (_cellIndexRef_current = cellIndexRef.current) !== null && _cellIndexRef_current !== void 0 ? _cellIndexRef_current : -1;
+    var alignment = (cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment[cellIndex]) || _alignment;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
+        ref: setCellRef,
+        className: _Table.styles.cellStyles({
+            alignment: alignment,
+            selectionCell: selectionCell,
+            increasedTableDensity: increasedTableDensity,
+            hidden: hideCellsOnMobile && !selectionCell,
+            tableIsSelectable: selectable,
+            noBodyCellPadding: noBodyCellPadding
+        }),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: _Table.styles.cellContentStyles({
+                alignment: alignment
+            }),
+            children: children
+        })
+    });
+}
+Table.Cell = Cell;
+Table.Cell.displayName = "Table.Cell";
+/**
+ * Footer component for the Table.
+ * Displays pagination controls and optionally the total result count.
+ *
+ * @param {Object} props - The component props.
+ * @param {boolean} props.hasNextPage - Whether there is a next page.
+ * @param {boolean} props.hasPreviousPage - Whether there is a previous page.
+ * @param {Function} props.onNext - Callback function for the next page action.
+ * @param {Function} props.onPrevious - Callback function for the previous page action.
+ * @param {boolean} [props.showTotalResultCount=false] - Whether to show the total result count.
+ * @param {number} [props.total=0] - The total number of results.
+ * @param {boolean} [props.paddedHalf=false] - Whether to apply half padding.
+ * @returns {JSX.Element|null} The Footer component or null if no pagination is required.
+ */ function Footer(param) {
+    var hasNextPage = param.hasNextPage, hasPreviousPage = param.hasPreviousPage, onNext = param.onNext, onPrevious = param.onPrevious, _param_showTotalResultCount = param.showTotalResultCount, showTotalResultCount = _param_showTotalResultCount === void 0 ? false : _param_showTotalResultCount, _param_total = param.total, total = _param_total === void 0 ? 0 : _param_total, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf;
+    if (!hasNextPage && !hasPreviousPage) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Card.Section, {
+        borderTop: true,
+        paddedHalf: paddedHalf,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "flex justify-start",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Pagination, {
+                    hasPrevious: hasPreviousPage,
+                    hasNext: hasNextPage,
+                    onNext: onNext,
+                    onPrevious: onPrevious
+                }),
+                showTotalResultCount && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                    color: "subdued",
+                    children: [
+                        total,
+                        " ",
+                        total === 1 ? "result" : "results"
+                    ]
+                })
+            ]
+        })
+    });
+}
+Table.Footer = Footer;
+Table.Footer.displayName = "Table.Footer";
+/**
+ * BulkActions component for the Table.
+ * Displays bulk action buttons with optional promoted actions.
+ *
+ * @param {Object} props - The component props.
+ * @param {Array} [props.bulkActions=[]] - List of bulk actions.
+ * @param {Array} [props.promotedBulkActions=[]] - List of promoted bulk actions.
+ * @returns {JSX.Element} The BulkActions component.
+ */ function BulkActions(param) {
+    var _param_bulkActions = param.bulkActions, bulkActions = _param_bulkActions === void 0 ? [] : _param_bulkActions, _param_promotedBulkActions = param.promotedBulkActions, promotedBulkActions = _param_promotedBulkActions === void 0 ? [] : _param_promotedBulkActions;
+    var _useState = _sliced_to_array((0, _react.useState)(null), 2), activeBulkAction = _useState[0], setActiveBulkAction = _useState[1];
+    var handleToggle = function(index) {
+        setActiveBulkAction(activeBulkAction === index ? null : index);
+    };
+    var renderPopover = function(index, title, actions) {
+        var icon = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null, disclosure = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : true;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+            active: activeBulkAction === index,
+            activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                onClick: function() {
+                    return handleToggle(index);
+                },
+                disclosure: disclosure,
+                icon: icon,
+                children: title
+            }),
+            preferredAlignment: "left",
+            preferredPosition: "above",
+            onClose: function() {
+                return setActiveBulkAction(null);
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+                items: actions,
+                onActionAnyItem: function() {
+                    return setActiveBulkAction(null);
+                }
+            })
+        }, "bulk-action-".concat(index));
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: _Table.styles.bulkActionStyles(),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.ButtonGroup, {
+            segmented: true,
+            children: [
+                promotedBulkActions.map(function(action, index) {
+                    return renderPopover(index, action.title, action.actions, action.icon, !action.icon);
+                }),
+                bulkActions.length > 0 && renderPopover(promotedBulkActions.length + 1, promotedBulkActions.length > 0 ? "More actions" : "Bulk actions", bulkActions)
+            ]
+        })
+    });
+}
+Table.BulkActions = BulkActions;
+Table.BulkActions.displayName = "Table.BulkActions";
+/**
+ * SkeletonRow component for displaying loading placeholders in the Table.
+ *
+ * @param {Object} props - The component props.
+ * @param {number} [props.columns=1] - The number of columns to render.
+ * @returns {JSX.Element} The SkeletonRow component.
+ */ function SkeletonRow(param) {
+    var _param_columns = param.columns, columns = _param_columns === void 0 ? 1 : _param_columns;
+    var selectable = (0, _react.useContext)(TableContext).selectable;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("tr", {
+        className: _Table.styles.rowStyles(),
+        children: [
+            selectable && /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Cell, {
+                selectionCell: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "min-h-9 flex items-center",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "h-5 w-5 rounded-md bg-tint-4 dark:bg-tint-alt-4"
+                    })
+                })
+            }),
+            Array.from({
+                length: columns
+            }, function(_, index) {
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Cell, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.SkeletonText, {
+                        lines: 1,
+                        className: "w-96"
+                    })
+                }, index);
+            })
+        ]
+    });
+}
+Table.SkeletonRow = SkeletonRow;
+Table.SkeletonRow.displayName = "Table.SkeletonRow";
+var _default = Table;